Hem
Forum
Donera
Webbutik

Översikt
Nya inlägg
Obesvarade trådar
Sök i forum

Mjukvara och tjänster
Programmering och utveckling

Hur positionera en bild med CSS?

Tråden skapades 2007-04-26 och har fått 18 svar. Det senaste inlägget skrevs 2008-02-12.

Skriv svar

2007-04-26 15:55

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

Anmäl Ändra Gilla Svara

2007-04-26 16:36

David Slättne
Medlem ●
Åmål
2007-04-26 16:36

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

Anmäl Ändra Gilla Svara

2007-04-26 16:44

Wire
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

Anmäl Ändra Gilla Svara

2007-04-26 16:58

David Slättne
Medlem ●
Åmål
2007-04-26 16:58

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

Anmäl Ändra Gilla Svara

2007-04-26 17:01

Wire
Medlem ●
International user
2007-04-26 17:01

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

Anmäl Ändra Gilla Svara

2007-04-26 17:09

David Slättne
Medlem ●
Åmål
2007-04-26 17:09

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

Anmäl Ändra Gilla Svara

2007-04-26 19:18

tobbehj
Medlem ●
Orranäs
2007-04-26 19:18

Är det inte fulkod?

Anmäl Ändra Gilla Svara

2007-04-26 19:20

David Slättne
Medlem ●
Åmål
2007-04-26 19:20

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

Anmäl Ändra Gilla Svara

2007-04-26 19:42

tobbehj
Medlem ●
Orranäs
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

Anmäl Ändra Gilla Svara

2007-04-26 19:46

#10

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

Anmäl Ändra Gilla Svara

2007-04-26 19:50

#11

David Slättne
Medlem ●
Åmål
2007-04-26 19:50

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

Gå till inlägget

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

Anmäl Ändra Gilla Svara

2007-04-26 23:50

#12

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

Anmäl Ändra Gilla Svara

2007-04-27 00:00

#13

David Slättne
Medlem ●
Åmål
2007-04-27 00:00

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

Anmäl Ändra Gilla Svara

2007-04-27 10:17

#14

Wire
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?

Gå till inlägget

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.

Anmäl Ändra Gilla Svara

2007-04-27 10:55

#15

David Slättne
Medlem ●
Åmål
2007-04-27 10:55

Ursprungligen av Wire:

Gå till inlägget

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

Anmäl Ändra Gilla Svara

2007-04-27 00:11

#16

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

Anmäl Ändra Gilla Svara

2007-04-27 00:25

#17

Wire
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!!

Anmäl Ändra Gilla Svara

2007-04-27 05:56

#18

tobbehj
Medlem ●
Orranäs
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!

Anmäl Ändra Gilla Svara

2008-02-12 00:44

#19

Tjeah
Medlem ●
Gävle
2008-02-12 00:44

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

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)