SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Addict longroad's Avatar
    Join Date
    Mar 2004
    Location
    Australia
    Posts
    236
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help position 3 images in a row

    I made a navbar with a drop shadow (so they're not in fashion, but it looks good with the rest of the site.)
    As it is with drop shadows, the left end side is different from the right. So I've cut the left and right into seperate images, and have a middle image which will be repeated.
    I cant get all 3 images to line up, even though in dreamweaver they are displayed together on the same line, when viewed in a browser, all 3 images are on seperate lines.
    I've attached the files which will make it easier to see what Im talking about.
    here is the html:
    Code:
    <div id="navredleft"></div>
    <div id="navredmiddle"></div>
    <div id="navredright"></div>
    and the CSS:
    Code:
    #navredleft
    {
    	width: 18px;
    	height: 37px;
    	background-image: url(navredleft.jpg);
    	background-repeat: none;
    	position: relative;
    	left: 13%;}
    
    #navredmiddle
    {
    	width: 60%;
    	height: 37px;
    	background-image: url(navredmiddle.jpg);
    	background-repeat: repeat-x;
    	position: relative;
    	left: 14%;}
    
    #navredright
    {
    	width: 23px;
    	height: 37px;
    	background-image: url(navredright.jpg);
    	background-repeat: none;
    	position: relative;
    	left: 73%;}
    I really would appreciate anyone who could spare a few minutes to dip their hand in this one.
    Thanks
    Attached Images Attached Images

  2. #2
    SitePoint Zealot jfitz's Avatar
    Join Date
    Mar 2004
    Location
    Lovely Leipzig
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #navredleft
    {
    width: 18px;
    height: 37px;
    background: url(navredleft.jpg);
    background-repeat: none;
    float: left;}
    
    #navredmiddle
    {
    width:60%;
    height: 37px;
    background: url(navredmiddle.jpg);
    background-repeat: repeat-x;
    position: relative;
    float:left;
    }
    
    #navredright
    {
    width: 23px;
    height: 37px;
    background: url(navredright.jpg);
    background-repeat: none;
    float:left;
    }
    
    </style>
    </head>
    <body>
    
    	<div id="navredleft"></div>
    	<div id="navredmiddle"></div>
    	<div id="navredright"></div>
    
    </body>
    </html>
    This will work but you'll have to put it into a containing div to centralise it again. Your problem then will be that the central div will be 60% of 60% but it should be possible to tweak it back into a suitable width. Unfortunately that'll give you a layout that will break at a certain point if the window is made too small. Sorry, nothing better comes to mind at the moment.

    John

  3. #3
    SitePoint Zealot jfitz's Avatar
    Join Date
    Mar 2004
    Location
    Lovely Leipzig
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok this seems to work better.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #navredleft
    {
    width: 18px;
    height: 37px;
    background: url(navredleft.jpg);
    background-repeat: none;
    position:absolute;
    z-index:2;
    }
    
    #navredmiddle
    {
    width:100%;
    height: 37px;
    background: url(navredmiddle.jpg) repeat-x;
    position:absolute;
    z-index:1;
    }
    
    #navredright
    {
    width: 23px;
    height: 37px;
    background: url(navredright.jpg);
    background-repeat: none;
    position:absolute;
    right:0;
    z-index:3;
    }
    
    #navbar
    {
    width:60%;
    position:relative;
    left:20%;
    
    }
    </style>
    </head>
    <body>
    
    <div id="navbar">
    	<div id="navredleft"></div>
    	<div id="navredmiddle"></div>
    	<div id="navredright"></div>
    </div>
    </body>
    </html>

  4. #4
    SitePoint Addict longroad's Avatar
    Join Date
    Mar 2004
    Location
    Australia
    Posts
    236
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I will give it a go.


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
  •