Top-Themen

Aktuelle Themen (A bis Z)

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, 4611 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 ..
Ähnliche Inhalte
HTML
CSS 3 - "viewport" Kein gültiges CSS?
gelöst Frage von ukodusHTML2 Kommentare

Hey Leute, gerade hab ich den Code (@viewport { }) durch den CSS-Überprüfer ) durchgejagt und er entgegnete: "Einlese-Fehler ...

Google Android
Aus Navigation drawer Activity in andere activity wechseln
Frage von bahnhofGoogle Android1 Kommentar

Hallo, ich habe eine App mit Navigation drawer erstellt. In einer meine Activity's, die ich dem Navigation drawer zugeordnet ...

CSS
CSS Problem
gelöst Frage von michi1983CSS2 Kommentare

Hallo Admins, eventuell kann mir ja hier einer weiterhelfen, ich stehe offenbar auf der Leitung. Auf folgender Website (die ...

CSS
Hilfe bei CSS
gelöst Frage von emeriksCSS8 Kommentare

Hi, vorne weg: Bin in HTML und CSS nicht so die Leuchte. Ich will bloß ein paar Reports erstellen ...

Neue Wissensbeiträge
Internet

USA: Die FCC schaff die Netzneutralität ab

Information von Frank vor 4 StundenInternet2 Kommentare

Jetzt beschädigt US-Präsident Donald Trump auch noch das Internet. Der neu eingesetzte FCC-Chef Ajit Pai ist bekannter Gegner einer ...

DSL, VDSL

ALL-BM200VDSL2V - Neues VDSL-Modem mit Vectoring von Allnet

Information von Lochkartenstanzer vor 8 StundenDSL, VDSL1 Kommentar

Moin, Falls jemand eine Alternative zu dem draytek sucht: Gruß lks

Windows 10

Microsoft bestätigt DMA-Policy-Problem in Win10 v1709

Information von DerWoWusste vor 8 StundenWindows 10

Wer sein Gerät mit der DMA-Policy absichert, bekommt evtl. Hardwareprobleme in v1709 von Win10. Warum? Weil v1709 endlich "richtig" ...

Verschlüsselung & Zertifikate

Die Hölle friert ein weiteres Stück zu: Microsoft integriert OpenSSH in Windows

Information von ticuta1 vor 12 StundenVerschlüsselung & Zertifikate

Interessant Die Hölle friert ein weiteres Stück zu: Microsoft integriert OpenSSH in Windows SSH-Kommando in CMD.exe und PowerShell

Heiß diskutierte Inhalte
Netzwerkmanagement
Mehrere Netzwerkadapter in einem PC zu einem Switch zusammenfügen
Frage von prodriveNetzwerkmanagement21 Kommentare

Hallo zusammen Vorweg, ich konnte schon einige IT-Probleme mit Hilfe dieses Forums lösen. Wirklich klasse hier! Doch für das ...

Windows Server
RODC kann nicht aus Domäne entfernt werden
Frage von NilsvLehnWindows Server19 Kommentare

HAllo, ich arbeite in einem Universitätsnetzwerk mit 3 Standorten. Die Standorte haben alle ein ESXi Cluster und auf diesen ...

Hardware
Kein Bild mit nur einer bestimmten Grafikkarten - Mainboard Konfiguration
gelöst Frage von bestelittHardware18 Kommentare

Hallo zusammen, ich hatte schon einmal eine ähnliche Frage gestellt. Damals hatte ich genau das gleiche Problem. Allerdings lies ...

Hardware
Links klick bei Maus funktioniert nicht
gelöst Frage von Pablu23Hardware16 Kommentare

Hallo erstmal. Ich habe ein Problem mit meiner relativ alten maus jedoch denke ich nicht das es an der ...