Willkommen, Gast ( Anmelden | Registrierung )     [ Hilfe | Mitglieder | Suche ]

 
 Reply to this topicStart new topic
> CSS-Navigation (vertikal) springt bei IE6
tsunami
Beitrag Mon. 4. August 2008, 09:28
Beitrag #1


Advanced Member
*****

Gruppe: AdvancedMembers
Beiträge: 186
Mitglied seit: 27.10.2006
Mitglieds-Nr.: 317
Hallo zusammen !

Bin seit langem auf der Suche nach einer Lösung betreffend meiner Navigation welche ich gerne umsetzen möchte.
Im Firefox und IE7 funktioniert es wie gewünscht. Im IE6 jedoch springt die Navigation wenn ich mit der Maus
über die Link's gehe. Ebenso entsteht ein grösserer Abstand zwischen z.b. Rubrik3.1 und Rubrik3.2.
Habe mal zwei Screenshots erstellt.

Angehängte Datei  screenshot_ie6.jpg ( 33.69KB ) Anzahl der Downloads: 50

Angehängte Datei  screenshot_ie7.jpg ( 30.94KB ) Anzahl der Downloads: 39


QUELLTEXT
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
/*SUBNAVIGATION*/
* {
    margin:0;
    padding:0;
}

#subnavibereich {
    float: left;
    width:300px;
        }
#subnavibereich ul{    
    margin:0;
}
#subnavibereich li {
    list-style-type: none; /*ohne Aufzählungspunkte*/
    margin:0;

}
#subnavibereich a {
    display:block;
    padding:2px;
    background-color:#99FF33;
    padding-left:10px;

}
#subnavibereich a:hover, #subnavibereich a:focus {
    background-color:#FF6600;
    
}
/*IE 5.x und 6: hasLayout für Hyperlinks*/
* html #subnavibereich ul,
* html #subnavibereich a{
    height:1%;
}

/*SUBNAVIGATION (EBENE 2)*/
    #subnavibereich ul li ul li {
    font-size:0.95em;
    /*margin-left:9px;*/
    }
    #subnavibereich ul li ul li a {
    background-color:#FFFF66;
    display:block;
    padding:2px;
    padding-left:10px;
    margin-bottom:2px;
    }
/*SUBNAVIGATION (EBENE 3)*/
#subnavibereich ul li ul li ul li{
    font-size:90%;
    margin-left:9px;

    
    }
#subnavibereich ul li ul li ul li a {
background-color:#99FF99;
display:block;
padding:2px;
padding-left:10px;
    }
-->
</style>
</head>

<body>
<div id="subnavibereich">

<ul>
<li><a href="#">Hauptrubrik</a>
    <ul>
    <li><a href="#">Rubrik1</a></li>
    <li><a href="#">Rubrik2</a></li>
    <li><a href="#">Rubrik3</a>
        <ul>
        <li><a href="#">Rubrik3.1</a></li>
        <li><a href="#">Rubrik3.2</a></li>
        <li><a href="#">Rubrik3.3</a></li>
        <li><a href="#">Rubrik3.4</a></li>
        </ul>
    </li>
    <li><a href="#">Rubrik4</a></li>
    <li><a href="#">Rubrik5</a></li>
    <li><a href="#">Rubrik6</a></li>
    <li><a href="#">Rubrik7</a></li>
    </ul>
</li>
</ul>
</div> <!-- subnavibereich -->
</body>
</html>


Kann mir vielleicht jemand weiterhelfen ? Habe nun schon diverses versucht - leider ohne Erfolg !

Gruss Tsunami

Der Beitrag wurde von amk bearbeitet: Mon. 4. August 2008, 16:06
Bearbeitungsgrund: thema aus anwenderforum verschoben -> thema ist nicht sefrengo-relevant
Go to the top of the page
 
+Quote Post
andi
Beitrag Mon. 4. August 2008, 11:06
Beitrag #2


purist
********

Gruppe: AdvancedMembers
Beiträge: 1.525
Mitglied seit: 30.06.2006
Wohnort: luzern (schweiz)
Mitglieds-Nr.: 16
hallo tsunami

das ist der whitespace-bug. dazu gibt es unzählige möglichkeiten, diese zu beheben (google hilft).

z.b. könntest du vor jedem </a> ein leerzeichen einfügen, oder du könntest alle <li>-elemente nacheinander notieren usw.


