Denna delen av 99 uppdateras inte längre utan har arkiverats inför framtiden som ett museum.
Här kan du läsa mer om varför.
Mac-nyheter hittar du på Macradion.com och forumet hittar du via Applebubblan.

Hur positionera en bild med CSS?

Tråden skapades och har fått 18 svar. Det senaste inlägget skrevs .
1
Skriv svar
#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>
Anmäl Ändra Svara
#2

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

Anmäl Ändra Svara
#3
  • 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 Svara
#4

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 Svara
#5
  • Medlem ●
  • International user
  • 2007-04-26 17:01

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

Anmäl Ändra Svara
#6

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 Svara
#7
  • Medlem ●
  • Orranäs
  • 2007-04-26 19:18

Är det inte fulkod?

Anmäl Ändra Svara
#8

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

Anmäl Ändra Svara
#9
  • 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 Svara
#10
  • 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 Svara
#11
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 Svara
#12
  • 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 Svara
#13

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 Svara
#14
  • 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 Svara
#15
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.

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 Svara
#16
  • 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 Svara
#17
  • 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 Svara
#18
  • 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 Svara
#19
  • 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)

Anmäl Ändra Svara
1
Bevaka tråden
Nytt i forumet
Debatterade nyheter
Senaste nytt
2 Hur ser ditt julpynt ut hemma?
0 3 ljusa tips för att hålla inbrottstjuvarna borta – använd smart belysning!
12 Slutet på något gammalt - början på något nytt
5 Rykte: Apple väntas lansera en uppdaterad 27" iMac i början av 2022
22 99mac blir Macradion på en helt ny plattform
1 Macradion: Vi släpper lös kraften tillsammans
0 Apple backar på den nya designen av Safari i macOS Monterey
24 Apple släpper macOS Monterey den 25 oktober
0 HomePod mini kommer i fler färger
91 Apple presenterar MacBook Pro, M1 Pro och M1 Max
4 Apple presenterar tredje generationens AirPods
2 Så här ser du Apples event ikväll
1 Apple Watch Series 7 - är det värt att uppgradera?
0 Macradion: Unleash the MF appstore
7 Detta tror vi att Apple visar upp på eventet
1 Apple förlänger sitt serviceprogram för AirPods Pro
0 Rykte: MacBook Pro har samma leverantör av miniLED-paneler som iPad Pro
3 Apple bjuder in till event den 18 oktober
1 BaseLynx: Modulär laddstation utan gränser
1 Tile håller koll på allt från plånbok till nycklar men saknar en nyckelfunktion
0 Apple överklagar domen för betalning genom tredjepartsutvecklare i App Store
Copyright © 2024. Allt innehåll tillhör Svenska Tekniknyheter AB. Citering är tillåten om källan anges. Vi reserverar oss för eventuella informationsfel.
Om 99, RSS, Kontakta oss, Feedback, Trivselregler, Teknisk information och cookies