Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

Aktuelle Themen

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit
GELÖST

CSS Navigation

Frage Entwicklung CSS

Mitglied: ottscho

ottscho (Level 2) - Jetzt verbinden

10.10.2008, aktualisiert 13.10.2008, 4588 Aufrufe, 10 Kommentare

Morgen zusammen,

ich habe eine Navigation mit UL und LI gemacht und leider Anzeigeprobleme zwischen FF und IE.
Im FF sieht alles soweit wie gewünscht aus. Leider stellt der IE es mir komplett falsch dar.

Kann mir bitte jmd Helfen?

Hier die Seite um die es geht
http://typolight.ottscho.de

Danke
Gruß ottscho
Mitglied: Fritzchen
10.10.2008 um 12:52 Uhr
Hallo ottscho.

Ich weiß jetzt nicht welchen FF du verwendest. Also mein FF stellt die Navigation auch nicht ganz richtig dar. Im FF2 sieht es so aus wie im IE und im FF3 ist es fast richtig.

Hm, deine CSS Formatieren habe ich mir jetzt aber nicht genauer angesehen aber vielleicht hilft dir dies schon weiter.

CSS
01.
  
02.
ul#naviliste 
03.
04.
margin-left: 0; 
05.
padding-left: 0; 
06.
white-space: nowrap; 
07.
08.
 
09.
#naviliste li 
10.
11.
display: inline; 
12.
list-style-type: none; 
13.
14.
 
15.
#naviliste a {padding: 3px 10px; } 
16.
 
17.
#naviliste a:link, #naviliste a:visited 
18.
19.
color: #fff; 
20.
background-color: #036; 
21.
text-decoration: none; 
22.
23.
 
24.
#naviliste a:hover 
25.
26.
color: #fff; 
27.
background-color: #369; 
28.
text-decoration: none; 
29.
}


und die Navigation
01.
  
02.
<ul id="naviliste"> 
03.
<li><a href="#">Navi eins</a></li> 
04.
<li><a href="#">Navi zwei</a></li> 
05.
<li><a href="#">Navi drei</a></li> 
06.
<li><a href="#">Navi vier</a></li> 
07.
<li><a href="#">Navi fuenf</a></li> 
08.
</ul>


Viele Grüße Fritzchen
Bitte warten ..
Mitglied: ottscho
10.10.2008 um 13:45 Uhr
danke für die antwort. also jetzt sieht es soweit fast gut aus. habe nur noch zwei geringe probleme:

1. Wenn ich bei der MainNavi, die nicht aktiven Buttons etwas kleiner machen will, bekomme ich unten einen weißen Streifen. Wie kann ich das ändern? SIeht so aus, als wären die Listen-Objekt nach Oben ausgerichtet, würde diese aber gerne nach unten ausrichten...

2. Und wenn ich auf einen MainButton klicke und danach auf einen SubButton so ändert sich der markierte MainButton minimal. Woran liegt das?

Danke Gruß ottscho
Bitte warten ..
Mitglied: Fritzchen
10.10.2008 um 15:06 Uhr
Hallo ottscho.

Zu 1.
Das CSS um das hier erweitern:
01.
#naviliste li a#aktive 
02.
03.
background-color:#369; 
04.
padding:13px 10px 3px 10px; 
05.
}
in HTML sieht es dann so aus
01.
<ul id="naviliste"> 
02.
<li><a href="#" id="aktive">Navi eins</a></li> 
03.
<li><a href="#">Navi zwei</a></li> 
04.
<li><a href="#">Navi drei</a></li> 
05.
<li><a href="#">Navi vier</a></li> 
06.
<li><a href="#">Navi fuenf</a></li> 
07.
</ul>
Zu 2.
Ja, die Schrift verschiebt sich nach unten, deshalb sieht es so aus als wenn sich der Butten verändert.
Mußt du bei deinen Formatierungen nochmal nachschauen.

Viele Grüße Fritzchen
Bitte warten ..
Mitglied: ottscho
10.10.2008 um 15:26 Uhr
danke für den tipp, aber leider hat es keine änderung gebracht.
Bitte warten ..
Mitglied: Fritzchen
10.10.2008 um 15:33 Uhr
Hallo ottscho.

