22/03/2008 21:13:00
Hey,
Ik was wat aan het dromen en kwam op dit uit (gewoon snelle schets in paint uitwerking volgt nog)
http://img20.imageshack.us/my.php?image=phphulphoebj8.jpg
nu mijn probleem is dat ik helemaal niet zou weten hoe ik dit kan stylen en hoe toe te passen van de divs. Dus mijn vraag luid klaar en duidelijk. Hoe pak ik dit aan in men HTML & CSS ?
Ik kan me echt niet ordenen hoe ik dit zou doen kan iemand me het zeggen wat en hoe eerst te doen en dan dit en dan dat... ?
Ik hoop dat ik duidelijk ben geweest. Want dit is een zeer moeilijke klus voor me.
MVG
wouter
Edit : Bedenk je er ook bij dat dit nog moet. tekst in de horizontale strook. tekst in de rond hoekige vlak (dat word menu). tekst in het grijze vlak.
Gewijzigd op 01/01/1970 01:00:00 door
Wouter K
23/12/2024 02:43:53
22/03/2008 22:14:00
Hoe wil je dat deze layout 'beweegt', moet het gecentreerd zijn in het midden waarbij die witte balk 'doorloopt' als iemand een groter scherm heeft? Of wil je de content over pakweg 80% van de breedte en dan de rest voor de balken? En hoe wil je dat het menu reageert?
22/03/2008 23:24:00
Nee Arjan je begrijpt me niet :)
Ik wil wetten hoe ik het best mijn css en html opstel.
zoals
<div id="maincontainer">
<div id="header"></div>
<div id="menu"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
En dan hoe ik dit doe met css , want dit is mijn grootste faalangst.
Ik denk gewoon dat ik er niet uitkom.
22/03/2008 23:29:00
Ja, dat is moeilijk te bepalen aan zo'n plaatje, vandaar die vragen. De veronderstelling dat ik je niet begrijp vind ik dan ook vreemd, jij vraagt mijn expertise, dan zal ik heus wel weten hoe zoiets in elkaar zit.
22/03/2008 23:40:00
Ja, ik kom gewoon niet uit in men logica hoe en wat je moet doen.
Vind hem vreselijk. Hij is ambetant om uit te coderen. Daarom ik heb nog niks ondernomen ik dacht dat het via hier wat helder voor mij ging worden.
Edit : Ik zoek meer naar de volgorde van hoe ik dit juist maak. (div's)
Gewijzigd op 01/01/1970 01:00:00 door
Wouter K
23/03/2008 00:04:00
zo ontzettend ingewikkeld is dat toch ook weer niet? je wil gebruik maken van div
layers, gebruik dan ook de eigenschap van een laag. Het is een kwestie van de container fixen, en daarna dat vakje rechts boven met een hogere z-index er overheen te plaatsen. Maar wat heb je zelf al, ik ga niet alles voorkauwen.
23/03/2008 00:06:00
Ik heb nog niks. maar dus je bedoeld als ik de maincontainer position fixed mee geef dat ik het wel kan doen ? En met die Z-index is het dan nog in elk scherm oké ?
groetjes en bedankt voor de tip zowieso
Beheerder23/03/2008 00:12:00
Als je alles in CSS zet op het witte overlappende vak na, dan kun je dit gewoon met absolute positioning positioneren met een z-index ja.
23/03/2008 03:59:00
Waarom absolute? Behalve het overlappende vlak kan je alles met "float:left;" positioneren. Het overlappende vlak zal je wel absoluut positioneren denk ik zo.
Tip:
Maak eerst de lay-out eens in Divs/CSS zonder het overlappende witte vlak, die kan je er later wel in plaatsen.
23/03/2008 10:40:00
Zelf float:left heb je niet nodig, in deze layout zijn het allemaal divjes die gewoon onder elkaar staan. Met uitzondering van het menu dan, dat je absoluut wil positioneren...
Voorbeeld layout
Ik heb even snel een voorbeeldje voor je gemaakt. Deze opzet zou je als basis kunnen gebruiken, de afmetingen/kleuren zul je natuurlijk nog willen aanpassen. Verder zul je ook de ronde hoeken op de verschillende plaatsen zelf nog toe moeten voegen, maar dat mag neem ik aan niet zo'n groot probleem zijn...
23/03/2008 13:40:00
Wow blanche daar heb ik zeker iets aan. Ja het zal wel geen probleem zijn voor de rest erin te brengen. Alleen eens ik de uitgewerkte versie klaar heb er nog wel 2 blz extra code bij komt.
Bedankt allen !
Grtz
Wouter
23/03/2008 14:41:00
2 blz extra code? Hoe kan dat? Programmeer jij in MS Word? Nu wordt ie helemaal mooi!
Trouwens erg lekkere kleuren combi Blanche! Van welk kleurenschema heb je die gehaald? :P
Prettig Pasen!
Crispijn
23/03/2008 14:52:00
Geen kleurenschema, ik ben uitgegaan van 1 kleur (#cc9) en daar de contrast kleuren (#c9c en #9cc) bij genomen. Voor de footer gewoon een algemene donkere grijstint...
