Toon posts:

[CSS] Twee positioneringsvragen

Pagina: 1
Acties:

Onderwerpen

Css

maandag 28 december 2009 16:19

Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
Deze vakantie wilde ik gebruiken om de administratie-taken binnen mijn cms handiger te maken. Hiervoor wil ik een "toolbar" bouwen met alle mogelijkheden, (fixed) bovenaan de pagina. Hieronder staat de algemene vorm: elke set van taken komt in een aparte list. Geneste lists worden mbv css in een dropdown menu omgezet.

Over onderstaande css heb ik twee vragen:
  • de float: left in regel 27 zou er imho voor moeten zorgen dat alle li's links gefloat worden. Dit gebeurt alleen niet: als je over menu item "Content" of "Help" hovert, verschijnen de subitems naast ipv onder elkaar. Wat klopt er niet aan mijn regels? Het submenu van "Pagina" doet het immers wel goed...
  • In de html definieer ik eerst de "toolbar-page" div en daarna pas "toolbar-user". In de browser (FF 3.5) komt echter "toolbar-page" rechts van "toolbar-user" te staan (ipv andersom, wat het bedoeling is). Hoe kan dit?
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
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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<style>
#toolbar {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 100;
  background: #3399FF;
}

#toolbar * {
  margin: 0;
  padding: 0;
}

#toolbar a {
  text-decoration: none;
  color: #000;
}

#toolbar li {
  list-style-type: none;
  margin-right: 10px;
  float: left;
}

#toolbar ul ul {
  visibility: hidden;
  position: absolute;
}

#toolbar ul li:hover ul {
  visibility: visible;
}

#toolbar div.toolbar-menu {
  position: relative;
}

#toolbar-menu {
  float: left;
}

#toolbar-page,
#toolbar-page li,
#toolbar-user {
  float: right;
}
</style>

</head>
<body>

<div id="toolbar">
  <div class="toolbar-menu">
    <ul id="toolbar-menu">
      <li><a href="" class="">Content</a>
        <ul>
          <li><a href="" class="">Formulieren</a></li>
          <li><a href="" class="">OML Tags</a></li>
        </ul>
      </li>
      <li><a href="" class="">Help</a>
        <ul>
          <li><a href="" class="">Webserver</a></li>
          <li><a href="" class="">Modules</a></li>
        </ul>
      </li>
      <li><a href="" class="">Gebruikers</a></li>
    </ul>
    <ul id="toolbar-page">
      <li><a href="">Pagina</a>
        <ul>
          <li><a href="">add</a>
          <li><a href="">edit</a>
          <li><a href="">delete</a>
        </ul>
      </li>
    </ul>
    <ul id="toolbar-user">
      <li><a href="">Admin</a>
      <li><a href="">Logout</a>
    </ul>
  </div>
  <div class="toolbar-shadow"></div>
</div>

</body>
</html>

[ Voor 3% gewijzigd door Verwijderd op 28-12-2009 16:36 ]

maandag 28 december 2009 16:25

Acties:
  • 0 Henk 'm!

Verwijderd

Misschien dat je kan proberen een DocType in je HTML neer te zetten, deze zorgen dat FF en IE net ietsjes beter luisteren naar wat je probeert te doen en neemt ook wat frustraties weg omdat de een het anders doet dan de andere.
ik denk dat je XHTML 1.0 Strict er wel voor kunt gebruiken

maandag 28 december 2009 16:35

Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
Verwijderd schreef op maandag 28 december 2009 @ 16:25:
Misschien dat je kan proberen een DocType in je HTML neer te zetten [...]
Ik gebruik ook 1.0 strict. Had het hier alleen weg gelaten, om zoveel mogelijk alleen relevante delen te posten. Ik zal de doctype ook hier even toevoegen :)

maandag 28 december 2009 16:50

Acties:
  • 0 Henk 'm!
  • OkkE
  • Registratie: Oktober 2000
  • Laatst online: 04-09 08:16

OkkE

CSS influencer :+

DocType is relevante code, het geeft immers aan hoe browsers met je code om gaan. ;)

Het zou handig zijn om ook een testcase online te hebben.

[list]
• Dat je submenu van Pagina "goed" gaat komt waarschijnlijk omdat de <ul> te smal is, want de overige doen zoals het zou moeten. Door de <li>'s van je subs niet te floaten zou het overal goed moeten gaan.
• Door float:right; wordt de volgorde omgedraait.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

maandag 28 december 2009 18:43

Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
OkkE schreef op maandag 28 december 2009 @ 16:50:
DocType is relevante code, het geeft immers aan hoe browsers met je code om gaan. ;)
Je hebt gelijk, is toegevoegd :)
Het zou handig zijn om ook een testcase online te hebben.
Zie http://www.danandan.luna.nl/toolbar.htm
[list]
• Dat je submenu van Pagina "goed" gaat komt waarschijnlijk omdat de <ul> te smal is, want de overige doen zoals het zou moeten. Door de <li>'s van je subs niet te floaten zou het overal goed moeten gaan.
• Door float:right; wordt de volgorde omgedraait.
Ik heb die twee lists dan maar omgedraaid. Nu komt de "Logout" link helemaal rechts te staan, zoals het hoort. Vreemd vind ik het wel.

