SitePoint Sponsor |
|
User Tag List
Results 1 to 3 of 3
Thread: Positioning Images
-
May 5, 2007, 08:39 #1
- Join Date
- Apr 2007
- Posts
- 265
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Positioning Images
Ok, on a very basic level I'm trying to have an image in the top left corner and one in the bottom right, whatever the screen res, with content in the middle.
This is my code extremely simplified:
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link href="style2.css" rel="stylesheet" type="text/css"> <style type="text/css"> body { background: url('bg2.jpg') gray; padding:0; margin:0; } #grasstop { position:absolute; } #grassbottom { position:absolute; bottom:0px; right:0px; } #content { position:relative; height:800px; border: 2px solid black; background:white; top:35px; margin-left:28%; margin-right:28%; margin-bottom:12%; padding:50px; } </style> </head> <body> <img id="grasstop" src="grass.gif"> <img id="grassbottom" src="grass2.gif"> <div id="content">Lots of content here,Lots of content here,Lots of content here,Lots of content here, Lots of content here,Lots of content here,Lots of content here,Lots of content here,Lots of content here, Lots of content here,Lots of content here,Lots of content here,Lots of content here,Lots of content here, Lots of content here,Lots of content here,Lots of content here,Lots of content here,Lots of content here, </div> </body> </html>
-
May 5, 2007, 20:21 #2
Hi -
If it's to go in the bottom-right of #content, why not just make it a bkgnd. image?
Code:div#content{ background:transparent url(imgs/grass.gif) no-repeat 100% 100%;}
Good luck,
ElF-Fox 2.0 :: WIN :: el design :: US
-
May 6, 2007, 06:16 #3
- Join Date
- Apr 2007
- Posts
- 265
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Bookmarks