Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Div's/Css Layout Help

    First off Id like to explain that I'm fairly new to working with div's and css I have a good understanding of how things work though. I was looking to see if someone can give me an example of how to write the code required to produce this simple example using div's with css. Its just 4 images lined up hortizonally and by clicking the image or bottom text it takes you to the linked page. The total width is like 720px. I view there source and see there using a table with <td>'s but I want to produce something similar using div's with css. I would appricated any and all help!

    Brian
    page example is: http://www.justjen.com/shop/rhinestone-clothing.htm
    Last edited by rocket3609; 10-27-2009 at 12:12 AM. Reason: made a mistake

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello rocket3609,
    Check this out for a start -
    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 14px "Comic Sans MS";
    	background: #FC6;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #container {
    	width: 720px;
    	margin: 30px auto;
    	padding: 10px 20px 10px 0;
    	background: #999;
    	text-align: center;
    	overflow: auto;
    }
    .subnavItem {
    	width: 160px;
    	float: left;
    	margin: 0 0 0 20px;
    	text-decoration: none;
    }
    </style>
    </head>
    <body>
    <div id="container">
    <a href="http://www.justjen.com/shop/bridal.htm" class="subnavItem"><img src="http://www.justjen.com/image/bride-clothing.jpg" alt="Bridal" /> Bridal</a>
    <a href="http://www.justjen.com/shop/custom-tshirts.htm" class="subnavItem"><img src="http://www.justjen.com/graphic/custom-clothing.jpg" alt="Custom" /> Custom</a>
    <a href="http://www.justjen.com/shop/womens-tshirts.htm" class="subnavItem"><img src="http://www.justjen.com/image/womens-clothing.jpg" alt="Womens" /> Womens</a>
    <a href="http://www.justjen.com/shop/girls-tshirts.htm" class="subnavItem"><img src="http://www.justjen.com/image/girls-clothing.jpg" alt="Girls" /> Girls</a>
    <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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