Problemer med divtagger og CSS

[Reash]

Heisann! Jeg sitter her med et lite webprosjekt jeg nettopp har startet med. Til nå består hele prosjektet av navigasjonsmenyen, og jeg har allerede et par problemer jeg ikke kommer meg rundt på egenhånd. Det er verdt å nevne at jeg er vant til den ufyselige "Photoshop->slicing->ekstremt knotete HTML"-metoden, så når jeg skal begynne å lære meg enkel og grei CSS-koding er jo dette nesten uungåelig.

 

Jeg fant et navigasjonsscript her, som jeg har endret litt på for å tilpasse det til mitt behov. Det er enkelte deler av koden jeg ikke helt forstår, og det er sikkert dette som gjør at jeg sliter.

 

Jeg har til nå tre problemer:

1. Når siden åpnes, ligger alle de 5 innholdstaggene helt synlig. Dette skjer ikke om jeg klikker meg via en annen kategori, for eksempel priser, og tilbake til konsept.

2. Planen min var å midtstille hele sidewrapperen, for så å venstrestille navigasjonen inne i denne divtaggen, om det gir mening. Nå virker det som om navigasjonswrapperen stiller seg utenfor denne midstillingen, selv om den ligger innenfor sidewrapperen.

3. En tredje ting jeg vil at skal skje, er at de forskjellige innholds-div'ene skal komme opp til høyre for navigasjonen, istedenfor under. Dette skal fortsatt skje innenfor den midtstilte sidewrapperen.

 

Er det noen som kan ta seg en titt på dette, i vedlagt fil, og komme med en genial kommentar eller to?

 

All hjelp mottas med stor takk!

css_forsok.zip

[Øsse]

Jeg fant en feil html-koden din som ser ut for å løse både punkt 1 og 2: Du har nemlig skrevet feil når du linker til CSS-filen. Rett href="/style.css" til href="style.css". Etter det ville jeg tatt vekk align="center" og align="left" fra html-filen da dette er ting som helst skal ordnes via CSS.

 

For å sidestille navigasjon og content, så ville jeg først takk vekk "auto" fra margin'ene til nav-wrap og content. Dvs. rette "margin: 20px auto;" til "margin: 20px 0;", i hvertfall i første omgang. Jeg ville så lagt til "float: left;" til både nav-wrap og content, og så i html-filen flyttet "<div class="clear"></div>" fra før til rett etter content-diven. Etter det er det vel noen bredde og sånn som må justeres for å få det helt riktig.

 

"float: left;" gjør grovt sagt at en div aksepterer at det er noe på sidene for den. Vanligvis så begynner en div på en ny linje. Den siste diven med "clear: both;" er det for å "dra" wrap-diven rundt hele innholdet.

 

Hvis du bruker Firefox så anbefaler jeg en extension som heter Firebug. Etter man har installrt og åpnet den kan man f.eks. holde musepekeren over en div i kildekoden (man ser kildekoden i et eget vindu inni Firefox) og så se hvordan denne er plassert i siden. Litt vanskelig å forklare. Prøv det selv, Det er veldig nyttig.

Endret 21. juni 2009 av øsse87