Bakgrundsbild och Css

Tråden skapades och har fått 15 svar. Det senaste inlägget skrevs .
1
  • Medlem
  • Uddevalla
  • 2006-02-14 16:03

Hej!
Nån vänlig själ som kan förbarma sig över mitt bekymmer? Jag har tagit initativet att försöka koda "på riktigt" i en texteditor för att nån gång lära mig, men det var banne mig inte lätt och nu har jag redan kört fast.

Hur positionerar man ut en bakgrundsbild exakt där man vill ha den!?!
se http://www.westinhouse.net/8stepbystep.html för att förstå vad jag menar (det är stripen)
Så här vill jag att det ska se ut (fast den ska gå från kant till kant på webläsaren) men koden ska jag nu skriva om för att rensa lite och för att det ska se bättre ut i explorern och då tänkte jag lägga stripen som en bakgrundsbild istället och det övriga i en wrap, men bilden vill bara upprepa sig trots no-repeat och jag får den inte att flytta sig från övre marginalen heller!

Blir det så här eftersom jag har margin:0 på bodyn, och hur gör man isåfall?

se http://www.westinhouse.net/3finaldoc.html
Bilden har gjort ett litet skutt och nu har jag inte lagt någon positionering på men även om jag gör det så får jag den inte att flytta bort från överkanten.

  • Medlem
  • 2006-02-14 16:52

no-repeat funkar bara i IE på pc vad jag vet.. dvs, kollar jag din site här så ser jag bara bakgrunden en gång

positionen tror jag du sätter genom att sätta position: absolute; i css
sen tror jag du anger position-left: 50px; samt position-top: 100px; typ för att sätta var den ska vara.. men jag minns inte exakt, gör sällan det.. sök på "absolute positioning +css" på google..

sånthär gör man dock enklast med tabeller tycker jag.. sidan du visar hade jag tex gjort såhär,

en tablecell överst som täcker hela längden
en tablecell till som innehåller bildstripen
en tablecell med vänsternavigationen | en tablecell med texten

ungefär..

  • Medlem
  • Gävle
  • 2006-02-14 17:15
Ursprungligen av kenny:

no-repeat funkar bara i IE på pc vad jag vet..

Det stämmer inte.

  • Medlem
  • Karlstad
  • 2006-02-14 17:00

Jag fattar inte hur det är du vill ha det.

  • Medlem
  • Uddevalla
  • 2006-02-14 18:24
Ursprungligen av Danne V:

Jag fattar inte hur det är du vill ha det.

Så som det ser ut i första länken (och som den ser ut i Safari och Firefox kanske jag ska tillägga).
Men koden är...tja, start/övningskod som jag tränade med och den har brister, vissa saker som inte blir bra i Explorern, inte heller har jag fått bilden att gå ända ut i webläsarens högra fönsterkant.
Så jag tänkte därför skriva om strukturen, börja om från början.

Därför undrar jag om det går att lägga stripen som bakgrundsbild istället i css-koden (det är det jag påbörjat i den andra länken men som inte blev som jag tänkt), och lägga den där jag vill ha den? Eller finns det bättre sätt?

Kenny: Tack för svaret, men jag vill nog helst inte använda tabeller. Har gjort det förut men tänkte avvika från det helt denna gången, då de inte borde behövas.

  • Medlem
  • Karlstad
  • 2006-02-14 19:16

Lägg till:
body { margin: 0px; padding: 0px;}
så ska det väl bli bättre

  • Medlem
  • Uddevalla
  • 2006-02-15 08:10

Tack!!
Det gjorde faktiskt susen för "utfallet" och det gav mig dessutom några idéer.
...men, i explorern på mac så blev det nu så att vänster kolumn inte ligger i samma höjd som den högra. Hur kommer det sig, när jag har samma padding på båda och de ligger dessutom i en gemensam container som har ett värde?
http://www.westinhouse.net/9stepbystep.html

Explorer på Mac är typ Jordens sämsta webläsare när de gäller att tolka kåd, den är till och med värre än IE på win.

  • Oregistrerad
  • 2006-02-15 09:06

Testa med följande sträng i regeln för body-taggen:

background: url(topbanner.jpg) no-repeat 0px 24px;

