bobrovMedlem sedan maj 200833 inlägg Hej. Har inte sysslat med css, men tycker jag brukar få koll på grejer ganska fort ändå. Byggde en testsida innan och lyckades riktigt bra, men den gången hade jag bakgrundsfärg och lade in bilder i olika div-taggar med mera.
Nu på den nya sidan vill jag ha lite gradient overlay på bakgrunden så jag skapade en bild i ps. 500 px hög och 5 px bred. Tänkte slänga in den som bakgrundsbild och repetera den i x-led och sedan lägga samma bakgrundsfärg som matchar i botten.
Började med att skriva det enklaste trodde jag, men här har jag fastnat med en gång. Det ser bra ut i Opera. (Jippie...)
I Firefox så visar sig inte bakgrundsbilden. Men om man lägger in element i bakgrunden tex text då visar sig bakgrundsbilden så länge som det finns text framför men inte på hela sidan som sig borde.
I Explorer kan jag inte ens kolla sidan om jag inte döper om den till .html Varför kan jag inte se xhtml i Explorer? Det som kommer upp är en dialogruta som frågar om jag vill spara eller öppna filen, väljer jag öppna så öppnar den i Firefox. (??!!).
Kan nån hjälpa mig med dessa problem...varför fungerar det inte i Firefox som det borde och varför i hela friden kan jag inte öppna i Explorer?
Här är xhtmlkoden:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>kuling</title>
<link rel="Stylesheet" type="text/css" href="index.css" />
</head>
<body>
<span>texttexttexttexttexttext</span>
</body>
</html>
Här är CSSkoden:
body
{
background-image: url('background_grey.png');
margin: 0;
}
Sökvägen måste fungera eftersom det fungerar i Opera och även till viss del i Firefox (men långt ifrån tillfredställande).
Jag har även slängt upp filerna på http://www.ilcalcio.se/test/index.xhtml om det hjälper för att kolla.
Tacksam för svar. /John
yadorMedlem sedan mars 2004455 inlägg Tror inte något finns som heter.xhtml, prova byta ut mot .html
headbugMedlem sedan sep. 2006867 inlägg Välkommen till wF!
Precis som yador säger så används inte filändelsen xhtml, man använder htm eller html, eller för all del asp, jsp, php etc om man har något serverside språk med i matchen.
Att det inte blir som du tänkt dig är på grund av att vad som menas med body renderas olika i olika browsrar. Det du troligen vill är att fylla viewporten vilket nödvändigtvis inte är samma sak som body. Det du kan göra då är att tvinga body att hela tiden vara 100% av viewporten genom att sätta height: 100%; i din css-fil.
Sen använder du DOCTYPEN xhtml 1.0 strict som ställer väldigt höga krav på att du kodar korrekt, jag skulle föreslå att du istället väljer xhtml 1.0 transitional, den är lite snällare.
Lycka till och återkom gärna om det är några oklarheter!
/HB
bobrovMedlem sedan maj 200833 inlägg tack
Tack så mycket. Mitt lilla snedsteg med att döpa filen till .xhtml lyckades opera att klara och firefox att spöka till...när jag nu bytt till .html så fungerar det.
Blev nyfiken dock. Det här med viewporten. Jag testade med att sätta
body
{
background-image: url('../images/background_grey.png');
margin: 0;
padding: 0;
height: 20%;
}
Men den visas ändå i hela fönstret. Kan man verkligen laborera med höjden på bodyn? Testade med pixelmått också.
Säg att jag skulle vilja bakgrunden på 50% av höjden och hela bredden.
Eftersom det inte fungerade med att ändra i bodyn så testade jag en div istället.
.page
{
background-image: url('../images/background_grey.png');
margin: 0;
height: 50%;
padding: 0;
}
Fungerar inte. Det blir bara bakgrund där det finns text i div-taggen men den repeteras i alla fall hela vägen i x-led.
Om jag byter till tex height: 200px; då fungerar det. Dock kan man inte få div-taggen att börja ända upp i hörnet man får en liten vit ram runt i browsen. Försökte med margin: 0; padding: 0; i både bodyn och i div-taggen.
Mina tre frågor:
1. Går det att ändra höjden i body-taggen? Eller måste man använda sig av en div-tagg om man inte vill ha bakgrunden på hela sidan?
2. Så fall. Varför fungerar det inte att ändra height till procentvärde i en div-tagg? Det fungerar bra att ändra width till procent men height funkar bara om man sätter till pixlar.
3. Om man vill använda sig av en div-tagg hur får man den att starta ända uppe i hörnet av browsen? Har testat margin:0 och paddin: 0. (Vad är padding egentligen?)
(En tanke som slog mig nu när jag skrivit frågorna. Är height ett värde som inte ska gå att sätta till procent? Om man tänker så går det ju inte att definiera höjden på en sida eftersom den är oändligt lång med scrollen. Width fungerar däremot med procent men det kanske är för man förutsätter att folk försöker bygga sidor där man ska slippa scrolla i sidled och därför kan man bestämma ett exakt värde på bredden från början.)
1. sätt body till 100% i höjd
2. Jag kollade din background_grey.png det har en "fad" färg ser det ut som. Du kan i din body tagg sätta att bakgrunds bilden skall repeteras x eller y leds. i ditt fall något liknande:
body { background: url('http://web.comhem.se/~u55097044/test/background_grey.png') repeat-x #575757; height:100%;}
att "nolla" alla läsares margin och padding brukar
* {margin:0;padding:0}
fungera
Margin är "innan" elementet dvs luften mellan elementen och Padding är luften inne i elementet:
<div style="margin:30px;padding:80px;border:1px solid #000;">hej</div>
<div style="margin:30px;padding:80px;border:1px solid #000;">hej</div>
.page height baseras på den ytan page har att jobba med. XHTML doctypen säger (om jag inte missförstå det) att den inte har en höjd på 100%.
bobrovMedlem sedan maj 200833 inlägg Alltså jag har nu fått jättebra svar och löst mitt huvudsakliga problem (som kanske inte var så svårt i själva verket) men jag ska fortsätta tjata lite till =).
Height i bodyn har ju ingen funktion?
Det spelar ingen roll om jag sätter den till 100% eller 50% eller nåt annat. Det gör ju ingen verkan.
Det gör ingen skillnad i en div-tag heller, endast pixel-värde ändrar utseendet.
Kan nån förklara på dagis-nivå var jag har cyklat vilse här.
Tror jag fattade padding nu =).
Att ändra det föregående elementets padding är som att ändra det efterkommande elementets margin med andra ord?
<div style="padding: 10px;">
<div></div>
</div>
är detsamma som:
<div>
<div style="margin: 10px;">
</div>
</div>
Stå ut lite till...snälla :)
height i body (beroende på vilken doctype du kör) kommer göra skillnad. Ge kod eller filen du använder dig av.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<style type="text/css">
<!--
body { background: url('http://web.comhem.se/~u55097044/test/background_grey.png') repeat-x #575757 top left; height:100%;}
//-->
</style>
</head>
<body>
lite innehåll.
</body>
</html>
Ger i alla fall det resultat jag tror du var ute efter. (även om du har gjort din PNG transparent så ser den lite annolunda ut i IE mot Firefox).
"Tänket" kan vara rätt. Men det finns ju ändå en anledning padding och margin finns. Marginaler är inget direkt ny term inom tryck / tidning / publicering.
gjorde en snabb googling på padding margin och tycke denna bild förklara det mesta:
http://www.ninetnet.com/websidor/css/margpadd.gif ;)
bobrovMedlem sedan maj 200833 inlägg skulle du kunna visa ett exempel när height gör skillnad. Jag kan inte se något när jag testar height: 100% gentemot när jag har tagit bort det.
attributen top och left i din bodytag där, gör inte heller någon skillnad vare sig de är med eller inte. Jag måste vara blåst..
Jag har height:100% på mitt exempel. Vad ska jag mer testa? Jag förstå inte din fråga.
bobrovMedlem sedan maj 200833 inlägg body { background: url('http://web.comhem.se/\~u55097044/test/background_grey.png') repeat-x #575757 top left; height:100%;}
gentemot
body { background: url('http://web.comhem.se/\~u55097044/test/background_grey.png') repeat-x #575757 top left;}
blir det någon skillnad i din webbläsare?? Inte i min i alla fall...frågan är vad för skillnad du får. Jag ser absolut ingenting.
Vad kör du för DOCTYPE? Ge all HTML kod.
headbugMedlem sedan sep. 2006867 inlägg Jag tror vi försöker lösa två problem samtidigt. Dels hur man får body att fylla viewporten och hur man jobbar med en bakgrundsbild.
Idag går det inte att låta en bakgrundsbild fylla på sådant sätt. Det kommer möjligtvis i CSS 3.0.
Men jag har googlat fram en snygg lösning som du hittar här:
http://webdesign.about.com/od/css3/f/blfaqbgsize.htm
Det funkar nog som du tänkt dig!
bobrovMedlem sedan maj 200833 inlägg jag kopierade ditt exempel rakt av dvs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<style type="text/css">
<!--
body { background:
url('http://web.comhem.se/\~u55097044/test/background_grey.png') repeat-x #575757 top left;
height: 100%;}
//-->
</style>
</head>
<body>
lite innehåll.
</body>
</html>
därifrån tog jag bort och lägger till height. top och left ändrar inte heller något.
headbugMedlem sedan sep. 2006867 inlägg testa
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<style type="text/css">
<!--
body {}
img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
//-->
</style>
</head>
<body>
<img src="http://web.comhem.se/~u55097044/test/background_grey.png" alt="test" id="bg" />
</body>
</html>
bobrovMedlem sedan maj 200833 inlägg japp nu blir det skillnad om man tar bort height respektive width. Men nu ligger inte height i bodytaggen utan som ett attribut hos bilden.
Jag kanske ska ge upp snart, men jag vill ändå fatta vad ni menar =) sorry...
Är det så du vill ha din gradiant bakgrund att sträcka sig ut från topp till botten?
bobrovMedlem sedan maj 200833 inlägg ja det skulle jag gärna vilja. dock är det inte nödvändigt. jag kan ju lösa det lätt med att komplettera med en matchande bakgrundsfärg nere i botten som inte blir gradiant men det gör inget. jag kan ju också skapa en ännu "högre" bild att lägga som bakgrundsbild.
img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
<img src="http://web.comhem.se/\~u55097044/test/background_grey.png" alt="test" id="bg" />
det blev ju ganska meningslöst eftersom bilden inte blir någon bakgrundsbild och därmed tar den ju upp all yta och man får inte plats med något annat.
men allra helst skulle jag vilja förstå vad height-attributet gör för skillnad när det är med i bodytaggen respektive när det inte är med =)
men går det att göra så att gradiant-bilden sträcker sig från topp till botten oavsett hur hög sidan blir?
headbugMedlem sedan sep. 2006867 inlägg
bobrov skrev:
det blev ju ganska meningslöst eftersom bilden inte blir någon bakgrundsbild och därmed tar den ju upp all yta och man får inte plats med något annat.
Läste du länken som jag postade några inlägg tidigare? Där tar dom såklart hand om detta. Följ instruktionerna och häpna över den kluriga och smarta lösningen på alla dina problem :)
tantenMedlem sedan nov. 20051 596 inlägg Inte för att jag vet om du kan ha någon nytta av detta, men någon gång för länge sedan hade vi detta med att stretcha bakgrunder på tapeten här. Kommer inte längre ihåg vem och vad det stod i rubriken.
Texten jag skrev då var för IE6 pch en äldre verson av FF. Hur andra nya webläsare hanterar % i height nu har jag inte kollat, men jag tror inte det har tillkommit något nytt. Kanske i css3. Sparade filen för att se hur det skulle bli i IE7. Inte så bra va? :-)
http://member.webforum.nu/9656/stretch.html
tantenMedlem sedan nov. 20051 596 inlägg Förlåt headbug... Jag läste inte din länk... Såg nu att de hade fått med css3, men hur många webläsare har stöd för det?
