FIKSET: Hjelp til CSS koding - Bilde-posisjon

[KiKKA]

For et par dager siden postet jeg en side til kritikk her på forumet! Link til tråden her!

 

Der ble jeg gjort litt narr av pga koden min!

Derfor bestemte jeg meg for å sette meg ned og prøve å lære meg css!

Dette ble resultatet!

 

Men jeg har et problem. Alle bilder utenom footer er satt opp med

position:absolute

Det samme har jeg også gjort med Div'en som holder content!

 

Problemet mitt er footer!

Jeg ønsker at footeren skal forholde seg til hvor lang content-div'en

er og legge seg nedenfor den.

Jeg har fått til en "Jalla"-løsning ved å sette footeren som

no-repeat background og sette den på bunnen!

For at content ikke skal flyte over footeren har jeg satt

padding-bottom: 80px;

på content-div'en.

 

Det jeg lurer på er om det er en måte å "klistre" footeren på

undersiden av div'en, slik at jeg slipper at den ligger helt nede

selv om content div'en er lite fylt!

 

EDIT: TAKKER AFRODUDE !

Endret 25. juni 2005 av KiKKA

[Jakob K]

Unngå absolutte plasseringer med mindre det er nødvendig. Bruk heller relative mål som % og EM. Om du har for høy eller lav oppløsning, vil ikke siden din bli midstilt.

 

Om du skal midstille siden, finnes det metoder for dette, et søk på forumet á la "Midstilling CSS" vil gi deg det du leter etter.

 

All styling skal skje vha. CSS, ikke i HTML. Dvs at tagger som CENTER og egenskaper som ALIGN skal bort. Skal du ha en paragraf midstilt, kan du lage en klasse for det i CSS-dokumentet, eller legge til STYLE-egenskapen i taggen.

 

Hvorfor lager du en paragraf rundt ett bilde? Hvis det er fordi du skal ha luft over og under, lager du en klasse i CSS igjen. Så bruker du position: absolute; og margin/padding ettersom hvordan du vil ha det.

 

Vil anbefale deg å lære deg HTML og CSS fra HTMLDog, og/eller finne deg noen tutorials om hvordan man setter opp en midstilt side i CSS, med footer osv. Å titte på kildekoden til andre sider er også en god selvlæringsmetode

[KiKKA]

Ok.. Noterer meg at absolutte plaseringer er BAD!

 

Skal se på det bildet i egen paragraf

Litt padding skal vel gå!

 

Takker for respons!

 

Noen som vet hvordan man får footeren under DIV'en?

[Jakob K]

Noen som vet hvordan man får footeren under DIV'en?

Lag en H1 til header, én DIV til innhold og én til footer. Så skriver du

div { display: block; }

i CSS-dokumentet, og footeren vil legge seg etter innholds-DIV'en, ettersom hvor stor den er.

 

Angående midstilling skriver du

body { text-align: center; }

først i CSS'en, gjerne etter

* { 
 margin: 0;
 padding: 0; 
}

some er en fin huskeregel for å få det likt i alle lesere.

 

For å få luft over og under bildet bruker du f.eks

img { margin: 2em 0; }

Så kan du sette det samme som for bildet for å definere hvor mye luft du vil ha rundt paragrafer:

p { margin: x x x x; padding: x x x x; }

(Du bytter selvfølgelig ut x med hvor mye luft du vil ha.)

 

Og så videre, lykke til.

 

Var det noe du ikke forstod (evt. meningen med) der, sjekk det gjerne på HTMLDog eller W3Schools

 

Edit: Vil forøvrig anbefale deg å starte på nytt, så det ikke blir mer surr i koden.

Endret 25. juni 2005 av AfroDude

[KiKKA]

Takker for all hjelp AfroDude! Har fått det til å funke nå! Tok litt tid, men nå er det altså fikset.

 

Tror koden er fin også , men hva vet jeg!?

Fikk den validert hvertfall (både css og html ) Og i tillegg fungerer den fint i Firefox, IE og Opera! *stolt*

 

Linken til den "nye" siden er her!

Hvis noen CSS-pro's hadde vært grei og sett over

koden og gi meg tilbakemelding på eventuelle feil hadde det vært fint!

 

- KiKKA

 

EDIT: Min første side uten tabeller!!!

Endret 25. juni 2005 av KiKKA

[Jakob K]

Takker for all hjelp AfroDude! Har fått det til å funke nå! Tok litt tid, men nå er det altså fikset.

 

Tror koden er fin også  , men hva vet jeg!?

Fikk den validert hvertfall (både css og html ) Og i tillegg fungerer den fint i Firefox, IE og Opera! *stolt*

 

Linken til den "nye" siden er her!

Hvis noen CSS-pro's hadde vært grei og sett over

koden og gi meg tilbakemelding på eventuelle feil hadde det vært fint!

Bare et par småting som forsåvidt er uvensentlig, men siden du spurte:

Siden du bare skal ha én content-DIV, og én footer, ville jeg brukt ID istedenfor class der. (Bytt om <div class="content"> til <div id="content"> og div.content til

div#content)

Også bør du bytte ut tekstalternativet for headeren din fra "Revised Image Replacement" til tittelen på siden eller liknende.

 

Ellers var det bra og riktig kode faktisk. Litt mye rare mellomrom her og der, men det er vel en smakssak.

 

Å få siden validert og lik i alle leserene, er ikke så vanskelig bare man skriver ordentlig og ryddig kode. Det med forskjellig tolkninger av CSS blant leserene, støter du nok ikke på før du bruker en litt mer avasnert layout (flere kolonner enn én f.eks).

 

EDIT: Min første side uten tabeller!!!

Det er bra, det er slik sider skal lages. Det er faktsik lettere å lage en side i CSS enn med tabelllayout, når du først kan det.

[KiKKA]

Bare et par småting som forsåvidt er uvensentlig, men siden du spurte:

Siden du bare skal ha én content-DIV, og én footer, ville jeg brukt ID istedenfor class der. (Bytt om <div class="content"> til <div id="content"> og div.content til

div#content)

 

Har faktsik lest dette en plass! Men det er bra du sier det. Det er vel helt egentlig ikke så viktig, men skal selvfølgelig gjøre om koden slik at den "følger reglene"!

 

Takk igjen

 

Å få siden validert og lik i alle leserene, er ikke så vanskelig bare man skriver ordentlig og ryddig kode. Det med forskjellig tolkninger av CSS blant leserene, støter du nok ikke på før du bruker en litt mer avasnert layout (flere kolonner enn én f.eks).

 

Jeg synes det var vanskelig nok jeg Men når man får taket på det, så går det vel greit! Må vel sette meg ned å lage et nytt design for å øve litt Må si jeg liker CSS!