[html & css] div en positie

[elgringo]

Ik wil dus een menutje maken wat er zoiets uitziet:

Home
|- deel1
| |- Subdeel1
|- Deel2

Nu heb ik 3 transparante gifjes: |, |- en een L

Deze wil ik mbv <div> tags op zijn plaats houden, maar positie werkt niet lekker:

ik heb nu:

HTML:

<div class="hoofdmenu">
<p>Menu</p>

<div class="menuregel">
[img]"./images/T.gif"><p[/img]Test</p>
</div>
<div class="menuregel2">[img]"./images/I.gif"><img[/img]</div>
<div class="menuregel2">[img]"./images/L.gif"></div>

</div[/img]

Met CSS:

Cascading Stylesheet:

div.menuregel{
    position: relative;
    top: -20px;
    height: 20px;
    
}
div.menuregel2{
    position: relative;
    height: 20px;
    top: -25px;
    
}

p.text{
float: left;
    position: relative;
    top: -18px;
    left: 30px;
    
}

img.menu{
    
    position: relative;
    left: 10px;
}

Maar dit werkt niet goed.

Wat betekend nu die relative, absolute en static (mbt positie). En van welk 'vorige' punt gaat hij uit als er relative staat.

Ik wilde dus eerst een div menuregel maken, hierin alle plaatjes en text, div sluiten en dan volgende, maar dit ging helemaal niet goed.

Wie kan me verder helpen

Oh ja Dit was mijn naslagwerk

Edit div class hoodmenu is geheel leeg.

[ Voor 13% gewijzigd door elgringo op 29-12-2003 21:23 ]

[André]

Dit lijkt heel veel op dit.

position:absolute betekent dat het element qua positionering met geen enkel ander element rekening houd en dat het 'zweeft'.

position:relative betekent dat het element relatief gepositioneerd word ten opzichte van het vorige element.

[ Voor 3% gewijzigd door André op 29-12-2003 21:30 ]

[mindcrash]

Wellicht helpt dit leesvoer je wel een eind verder, ook omdat er een hoop duidelijke voorbeelden m.b.t. positionering instaan

[ Voor 28% gewijzigd door mindcrash op 29-12-2003 21:31 ]

[crisp]

Bijna goed André

position:absolute haalt een element uit de flow en plaats 'm ten opzichte van z'n container - dat kan de body zijn, maar ook een ander gepositioneerd (relatief of absoluut) blocklevel element

position:relative plaatst een element relatief ten opzichte van de plek waar hij in de normale flow gepositioneerd zou zijn

[elgringo]

André schreef op 29 december 2003 @ 21:29:
Dit lijkt heel veel op dit.

position:absolute betekent dat het element qua positionering met geen enkel ander element rekening houd en dat het 'zweeft'.

t.ov. links bovenin?

position:relative betekent dat het element relatief gepositioneerd word ten opzichte van het vorige element.

en wat als ik:
<div>tekst 1<div class="s">text 2</div></div> heb (en s relative gepositioneerd is), wordt text 2 dan tov text 1 of van het bovenliggende element positioneerd?

En vanaf wel punt, als ik zeg maar een plaatje heb en vanaf dit plaatje ga in positioneren, vanaf welk punt van dit plaatje gaat dit dan gebeuren?

[elgringo]

crisp schreef op 29 december 2003 @ 21:32:
Bijna goed André

position:absolute haalt een element uit de flow en plaats 'm ten opzichte van z'n container - dat kan de body zijn, maar ook een ander gepositioneerd (relatief of absoluut) blocklevel element

position:relative plaatst een element relatief ten opzichte van de plek waar hij in de normale flow gepositioneerd zou zijn

flow? blocklevel? container? wat betekend dit allemaal

[crisp]

de 'flow' is zeg maar hoe het document geparsed zou worden als er geen gebruik gemaakt zou zijn van positioning schemes.
Verder heb je 2 soorten (nou ja, tables zijn weer een verhaal apart) elementen: inline elementen en blocklevel elementen.
Inline elementen zijn eigenlijk elementen die geen dimensies hebben; ze zijn zo groot als de inhoud. Een plastic tasje zeg maar (voorbeelden zijn span, a, img etcetera).
Blocklevel elementen kan je meer zien als dozen, die hebben afmetingen en zijn dus niet perse net zo groot als de inhoud (voorbeelden zijn div, p, ul, blockquote etcetera).

Een blocklevel element kan fungeren als een container, dat wil zeggen dat het dus andere blocklevel elementen kan bevatten

[elgringo]

