CSS vraag

[leihi2]

hey.. ik ben nu bezig met CSS ..

ben er nog niet zo lang mee bezig maar wil het wel graag leren..

nu heb ik een vraag...

ik heb een layout gemaakt in photoshop en die wil ik dus omzetten naar een werkende site..

zie hier http://www.leihi2.nl/jongambon/layout.jpg

de rand bovenin heb ik als achtergrond image gebruikt en heb een klein stukje van die rand genomen en met css gezegd:


body{background-image: url(boven.jpg);
background-repeat:repeat-x;
background-attachment: fixed;

oke.. dat wil nog wel werken maar nu wil ik logo daar links hebben en dat gedeelte daaronder wil daar ook hebben.. maar het lukt me niet om het daar te zetten zonder dat het in of in Firefox of IE niet werkt..

en heb ook 2 gedeeltes gemaakt met div'jes

<div id="jongambon">
<div class="left"><p class="links">Test layout Jong Ambondddddd ddddddddddddddd dddddddddd ddddddd ddddd ddddddddddddddddddddddddd</p></div>
<div class="centre">fgfsd</div>
</div>


CSS:

#jongambon {
display: block;

}
#jongambon .left {
float: left;
width:20%;
position:absolute;
top:13em;
font-size:12px;

}
#jongambon .centre {
width: 60%;
position:absolute;
left:25em;
top:13em;
font-size:12px;

}

maar ik heb nu geen idee hoe ik het moet aanpakken zonder dat het bijvoorbeeld in IE er f**** uit ziet..

ik wil dus die logo op de goeie plaats en dat andere.. die } lijn die je ziet in de layout

elke keer als ik het probeer dan verschuiven die dingen steeds als ik scroll.. dat kon als het goed is met de position:fixed maar het lukt me niet om de logo en wat daar onder staat op zijn plaats te houden..

[SubZero]

De layout zegt weinig (beter gezegd niets) over hoe je je content wil hebben, wat toch belangerijk is voor te weten. Waar komt je content en dergelijke? Post anders even een screenshot hoe het zou moeten zijn.

[leihi2]

http://www.leihi2.nl/jongambon/layout2.jpg

[mech7]

je kan ht logo absoluut positioneren.. en dan } dingen kan je bv als achtergrond zetten op die div left... en zet je repeat uit... ennnuuh :P dan moet het lukken ^_^

[SubZero]

Ik kon het niet laten en heb even je website in mekaar gestoken in XHTML/CSS :) Je vindt het resultaat hier (http://users.skynet.be/bert_fonteyn/jongambon/). Het was voor mij een kleine moeite, en als ik jou daar mee op het goede spoor kan zetten is dat graag gedaan. De bestanden voor de website vind je overigens hier (http://users.skynet.be/bert_fonteyn/jongambon/ambon.zip).

Even wat toelichting:
- De navigatie heb ik niet kunnen maken omdat ik het bronbestand niet had, de rest wel. De div voor de navigatie bestaat overigens al wel en is ook al gepositioneerd en dergelijke. Het opbouwen van de navigatie zou ik met deze trick (http://www.alistapart.com/articles/sprites/) doen. Je dient dus enkel de navigatie nog te maken.
- Slechts 3 divs: logo, navi en content. De namen spreken voor zich. Alles wordt absoluut gepositioneerd.
- De "home" breadcrumb zit als achtergrond van de content div in de CSS van de pagina zelf, omdat deze wellicht per pagina verandert. Zo hoef je enkel de achtergrond in de pagina aan te passen.
- De tekst voor je content is rood, maar ik zou het iets minder scherp maken. Het leest minder prettig dan een middengrijs tint (bv. #666).
- Voor de content div heb ik de Box Model Hack (http://tantek.com/CSS/Examples/boxmodelhack.html) gebruikt, want je content wordt uitgelijnd met padding voor plaats te maken voor de "home" breadcrumb.

Moest je verder iets niet verstaan hoor ik het wel. Nog veel succes met CSS.

[leihi2]

wow thanks.. ik zal dit goed doornemen zodat ik er ook was van snap ;-)