gruss andi


--------------------

interessantes aus dem alltag, tipps und tricks, anleitungen
gezwitscher auf twitter
Go to the top of the page
 
+Quote Post
saschapi
Beitrag Mon. 4. August 2008, 12:00
Beitrag #3


Advanced Member
********

Gruppe: Moderators
Beiträge: 911
Mitglied seit: 26.06.2006
Wohnort: Essen; Ruhrgebiet
Mitglieds-Nr.: 4
Alternativ kannst du auch das margin-bottom dem li und nicht dem a geben. Ich habe mal die CSS Anweisungen etwas verändert. Wenn du übrigens dem a nicht nur display: block gibst sondern auch width: 100% kannst du dir das ganze layout Gewurste für den IE 5.X und 6 sparen.

Schau mal ob dir das so reicht. smile.gif


CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
/*SUBNAVIGATION*/
* {
margin:0;
padding:0;
}

#subnavibereich {

width:300px;
}
#subnavibereich ul{
margin:0;
padding:0;
list-style-type: none; /*ohne Aufzählungspunkte*/
}
#subnavibereich li {
margin:0;
padding:0;

}

#subnavibereich li li {
margin-top: 2px;
}


#subnavibereich li a {
display:block;
padding:2px;
background-color:#99FF33;
padding-left:10px;
margin:0;
width: 100%;

}
#subnavibereich li a:hover{
background-color:#FF6600;
}


/*SUBNAVIGATION (EBENE 2)*/
#subnavibereich ul li ul li {
font-size:0.95em;
}

#subnavibereich ul li ul li a {
background-color:#FFFF66;

}
/*SUBNAVIGATION (EBENE 3)*/
#subnavibereich ul li ul li ul li{
font-size:90%;
margin-left:9px;


}
#subnavibereich ul li ul li ul li a {
background-color:#99FF99;
}
-->
</style>
</head>

<body>
<div id="subnavibereich">

<ul>
<li><a href="#">Hauptrubrik</a>
<ul>
<li><a href="#">Rubrik1</a></li>
<li><a href="#">Rubrik2</a></li>
<li><a href="#">Rubrik3</a>
<ul>
<li><a href="#">Rubrik3.1</a></li>
<li><a href="#">Rubrik3.2</a></li>
<li><a href="#">Rubrik3.3</a></li>
<li><a href="#">Rubrik3.4</a></li>
</ul>
</li>
<li><a href="#">Rubrik4</a></li>
<li><a href="#">Rubrik5</a></li>
<li><a href="#">Rubrik6</a></li>
<li><a href="#">Rubrik7</a></li>
</ul>
</li>
</ul>
</div> <!-- subnavibereich -->
</body>
</html>


--------------------
Go to the top of the page
 
+Quote Post
tsunami
Beitrag Mon. 4. August 2008, 14:55
Beitrag #4


Advanced Member
*****

Gruppe: AdvancedMembers
Beiträge: 186
Mitglied seit: 27.10.2006
Mitglieds-Nr.: 317
Hallo saschapi, Hallo andi !

Vielen Dank für eure Mithilfe ! Ich habe nun mal deine Version (Saschapi) ausprobiert. Gefällt mir eigentlich sehr gut ! Vorallem wenn man unnötigen Code sparen kann.
Wenn ich mir das ganze im IE 6 anschaue, fallen mir zwei Dinge auf. Zwischen der "Hauptrubrik" und "Rubrik1" hat es keinen Abstand. Ebenso zwischen "Rubrik3" und "Rubrik3.1" , dort stossen die Boxen direkt aneinander.
Ansonsten wäre es Perfekt...Kann man dies noch steuern ?

Gruss Tsunami
Go to the top of the page
 
+Quote Post
saschapi
Beitrag Mon. 4. August 2008, 15:04
Beitrag #5


Advanced Member
********

Gruppe: Moderators
Beiträge: 911
Mitglied seit: 26.06.2006
Wohnort: Essen; Ruhrgebiet
Mitglieds-Nr.: 4
sollte jetzt behoben sein. Schau dir den Cod nochmal an. Habs jetzt allerdings nicht in getestet.


--------------------
Go to the top of the page
 
+Quote Post
tsunami
Beitrag Mon. 4. August 2008, 15:40
Beitrag #6