crisp schreef op 29 december 2003 @ 21:39:
de 'flow' is zeg maar hoe het document geparsed zou worden als er geen gebruik gemaakt zou zijn van positioning schemes.
Verder heb je 2 soorten (nou ja, tables zijn weer een verhaal apart) elementen: inline elementen en blocklevel elementen.
Inline elementen zijn eigenlijk elementen die geen dimensies hebben; ze zijn zo groot als de inhoud. Een plastic tasje zeg maar (voorbeelden zijn span, a, img etcetera).
Blocklevel elementen kan je meer zien als dozen, die hebben afmetingen en zijn dus niet perse net zo groot als de inhoud (voorbeelden zijn div, p, ul, blockquote etcetera).

Een blocklevel element kan fungeren als een container, dat wil zeggen dat het dus andere blocklevel elementen kan bevatten

Kijk nu begint het duidelijk te worden.

Ik heb nu mijn css aangepast:

Cascading Stylesheet:

div.menuregel{
    position: relative;
    top: -20px;
    height: 20px;
    
}
div.menuregel2{
    position: relative;
    height: 20px;
    top: -20px;
    
}

p.text{
float: left;
    position: absolute;
    top: 0px;
    left: 15px;
    
}

img.menu{
    position: relative;
    left: 5px;
}

en de html:

HTML:

<div class="hoofdmenu">
<p>Menu</p>

<div class="menuregel">
[img]"./images/T.gif"><p[/img]Test</p>
</div>
<div class="menuregel2">[img]"./images/I.gif"><img[/img]<p class="text">Test 2</p></div>
<div class="menuregel2">[img]"./images/L.gif"><p[/img]Test 3</p></div>

</div>

de 'boomstructuur' (met de |-, | en L ) is nu goed, maar op level 2 (subdeel1) staat de text (<p class="text">) niet tov het 2de deel van het menu gepositioneerd, maar tov het 1ste deel


De vraag is nu, hoe maak in dus een container met hierin blocks te telkens tov van elkaar gepositioneerd zijn.

[ Voor 26% gewijzigd door elgringo op 29-12-2003 22:12 ]

[André]

Kan het niet gewoon zo:

HTML:

[img]"./images/T.gif">Test<br>
<img[/img][img]"images/L.gif">Test[/img]
[img]"./images/L.gif"[/img]Test 3

[elgringo]

Gefixt:

Cascading Stylesheet:

div.nextelement{
    position: absolute;
    left: 12px;
    top: 0px;
}

div.menuregel{
    position: relative;
    left: 0px;
    height: 20px;
    
}

HTML:

<div class="menuregel">Menu</div>
<div class="menuregel">[img]"./images/T.gif"><div[/img]Test</div></div>
<div class="menuregel">[img]"./images/I.gif"><div[/img][img]"images/T.gif"><div[/img]Test 2</div></div></div>
<div class="menuregel">[img]"./images/I.gif"><div[/img][img]"images/L.gif"><div[/img]Test 3</div></div></div>
<div class="menuregel">[img]"./images/L.gif"><div[/img]Test 4</div></div>

beetje hobbieen werkt altijd

en het resultaat: De website

[ Voor 32% gewijzigd door elgringo op 29-12-2003 22:56 ]

[flashin]

Waarom gebruik je daar in hemelsnaam frames?

Kan gemakkelijk zonder. Als je het niet wenst te veranderen, ik zou er nog ff noresize tussen doen

[Goof2000]

Ik heb de website eens met verschillende browsers bekeken maar daar vielen me nogal wat verschillen op. Alleen in IE is hij eigenlijk mooi. (daar zal hij wel op getest zijn)
Mijn besturingssysteem is btw Win98SE.

Hierbij screendump Internet Explorer 6.0 zoals hij er volgens mij uit moet zien.

Ik begon met Firebird 0.7 en dacht deze site ziet er niet zo mooi uit. Menu werkt wel overigens. Alleen waar submenu's zijn veranderd de kleur niet als je over het woord gaat. (zoals bij verenigingen en media) Het menu klapt wel uit als je erop klikt.

Mozilla 1.6b eigenlijk hetzelfde als Firebird (wat opzich logisch is)

Netscape 6.2.1 zie Firebird en Mozilla

Opera 6.0 build 1010 staat het menu helemaal uitgeklapt de 'hoofden' van de submenu's niet aanklikbaar de rest wel. Menu is niet inklapbaar ofzo.

edit:
Ow ja mij viel ook op dat het netstat icon op andere plaats staat!

Netscape 4.7 kreeg ik niet meer opgestart maar denk dat het enige probleem is dat je bij niet IE browsers de achtergrond niet rood is. Het menu doet het in iedere browser, niet exact hetzelfde maar het werkt.

offtopic:
Het duurde nogal even voor ik dit gepost kreeg omdat de FAQ niet klopt, tis namelijk:
[url=www.piet.nl][img=w,h,1]http://plaatje.jpg[/url][/img]
ipv
[img=w,h,1] url van afbeelding met afmetingen + link naar afbeelding [/img]
Als je klikbare plaatjes wil posten.

