[DHTML] Uitklap menu werkt niet, layer positioning problemen - Softwareontwikkeling

zondag 19 oktober 2003 12:52

Acties:

Topicstarter

Ha luitjes! Ik ben voor het eerst mijn layout aan het maken via CSS zoals het hoort. Voordat ik hiermee begonnen ben heb ik eerst mijn kennis van CSS en HTML weer opgehaald via mijn boeken en de documenten van het W3C.
Ik heb eerst de layout helemaal gemaakt via css, dat gaat allemaal prima met floats en zo, maar nu komt het probleem: Ik wil zo'n mooi DHTML menu maken met layers zoals bovenaan de tweakers.net site. Ik heb al een hoop dingen geprobeerd maar loop steeds tegen het probleem aan dat de eerst verborgen layer als hij verschijnt de layout compleet vern**kt!
Willen jullie zo lief zijn om me even verder op weg te helpen?

De HTML:

code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>www.fysiotherapiekrimpen.nl</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" language="javascript1.2">
function sub(id) {
if (document.getElementById()) obj = document.getElementById(id)
else if (document.all) obj = document.all[id]
obj.style.display = (obj.currentStyle.display == "block")? "none":"block"
}
</script>
<link rel=stylesheet href="wb.css" type="text/css">
</head>
<body>
<div id="maincontainer">
    <div id="header">[img]"img/header.gif"[/img]</div>
    <div id="spacer">&nbsp;</div>
    <div id="menucontainer">
        <div id="menubar">
        <div id="menu1"><a href="javascript:void(0)"; onclick="sub('expand1');">Specialisaties</a></div>
    </div>
    </div>
    <div id="midcontainer">
    <div id="expand1"><a href="http://www.tweakers.net">Tweakers!</a><hr size="1"><a href="http://gathering.tweakers.net">tweakers forum!</a></div>
        <div id="leftcontent">Hier komt de tekst etc...</div>
        <div id="rightcontent">Hier komen de plaatjes en aanvullende info...</div>
    </div>
    <div id="copyright">Design and concept by WebHeadZ &copy;</div>
    <div id="spacer">&nbsp;</div>
    <div id="footer"><span class="footer">Adres: Nieuwe Tiendweg 11a, 2922 EN, Krimpen aan den Ijssel<br>Tel: (0180) 51 90 01, Fax: (0180) 51 86 40, E-mail: krimpen@fysionet.nl</span></div>
</div>
</body>
</html>

de CSS:

code:

* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}

body {  
background-color:#cbcbca;
text-align:center;
}

#maincontainer {
height:100%;
width:750px;
margin-right:auto;
margin-left:auto;
margin-top:0px;
padding:0px 0px 0px;
z-index:2;
}

#header {
float:left;
height:100px;
width:100%;
background-color:#ffffff;
background-image:url("img/header.gif");
border-left:2px solid #000000;
border-right:2px solid #000000;
border-bottom:1px solid #000000;
border-top:2px solid #000000;
margin:0px 0px 0px;
padding:0px 0px 0px;
clear:left;
z-index:2;
}

#menucontainer {
margin:0px 0px 0px;
padding:0px 0px 0px;
clear:left;
z-index:2;
}

#menubar {
float:left;
height:25px;
width:100%;
background-color:#797979;
border-left:2px solid #000000;
border-right:2px solid #000000;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
margin:0px 0px 0px;
padding:0px 0px 0px;
z-index:2;
}

/* Test menuutje */
#menu1 {
float:left;
background-color:#797979;
z-index:1;
}

#expand1 {
top:25;
left:0;
height:100px;
width:80px;
background-color:#F8981D;
display:none;
z-index:1;
}
/* Einde test menuutje */

#spacer {
float:left;
height:5px;
width:100%;
background-color:#F8981D;
line-height:1px;
border-left:2px solid #000000;
border-right:2px solid #000000;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
margin:0px 0px 0px;
padding:0px 0px 0px;
clear:left;
z-index:2;
}

#midcontainer {
margin:0px 0px 0px;
padding:0px 0px 0px;
clear:left;
z-index:2;
}

#leftcontent {
float:left;
height:300px;
width:66%;
background-color:#fff;
border-left:2px solid #000000;
border-right:1px solid #000000;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
margin:0px 0px 0px;
padding:0px 0px 0px;
z-index:2;
}

#rightcontent {
float:right;
height:300px;
width:34%;
background-color:#F8981D;
border-left:1px solid #000000;
border-right:2px solid #000000;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
margin:0px 0px 0px;
padding:0px 0px 0px;
z-index:2;
}

#copyright {
float:left;
height:25px;
width:100%;
background-color:#797979;
border-left:2px solid #000000;
border-right:2px solid #000000;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
margin:0px 0px 0px;
padding:0px 0px 0px;
clear:left;
z-index:2;
}