Advanced Member
*****

Gruppe: AdvancedMembers
Beiträge: 186
Mitglied seit: 27.10.2006
Mitglieds-Nr.: 317
Hmm...hätte ich eigentlich auch draufkommen sollen. Nun funktioniert es wink.gif Echt Hilfbereit ! Habe vor lauter durcheinander völlig den Überblick verloren. Schönen Abend ! Danke !
Go to the top of the page
 
+Quote Post
saschapi
Beitrag Mon. 4. August 2008, 15:42
Beitrag #7


Advanced Member
********

Gruppe: Moderators
Beiträge: 911
Mitglied seit: 26.06.2006
Wohnort: Essen; Ruhrgebiet
Mitglieds-Nr.: 4
Gern geschehen! wink.gif


--------------------
Go to the top of the page
 
+Quote Post
tsunami
Beitrag Wed. 13. August 2008, 16:14
Beitrag #8


Advanced Member
*****

Gruppe: AdvancedMembers
Beiträge: 186
Mitglied seit: 27.10.2006
Mitglieds-Nr.: 317
Hallo saschapi !

Bräuchte nochmals deine Hilfe...Habe den obigen Quellcode durch folgendes ergänzt:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
/*SUBNAVIGATION*/
* {
margin:0;
padding:0;
}

#subnavibereich {

width:200px;
background-color:#FF9900;
}
#subnavibereich ul{
margin:0;
padding:0;
list-style-type: none; /*ohne Aufzählungspunkte*/
}
#subnavibereich li {
margin:0;
padding:0;
}

#subnavibereich li li {
margin-top: 2px;
}


#subnavibereich li a {
display:block;
padding:2px;
padding-left:10px;
margin:0;
width: 100%;

}
#subnavibereich li a.aktiv {
border-bottom:2px solid #000;
}
#subnavibereich li a:hover{
background-color:#FF6600;
}


/*SUBNAVIGATION (EBENE 2)*/
#subnavibereich ul li ul li {
font-size:0.95em;
}

#subnavibereich ul li ul li a {
background-color:#FFFF66;

}
/*SUBNAVIGATION (EBENE 3)*/
#subnavibereich ul li ul li ul li{
font-size:90%;
margin-left:9px;


}
#subnavibereich ul li ul li ul li a {
background-color:#99FF99;
}
-->
</style>
</head>

<body>
<div id="subnavibereich">

<ul>
<li><a class="aktiv" href="#">Hauptrubrik</a>
<ul>
<li><a href="#">Rubrik1</a></li>
<li><a href="#">Rubrik2</a></li>
<li><a href="#">Rubrik3</a>
<ul>
<li><a href="#">Rubrik3.1</a></li>
<li><a href="#">Rubrik3.2</a></li>
<li><a href="#">Rubrik3.3</a></li>
<li><a href="#">Rubrik3.4</a></li>
</ul>
</li>
<li><a href="#">Rubrik4</a></li>
<li><a href="#">Rubrik5</a></li>
<li><a href="#">Rubrik6</a></li>
<li><a href="#">Rubrik7</a></li>
</ul>
</li>
</ul>
</div> <!-- subnavibereich -->
</body>
</html>


Habe dem #subnavibereich noch eine Hintergrundfarbe (#FF9900) mitgegeben. Die Breite auf 200px eingestellt.
Leider schiessen mir die unteren Ebenen (BG=Gelb/Grün) über die Kante der Hintergrundfarbe des #subnavibereich. Siehe ScreenshotAngehängte Datei  screenshot.JPG ( 25.85KB ) Anzahl der Downloads: 12

Möchte schlussendlich der ersten Ebene (Hauptrubrik) noch ein "border-bottom:2px solid #000;" mitgeben und alles rechts bündig haben. Also ein Unterstrich welcher bis zur Kante der Hintergrundfarbe vom #subnavibereich läuft.
Gibt es da eine Lösung ? Komme leider nicht weiter...

Gruss Tsunami
Go to the top of the page
 
+Quote Post
andi
Beitrag Wed. 13. August 2008, 16:45
Beitrag #9


purist
********

Gruppe: AdvancedMembers
Beiträge: 1.525
Mitglied seit: 30.06.2006
Wohnort: luzern (schweiz)
Mitglieds-Nr.: 16
hallo tsunami

