SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2001
    Location
    UK
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Positioning problem

    Hi,

    I'm currently learning how to use css instead of tables, and have had a hack around trying to get this to work. I'm trying to display an image, with a coloured box underneath and then the same again underneath those with a different image. This works but doesn't seem right. Thanks if anyone can help.

    Code HTML4Strict:
    <!-- rightbar -->
    <div id="rightbar">
        <div class="inner">
          <img src="images/search.gif" width="84" height="16"/>
        </div>
        <div class="redbox">
        </div>
        <div class="inner">
          <img src="images/explore.gif" width="84" height="16"//>
        </div>
        <div class="blackbox">
        </div>
    </div>
    <!-- //rightbar -->

    Code CSS:
    #rightbar {
      margin: 20px 0 0 0;
      padding: 0;
      width: 160px;
      float:right;
    }
    #rightbar .inner {
     float:right;
     margin-bottom: 100px;
    }
    #rightbar .redbox {
      background-color:#9C0000;
      margin: 16px 0 0 0;
      height: 80px;
    }
    #rightbar .blackbox {
      background-color:#333333;
      margin: 36px 0 0 0;
      height: 80px;
    }

  2. #2
    SitePoint Zealot
    Join Date
    Dec 2005
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not really understanding what you mean mate!

    I dont think you really need to float anything as each element you require to be beneath the last?

    Are you looking for soemthing like this or not?
    HTML 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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    </head>
    <Style>
    #rightbar {
      padding: 0;
      width: 160px;
    }
    #rightbar .inner {
    }
    
    #rightbar .redbox {
      background-color:#9C0000;
      height: 80px;
    }
    #rightbar .blackbox {
      background-color:#333333;
      height: 80px;
    }
    </Style>
    
    <body>
    	<!-- rightbar -->
    <div id="rightbar">
        <div class="inner">
          <img src="images/search.gif" width="84" height="16"/>
        </div>
        <div class="redbox">
        </div>
        <div class="inner">
          <img src="images/explore.gif" width="84" height="16"//>
        </div>
        <div class="blackbox">
        </div>
    </div>
    <!-- //rightbar -->
    </body>
    </html>

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2001
    Location
    UK
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry, it wasn't very clear. Here's a screenshot...



    This is how I want it to look, I just don't think I've done it the right way!

  4. #4
    SitePoint Zealot
    Join Date
    Dec 2005
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think thats a reasonable way to solve your problem (you can clean the css up a bit though!)

    I added container around each element so you can control the whole item as an element ( good for padding etc if you wish to space them apart).

    Because when you float an item it gets removed from the document flow, (here we float the image to get it to the right) its container "inner" is used to mimic the images height so the coloured box doesnt flow up behind the image.

    hope that helps,
    dave!


    HTML 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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    </head>
    <Style>
    #rightbar {
      padding: 0;
      width: 160px;
    }
    
    #rightbar .container { margin:10px 0 0 0;}
    #rightbar .inner{height:16px;}
    
    #rightbar .inner img {
    float:right
    }
    
    #rightbar .redbox {
      background-color:#9C0000;
      height: 80px;
    }
    #rightbar .blackbox {
      background-color:#333333;
      height: 80px;
    }
    
    
    </Style>
    
    <body>
    	<!-- rightbar -->
    <div id="rightbar">
    	<div class="container">
    		<div class="inner">
    			<img src="images/search.gif" width="84" height="16"/>
    		</div>
    		<div class="redbox">
    		</div>
    	</div>
    	<div class="container">
    		<div class="inner">
    		  	<img src="images/explore.gif" width="84" height="16"//>
    		</div>
    		<div class="blackbox">
    		</div>
    	</div>
    </div>
    <!-- //rightbar -->
    </body>
    </html>

  5. #5
    SitePoint Zealot
    Join Date
    Nov 2001
    Location
    UK
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Dave, that's much better. It was the container part that I couldn't figure out. Cheers.

  6. #6
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Personally I'd simplify the HTML quite a bit from what you've got there, no need for a few of those divs or the image as it can be applied better through CSS. It's a heading as well so should be between <hx> tags.

    I've used <h2> in this example as you should also have an <h1> as your page title.

    I've also assumed that you'll have some text within the boxes so have adjusted the padding on this to fit in nicely.

    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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {
        padding: 0; margin: 0;    
    }
    body {
        font-family: verdana, arial, helvetica, sans-serif;
        font-size: 75&#37;;
        padding: 10px;
    }
    #rightbar {
        width: 160px;
    }
    #rightbar .container { 
        margin-top: 10px;
    }
    #rightbar .container p {
        padding: 10px;
        color: #FFF;    
    }
    #search {
      background-color:#9C0000;
      height: 100px;    
    }
    #search h2 {
        background-color: #FFF;
        background-image: url(images/search.gif);
        background-position: right;
        background-repeat: no-repeat;
    }
    #search h2 span {
        margin-left: 2000px;    
    }
    #explore {
      background-color: #333;
      height: 100px;    
    }
    #explore h2 {
        background-color: #FFF;
        background-image: url(images/explore.gif);
        background-position: right;
        background-repeat: no-repeat;
    }
    #explore h2 span {
        margin-left: 2000px;    
    }
    </style>
    </head>
    <body>
    <div id="rightbar">
        <div id="search" class="container">
            <h2><span>Search</span></h2>
            <p>Here's some text</p>
        </div>
        <div id="explore" class="container">
            <h2><span>Explore</span></h2>
            <p>Here's some text</p>
        </div>
    </div>
    </body>
    </html>

  7. #7
    SitePoint Zealot
    Join Date
    Nov 2001
    Location
    UK
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that. I'm guessing then it's best to keep the HTML to a minimum, even if it means more CSS?

  8. #8
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd always try and keep the HTML to a minimum where possible. Also keep in mind that you don't have to wrap everything in <div>'s to style an element.

    For example, there's no need to wrap the <img> with a div called inner as the img can just be targeted directly.

    It's a common mistake to wrap images and lists in a div for positioning instead of applying the css directly to the <img> or <ul>/<ol>. If you can't target it from it's parent then you can always apply a class or ID to the image/list directly.

    Sometimes a complex layout means that you do end up needing to nest a few div's but I'd always try and use minimal HTML markup by styling tags directly.

    Hope that makes sense.

  9. #9
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Since I don't know what images/explore.gif looks like, I would drop it from csswiz's code.

    Here is a cleaner version, and fully accessible way
    Code CSS:
    .box {
    	height: 80px;
    	width: 160px;
    	margin-bottom: 1em;
    }
    .red {
    	background-color:#9C0000;
    }
    .black {
    	background-color:#000000;
    }
    .box h2 {
    	margin: 0;
    	padding: 0;
    	background-color:#FFFFFF;
    	text-align: right;
    	font-size:medium;
    	text-transform:uppercase;
    }
    h2.redhead { color: #9C0000; }
    h2.blackhead { color:#000066; }

    and your HTML
    HTML Code:
    <div class="box red">
    	<h2 class="redhead">search</h2>
    </div>
    <div class="box black">
    	<h2 class="blackhead">explore</h2>
    </div>
    Ryan B | My Blog | Twitter


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
  •