Toon posts:

[css] child ul's relevant aan parents positioneren

Pagina: 1
Acties:

Onderwerpen

Css Html

woensdag 6 juli 2011 22:17

Acties:
  • 0Henk 'm!
  • Hawtin
  • Registratie: Januari 2010
  • Laatst online: 10-10-2018

Hawtin

Topicstarter
Door render problemen tussen verschillende browsers heb ik mijn menu opnieuw gemaakt, zodat ik het niet hoef te positioneren met javascript. Mijn bedoeling is dat de zij-borders van de hoofdmenu items naadloos aansluiten op de zij-borders. Mijn vrees is dat de child ul niet links van de parent li kan worden gepositioneerd, maar ik ben er niet helemaal zeker van en misschien is er wel een goede workaround die dit probleem voor alle browsers in een keer kan oplossen.

Ik heb de CSS zoveel mogelijk gestript, maar het zou zo kunnen zijn dat er nog wat onzin tussen staat dat ik ben vergeten weg te halen.

Voor de duidelijkheid hier een voorbeeld van wat mijn bedoeling is:



HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Menu</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="language" content="NL" />
<style type="text/css">
  /* IE only hack \*/
* html ul li, * html ul ul li{border-bottom: 3px solid #FFF;}
* html ul ul li{border-top: 0;}
/* Einde IE only hack */


#container{
width:55.2em; 
margin:auto; 
min-height:100%;
}

#menu{
height:1em; 
position:relative; 
margin-bottom:10em;
}

#menu, #menu ul {
margin: 0; 
list-style:none;
}

#menu ul {
position:absolute; 
left:-500em;
}

#menu li {
float:left; 
padding:0 2.7em; 
border-left:solid 3px #DEDEDE;
}

#menu li:first-child{
padding:0 2.7em 0 0; 
border-left:none;
}
#menu li:hover ul, #menu li.ie_does_hover ul {
left:auto;
}


#menu a {
color:#000; 
font-weight:bold; 
font-size:0.9em; 
text-decoration:none; 
height:2.143em; 
line-height:2.143em; 
display:block;
}
#menu a:hover {
color:#6a87cc;
}


#menu ul a{
font-weight: bold;
}
#menu ul li{
padding:0 2.7em 0 0; 
border-left:none;
float:left;
}


#menu ul ul li{
border-left:0;
padding-left:0;
margin-left:0;
}


#menu .submenu li:first-child{
padding-top: 1em; 
border-top:none;
}

#menu .submenu li{
border-top:solid 1px #DEDEDE;
}

#menu .submenu li:last-child{
border-top:solid 1px #DEDEDE;
}

#menu .submenu {
position:absolute; 
clear:both; 
border:solid 2px #e3e1d3; 
border-top:none;
border-top-right-radius: 3px;
border-bottom-right-radius: 1em;
border-bottom-left-radius: 1em;
border-top-left-radius: 3px 
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);}


ul #menu-1.submenu{
width:11em;
padding-left:1em;
}

ul #menu-2.submenu{
width:12em;
padding-left:1em;
}
  </style>
