Hjælp med at dekonstruere design

Tags:    html css

Hej

Jeg kunne bruge lidt hjælp med at dekonstuere et design som jeg vil skille ad for at forstå det bedre.

Jeg har fundet det hos CSS Zen Garden. Hentet det ned og lagt det ud og så er jeg begyndt at skille det ad stykke for stykke.

Du kan se det originale design her:

www.podcasts.nu

Jeg ville se hvordan det ser ud hvis kolonnen med indholdet bliver kortere end menuen til højre. Og som frygtet hopper footeren op og følger indholdet. Du kan se problemet her:

www.podcasts.nu/index1.html

Har du en ide til hvordan man kan undgå det....?

Mange hilsner
HansGeist

P.s. Jeg er opmærksom på copyright og har ingen intentioner om at snuppe hverken grafik eller farver fra den pågældende side. Siden er kun synlig her i kortere tid her for at studere designet.




4 svar postet i denne tråd vises herunder
3 indlæg har modtaget i alt 3 karma
Sorter efter stemmer Sorter efter dato
Der ligger et ID der hedder intro. Kunne man forlænge det?
ellers skal du lave en wrapper som går fra før intro til lige før footeren.. så kan du måske udelukke den fra menuen til højre.
Ellers burde du kunne opbygge et helt fresh CSS, med udgangspunkt i det layout. Så kan du selv styre det..




En meget simpel løsning kunne være at fylde den restende plads ud med simpel <br>



En Effektiv løsning på problemet, er at definere en højde på den pågældende kolonnen i dit stylesheet, derved låser du din kolonne til at være en bestemt højde, hvorved footeren bliver under den definerede grænse. Du skal bare huske, at i så fald at du tilføjer mere tekst, skal du ændre højden så der er plads til den tilføjede tekst.

eksempel

main {
widht: 650px;
height: 500px;
}




Hej og mange tak alle tre

Ja. Og dog. Jeg kunne tænke mig at den kode bliver så stabil at den kan fungere med et content management system så der kan være forskellige mængder af tekst fra side til side uden at man skal ændre i det.

Som jeg kan se det så er der ikke noget indhold som kan gå under linklisterne fordi de er "position:absolute;" og derfor undtaget den almindelige rækkefølge af tags.

Så man kunne måske forestille sig, at man ændrede html koden så ID'en "footer" kom til at stå i slutningen af dokumentet. Man kunne så skrive noget i retning af:

#footer {
position: absolute;
bottom: 0;
}

Men det ser ikke ud til at virke - for der er jo ikke noget dukument dernede...Måske kan man lave en margin under den sidste linkliste som har samme højde som footeren. Det vil jeg forsøge senere.

Det ville være fedt med nogle flere forslag...

Mange hilsner...
Niklas



t