danke für den tipp, aber leider hat es keine änderung gebracht.

Hm, wie soll ich das jetzt verstehen?

Viele Grüße Fritzchen
Bitte warten ..
Mitglied: ottscho
10.10.2008 um 15:42 Uhr
so sieht mein html code aus:

01.
<div id="logo"> 
02.
	 
03.
<ul class="level_1"> 
04.
<li class="first"><a href="index.php/ueber-uns.html" title="Unternehmen" class="first" onclick="this.blur();">Unternehmen</a></li> 
05.
<li class="active"><p class="active">Produktion</p></li> 
06.
<li><a href="index.php/ansprechpartner.html" title="Vertrieb" onclick="this.blur();">Vertrieb</a></li> 
07.
<li class="last"><a href="index.php/allgemein.html" title="Qualität" class="last" onclick="this.blur();">Qualität</a></li> 
08.
</ul> 
09.
 
10.
</div>
nun habe ich den Code von dir in die css hineingetan, aber ich hatte keine änderung:
01.
#logo li a#aktive  
02.
{  
03.
background-color:#369;  
04.
padding:13px 10px 3px 10px;  
05.
}
Bitte warten ..
Mitglied: Fritzchen
10.10.2008 um 16:32 Uhr
Hallo ottscho.

Ja, aber ich finde in deinem Code keine id aktive.
So kann es auch keine Änderungen geben.

Im HTML Code sollte dann auch so etwas auftauchen.
Übrigens die Werte sind nur Beispiele die mußt du natürlich auch noch anpassen .

<li><a href="#" id="aktive">Navi eins</a></li>

Siehe nochmal weiter oben.

Viele Grüße Fritzchen
Bitte warten ..
Mitglied: ottscho
10.10.2008 um 16:37 Uhr
das aktiv steht auch im LI teil und nicht im A ;)
hier kannst du dir die Seite anschauen:
http://typolight.ottscho.de

5. Zeile in meinem HTML Code, siehe oben.
Bitte warten ..
Mitglied: Fritzchen
10.10.2008 um 17:32 Uhr
Hallo ottscho.

Meinst du das hier in Zeile 5?
<li class="active"><p

Da sehe ich zwei Unterschiede.
1. active ist nicht gleich aktive
2. active ist ein Klasseelement und aktive (siehe unten) ist ein id Element

#logo li a#aktive

Viele Grüße Fritzchen
Bitte warten ..
Mitglied: ottscho
13.10.2008 um 07:40 Uhr
stimmt, aber habe es nun hinbekommen. aber muss es noch mal überarbeiten. ich möchte den hover effekt nicht bei aktiven elementen haben...

danke dir

Gruß ottscho
Bitte warten ..
Neuester Wissensbeitrag
Ähnliche Inhalte
CSS
gelöst Jimdo Webseiten Header per css verkleinern (6)

Frage von Flodsche zum Thema CSS ...

Suse
gelöst SquidGuard filtert CSS (3)

Frage von killtec zum Thema Suse ...

CSS
gelöst CSS width in Outlook 2013 bei Tabellen ohne Funtion, warum? (3)

Frage von Pago159 zum Thema CSS ...

HTML
gelöst Angebundenes CSS funktioniert nach Link nicht mehr (4)

Frage von fugu zum Thema HTML ...

Heiß diskutierte Inhalte
Windows Userverwaltung
Ausgeschiedene Mitarbeiter im Unternehmen - was tun mit den AD Konten? (33)

Frage von patz223 zum Thema Windows Userverwaltung ...

LAN, WAN, Wireless
FritzBox, zwei Server, verschiedene Netze (21)

Frage von DavidGl zum Thema LAN, WAN, Wireless ...

Viren und Trojaner
Aufgepasst: Neue Ransomware Goldeneye verbreitet sich rasant (20)

Link von Penny.Cilin zum Thema Viren und Trojaner ...

Windows Netzwerk
Windows 10 RDP geht nicht (18)

Frage von Fiasko zum Thema Windows Netzwerk ...