Ik float de li's nu niet meer, maar toch komen de subitems naast ipv onder elkaar te staan. Heeft iemand nog een suggestie? Hieronder de code die ook online staat in de testcase:
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
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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<style>
#toolbar {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 100;
  background: #3399FF;
}

#toolbar * {
  margin: 0;
  padding: 0;
}

#toolbar a {
  text-decoration: none;
  color: #000;
}

#toolbar ul li {
  list-style-type: none;
  margin-right: 10px;
  display: inline;
}

#toolbar ul ul {
  visibility: hidden;
  position: absolute;
}

#toolbar ul li:hover ul {
  visibility: visible;
}

#toolbar div.toolbar-menu {
  position: relative;
}

#toolbar-menu {
  float: left;
}

#toolbar-page,
#toolbar-user {
  float: right;
}
</style>

</head>
<body>

<div id="toolbar">
  <div class="toolbar-menu">
    <ul id="toolbar-menu">
      <li><a href="" class="">Content</a>
        <ul>
          <li><a href="" class="">Formulieren</a></li>
          <li><a href="" class="">OML Tags</a></li>
        </ul>
      </li>
      <li><a href="" class="">Help</a>
        <ul>
          <li><a href="" class="">Webserver</a></li>
          <li><a href="" class="">Modules</a></li>
        </ul>
      </li>
      <li><a href="" class="">Gebruikers</a></li>
    </ul>
    <ul id="toolbar-user">
      <li><a href="">Admin</a>
      <li><a href="">Logout</a>
    </ul>
    <ul id="toolbar-page">
      <li><a href="">Pagina</a>
        <ul>
          <li><a href="">add</a>
          <li><a href="">edit</a>
          <li><a href="">delete</a>
        </ul>
      </li>
    </ul>
  </div>
  <div class="toolbar-shadow"></div>
</div>

</body>
</html>

maandag 28 december 2009 18:45

Acties:
  • 0 Henk 'm!
  • MsG
  • Registratie: November 2007
  • Laatst online: 21:11

MsG

Forumzwerver

haal die display: inline; eens weg uit die li

Denk om uw spatiegebruik. Dit scheelt Tweakers.net kostbare databaseruimte! | Groninger en geïnteresseerd in Domotica? Kom naar DomoticaGrunn

maandag 28 december 2009 18:51

Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
MsG schreef op maandag 28 december 2009 @ 18:45:
haal die display: inline; eens weg uit die li
Zoals je dan kunt zien, komen dan ook de hoofditems (Content, Help, ...) onder ipv naast elkaar te staan. Volgens mij verwijst
Cascading Stylesheet:
1

#toolbar ul li {}

toch naar div met id toolbaar > eerste niveau ul > eerste niveau li's? Imho zou deze regel de dieper liggende li's (dus: de subitems) niet moeten beinvloeden...?!

maandag 28 december 2009 19:14

Acties:
  • 0 Henk 'm!
  • Raynman
  • Registratie: Augustus 2004
  • Laatst online: 00:54

Raynman

Verwijderd schreef op maandag 28 december 2009 @ 18:51:
Volgens mij verwijst
Cascading Stylesheet:
1

#toolbar ul li {}

toch naar div met id toolbaar > eerste niveau ul > eerste niveau li's? Imho zou deze regel de dieper liggende li's (dus: de subitems) niet moeten beinvloeden...?!
Nee, dat 'verwijst' naar alle li's die bevat zijn in ten minste één ul binnen iets met id="toolbar". Dan zul je dus nog zoiets moeten toevoegen:

Cascading Stylesheet:
1
2
3

#toolbar ul ul li {
  display: list-item;
}


Edit: je zou voor alleen het eerste niveau ook de child-selector (>, dus #toolbar ul>li) kunnen gebruiken. Ik heb niet heel serieus meer met CSS gewerkt sinds IE6 en toen werd het niet ondersteund, maar na een korte zoektocht lijkt het erop dat nieuwere IE's dat wel slikken.

[ Voor 19% gewijzigd door Raynman op 28-12-2009 19:23 ]

maandag 28 december 2009 19:42

Acties:
  • 0 Henk 'm!
  • hgp
  • Registratie: Juni 2008
  • Laatst online: 11-09 00:56

hgp

Als je
Cascading Stylesheet:
1

#toolbar ul li {...}

vervangt door
Cascading Stylesheet:
1

.toolbar-menu > ul > li {...}

krijg je denk ik wat je wil.

edit: ik had de pagina wel even mogen refreshen, wat Raynman dus ook al zei > :)

[ Voor 26% gewijzigd door hgp op 28-12-2009 19:45 ]

Pagina: 1
Reageer

Apple iPhone 16e LG OLED evo G5 Google Pixel 10 Samsung Galaxy S25 Star Wars: Outlaws Nintendo Switch 2 Apple AirPods Pro (2e generatie) Sony PlayStation 5 Pro

Tweakers is onderdeel van DPG Media B.V.
Alle rechten voorbehouden - Auteursrecht © 1998 - 2025 • Hosting door TrueFullstaq