</head>
<body>
<div id="container">
    <div id="menu_container">
        <ul id="menu">      
            <li><a href="index.htm">Home</a></li>
            <li><a href="#">Nummer een</a>
                <ul class="submenu" id="menu-1">
                    <li><a href="menu-1/1.htm" title="1" >Nummer 1</a></li>
                    <li><a href="menu-1/2.htm" title="2" >Nummer 2</a></li>
                    <li><a href="menu-1/3.htm" title="3" >Nummer 3</a></li>
                    <li><a href="menu-1/4.htm" title="4" >Nummer 4</a></li>
                    <li><a href="menu-1/5.htm" title="5" >Nummer 5</a></li>
                </ul>
            </li>
            <li><a href="#">Nummer twee</a>
                <ul class="submenu" id="menu-2">
                    <li><a href="menu-2/1.htm" title="1">Nummer 1</a></li>
                    <li><a href="menu-2/2.htm" title="2">Nummer 2</a></li>
                    <li><a href="menu-2/3.htm" title="3">Nummer 3</a></li>
                    <li><a href="menu-2/4.htm" title="4">Nummer 4</a></li>
                    <li><a href="menu-2/5.htm" title="5">Nummer 4</a></li>
                </ul>
            </li>
            <li><a href="#">Nummer drie</a>
                <ul class="submenu" id="menu-2">
                    <li><a href="menu-3/1.htm" title="1">Nummer 1</a></li>
                    <li><a href="menu-3/2.htm" title="2">Nummer 2</a></li>
                    <li><a href="menu-3/3.htm" title="3">Nummer 3</a></li>
                    <li><a href="menu-3/4.htm" title="4">Nummer 4</a></li>
                    <li><a href="menu-3/5.htm" title="5">Nummer 4</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>
</body>
</html>

woensdag 6 juli 2011 23:20

Acties:
  • 0Henk 'm!
  • RobIII
  • Registratie: December 2001
  • Laatst online: 02:24

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

offtopic:
Even voor ik verder naar je eigenlijke probleem ga kijken: waarom werk je nog met HTML 4 transitional?


[edit]
Waarom zit je zo te klooien met allerlei negatieve margins e.d.? Waarom niet gewoon een display none/block voor de 'normal'/hover states? En vanwaar al die positioning absolute/relative?

[edit2]
Je probleem zit in de paddings van de li's van de ul's direct onder #menu; die horen geen padding te hebben, en als je ze een padding geeft dien je de submenu's van een evenzovele negatieve margin te voorzien. Dan kom je al in de buurt.

[Voor 74% gewijzigd door RobIII op 06-07-2011 23:33]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Roses are red Violets are blue, Unexpected ‘{‘ on line 32.

Over mij

donderdag 7 juli 2011 00:07

Acties:
  • 0Henk 'm!
  • C0rnelis
  • Registratie: Juni 2010
  • Laatst online: 18-05 23:48

C0rnelis

Precies wat Robll zei in edit2, dit gaat je nooit lukken met CSS (op deze manier) vanwege de variabele breedte.
De reden dat ul.submenu naar rechts wordt verplaatst is vanwege de padding van 2.7em. Om dit op te heffen naar links zal je dan bijvoorbeeld margin-left: -2.7em moeten doen, maar omdat jij een breedte in hebt gesteld zal de rechterkant nooit uitgelijnd worden. Een oplossing is om overal een fixed width te gebruiken en de tekst te centreren.

Dit is niet al je CSS dus niet zomaar copy & pasten.
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

#menu li { 
float:left;  
text-align: center;
width: 175px;
border-left:solid 3px #DEDEDE; 
} 

#menu li:first-child{ 
border-left:none; 
} 

#menu ul li{
text-align: center;
width: 175px;
border-left:none; 
float:left; 
} 

#menu .submenu { 
position:absolute;  
text-align: center;
width: 175px;
margin: 0 0 0 -2px;
padding: 0em; 
clear:both;  
border:solid 2px #e3e1d3; 
border-top: none;
//border-top-right-radius: 3px; // deze en de -left-radius zorgen voor een witruimte tussen de <a> en ul.submenu
border-bottom-right-radius: 1em; 
border-bottom-left-radius: 1em; } 
// je -webkit-box-shadow werkte hier sowieso niet vanwege een missende ';' en het staat imo erg lelijk

// verwijder onderstaand
ul #menu-1.submenu{ 
width:11em; 
padding-left:1em; 
} 

// verwijder onderstaand
ul #menu-2.submenu{ 
width:12em; 
padding-left:1em; 
}


Doordat je geen padding hebt zal de ul.submenu dus net als de tekst links uitgelijnd worden (en gecentreerd, maar er is geen ruimte naast vanwege dezelfde breedte (175px))

