Side med variabel længde

Prøv at indsætte følgende tag lige under teksten:

Det hjælper ikke rigtig noget...

Nu har jeg ikke lige noget værktøj til at tjekke om det er korrekt, men umiddelbart skyldes det at både din #footer og din #site-by div står til at skulle placeres ud fra bunden af siden. Pt. står de til at være 38% fra bunden. Hvis de skal følge skal de placeres ud fra dit content.

Nu sidder jeg ikke med så meget tid lige nu.
Så kan evt. se på det senere. Men hvordan positionerer du dine divs? Absolute eller relativt? Eller ingen af delene? Du skal ikke bruge absolute. Prøv at skifte height til min-height på på din div med tekst i.

platik: hvordan skal jeg gøre det??? de ligger i mit content afsnit i min php-fil...

webmaster: jeg bruger absolute, fordi jeg er rimelig dårlig til css... jeg kan ikke sige at den skal ligge under tekstens højde, da teksten jo varierer fra side til side...

Hvis du bruger position absolute, vil den blive der hvor du har placeret den, ligemeget hvad. du skal ændre absolute til relative, så vil den positionere boksen i forhold til boks den er inde i eller der ligger ovenover fx.

min-height betyder at den minimum er 500px høj fx, men hvis indholdet fylder mere end 500px, vil den automatisk udvide sig. Så den kan du sagtens bruge.

min-height skal de bruges på content eller bottom???

Content boksen.

Så burde content boksen passe med din tekst. Som det er nu, fortsætter din tekst bare udover boksen, fordi den har en fast height formentlig. Du skal stadig skille dig af med position absolute, da det ikke vil fjerne problemt med din bottom formentlig. Den vil stadig beholde sin position, så som nævnt tidligere, skal du skifte til relative eller intet måske, afhængig af hvordan det er bygget op.

kan du komme med et forslag til hvordan jeg laver det, for jeg kan ikke selv lige regne den ud...

Har du prøvet at ændre din style på content boksen?
Du har formentlig en height: x antal px;

Hvis du skifter den ud med min-height: x antal px;

Gør det en forskel?

Hvis du i første omgang så også fjerner position: absolute og retningsbestemmelserne (left og top fx) fra din bottom div, hvad sker der så?

Dit link virker ikke mere, så kan ikke give et konkret eksempel fra din kode af...

brug dette login:

user1
test123

Har du ikke fået det løst?
Boksen er udvidet så din tekst er inde i den nu?

det kan man sige.... det virker (næsten) i IE, men i Google Crome virker det absolut ikke...
og min footer står dårligt, og content boxen er for høj...

kan du ikke komme med et lille kode eksempel, det ville hjælpe mig rigtig meget.. :)

Du skal stoppe med at bruge procenter, når du placerer dine divs, som f.eks. bottom: -87%; det er nok der dit største problem ligger.

Hvis du kan komme med en tegning af, hvordan du godt vil have dit layout til at se ud, kan jeg godt hjælpe dig med at bikse noget sammen. Lige nu er det ret svært at gennemskue synes jeg.

jeg har lavet en lidt hurtig tegning, her:
http://nordbasensraadgivning.computerware.dk/layout-1.png

http://finks.dk/design.html

Tusind tak! Jeg glemte at sige at jeg nok har brug for at have runde hjørner... Kan det lade sig gøre??? -og, kan siden udvide sig efter hvor lang teksten er???

Du kan godt lave runde hjørner, det kræver dog en lille ombygning. Medmindre du vil lave det med CSS3 (men så er din side kun understøttet af de nyeste browsere).

Her er med CSS2 (lavet med billeder): http://finks.dk/design2.html

Når vi har fået det hele på plads, kan jeg fortælle hvad jeg har gjort og hvorfor ;)

jeg kunne også godt tænke mig runde kanter på boksene indene inden i...

... og ja .. siden kan udvide sig alt efter hvor meget tekst der er i din content div ;)

ja, det tjekkede jeg lige... det ser godt ud!

Skal der være runde hjørner på alle bokse og hvilken farve skal det være? Husk at de runde hjørner er lavet af billede, så du kan ikke bare ændre 'background-color' og få den farve i hjørnerne ;)