width: 100% + padding und margin kann nicht funktionieren. generell kannst du dir das width 100% sparen. damit die flächen in ie 5.5 + korrekt dargestellt werden, muss der link has-layout haben. das erreichst du z.b. mit height 1%. dieses height sollte allerdings nur der ie zu gesicht bekommen. also entweder per cc oder star-hack.

hier das beispiel:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
/*SUBNAVIGATION*/
* {
margin:0;
padding:0;
}

#subnavibereich {

width:200px;
background-color:#FF9900;
}
#subnavibereich ul{
margin:0;
padding:0;
list-style-type: none; /*ohne Aufzählungspunkte*/
}
#subnavibereich li {
margin:0;
padding:0;
}

#subnavibereich li li {
margin-top: 2px;
}

#subnavibereich li a {
display:block;
padding:2px;
padding-left:10px;
margin:0;
}

* html #subnavibereich li a {
height: 1%;
}

#subnavibereich li a.aktiv {
border-bottom:2px solid #000;
}

#subnavibereich li a:hover{
background-color:#FF6600;
}


/*SUBNAVIGATION (EBENE 2)*/
#subnavibereich ul li ul li {
font-size:0.95em;
}

#subnavibereich ul li ul li a {
background-color:#FFFF66;

}
/*SUBNAVIGATION (EBENE 3)*/
#subnavibereich ul li ul li ul li{
font-size:100%;
margin-left:9px;


}
#subnavibereich ul li ul li ul li a {
background-color:#99FF99;
}
-->
</style>
</head>

<body>
<div id="subnavibereich">

<ul>
<li><a class="aktiv" href="#">Hauptrubrik</a>
<ul>
<li><a href="#">Rubrik1</a></li>
<li><a href="#">Rubrik2</a></li>
<li><a href="#">Rubrik3</a>
<ul>
<li><a href="#">Rubrik3.1</a></li>
<li><a href="#">Rubrik3.2</a></li>
<li><a href="#">Rubrik3.3</a></li>
<li><a href="#">Rubrik3.4</a></li>
</ul>
</li>
<li><a href="#">Rubrik4</a></li>
<li><a href="#">Rubrik5</a></li>
<li><a href="#">Rubrik6</a></li>
<li><a href="#">Rubrik7</a></li>
</ul>
</li>
</ul>
</div> <!-- subnavibereich -->
</body>
</html>


hilft dir das weiter?


gruss andi


--------------------

interessantes aus dem alltag, tipps und tricks, anleitungen
gezwitscher auf twitter
Go to the top of the page
 
+Quote Post
tsunami
Beitrag Wed. 13. August 2008, 17:23
Beitrag #10


Advanced Member
*****

Gruppe: AdvancedMembers
Beiträge: 186
Mitglied seit: 27.10.2006
Mitglieds-Nr.: 317
hallo andi

Dies Hilft mir weiter...Herzlichen Dank !
Ich habe noch folgendes herausgefunden:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
/*SUBNAVIGATION*/
* {
margin:0;
padding:0;
}

#subnavibereich {

width:188px;
padding-right:12px;
background-color:#FF9900;
}
#subnavibereich ul{
margin:0;
padding:0;
list-style-type: none; /*ohne Aufzählungspunkte*/
}
#subnavibereich li {
margin:0;
padding:0;
}

#subnavibereich li li {
margin-top: 2px;
}


#subnavibereich li a {
display:block;
padding:2px;
padding-left:10px;
margin:0;
width: 100%;

}
#subnavibereich li a.aktiv {
border-bottom:2px solid #000;
}
#subnavibereich li a:hover{
background-color:#FF6600;
}


/*SUBNAVIGATION (EBENE 2)*/
#subnavibereich ul li ul li {
font-size:0.95em;
}

#subnavibereich ul li ul li a {
background-color:#FFFF66;

}
/*SUBNAVIGATION (EBENE 3)*/
#subnavibereich ul li ul li ul li{
font-size:90%;
margin-left:9px;


}
#subnavibereich ul li ul li ul li a {
background-color:#99FF99;
}
-->
</style>
</head>

<body>
<div id="subnavibereich">

