[CSS] problemen met 3 vlakken naast elkaar

[ArjanC]

Hoi,

ik probeer voor de eerste keer een pagin te maken met CSS en Divjes, het gaat tot nu toe goed.

ik heb nu een Frame waarin verschillende vlakken staan aan de linkerkant en aan de rechter kant. maar nu moet ik er eentje in het midden krijgen waar telkens een andere pagina in geladen word (dmv van ASP)

screen printje hoe hij er nu uit ziet :



maar als ik een 3de vak erin probeer te zetten dmv 'float: left;'dan komt hij er zo uit te zien :



ik snap niet helemaal wat ik fout doe :

code:

<STYLE type="text/css"><!-- 
#maincenter { width: 150px; height: 10px; position: relative; top: 10px; left: 450; float: left;  background: #d4d0c8;  }
#var_year { width: 150px; height: 10px; position: relative; top: 10px; float: right; left: 0px; background: #ffffff; }
#request { width: 135px; height: 10px; position: relative; top: 10px; left: 10px; background: #d4d0c8; }
#user_details { width: 150px; height: 10px; position: relative; top: 9px; float: right; left: 65px; background: #d4d0c8; }
#request_overview { width: 150px; height: 10px; position: relative; top: 180px; float: right; left: 405px; background: #d4d0c8; }
#total_overview { width: 150px; height: 10px; position: relative; top: 60px; float: right; left: 235px; background: #d4d0c8; }
#stnd_hours { width: 150px; height: 10px; position: relative; top: 300px; float: right; left: 575px; background: #d4d0c8; }
#user_options { width: 135px; height: 10px; position: relative; top: 20px; left: 10px; background: #d4d0c8; }
#mngr_options { width: 135px; height: 10px; position: relative; top: 30px; left: 10px; background: #d4d0c8; }
#hr_options { width: 135px; height: 10px; position: relative; top: 40px; left: 10px; background: #d4d0c8; }
#web_options { width: 135px; height: 10px; position: relative; top: 50px; left: 10px; background: #d4d0c8; }
--> 
</STYLE>

* ArjanC schaamt zich voor het vern**ken van de layout.

[ Voor 10% gewijzigd door ArjanC op 27-06-2003 09:52 ]

[Willem]

En je werkt ook nog met frames zei je?
Waarom er geen frame van maken dan?

En float:left is trouwens niet echt dé manier om een element goed te positioneren, en in het kader van browsercompatibility al helemaal niet.

Probeer het element anders een absolute positie binnen een frame te geven.
Dat kan een oplossing zijn.

[ArjanC]

sorry, haal even frames en Tables door elkaar (nog geen koffie gehad ).

maar ik gebruik tables

het probleem is dat als je het scherm op 1024x786 zet dat dan die vlakken heel ergens anders staan .

absoluut is toch op het scherm en relative is toch op het frame waar hij in zit ?

[Verwijderd]

Kijk eens bij: Little boxes

[ArjanC]

Verwijderd schreef op 27 June 2003 @ 09:52:
Kijk eens bij: Little boxes

ah, thanks!

maar, ik heb aan de linkerkant 5 losse boxen onder elkaar en aan de rechterkant 4 losse boxen.

deze kan ik ook niet in 1 zetten omdat hij ze wel of niet moet laten zien (ligt aan de persoon die inlogt)

of is het misschien handiger om toch die van 3 te gebruiken en dan de text onzichtbaar te maken ... hmm.. (* ArjanC heeft een hersenspinsel..)

[ArjanC]

ok, net even nagekeken en met 3 vlakken werken werkt niet echt lekker..
jammer..

iemand misschien een idee..?

[kleautviool]

Ik zal wel wat doms zeggen, maar dit is toch veel makkelijker te realiseren door gewoon tabellen te nesten

[ArjanC]

het nadeel vind ik dat hij met tabellen alles uitrekt en dan in de andere tabel in het midden begint...

of dit moet te veranderen zijn?

[kleautviool]

Het hoeft niet uit te rekken. Als je gewoon 3 cellen nasst elkaar zet. En dan in de linker cel alle boxen maakt, en in de rechter cel alle boxen plaatst, dan rekt alleen de achtergrond uit. Dus dan heb je ook hetzelfde effect als nu.

[Clay]

kleautviool schreef op 27 June 2003 @ 13:14:
Ik zal wel wat doms zeggen, maar dit is toch veel makkelijker te realiseren door gewoon tabellen te nesten

Dat is juist het punt. Tabellen zijn in html 3.2 oid geintroduceerd om tabulaire data te kunnen tonen (specificatie lijsten etc.) Ze zijn niet bedoeld om layout mee te definieren, maar het bleek wel heel makkelijk te zijn om inderdaad wat colommen naast elkaar te mikken.
De nette manier is dus om die tables overboord te goeien (voor Layout!) en dat met andere html elementen en css te doen. Het probleem was alleen vroeger dat het eigenlijk niet anders kon. Nu kan dat wel redelijk makkelijk, maar is niemand eraan gewend (naja, iig het meerendeel). Het "gemak" waarmee je hetzelfde wel met tables kan doen waar je met css echt moet gaan zoeken naar een oplossing maakt de verleiding soms wel erg groot om idd toch die table te nemen.