Jeg (min ven) vil gerne have runde hjørner... Den skal ligne meget denne http://www.nordbasen.dk/ , bare anden teskt og så skal den være blå, ikke baby-blå eller skrig-blå... Du kan bare selv vælge... eller kigge på http://nordbasensraadgivning.computerware.dk/index.php?page=test -den er sat virkelig dårligt op...

Det de har gjort er at bygge deres design ind i deres baggrundsbillede i en div (http://www.nordbasen.dk/files/templates/1/top.jpg?nocache=30112010113), hvilket jo sparer dem for en masse besvær. Men det tager længere tid at loade siden + at hvis man har en højere opløsning end 1999px, vil man se en solid rød farve i kanterne, hvilket ikke er særlig kønt.

Er det meningen at du skal bruge undervandsbilledet på din side ?

Med hensyn til runde hjørner inde i din container, kan du bare gøre som du allerede har gjort, og lave alle boksene som billeder og bruge dem som baggrundsbillede i dine divs ;)

#wrapper    holder alt "inden for rammen" og centrerer dit indhold (margin: auto;)

.topCorner    er bare en div i toppen, der har et baggrundsbillede (http://finks.dk/corners.png [930px x 12px]). Men dette billede indeholder både de øverste hjørner og de nederste. Derfor er højden sat til 6px dvs. halvdelen af billedet, hvor det er den øverste del af billedet der bliver vist (background-position: top;)
.bottomCorner    er samme princip som '.topCorner' bare "omvendt" - så det er samme baggrunds billede, og samme højde. Det eneste der er lavet om er faktisk at det nu er det nederste af billedet der bliver vist i din div (background-position: bottom;)

.container    indeholder alt dit indhold, og har et indsæt på 6px i hver side (padding-right: 6px; padding-left: 6px;) og har en hvid baggrundsfarve.

#left        indeholder alle dine divs til venstre og er venstrestillet (float: left;)
#right        indeholder alle dine divs til højre og er højrestillet (float: left;)

#left div    har en effekt på alle din divs under #left diven, og sætter derfor en bredde på 660px på alle de divs.
#right div    er det samme, bare med en anden bredde og gælder for alle de divs under #right diven.

#banner        skal indeholde din flash fil. Jeg foreslår at lave en div inde i #banner, med samme højde og bredde, og med et baggrunds(png)billede der viser alt uden for
kaneterne (altså skal den være transperant hvor man skal kunne se flashfilen. Det eneste på billedet skal være den blå ramme, og det hvide udenfor). Denne div skal også have
en minus margin på højden af dir #banner og have z-index: 100; så diven ligger over din flash fil.

#menu        skal bare have den blå linje/boks som baggrundsbillede. Den har et mellemrum på 5px i toppen og bunden (margin-bottom: 5px; margin-top: 5px;)

#content    indeholder al din tekst der hører til menuerne

#box        skal nok have et andet navn som fx #info. Den skal have samme højde som dit banner og skal have de to bokse for "Mål for ophold" som baggrundsbillede.

#line        kan slås sammen med #content2 og blive til #news. Den skal have den lille linje/boks for "nyheder" som baggrundsbillede og skal sættes til background-repeat: no-repeat; background-position: top; og margin-top 5px; så der kommer det lille mellemrum mellem fra #box/#info.

#bottom        er vigtig, det er den der gør at container og dermed den hvide baggrund går ned til bunden af dit indhold (clear: both)

#footer        ligger udenfor #wrapper og skal derfor sættes til margin:auto; så den bliver sat i midten a siden. Den har fået margin: 2px; så der er lidt mellemrum mellem din footer og alt det andet.

Du spørger bare hvis du har spørgsmål - det er nok ikke den bedste forklaring ;)

Du har været til RIGTIG STOR hjælp! Tusind tak! jeg prøvet lige at sætte det hele op, og så vender jeg tilbage med point... :)

Mange tak! det ser FEDT ud!... Jeg har et sidste spm... Hvordan får man et billede til at tilpasse sig siden, så hvis ens skærm er 1100x1400 så er billedet den størrelse, og hvis ens skærm er 900x1500 så der billedet også det... det er selvfølgelig et ekstra spm, så hvis du ikke vil svare, går det ikke ud over dine point... :)

Altså ligesom på denne side: http://www.ringvemedia.com/ ?

ja, præcis!

Her er en side der kommer med flere gode muligheder: http://css-tricks.com/perfect-full-page-background-image/