#footer {
float:left;
height:50px;
width:100%;
background-color:#ffffff;
background-image:url("img/footer.gif");
text-align:left;
border-left:2px solid #000000;
border-right:2px solid #000000;
border-bottom:2px solid #000000;
border-top:1px solid #000000;
margin:0px 0px 0px;
padding:5px 125px 0px;
clear:left;
z-index:2;
}

span.footer {
color:#000000;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
}

alvast bedankt allemaal! (sorry voor de slechte layout!:()

zondag 19 oktober 2003 13:39

Acties:

crisp

Devver

Pixelated

geef je verborgen layer een position:absolute en evntueel de container daarvan een position:relative

Intentionally left blank

zondag 19 oktober 2003 16:02

Acties:

-TheNose-

Topicstarter

Dat is niet echt een optie omdat het menu er dan heel vreemd uitgaat zien als het browserwindow groter of kleiner gemaakt wordt. Ik heb de site namelijk zo ingesteld dat de left en right margins van de hele site op auto staan....de site blijft dus horizontaal altijd in het midden van de pagina...

zondag 19 oktober 2003 16:17

Acties:

Verwijderd

Heb het wel even getest hier, maar het lijkt erop dat de verschillende z-positions niet goed staan. Misschien is het handig om hier eens te kijken: http://www.twinhelix.com/dynamic.html. Zitten vast interessante regels code in, of ga je het zelfs gebruiken. Zul je wel een zooi (moeten) rippen, want er zitten nu wel toeters en bellen aan, maar het is naar mijn mening een goed systeem.

zondag 19 oktober 2003 16:18

Acties:

André

Analytics dude

Toch zul je wel position:absolute moeten doen. Je kunt dan met een js scriptje je menu op de goede plek zetten.

zondag 19 oktober 2003 16:20

Acties:

crisp

Devver

Pixelated

André schreef op 19 October 2003 @ 16:18:
Toch zul je wel position:absolute moeten doen. Je kunt dan met een js scriptje je menu op de goede plek zetten.

juist door je menu-layer in een container te stoppen kan je 'm positioneren in the flow zelf - position:absolute is nl absolute tov z'n container en dat is dus niet noodzakelijk de body!

Intentionally left blank

zondag 19 oktober 2003 16:22

Acties:

-TheNose-

Topicstarter

Crisp: voor zover ik weet is position absolute de positie tov het browser window en is position relative tov zijn container!

Maar als ik position relative gebruik dan schuift mijn layout een hele zooi op omdat die layer tevoorschijn komt in de flow!

zondag 19 oktober 2003 16:26

Acties:

crisp

Devver

Pixelated

-CKY2K- schreef op 19 oktober 2003 @ 16:22:
Crisp: voor zover ik weet is position absolute de positie tov het browser window en is position relative tov zijn container!

Maar als ik position relative gebruik dan schuift mijn layout een hele zooi op omdat die layer tevoorschijn komt in de flow!

not true:

HTML:

1
2
3

<div style="position:absolute;top:100px;left:100px;width:300px;height:300px;background-color:#0000ff;">
  <div style="position:absolute;top:100px;left:100px;width:100px;height:100px;background-color:#ff0000;"> </div>
</div>

ik denk dat als je je midcontainer een position:relative geeft, en je expand1 een position:absolute dat je er wel bent.
ipv met display block/none kan je nu ook met visibility visible/hidden werken omdat je juist de layer uit de flow haalt met de position:absolute;

[ Voor 10% gewijzigd door crisp op 19-10-2003 16:28 ]

Intentionally left blank

zondag 19 oktober 2003 16:28

Acties:

Verwijderd

De position (absolute of relative) is altijd t.o.v. van de container waar-ie instaat. Staat-ie daar niet in, dan is-ie t.o.v. het browser-window. Tenminste, dat is op mijn website zo :-)

[ Voor 0% gewijzigd door Verwijderd op 19-10-2003 16:30 . Reden: *zucht* onnodig.. ]

zondag 19 oktober 2003 16:30

Acties:

André

Analytics dude

crisp schreef op 19 October 2003 @ 16:20:
[...]

juist door je menu-layer in een container te stoppen kan je 'm positioneren in the flow zelf - position:absolute is nl absolute tov z'n container en dat is dus niet noodzakelijk de body!

True

zondag 19 oktober 2003 16:43

Acties:

T-Blizzard

offtopic:
Krimpen a/d Lek || Krimpen a/d Yssel ?

Yssel dus

[ Voor 9% gewijzigd door T-Blizzard op 19-10-2003 16:45 ]

zondag 19 oktober 2003 16:53

Acties:

crisp

Devver

Pixelated

-CKY2K- schreef op 19 October 2003 @ 16:39:
Nog even dit: Crisp--> wat bedoel je in het andere topic ([rml][ CSS] Jullie mening over mijn layout (GEEN sitecheck!)[/rml])met gebruik wat meer classes?