Ändra värdet 24 för att styra avståndet till överkant på läsaren. Värdet 0 styr avståndet till vänster kant på läsaren.

  • Medlem
  • Karlstad
  • 2006-02-15 09:34
Ursprungligen av Znoken:

Testa med följande sträng i regeln för body-taggen:

background: url(topbanner.jpg) no-repeat 0px 24px;

Ändra värdet 24 för att styra avståndet till överkant på läsaren. Värdet 0 styr avståndet till vänster kant på läsaren.

Varning: Långt från alla webbläsare accepterar exakt placering av bakgrundsbilder. De flesta klara bara top/bottom/middle och left/right/center.

  • Oregistrerad
  • 2006-02-15 10:00
Ursprungligen av Danne V:

Varning: Långt från alla webbläsare accepterar exakt placering av bakgrundsbilder. De flesta klara bara top/bottom/middle och left/right/center.

Vilka läsare accepterar det inte?

Har börjat använda det mer och mer i mina senaste projekt och det fungerar utan problem.
Då testar jag i följande läsare:

Firefox
Safari
IE/Mac
IE/Win
Camino
Opera

Obs! Jag frågar av intresse ifall jag är helt ute och cyklar och inte av dryghet

  • Medlem
  • Karlstad
  • 2006-02-15 09:32

Jodå, divvarna ligger på samma höjd i IE/Mac.

Men det är INNEHÅLLET i dom som har olika marginal uppåt, och varje webbläsare har sin egen "default" för det (som med allt annat) om du inte specificerar något annat.

IE/Mac har alltså automatiskt ganska stor marginal uppåt för h2-taggen i den högra divven, men mindre marginal för <ul> och/eller <li> i den vänstra. Fixa det med CSS.

Tips: När du jobbar med divvar, så ge dom allihopa olika bakgrundsfärger. Då ser du i webbläsarna hur dom ligger. När sidan är klar tar du naturligtvis bort färgerna.
Men glöm inte att ge bakgrundsfärg där du vill ha det! Vill du ha sidan vit, så sätt vit i <body>. Även om du har dina webbläsare satta att ha vitt som default, som finns det faktiskt folk som medvetet eller omedvetet har nån annan färg. och då ser din sida ut som hundkräks.

  • Medlem
  • Gävle
  • 2006-02-15 10:23

Får instämma med Znoken här, mig veterligen fungerar placering av bakgrundsbilder angiven i pixlar eller procent åtminstonde i IE/Win, Safari samt Firefox (som jag brukar testa i).

  • Medlem
  • Karlstad
  • 2006-02-15 10:39

Znoken, Jogin;

Upptäckte detta till min besvikelse förra våren. Minns inte vilken webbläsare det var, och kanske det är fixat nu. Men kolla i alla möjliga läsare på både Mac och Win. Glöm inte att IE/Win 5 och 6 är ganska olika, så testa olika versioner också.

Men varning är utfärdad. Testa får ni göra själva, era lata drular.

  • Medlem
  • Gävle
  • 2006-02-15 18:03

Jag anser att IE 5.x inte existerar.

  • Medlem
  • Uddevalla
  • 2006-02-17 12:54

Tackar för de tips jag hittills fått! Det har dessutom lett till några fler idéer och vidare i tänket på hur det fungerar. (Har inte lagt upp nåt nytt exempel att titta på än). Är helt nybörjare på det här (css och xhtml iaf) och valde ett så enkelt utseende jag bara kunde för att slippa problem men men...

Znoken: background: url(topbanner.jpg) no-repeat 0px 24px; fick jag inte att fungera! Jag skrev som du skrivit och bakgrunden upprepade sig bara över hela sidan. Jag kan ha gjort helt fel...vet faktiskt inte.

Danne V: Fattade knappt vad du pratade om innan jag faktiskt gjorde som du sa...färglade divvarna...då gick det upp ett ljus! Tackar för det...sen får vi se vad jag förstörde istället, men just nu är jag glad för att det ser bra ut på min dator iallafall!

Jogin: Är snudd på beredd att hålla med dig, men tyvärr så är just den här sidan också ett praktexempel på nåt som kommer att användas av 99% pc-användare med en IE från järnåldern.

1
Bevaka tråden