SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    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&#37;;
    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>
    Why can I get the right-hand 'grass' image to sit on the bottom? And is there a simple way of doing this?

  2. #2
    [Biped] LJK's Avatar
    Join Date
    Jun 2004
    Location
    In My Jammies
    Posts
    761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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&#37; 100%;}
    Where % are distance from the left and top of the div's boundries.

    Good luck,
    El
    F-Fox 2.0 :: WIN :: el design :: US

  3. #3
    SitePoint Addict
    Join Date
    Apr 2007
    Posts
    265
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by LJK View Post
    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%;}
    Where % are distance from the left and top of the div's boundries.

    Good luck,
    El
    Thanks. Couldn't get that working to start with, that was until I tried applying a fixed with to the body - works in all resolutions from 800x600 upwards.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •