webForumDet fria alternativet

Bild position

HTML & CSS

15 svar · 658 visningar · startad av Maacus

Medlem sedan jan. 2007108 inlägg
Frågan#1

Hur får jag en bild att lägga sig i botten av en div tag med CSS?
Har försökt olika saker men får inte rätt på det.

Följande kod har jag för div taggen.

#text_box {
	margin: 40px 36px 0px 36px;
	height: 260px;	
}

Och det här till bilden som jag vill postionera längst ner i div taggen.

<a href="omoss.php"><img src="images/tillbaka.gif" alt="tillbaka" width="69" height="22" border="0"></a>
Medlem sedan juni 20019 519 inlägg
#2
#text_box {
	margin: 40px 36px 0px 36px;
	height: 260px;	
	Positon: Relative;
}
#text_box img {
	Position:Absolute;
	bottom:0px;
}
Medlem sedan jan. 2007108 inlägg
#3

jag har flera bilder i div taggen men det är enbart den här bilden som ska ligga i botten.

Medlem sedan juni 20019 519 inlägg
#4
<a href="omoss.php"><img src="images/tillbaka.gif" alt="tillbaka"[b] id="backIcon"[/b]></a>
img#backIcon {
	Position:Absolute;
	bottom:0px;
        height:22px;
        Width:69px;
        border:None;
}
Medlem sedan jan. 2007108 inlägg
#5

tillbaka bilden hamnar utanför sidan. Sidan ligger centerad i mitten men bilden lägger sig i botten av webläsaren.

Medlem sedan juni 20019 519 inlägg
#6

du måste köra position:relative på "sidan"... eller rutan där du har din länk:

<div id="myBox"><a href.....</a></div>

#myBox { position:relative;} så kommer absolute gå efter myBox istället för body...

edit

#text_box {
	margin: 40px 36px 0px 36px;
	height: 260px;	
	Positon: Relative;
}
Medlem sedan aug. 20068 090 inlägg
#7

Som voigtann1 skriver. Du måste göra den omslutande containerm "relative" för att sedan kunna placera något "absolute" inuti.

Men en sak till: voigtann1 har använt stora bokstäver här och där. Jag är inte hundra och kanske har helt fel, men det kan kanske vara så att en del webbläsare inte gillar det, beroende på vilken DTD du använder.

Liten varning bara, alltså.

Medlem sedan juni 20019 519 inlägg
#8

Stora bokstäver på exempelvis #TextBox måste skrivas: <div id="TextBox"> kommer aldrig att träffa på id="textbox"

Medlem sedan aug. 20068 090 inlägg
#9

voigtann1 skrev:

Stora bokstäver på exempelvis #TextBox måste skrivas: <div id="TextBox"> kommer aldrig att träffa på id="textbox"

Nej, givetvis inte. Ett id eller en klass ska självklart vara identisk överallt. :-)
Jag tänkte närmast på t.ex.

Positon: Relative;

somkanske borde vara

positon: relative;

Sorry om jag var oklar....

Medlem sedan juni 20019 519 inlägg
#10

har aldrig sett någon läsare som tolkar det på olika sätt... ;)

Medlem sedan dec. 20025 483 inlägg
#11

Just "positon" tror jag inte är vad som önskas i detta fall ;)

Medlem sedan aug. 20068 090 inlägg
#12

Peter S skrev:

Just "positon" tror jag inte är vad som önskas i detta fall ;)

LOL!!! :D
Jäklar i det. Det märkte inte jag. Hahaha...

Alltså, till trådskaparen: det har skrivits "positon" flera gånger i CSS-exemplen. Ska givetvis vara "position". :)

Medlem sedan aug. 20068 090 inlägg
#13

voigtann1 skrev:

har aldrig sett någon läsare som tolkar det på olika sätt... ;)

Inte jag heller. Men har å andra sidan aldrig någonsin sett attributen skrivna med stora både små och stora bokstäver heller. Tänkte att det kanske, kanske eventuellt finns något avlägset skäl till det. Eller så spelar det ingen roll alls.... :)

Medlem sedan jan. 2007108 inlägg
#14

Tack alla för hjälpen. Detta sparade mig mycket tid.
Slutgiltiga CSS:en blev följande.

#text_box {
	margin: 40px 36px 0px 36px;
	height: 260px;	
	position: relative;
}

img#backIcon {
	position: absolute;
	bottom:0px;
        height:22px;
        width:69px;
        border: none;
	bottom: 10px;
}
Medlem sedan juni 2003771 inlägg
#15

Du har både bottom:0px och bottom:10px för din img#backIcon vilket är onödigt.
I ditt fall så kommer den att visas 10 px från nederkanten.
Vill du ha den allra längst ner så ta bort bottom:10px.

Medlem sedan jan. 2007108 inlägg
#16

Maacus skrev:

Tack alla för hjälpen. Detta sparade mig mycket tid.
Slutgiltiga CSS:en blev följande.

#text_box {
	margin: 40px 36px 0px 36px;
	height: 260px;	
	position: relative;
}

img#backIcon {
	position: absolute
        height:22px;
        width:69px;
        border: none;
	bottom: 10px;
}

Tack hade råkat få dubbla bottom. Rätt ska vara bottom: 10px;

267 ms totalt · 4 externa anrop · v20260731065814-full.a51de22e
124 ms — deklarationer (db)
0 ms — hämta statistik (cache)
132 ms — hämta tråd, inlägg och bilagor (db)
132 ms — ändringar (db)