De 2px border van de submenu's oogt een beetje vreemd, maar misschien ligt dat aan mij. 3px sluit beter aan (die van #menu .submenu). Als je er 3px van maakt moet je ook de margin -3px maken. Dit is nodig omdat ul.submenu met de border breder wordt dan 175px.

Laatste opmerking: Waarom hack je IE hacks in je CSS. Ik stel voor dat je, indien nodig, conditional comments gebruikt.

[Voor 7% gewijzigd door C0rnelis op 07-07-2011 00:10. Reden: doorstrepen werkt blijkbaar niet in een code block :o]

donderdag 7 juli 2011 07:35

Acties:
  • 0Henk 'm!
  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 13-01 10:59

Bosmonster

*zucht*

RobIII schreef op woensdag 06 juli 2011 @ 23:20:
offtopic:
Even voor ik verder naar je eigenlijke probleem ga kijken: waarom werk je nog met HTML 4 transitional?


[edit]
Waarom zit je zo te klooien met allerlei negatieve margins e.d.? Waarom niet gewoon een display none/block voor de 'normal'/hover states? En vanwaar al die positioning absolute/relative?
Toegankelijkheid waarschijnlijk, zodat ook screenreaders je menu kunnen gebruiken.

Ik zou wel aanraden positionering niet met em's te doen, dat is redelijk zinloos. Gebruik voor opmaak gewoon zoveel mogelijk pixels, anders krijg je het nooit helemaal goed. Em's zijn ook niet bedoeld voor dit soort positionering, maar voor tekst.

[Voor 8% gewijzigd door Bosmonster op 07-07-2011 07:36]

donderdag 7 juli 2011 13:58

Acties:
  • 0Henk 'm!
  • Hawtin
  • Registratie: Januari 2010
  • Laatst online: 10-10-2018

Hawtin

Topicstarter
Allereerst hartstikke bedankt voor jullie leerzame comments, ik heb nog een lange weg te gaan wat css betreft merk ik wel.
RobIII schreef op woensdag 06 juli 2011 @ 23:20:
offtopic:
Even voor ik verder naar je eigenlijke probleem ga kijken: waarom werk je nog met HTML 4 transitional?
Heb het aangepast. Dacht dat ik de HTML5 doctype overal al had geïmplementeerd, maar blijkbaar niet
RobIII schreef op woensdag 06 juli 2011 @ 23:20:
[edit]
Waarom zit je zo te klooien met allerlei negatieve margins e.d.? Waarom niet gewoon een display none/block voor de 'normal'/hover states? En vanwaar al die positioning absolute/relative?
Een display none block had inderdaad ook gekunt en dat staat denk ik ook wel wat netter.

Die positioning absolute/relative heb ik erin gezet toen ik na een halve dag stoeien met mijn handen in het haar zat en maar dingen ging proberen om te kijken of het lukte, logisch nadenken zat er toen denk ik niet meer in.
RobIII schreef op woensdag 06 juli 2011 @ 23:20:[edit2]
Je probleem zit in de paddings van de li's van de ul's direct onder #menu; die horen geen padding te hebben, en als je ze een padding geeft dien je de submenu's van een evenzovele negatieve margin te voorzien. Dan kom je al in de buurt.
C0rnelis schreef op donderdag 07 juli 2011 @ 00:07:
Precies wat Robll zei in edit2, dit gaat je nooit lukken met CSS (op deze manier) vanwege de variabele breedte.
De reden dat ul.submenu naar rechts wordt verplaatst is vanwege de padding van 2.7em. Om dit op te heffen naar links zal je dan bijvoorbeeld margin-left: -2.7em moeten doen, maar omdat jij een breedte in hebt gesteld zal de rechterkant nooit uitgelijnd worden. Een oplossing is om overal een fixed width te gebruiken en de tekst te centreren.

