Problem med margins i CSS-mallen

Antar att du vill ha en bild som är fäst vid den nedre delen av kanten. Jag skulle pröva något i följande stil. Bilden kommer lägga sig längst ner och vara centerad.

* {
	margin: 0;
	padding: 0;
}

.bild {
	margin: 0 auto;
	position: aboslute;
	bottom: 0;
	left: 0;
	right: 0;
}

Du får nog ge lite mer info om läget innan vi kan ge någon konkret lösning. Generellt så kan man inte få ett objekt att sträcka ut sig genom att ha negativ marginal på två kanter, marginalen märker man ju bara av om det är något inom den så att säga. Det du behöver göra är att sätta storleken till 100% av fönsterstorleken, om det är det du vill. Glöm inte att man inte kan få bakgrunder att bli större eller mindre än den faktiska bildstorleken.

(BTW, du behöver inte ha negativ margin för att slippa den vita kanten, det räcker med att ha padding: 0; )

.mp3, nej - så enkelt är det inte.. viewport har ingen höjddefintion så det finns ingenting i koden du skrivit som placerar bilden i botten på viewport. Och botten på viewport är bara ena delen av en sådan lösning - botten på dokumentet om dokumentet är högre än viewport är nästa problem. Jag har några inkarnationer av sådan kod t ex på:
http://www.comvex.se/
Om någon är intresserad kan jag fördjupa mig i det hela.

Men mattias - du kan kolla in lösningen på comvex om det passar dig - den består dels av en metod för att få underkanten att förhålla sig fast till underkanten av viewport, dels av en kombination av metoder för att få underkanten på bakgrunderna att kunna sträcka ut sig förbi viewportens höjd då innehållet kräver det. Antagligen går koden att förenkla/generalisera, men var vaksam på hur det beter sig i olika webläsare, speciellt IE6 vs Firefox. Tänk också på att Doctype declaration är avgörande och förändrar mycket när det gäller hur elementens höjd i förhållande till viewporten tolkas.

Du kan inte bifoga dokumentet du jobbar på?

Grejen är att det inte finns en "underkant" på en webbsida. Det existerar helt enkelt inte. Däremot kan du fixa det på 1000 olika sätt ändå, genom att "mecka". Att lägga 100% på html och body, sedan ett 100% div, och sedan lägga en bg eller bild mot undersidan av divet går t.ex. Men man bör veta vad man håller på med innan man börjar "mecka", för annars kommer man bara få det att fungera i en webbläsare typ.

En en gång rekommenderar jag www.w3.org så att du kan se vad man KAN göra enligt konstens regler.

Nja - just detta problem är jag inte säker att du speciellt lätt hittar info om hos w3c, men det finns andra ställen. Webbsidan jag först länkade till - comvex.se - har lösningen, men den sitter i en hyffsat komplex css layout och det kanske inte var så lätt att utröna vad som gör vad. Jag kan försöka återkomma med någon mer länk eller lite kod.

Under tiden - egentligen behöver du lösa två problem - dels vill du se till att du har full höjd på innehållet i webbläsarfönstret även då innehållet inte räcker hela vägen ner - så att bilden kommer hela vägen ner ändå. MEN - när innehållet är högre än fönstret vill du att bakgrundsbilden följer med även den biten - annars klipps bakgrundsbilden när du scrollar för att läsa text som inte är synlig i fönstrets fulla höjd.

Okej - här har du kod som fixar det du frågar efter:

http://webbutvecklarna.se/code_samples/full_height_doc_and_viewport/

Tack, ninjamac! Det där kommer jag också att ha nytta av!