Hur positionera en bild med CSS?

Tråden skapades och har fått 18 svar. Det senaste inlägget skrevs .
1
  • Medlem
  • International user
  • 2007-04-26 15:55

Hur får jag bilden nedan att lägga sig längst ner till höger i "box1"?

#box1 {
width: 300px;
height: 300px;
}

<div id="box1">
<img src="bild.jpg" width="20" height="60">
</div>

Vad händer om du lägger till lite padding:
#box1 {
padding: 240px 0 0 280px:
width: 300px;
height: 300px;
}

  • Medlem
  • International user
  • 2007-04-26 16:44

Det hände ingenting med layouten i webläsarna (S,FF,IE).

Senast redigerat 2007-04-26 16:54

Asch, jag råkade skriva ett kolon(:) istället för ett semikolon(;) i slutet på padding-raden. Men jag gör nåt annat fel för bilden lägger sig mitt i bilden istäellet för i hörnet....

  • Medlem
  • International user
  • 2007-04-26 17:01

Jag såg felet med kolonet innan jag lade in koden.

Nu fick jag ihop det. Men nu lade jag paddingen i en ny regel. I en klass 'img1'. Och mest för att jag är van att ha html och css separerade lade jag dom i var sin fil:
(jo osså målade jag rutan röd för att bara vet var den håller hus)
Html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>boxen</title>
	<meta name="generator" content="TextMate http://macromates.com/">
	<meta name="author" content="david">
	<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>


	<div id="box1">
	<img src="bild.jpg" class="img1" />
	</div></body>
</html>     

CSS

#box1 {
	width: 300px;
	height: 300px;
	background-color: red;
} 
.img1{
	padding: 240px 0 0 280px;
	height: 60px;
	width:20px;
}
  • Medlem
  • Kristianopel
  • 2007-04-26 19:18

Är det inte fulkod?

säkert. jag lär mig aldrig... eller jallafall väldigt långsamt. Få se lite finkod då.

  • Medlem
  • Kristianopel
  • 2007-04-26 19:42
#box1 {
	background: url(bilder/bild.png) no-repeat right bottom;
	display: block;
	min-height: 300px;
	max-width: 300px;
}

Fast då blir det ju som en backgrundsbild förståss

  • Medlem
  • International user
  • 2007-04-26 19:46

Ska man verkligen inte kunna "tala om för BILDEN" var den ska placeras, det verkar ju underligt. Det borde ju rimligen gå att säga till BILDEN att "placera dig längst ner till höger". Jag kan ju ha andra objekt i boxen som ska placeras på annat ställe.

Ursprungligen av Wire:

Ska man verkligen inte kunna "tala om för BILDEN" var den ska placeras, det verkar ju underligt. Det borde ju rimligen gå att säga till BILDEN att "placera dig längst ner till höger".

Man kan ju med float-regeln jallafall säga åt bilden att lägga sig åt höger eller vänster. Och när jag tänker efter kan man nog fixera bilden till nedre delen av den div bilden ligger i men det funkar feståss inte i explorer 6 och tidigare.

Nä, man kan inte fixera bilden i nederkant relativt den div den ligger i utan bara relativt själva browserfönstret. Men det kan ju vara piffigt om man vill ha en sidfot som alltid ligger i botten på fönstret.

Senast redigerat 2007-04-26 20:03
  • Medlem
  • International user
  • 2007-04-26 23:50

Jag hittade inget annat alternativ till att få det att fungera än att ta hjälp av en tabell (urrrk..)

#box1 {
width: 300px;
height: 300px;
border: 1px solid #FF0000;
}

<div id="box1">



<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"><tr><td valign="bottom">
<img src="bild.jpg" width="20" height="60" style="float: right;">
</td></tr></table>
</div>

Jävligt surt ... tills någon löser det med CSS.

Nu börjar man ju bli smått nyfiken på sammanhanget. Vad ska du fylla rutan med mer utöver bilden tessempelt?

Senast redigerat 2007-04-27 00:22
  • Medlem
  • International user
  • 2007-04-27 10:17
Ursprungligen av David Slättne:

Nu börjar man ju bli smått nyfiken på sammanhanget. Vad ska du fylla rutan med mer utöver bilden tessempelt?

Vi har en websida för övervakning som består av flera 300x300-boxar. Olika produktionssystem raporterar sedan till "sin" box på sidan. De boxar jag hanterar ska nu ha lite grafik. Så de ska fyllas med text och grafik.

Ursprungligen av Wire:

Vi har en websida för övervakning som består av flera 300x300-boxar. Olika produktionssystem raporterar sedan till "sin" box på sidan. De boxar jag hanterar ska nu ha lite grafik. Så de ska fyllas med text och grafik.

Ja då blir det ju en smula opraktiskt med mina ymniga padding'ar. I synnerhet om där ska samsa många olika grafiska objekt.
Om de grafiska objekten är lika stora skulle man kanske kunna rada upp dom efter varandra genom att float'a*. Fast då blir det ju luckor i slutet om man inte har nog med objekt att stoppa i. På så sätt skulle det vara smidigt att möblera om objekten.

*Obs! Oprövat tankespån

  • Medlem
  • Neverland
  • 2007-04-27 00:11

Detta funkar för mig (men om det validerar eller är snyggt vet jag inte).

#box1 {
position: relative;
width: 300px;
height: 300px;
background-color: #888888;
}

#bild1 {
position: absolute;
right: 0px;
bottom: 0px;
width: 20px;
height: 60px;
}

<div id="box1">
	<div id="bild1">
	<img src="bild.jpg" width="20" height="60">
	</div>
</div>

  • Medlem
  • International user
  • 2007-04-27 00:25

Vilken filur du är...

Jag provade faktiskt med

<img src="bild.jpg" width="20" height="60" style="position: absolute; right: 0px; bottom: 0px;">

med då placerades bilden längst ner till höger i webläsarens fönster. Men tillägget du gjorde med position: relative; i boxens spec fixade till det. Jag fattar inte detta, kan någon förklare.

Tack filuren!!

  • Medlem
  • Kristianopel
  • 2007-04-27 05:56

Absolute sätter positionen utifrån fönstret. Relative tar hänsyn till överliggande objekts position. typ
Klart man gör som filur!

  • Medlem
  • Gävle
  • 2008-02-12 00:44

Ser att det är en gammal tråd, men...

<div id="box"><img src="din_bild.jpg"
style="margin-right: 30px; margin-top: 30px"></div>

Experimentera med margin right och margin top tills du får bilden där du vill ha den (margin right om du vill ha bilden till vänster i boxen, margin left om du vill ha bilden till höger)

1
Bevaka tråden