November 2, 200817 yr I have a .psd image that I am basing my site design on (so any part of the image can be "separated" on to its own layer and thus > into the design separately) I have previously only used tables to design sites so I'm a total newbie using CSS/div to design. With the little I've learned about using CSS/div I know I have to use and position several div elements by using a stylesheet- and I have haphazardly made a start in the example you see: Live Example: http://s205480013.onlinehome.us/KM_Test/ How do I make this design a "working one" (meaning the main/white content area is able to expand and contract vertically)
November 2, 200817 yr Hey there, welcome to WDF First of all, congrats on making the move to css based layouts. 2 good sites for learning from are w3schools and htmldog. If you can post your initial psd layout, I'm sure that one of us will be able to give you a basic equivalent using css.
November 3, 200817 yr Author Hey there, welcome to WDF First of all, congrats on making the move to css based layouts. 2 good sites for learning from are w3schools and htmldog. If you can post your initial psd layout, I'm sure that one of us will be able to give you a basic equivalent using css. it would be awesome to get some tips on this, I attached the orig psd. design_2.zip
November 3, 200817 yr Hi there. I've made a quick page up for you. It's not an exact copy but will hopefully get you started in the right direction. A few things to note: If you want to use transparent pngs, you'll need to use a png fix for IE6. Have a search on these forums as it's been discussed a few times. As this is just an example, I've only used your logo and nav background images. For the rest, I've used solid colours instead of your images. You can see a live example here. If you have any questions, just ask The html and css are below: HTML <!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=iso-8859-1" /> <title>Bob Mane</title> <link rel="stylesheet" type="text/css" href="index.css" /> </head> <body> <div id="wrapper"><!--the main wrapper div--> <img id="logo" src="images/logo.png" alt="logo" /><!--this is positioned absolutely relative to the #wrapper--> <ul id="top_nav"> <li><a href="#">Store</a></li> <li><a href="#">Log In</a></li> </ul> <ul id="secondary_nav"> <li><a href="#">Products</a></li> <li id="company"><a href="#">Company</a></li> <li><a href="#">Blog</a></li> </ul> <div id="content"> <p id="crumbs"><a href="#">Home</a>><a href="#">Products</a>><a href="#">DVD</a></p> <div id="maincontent"> <ul> <li><a href="#">Products</a></li> <li><a href="#">Products</a></li> <li><a href="#">Products</a></li> <li><a href="#">Products</a></li> <li><a href="#">Products</a></li> </ul> <img id="flash" src="images/flash.jpg" alt="flash" /> </div> <div id="accordion"> <ul> <li><a href="#">Accordion Panel Overview</a></li> <li><a href="#">Accordion Panel Features</a></li> <li><a href="#">Creating An Accordion Panel Component</a></li> </ul> </div> </div> </div> </body> </html> CSS /**************css reset*****************/ * { margin:0; padding:0; } /********basic page settings*********/ body { font-size:62.5%; font-family: "Gill Sans MT",Garamond,Geneva,sans-serif; background:#fff url(images/back.jpg) top center no-repeat; text-align:center; } /*********main wrapper**********/ #wrapper { width:770px; margin:30px auto 20px auto; text-align:left; padding-top:90px; position:relative;/*this centres the #wrapper div horizontally and gives it enough top padding to accommodate the logo*/ } #logo { position:absolute; top:0; left:0;/*this places the logo at the top left of the #wrapper div*/ } ul { list-style:none; } a { text-decoration:none; } a:hover { text-decoration:underline; } /**********top navigation****************/ #top_nav { text-align:right; padding-right:20px; height:82px; background: url(images/nav.png) top center no-repeat; } #top_nav li { display:inline; padding:5px; } #top_nav li a { color:#ccc; font-size:1.4em; } /**************secondary navigation***************/ #secondary_nav { background:#ccc; padding:3px 10px 3px 0; text-transform:uppercase; text-align:right; } #secondary_nav li { display:inline; margin:5px; } #secondary_nav li#company { margin-right:200px; } #secondary_nav li a { color:#000; font-weight:bold; font-size:1.4em; } /**************breadcrumbs*****************/ #crumbs { margin-bottom:20px; padding-left:10px; } #crumbs a { color:#000; font-size:1.2em; padding:5px; text-transform:uppercase; font-weight:bold; } /***************main content block*************/ #content { background:#fff; padding-top:30px; padding-bottom:20px; } #maincontent { width:600px; margin:0 auto; padding:2px; border:3px solid #aaa; position:relative; } #maincontent ul { height:400px; width:180px; background:#333; } #maincontent ul li a { color:#ccc; display:block; padding-left:20px; height:30px; line-height:30px; font-size:1.4em; } #maincontent ul li a:hover { color:#000; background:#fff; text-decoration:none; } #flash { position:absolute; top:1px; right:9px;/*this would be replaced with your flash object*/ } /******************accordion section*************/ #accordion { width:550px; margin:15px auto; background:#333; padding:15px; } #accordion ul li { background:#ccc; padding-left:20px; } #accordion ul li a { color:#333; display:block; height:30px; line-height:30px; font-size:1.4em; }
Create an account or sign in to comment