<ul>
<li><a class="aktiv" href="#">Hauptrubrik</a>
<ul>
<li><a href="#">Rubrik1</a></li>
<li><a href="#">Rubrik2</a></li>
<li><a href="#">Rubrik3</a>
<ul>
<li><a href="#">Rubrik3.1</a></li>
<li><a href="#">Rubrik3.2</a></li>
<li><a href="#">Rubrik3.3</a></li>
<li><a href="#">Rubrik3.4</a></li>
</ul>
</li>
<li><a href="#">Rubrik4</a></li>
<li><a href="#">Rubrik5</a></li>
<li><a href="#">Rubrik6</a></li>
<li><a href="#">Rubrik7</a></li>
</ul>
</li>
</ul>
</div> <!-- subnavibereich -->
</body>
</html>

Dies funktioniert soviel ich glaube auch. Ohne Hack usw. - ist aber wohl mehr ein Gebastel.Oder was meinst du?
Habe dem #subnavibereich eine Breite von 188px und ein padding-right von 12px gegeben...

Gruss Tsuami
Go to the top of the page
 
+Quote Post
andi
Beitrag Wed. 13. August 2008, 17:27
Beitrag #11


purist
********

Gruppe: AdvancedMembers
Beiträge: 1.525
Mitglied seit: 30.06.2006
Wohnort: luzern (schweiz)
Mitglieds-Nr.: 16
nö, dein aktueller code funktioniert nicht mehr. durch die 90% schriftgrösse in der dritten ebene sind dessen abstände nicht mehr korrekt. die ul wird mit 100% width und einem zusätzlichen padding zu breit.

edit: öhm, ist das nicht der selbe code wie oben?


--------------------

interessantes aus dem alltag, tipps und tricks, anleitungen
gezwitscher auf twitter
Go to the top of the page
 
+Quote Post
tsunami
Beitrag Wed. 13. August 2008, 18:08
Beitrag #12


Advanced Member
*****

Gruppe: AdvancedMembers
Beiträge: 186
Mitglied seit: 27.10.2006
Mitglieds-Nr.: 317
Hallo andi
Ist der letzte Code von saschapi. Von mir leicht noch ergänzt. Wenn ich auf jeden Fall meine letzte angehänget Version nehme, wird alles korrekt dargestellt. Ich habe ja nur dem äussersten Container ein:
QUELLTEXT
#subnavibereich {
width:188px;
padding-right:12px;
background-color:#FF9900;
}

mitgegeben.

Gruss Tsunami
Go to the top of the page
 
+Quote Post
andi
Beitrag Wed. 13. August 2008, 18:17
Beitrag #13


purist
********

Gruppe: AdvancedMembers
Beiträge: 1.525
Mitglied seit: 30.06.2006
Wohnort: luzern (schweiz)
Mitglieds-Nr.: 16
wie du meinst :-)

Angehängte Datei  screen.png ( 67.45KB ) Anzahl der Downloads: 25


--------------------

interessantes aus dem alltag, tipps und tricks, anleitungen
gezwitscher auf twitter
Go to the top of the page
 
+Quote Post
tsunami
Beitrag Wed. 13. August 2008, 18:41
Beitrag #14


Advanced Member
*****

Gruppe: AdvancedMembers
Beiträge: 186
Mitglied seit: 27.10.2006
Mitglieds-Nr.: 317
Hmm...schon eigenartig. Wenn ich den Quellcode im bei mir lokal mit diversen Browsern teste ist alles I.O.
Wenn ich aber mal folgendes Tool zur Hilfe nehme IE NetRenderer.
Sieht die Navigation wie auf deinen Screenshots aus ;-)

Gruass Tsunami
Go to the top of the page
 
+Quote Post
« Vorhergehendes Thema · Offtopic · Folgendes Thema »
 

Reply to this topicStart new topic
1 Besucher lesen dieses Thema (Gäste: 1 | Anonyme Besucher: 0)
0 Mitglieder:

 

Anzeige Modus: Standard · Wechsle zu: Thema+ · Wechsle zu: Überblick

Thema abonnieren · Dieses Thema versenden · Dieses Thema ausdrucken · Forum abonnieren

RSS Vereinfachte Darstellung Aktuelles Datum: 19.4.24 - 11:36

Sefrengo ist ein eingetragenes Markenzeichen und urheberrechtlich geschützt.
Copyright 2009 Design & Daten, Alle Rechte vorbehalten.

Powered By IP.Board 2.3.6 © 2024  IPS, Inc.