Nou stel dat je nu een 2e menu-layer wil toevoegen, in jouw opzet zou je dan menu2 en een expand2 moeten gaan aanmaken, en daar nagenoeg dezelfde styles aan moeten toekennen als aan menu1 en expand1 - met classes kan je styles hergebruiken.

Intentionally left blank

zondag 19 oktober 2003 17:26

Acties:

-TheNose-

Topicstarter

Ah bedoel je het zo crisp, dan snap ik je

Effe een vraagje nog over hoe ik mijn div's heb gepositioneerd...heb nu alles met floats gedaan, maar ik lees nu in steeds meer topics dat positioneren met floats toch niet echt de bedoeling is mbt layouts (meer voor tekst flow rond plaatjes en zo)...kan ik de boel beter gaan aanpassen door alles met position is absolute en zo te doen?

zondag 19 oktober 2003 17:35

Acties:

Clay

cookie erbij?

het suffe (of eigenlijk de eigenschap) van floats is dat het geen positie forceert. Met te weinig horizontale ruimte zullen 2 dingen met floats dus gewoon onder elkaar floepen terwijl ze daarvoor nog naast elkaar stonden. Dat kan handig zijn, maar voor een layout is dat doorgaans niet bepaald de bedoeling.
Er zijn aardig wat sites die erop ingaan hoe je het dan wel kan doen, bv
http://www.glish.com/css/ en http://www.bluerobot.com/

Meestal komt het erop neer dat een (vaak content) kolom die rekken moet een margin links en/of rechts krijgt (en geen absolute, om in de flow te blijven), ter breedte van de kolommen die ernaast moeten, en dat die dan met absolute left en right ernaast gezet worden.

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

zondag 19 oktober 2003 17:37

Acties:

crisp

Devver

Pixelated

-CKY2K- schreef op 19 October 2003 @ 17:26:
Ah bedoel je het zo crisp, dan snap ik je
Effe een vraagje nog over hoe ik mijn div's heb gepositioneerd...heb nu alles met floats gedaan, maar ik lees nu in steeds meer topics dat positioneren met floats toch niet echt de bedoeling is mbt layouts (meer voor tekst flow rond plaatjes en zo)...kan ik de boel beter gaan aanpassen door alles met position is absolute en zo te doen?

floats zijn wel degelijk bruikbaar voor layout, zeker als je een 'liquid design' wilt bewerkstelligen.

Intentionally left blank

zondag 19 oktober 2003 17:51

Acties:

-TheNose-

Topicstarter

Clay schreef op 19 October 2003 @ 17:35:
het suffe (of eigenlijk de eigenschap) van floats is dat het geen positie forceert. Met te weinig horizontale ruimte zullen 2 dingen met floats dus gewoon onder elkaar floepen terwijl ze daarvoor nog naast elkaar stonden. Dat kan handig zijn, maar voor een layout is dat doorgaans niet bepaald de bedoeling.
Er zijn aardig wat sites die erop ingaan hoe je het dan wel kan doen, bv
http://www.glish.com/css/ en http://www.bluerobot.com/

Meestal komt het erop neer dat een (vaak content) kolom die rekken moet een margin links en/of rechts krijgt (en geen absolute, om in de flow te blijven), ter breedte van de kolommen die ernaast moeten, en dat die dan met absolute left en right ernaast gezet worden.

Maar als ik mijn floats gewoon vaste breedtes geef dan heb ik ook niet het probleem dat ze de volgende regel op floepen zeker niet als ze in een container staan met een vaste breedte...

* -TheNose- begint het allemaal een beetje te snappen! :d

zondag 19 oktober 2003 17:53

Acties:

crisp

Devver

Pixelated

-CKY2K- schreef op 19 October 2003 @ 17:51:
[...]

Maar als ik mijn floats gewoon vaste breedtes geef dan heb ik ook niet het probleem dat ze de volgende regel op floepen zeker niet als ze in een container staan met een vaste breedte...

* crisp begint het allemaal een beetje te snappen! :d

tsja, maar dan kan je ze net zo goed meteen absoluut positioneren natuurlijk

een float gebruik je juist omwille van de speciale eigenschappen hiervan - als je die eigenschappen niet nodig hebt gebruik dan een ander positioneringsschema wat beter past bij wat je wilt bereiken.

[ Voor 19% gewijzigd door crisp op 19-10-2003 17:54 ]

Intentionally left blank

zondag 19 oktober 2003 18:04

Acties:

-TheNose-

Topicstarter

crisp schreef op 19 October 2003 @ 17:53:
[...]

tsja, maar dan kan je ze net zo goed meteen absoluut positioneren natuurlijk
een float gebruik je juist omwille van de speciale eigenschappen hiervan - als je die eigenschappen niet nodig hebt gebruik dan een ander positioneringsschema wat beter past bij wat je wilt bereiken.

Tsja heb je ook weer gelijk in...bedankt he was net blij dat ik het een beetje snapte!

Ik ga de pdfjes van het W3C maar nog een keertje lezen...*zucht*