[ Voor 3% gewijzigd door Goof2000 op 30-12-2003 02:07 ]

[Verwijderd]

Wellicht tijd om de vele overbodige divs en spans te verwijderen? De frames eruit te slopen? En CSS te leren?

*screenshots zijn trouwens een beetje overbodig, aangezien iedereen die 'een beetje' met het web bezig is, minstens een browsertje of 4/5 thuis heeft (meestal meer)*

[André]

Verwijderd schreef op 30 december 2003 @ 07:57:
Wellicht tijd om de vele overbodige divs en spans te verwijderen? De frames eruit te slopen? En CSS te leren?

*screenshots zijn trouwens een beetje overbodig, aangezien iedereen die 'een beetje' met het web bezig is, minstens een browsertje of 4/5 thuis heeft (meestal meer)*

Oh? Hier alleen IE6 en Firebird 0.6.1, de rest interesseerd me niet zo.

[Verwijderd]

Ik heb nog een paar Netscape versies (6.0, 6.1 & 6.2), omdat de meeste klanten sites daarin werkend willen zien (niet dat het echt extra moeite kost). Daarnaast uiteraard IE5.0, IE5.5 en 6.0. Een aantal Opera versies (5.0, 6.0 & 7.21) en de laatste Mozilla versie (1.7a) voor Bugzilla waar ik zo nu en dan een bugje sluit of open.

[elgringo]

Goof2000 schreef op 30 december 2003 @ 02:05:
Ik heb de website eens met verschillende browsers bekeken maar daar vielen me nogal wat verschillen op. Alleen in IE is hij eigenlijk mooi. (daar zal hij wel op getest zijn)
Mijn besturingssysteem is btw Win98SE.

Hierbij screendump Internet Explorer 6.0 zoals hij er volgens mij uit moet zien.
[afbeelding]
Ik begon met Firebird 0.7 en dacht deze site ziet er niet zo mooi uit. Menu werkt wel overigens. Alleen waar submenu's zijn veranderd de kleur niet als je over het woord gaat. (zoals bij verenigingen en media) Het menu klapt wel uit als je erop klikt.
[afbeelding]
Mozilla 1.6b eigenlijk hetzelfde als Firebird (wat opzich logisch is)
[afbeelding]
Netscape 6.2.1 zie Firebird en Mozilla
[afbeelding]
Opera 6.0 build 1010 staat het menu helemaal uitgeklapt de 'hoofden' van de submenu's niet aanklikbaar de rest wel. Menu is niet inklapbaar ofzo.

edit:
Ow ja mij viel ook op dat het netstat icon op andere plaats staat!

[afbeelding]
Netscape 4.7 kreeg ik niet meer opgestart maar denk dat het enige probleem is dat je bij niet IE browsers de achtergrond niet rood is. Het menu doet het in iedere browser, niet exact hetzelfde maar het werkt.

offtopic:
Het duurde nogal even voor ik dit gepost kreeg omdat de FAQ niet klopt, tis namelijk:
[url=www.piet.nl][img=w,h,1]http://plaatje.jpg[/url][/img]
ipv
[img=w,h,1] url van afbeelding met afmetingen + link naar afbeelding [/img]
Als je klikbare plaatjes wil posten.

Het mooie is dat de body tag, waar de bg color wordt gebruikt, aan css level 1 voldoet:

Cascading Stylesheet:

body {

    background-color : #E10008;
    color : Black;
    font-size : 14px;
    text-align : left;
    font-family : "Arial";
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    }

[disjfa]

elgringo schreef op 30 december 2003 @ 12:09:
[...]
Het mooie is dat de body tag, war de bg color wordt gebruikt, aan css level 1 voldoet:

hij kan wel kloppen.... nou moet je hem ook nog in de frames hebben staan

[elgringo]

disjfa schreef op 30 december 2003 @ 12:19:
[...]

hij kan wel kloppen.... nou moet je hem ook nog in de frames hebben staan

Hoe bedoel je in de frames? Ik heb hem in elke body staan van elke pagina

Ik include de stylesheet in de head als:

HTML:

<link rel="stylesheet" type="text/css" href="style.css">

(zoals vermeld staat op www.w3schools.com)

[ Voor 25% gewijzigd door elgringo op 30-12-2003 13:03 ]

[disjfa]

--edit--

never mind.... je verstopt m ergens onderaan...

ik zou even net boven de body{ tag op de structuur van je css letten

[ Voor 115% gewijzigd door disjfa op 30-12-2003 12:53 ]

[elgringo]

disjfa schreef op 30 december 2003 @ 12:51:
--edit--

never mind.... je verstopt m ergens onderaan...

ik zou even net boven de body{ tag op de structuur van je css letten

idd er stond een verdwaalde punt.