Problem med margins i CSS-mallen

Tråden skapades och har fått 12 svar. Det senaste inlägget skrevs .
1

Hej,

Jag har ett motiv på min hemsida som jag vill ska gå ända upp kant i kant så att säga, för att lösa det har jag skrivit:

html
{
margin: -40px 0 0 0;
}

i CSS-mallen och det funkar fint. Men hur i hela friden får jag motivet att gå kant i kant i nederdelen av skärmen? Har provat alla möjliga grejer nu!
Och det hjälper inte att skriva tex:

html
{
margin: -40px 0 -40px 0;
}

Det händer inte ett smack i nederkant. Kan någon hjälpa mig med detta?
Tack på förhand

  • Medlem
  • Stockholm
  • 2007-11-02 01:42

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; )

bakgrunden är dynamisk

..kanske ska tillägga oxå att bakgrunden som jag vill ska sträcka sig uppifrån och ända ner är dynamisk (jag har lagt till en tiling-funktion i CSS-koden så att bilden växer ju mer text och innehåll jag puttar in)

Jag förstår att en statisk bild inte kan ligga kant i kant - det beror ju på skärmens storlek. Men en "tilad" bild borde ju gå att sträcka uppifrån och ner i all oändlighet.

.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.

Oj oj, jag blev inte mycket klokare av era inlägg, jag tror inte riktigt ni förstår vad jag menar. Men jag kan inte klandra er, jag förklarar säkert lite kasst.

Så himla retligt för jag har nog hittat 5 totalt olika sätt att få kanten ända upp, men 0 sätt att få kanten ända ner:tveksam: Får försöka trixa vidare eller helt enkelt byta idé på utseendet. Tack ändå.

Du kan inte bifoga dokumentet du jobbar på?

  • Medlem
  • Göteborg
  • 2007-11-03 01:03

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.

ninjamac - tyvärr existerar inte längre dokumentet i sin ursprungliga form, men tack ändå:) Jag är rädd att det blir fler frågor framöver ändå - har alldeles nyligen återupptagit det här med html igen så jag känner mig lite ringrostig.

desh - jag ska ta och kolla lite mer på w3.org, tack tack:)

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/

Ok, jag ska ta och kika på det! Tack

Ursprungligen av ninjamac:

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!

1
Bevaka tråden