't is ook puristisch. Er zijn zelfs mensen die er zich in de html code met comments om verontschuldigen als ze een extra div tagje gebruiken om net iets makkelijker te kunnen css'en (boxmodelverschillen), maar dat gaat mij wat ver. Ook die voice-family "hack", hoe geniaal ook, vind ik niet kunnen.

[ Voor 3% gewijzigd door Clay op 27-06-2003 13:43 ]

[ArjanC]

_{moeilijk he een forum}

[ Voor 96% gewijzigd door ArjanC op 27-06-2003 14:34 ]

[ArjanC]

okee, thanks.!

maare, volgens jouw zou ik dus alles met CSS kunnen neerzetten ? ipv frames?

[Verwijderd]

* tabellen

wat ik zou doen is het volgende:
1) neem een div, zet die links absoluut met left = zoveel, doe daarin je losse blokken relative
2) doe hetzelfde rechts
3) ze een div in het midden met width: auto en de juiste margins left en right

zie ook: http://glish.com/css/ in die linker en rechter blokken kunnen dan weer je losse dingetjes (met h's en ul's zo te zien, ga niet alles met div's doen, dat kwam ik net ook hier tegen, dat was overdiv'ed. Gebruik tags waar ze voor zijn bedoeld)

_{waarom zou je een lijstje links met a's en br's doen, terwijl een ul juist voor lijstjes is gemaakt Ik snap soms echt het gros van de HTML bouwers hier niet}

[ Voor 52% gewijzigd door Verwijderd op 27-06-2003 15:20 ]

[Clay]

_{die a's kan je anders ook een display:block geven, dan komen ze ook zonder br's onder elkaar}

[ArjanC]

Thanks, nu heb ik dit erbij gezet (van de website afgehaalt)

code:

    #centercontent {
        background:#fff;
        margin-left: 199px;
        margin-right:199px;
        border:1px solid #000;
        voice-family: "\"}\"";
        voice-family: inherit;
        margin-left: 201px;
        margin-right:201px;
            }

en dan komt het er zo uit te zien.



hij zet um dan in het midden (wat natuurlij perfect is !) maar als er iets in komt te staan schuift hij alles naar beneden.,

[ Voor 15% gewijzigd door ArjanC op 27-06-2003 15:38 ]

[Verwijderd]

zitten die dingen aan de zijkant in een container? geef die dan effe position absolute en zet ze neer waar je wilt.

@Clay: het blijft een lijst...

[ArjanC]

Jaahhhh ik heb um

THANKS !

code:

#centercontent {
background:#fff;
margin-left: 160px;
width: 550px;
border:0px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
margin-top:10px;
position: absolute;
}

[Verwijderd]

gooi die voice family muk er maar uit, ik denk niet dat dat met jouw design uitmaakt en het blijft een hack. Als je die niet nodig hebt: niet doen vind ik.

[ Voor 9% gewijzigd door Verwijderd op 27-06-2003 16:31 ]

[ArjanC]

* ArjanC snapt die voice niet, maaaar is erg blij dat het werkt

[Not Pingu]

maar nu heb je dus alles absoluut gepositioneerd? als dus iemand met een lagere resolutie de site bekijkt valt een groot deel weg, toch? hoe kun je dmv. css een DIV centreren? dit is mij nog nooit naar behoren gelukt, zelfs niet als ik een breedte opgeef en margin: auto; toevoeg.

[Rickets]

Gunp01nt schreef op 27 juni 2003 @ 17:11:
maar nu heb je dus alles absoluut gepositioneerd? als dus iemand met een lagere resolutie de site bekijkt valt een groot deel weg, toch?

Dat ligt eraan, als je de breedte binnen de perken (730px ongeveer) houdt, is er niks aan de hand.

hoe kun je dmv. css een DIV centreren? dit is mij nog nooit naar behoren gelukt, zelfs niet als ik een breedte opgeef en margin: auto; toevoeg.

Zie [rml][ CSS & HTML] Lay-out maken mbv layers (centreren?).[/rml] en Iframe centeren en plaatje wil niet verticaal centreren en [rml][ CSS] div's uitlijnen[/rml] en [rml][ html + css] i-frame verticaal centreren[/rml] en [rml][ CSS] Positioning Help[/rml] en Laag centreren en ...

[ Voor 24% gewijzigd door Rickets op 27-06-2003 17:18 ]

[Verwijderd]

lees dan die sitye die ik je gaf, daar staat uitleg over die voicefamily hack

en je kan best absoluut positioneren en op alle resoluties werken, je kan namelijk ook vanaf rechts uitlijnen (welkom in de wondere wereld van de css)