SitePoint Sponsor |
|
User Tag List
Results 1 to 7 of 7
-
Feb 11, 2004, 23:12 #1
a way to put multiple images in a div?
Is there a way to put multiple images in a div? like topleft, topright, bottomleft, bottom right? or for each image does it need its own div? this should be quick questions hopefully!
-
Feb 11, 2004, 23:52 #2
- Join Date
- May 2003
- Posts
- 1,843
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>untitled</title> <style type="text/css"> #container { position: relative; width: 150px; height: 150px; } img.TL { position: absolute; left: 0; top: 0; } img.TR { position: absolute; left: 75px; top: 0; } img.BL { position: absolute; left: 0; top: 75px; } img.BR { position: absolute; left: 75px; top: 75px; } </style> </head> <body> <div id="container"> <img class="TL" src="http://www.sitepoint.com/forums/images/spavatars/087.gif" /> <img class="TR" src="http://www.sitepoint.com/forums/images/spavatars/087.gif" /> <img class="BL" src="http://www.sitepoint.com/forums/images/spavatars/087.gif" /> <img class="BR" src="http://www.sitepoint.com/forums/images/spavatars/087.gif" /> </div> </body> </html>
http://css.maxdesign.com.au/floatutorial/::: certified wild guess :::
-
Feb 12, 2004, 00:26 #3
Thanks,
i tryed that but the absolute positioning knocked the images out to stick to the corners of my browser, not the corners of the div. so... what am i doing wrong here?
-
Feb 12, 2004, 02:05 #4
- Join Date
- Apr 2002
- Location
- Salford / Manchester / UK
- Posts
- 4,838
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Dionysis
Code:position: relative;
the reason being that absolute positioning always refers to the closest parent element which has been positioned. without it, it will always end up referring to the window/document as a whole.re·dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]
WaSP Accessibility Task Force Member
splintered.co.uk | photographia.co.uk | redux.deviantart.com
-
Feb 12, 2004, 02:37 #5
sweet i'll give it a try
-
Feb 12, 2004, 02:51 #6
How can i absolutely position things with respect to the bottom of a DIV. i tryed just
Code:bottom:0;
-
Feb 12, 2004, 04:43 #7
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
bottom should work as long as you have specified a position absolute as well.
e.g.
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> #outer { width:300px; height:300px; position:relative; background:#ffffCC; } #inner { position:absolute; bottom:0; left:100px; width:100px; height:25px; background:red; } </style> </head> <body> <div id="outer"> <div id="inner">inner</div> </div> </body> </html>
Bookmarks