Doordat je geen padding hebt zal de ul.submenu dus net als de tekst links uitgelijnd worden (en gecentreerd, maar er is geen ruimte naast vanwege dezelfde breedte (175px))

De 2px border van de submenu's oogt een beetje vreemd, maar misschien ligt dat aan mij. 3px sluit beter aan (die van #menu .submenu). Als je er 3px van maakt moet je ook de margin -3px maken. Dit is nodig omdat ul.submenu met de border breder wordt dan 175px.

Laatste opmerking: Waarom hack je IE hacks in je CSS. Ik stel voor dat je, indien nodig, conditional comments gebruikt.
Helemaal duidelijk. Hier was ik zelf niet zomaar opgekomen geloof ik omdat ik helemaal de verkeerde richting op zat te denken en me blind zat te staren op de code.

Die 3px border is inderdaad een foutje, zag ik pas achteraf, maar had weinig tijd om het aan te passen. Die conditional comments ga ik me zodirect ook in verdiepen. Ik had het al voorbij zien komen deze maand, maar was nog te druk bezig met andere dingen om me er mee bezig te houden.
Bosmonster schreef op donderdag 07 juli 2011 @ 07:35:
[...]


Toegankelijkheid waarschijnlijk, zodat ook screenreaders je menu kunnen gebruiken.

Ik zou wel aanraden positionering niet met em's te doen, dat is redelijk zinloos. Gebruik voor opmaak gewoon zoveel mogelijk pixels, anders krijg je het nooit helemaal goed. Em's zijn ook niet bedoeld voor dit soort positionering, maar voor tekst.
Ik moet eerlijk toegeven dat dat niet vanwege de toegankelijkheid is geweest, maar als dit voor screen readers beter is dan display:none zal ik het zo laten staan.

Die ems heb ik inderdaad verkeerd begrepen en dacht dat het niet alleen voor tekst was maar voor zo goed als alles.
Reageer

Tweakers maakt gebruik van cookies

Tweakers plaatst functionele en analytische cookies voor het functioneren van de website en het verbeteren van de website-ervaring. Deze cookies zijn noodzakelijk. Om op Tweakers relevantere advertenties te tonen en om ingesloten content van derden te tonen (bijvoorbeeld video's), vragen we je toestemming. Via ingesloten content kunnen derde partijen diensten leveren en verbeteren, bezoekersstatistieken bijhouden, gepersonaliseerde content tonen, gerichte advertenties tonen en gebruikersprofielen opbouwen. Hiervoor worden apparaatgegevens, IP-adres, geolocatie en surfgedrag vastgelegd.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Toestemming beheren

Hieronder kun je per doeleinde of partij toestemming geven of intrekken. Meer informatie vind je in ons cookiebeleid.

Functioneel en analytisch

Deze cookies zijn noodzakelijk voor het functioneren van de website en het verbeteren van de website-ervaring. Klik op het informatie-icoon voor meer informatie. Meer details

janee

    Relevantere advertenties

    Dit beperkt het aantal keer dat dezelfde advertentie getoond wordt (frequency capping) en maakt het mogelijk om binnen Tweakers contextuele advertenties te tonen op basis van pagina's die je hebt bezocht. Meer details

    Tweakers genereert een willekeurige unieke code als identifier. Deze data wordt niet gedeeld met adverteerders of andere derde partijen en je kunt niet buiten Tweakers gevolgd worden. Indien je bent ingelogd, wordt deze identifier gekoppeld aan je account. Indien je niet bent ingelogd, wordt deze identifier gekoppeld aan je sessie die maximaal 4 maanden actief blijft. Je kunt deze toestemming te allen tijde intrekken.

    Ingesloten content van derden

    Deze cookies kunnen door derde partijen geplaatst worden via ingesloten content. Klik op het informatie-icoon voor meer informatie over de verwerkingsdoeleinden. Meer details

    janee