Kidrandom

I've actually decided to for Uniform as I wasn't able to fully customise Zebra transform the way I wanted! Here's the link: http://uniformjs.com/ Thanks again.

Thanks for your suggestions guys. In the end i went with this: http://plugins.jquery.com/zebra-transform/ It was fairly easy to style up as well!

Hi all, How do I recreate this form element design in HMTL and CSS? Plugin recommendations are welcome. If possible a cross browser solution would be great. Thanks

Awesome, thanks. Will give these a go!

Hi, I want to get my three main page elements to line up side by side without using the float property so I can assign a height to them. Two of the div's, m1 and m2, have a side border to divide the page in to columns, but because I have to float them to line up side by side the borders don't stretch the full length of the page as I'm unable to assign a height to them. Is there any way around this? Also, the container div has a min-height set to 100% so that it fills the whole length of the page beyond the scroller, which works to some extent however there is a small gap at the very bottom. Why is this happening? Here's a link to the dummy page: www.sumbop.com Here's the relative css: html, body { margin : 0; padding : 0; font-family : arialmt, verdana, sans-serif; src: url('arialmt.ttf'); background-color : #000000; height : 100%; font-size: 14px; } #container { width: 966px; margin-right : auto; margin-left : auto; min-height : 100%; border-left: 3px solid #ffffff; border-right: 3px solid #ffffff; } .clear { clear: both; width: 100%; height: 0; visibility: hidden; } #head { height : 177px; background-color : #FFFFFF; } #logo { width: 500px; height : 150px; /*background-color : #E3E3E3;*/ float: left; } #logo p { padding-left: 41px; padding-top: 56px; font-family : inaimathi, verdana, sans-serif; src: url('inaimathi.ttf'); font-size: 76px; margin: 0; } #info { width: 300px; height : 150px; /*background-color : #EBEBEB;*/ float: right; } /* #menu { width: 1000px; height : 38px; background-color : #D4D4D4; border-bottom: 2px; } */ #links { width: 966px; height : 22px; border-bottom: 1px solid #ffffff; /*background-color: #000000;*/ } #main_content { width: 965px; height : 100%; /* works only if parent container is assigned a height value */ /*background-color : #8C8C8C;*/ color: #000000; } #m_1 { width: 365px; min-height : 100%; /* works only if parent container is assigned a height value */ /*background-color : #B0B0B0;*/ float: left; border-right: 1px solid #ffffff; } #m_2 { width: 345px; height : 100%; /* works only if parent container is assigned a height value */ /*background-color : #2C2;*/ float: left; border-right: 1px solid #ffffff; } #m_3 { width: 252px; height : 100%; /* works only if parent container is assigned a height value */ /*background-color : #C2C2C2;*/ float: left; /*border-right: 1px solid #ffffff;*/ } Thanks

Hey, thanks for the reply! will give this a go.

Hello all, It's been a while! I'm having some issues with positioning some of the elements on a page I'm developing. Firstly for some reason there is a slight margin at the top of my maincontent div element when no margin has been set. I want everything to start right from the top of the page (no gap at the top). Here's a picture of the slight margin on the page that I'm referring to: Secondly the black bar on the page, which I named <div id="flash"> , overlaps the element which precedes it which is <div id="header"> . So I have to set a margin-top to get it in place. How do I set <div id="flash"> so it doesn't overlap the the element before it and starts directly below it. Here's what it looks like when no margin-top is set: I want it to look like this but with no margin-top set: And finally I can't seem to be able to use the margin: auto; property on anything within <div id="maincontent"> and <div id="wrapper"> . I've position them in the middle using margin-left and judging the distance to the middle by eye! Here's my css file: html,body{ padding:0; font-family:arial, verdana, sans-serif; background-color:#ff9600; background-image: url(images/background.gif); background-repeat: repeat-x; } #maincontent { width:985px; margin-right: auto; margin-left: auto; height: 655px; position: relative; background-color: #fac578; } #wrapper { width: 961px; margin-right: auto; margin-left: auto; } /*------------Head------------*/ #header { height: 123px; width: 961px; background-image: url(images/head_back.gif); background-repeat: repeat-x; position: absolute; } #logo { width: 190px; height: 121px; background-image: url(images/logo.png); background-repeat: none; float: left; } #menu { width: 410px; height:121px; float: left; } #navigation li { display:inline; margin:0; padding:0; outline:none; } #navigation { /*Width of left column*/ float: right; margin-top:40px; margin-left: 49px; } #navigation a { float:left; margin:0; padding:0 0 0 0px; text-decoration:none; outline:none; } ul { display: inline; } #bottom_nav { margin-left: 44px; } #info { width: 359px; height: 121px; float: left; color: #5c5956; font-size: 22px; display: block; margin-top: 10px; } #info ul{ list-style: none; } #pad { padding-left: 8px; } #info P:second-line { color: #000; left: 86px; } /*------------Head_end------------*/ #flash { width: 961px; height: 204px; margin-top: 125px; float:left; background-color:#000; } #tabs { width: 961px; height: 321px; margin-top: 5px; float:left; background-color:#000; background-image: url(images/tab_back.gif); background-repeat: repeat-x; } #tabs li { display:inline; margin-right:10px; padding:0; outline:none; } #tab{ list-style: none; margin-top: 25px; margin-left: -4px; } #footer li { display:inline; outline:none; } #footer { margin-left: 341px; margin-top: 6px; outline:none; } a:link,a:visited { text-decoration:none; color:#ffffff; } a img { border: none; } a{ outline:none; } And here's my Html file: <!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" lang="en" xml:lang="en"> <head> <title>Amber Plumbing</title> <link rel="stylesheet" type="text/css" href="stylesheet.css" /> </head> <body> <div id="maincontent"> <div id="wrapper"> <div id="header"> <div id="logo"> </div> <div id="menu"> <div id="navigation"> <ul> <li><a href="index.html"><img src="images/home.png"> </a></li> <li><a href="index.html"><img src="images/domestic.png"> </a></li> <li><a href="index.html"><img src="images/commercial.png"> </a></li> </ul> <div id="bottom_nav"> <ul> <li><a href="index.html"><img src="images/about_us.png"> </a></li> <li><a href="index.html"><img src="images/contact_us.png"> </a></li> </ul> </div> </div> </div> <div id="info"> <ul> <div style="text-indent: 20px; position: relative;"><li>Call now: 0208 000 0000</li></div> <div style="text-indent: 86px; position: relative;"><li> Email now</li> </div> <li>Info@AmberPlumbers.co.uk </li> </ul> </div> </div> <div id="flash"> </div> <div id="tabs"> <div id="tab"> <ul id="nav"> <li><a href="index.html"><img src="images/services.jpg"></a></li> <li><a href="index.html"><img src="images/areas_covered.jpg"></a></li> <li><a href="index.html"><img src="images/guarantee.jpg"></a></li> <li><a href="index.html"><img src="images/prevention.jpg"></a></li> </ul> </div> <div id="footer"> <ul> <li><img src="images/gas_safe.png"></li> <li><img src="images/gas_safe.png"></li> <li><img src="images/gas_safe.png"></li> </ul> </div> </div> </div> </div> </body> Once again I am very grateful for help!

Hey, thanks for the help that solved my problem and awesome app aswell! Cheers

Hey all, I'm having problems with a menu bar on a site I'm working on. For some reason on a certain page I am unable to click on the menu name to get to the corresponding page. I have click above the writing for it to work. Here's a link to the page it does it on: http://xratedsounds.com/mixes.html It seems to behave the way it should do on the other pages. Here's the html the page that I'm having the problems with: <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>X-rated Sounds</title> <link rel="stylesheet" type="text/css" href="stylesheet.css" /> </head> <body> <div id="main_page"> <div id="top"> <div id="logo"> <div id="banner"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/ cabs/flash/swflash.cab#version=6,0,40,0" width="449" height="80" id="mymoviename"> <param name="movie" value="animation/banner.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> <embed src="animation/banner.swf" quality="high" bgcolor="#ffffff" width="449" height="80" name="mymoviename" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> </embed> </object> </div> </div> <div id="nav"> <ul> <li><a href="index.html"> <img src="images/home.png"/> </a></li> <li><a href="images.html"> <img src="images/images.png"/> </a></li> <li><a href="projects.html"> <img src="images/projects.png"/> </a></li> <li><a href="links.html"> <img src="images/links.png"/> </a></li> </ul> </div> </div> <div id="content"> <div id="mid_con_pro"> <div id="over"> <div align="center"><embed src="http://www.datpiff.com/embed/mixtape/m469d094/" quality="high" wmode="transparent" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="470" height="221" allowScriptAccess="always" allowScripting="on"><br><a href="http://www.datpiff.com/Safe-D_DJC_PanCake_Giddy_Grims_Professor_Agg.m71342.html" target="_blank">Download Mixtape</a> | Provided by <a href="http://www.datpiff.com" target="_blank">DatPiff.com</a></div> </div> </div> </div> <div id="bottom"> </div> </div> </body> </html> And css: html,body{ margin:0; padding:0; font-family:arial, verdana, sans-serif; background-color:#000000; height:100%; background-repeat: no-repeat; } a:link,a:visited { text-decoration:none; color:#ffffff; } a img { border: none; } a { outline:none; } #main_page { width:846px; height:900px; margin-right: auto; margin-left: auto; min-height:100%; position:relative; background-image: url(images/logos.png); } #top { width:846px; height:248px; margin-right: auto; margin-left: auto; position:relative; } #logo { width:600px; height:170px; margin-right: auto; margin-left: auto; position:relative; } #banner { width:450px; height:81px; margin:auto; position:relative; background-color:#003000; top: 100px; } #nav { width:600px; height:77px; margin-right: auto; margin-left: auto; position:relative; top: 40px; } #content { width:600px; height:461px; margin-right: auto; margin-left: auto; position:relative; } #mid_con { width:410px; height:350px; margin-right: auto; margin-left: auto; position:relative; top: 70px; left: 30px; font-color: #FFFFFF; overflo: scroll; } #mid_con_pro { width:410px; height:350px; margin-right: auto; margin-left: auto; position:relative; top: 70px; right: 30px; font-color: #FFFFFF; overflo: scroll; top: 135px; } p { color: #ffffff; } h3 { color: #ffffff; font-color: #FFFFFF; } #nav a { float:left; margin:0; padding:0 0 0 0px; text-decoration:none; } #nav { /* width: 547px; height: 35px;*/ left: 65px; bottom: 1px; position: relative; } #nav li { display:inline; margin:0; padding:0; } #left { left: 22px; } Thanks again!

Hello all, I'm trying to find a way of inserting a picture in between two paragraphs just using css but it doesn't seem to be working. Here's a snipet of the code I'm using with the appropriate parts highlighted: <div id="right"> <img src="images/bio_page.png"/> <p> Safe-D is a DJ, producer, promoter, director<br> DJC Music artist, writer, producer, engineer Born west London, grew up<br> in south of England! </p> [b]<div id="pic"> </div>[/b] <p> Been all over the world and need to see a lot more!<br> Was part of a south London grime crew called<br> lock stock, been on various under ground London<br> FM radio stations, (many now shut down)!<br> <br> <a href="mailto:youremailaddress">safe_d@hotmail.com</a> for more details! </p> </div> and here's the css: #right { height: 518px; width: 482px; float: left } #left { height: 518px; width: 289px; float: left; [b]#pic { background-image: url(images/bio_pic.jpg); width: 304px; height: 204px; float: left;[/b] } Here's what I get: I highlighted the area where the picture should be.

Yep thats done it! thanks a lot for your help.

Hello again! I'm having trouble removing an annoying border which appears around my links. For some reason this only happens in Firefox and is fine in other browsers. Can someone tell me where I've gone wrong? Here's the front page html file and the main css file: HTML Front page: <!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" lang="en" xml:lang="en"> <head> <title>Vintage Freak</title> <link rel="stylesheet" type="text/css" href="littlem.css" /> </head> <body> <div id="maincontainer"> <div id="header"> <div id="navigation"> <ul> <li><a href=""><img src="Wire_frame_pics/Vintage_freak_template_03.png"></a> </li> <li><a href=""><img src="Wire_frame_pics/Vintage_freak_template_04.png"></a></li> <li><a href=""><img src="Wire_frame_pics/Vintage_freak_template_05.png"></a></a></li> <li><a href=""><img src="Wire_frame_pics/Vintage_freak_template_07.png"></a></a></li> </ul> </div> </div> <div id="contentwrapper_contact"> <div id="contentwrapper_contact_back"> <div id="maincontent_contact"> </div> </div> <div id="footer"> <table class="table"> <tr> <td></td> <td class="info">Designed by</td> </tr> <tr> <td>2009</td> <td class="info">Nick Ayoola</td> </tr> </table> </div> </div> </div> </body> </html> sdegdm CSS: html,body{ margin:0; padding:0; font-family:arial, verdana, sans-serif; background-color:#000; height:100%; background-image: url(Wire_frame_pics/); background-repeat: no-repeat; } #maincontainer { width:970px; margin-right: auto; margin-left: auto; min-height:100%; position:relative; margin-top: 10px; } /*------------Head------------*/ #topsection{ color:#ffffff; } #logo { background-repeat: no-repeat; } #header { width: 900px; height: 90px; background-image: url(Wire_frame_pics/Vintage_freak_header_top.png); background-repeat: no-repeat; margin-top: 70px; } #navigation li { display:inline; margin:0; padding:0; } #navigation { /*Width of left column*/ float: right; margin-top:25px; margin-right:px; } #navigation a { float:left; margin:0; padding:0 0 0 0px; text-decoration:none; } /*------------Head_end------------*/ /*------------Middle_start------------*/ /*homepage*/ #contentwrapper_contactr{ position: absolute; width:900px; height: 520px; } #contentwrapper_contact_backr{ position: absolute; width:900px; height: 450px; background-image: url(images/Front_1.jpg); background-repeat: no-repeat; } #maincontent_contactr { width: 390px; text-align: justify; float: right; margin-top: 15px; margin-right:60px ; height: 420px; background-repeat: no-repeat; opacity: .90; background-image: url(Wire_frame_pics/homepage_text_box_03.gif); background-repeat: no-repeat; } p { color: #ffffff; padding: 10px; margin-top: 40px; font-size: 13px; white-space: normal; } /*homepage_end*/ /*Contact page*/ #contentwrapper_contact{ position: absolute; width:900px; height: 520px; } #contentwrapper_contact_back{ position: absolute; width:900px; height: 450px; background-image: url(images/right_pos_1.jpg); background-repeat: no-repeat; } #maincontent_contact { width: 390px; float: left; margin-top: 15px; margin-left: 60px; height: 420px; opacity: .90; background-image: url(Wire_frame_pics/contact_text_box_03.gif) } /*Contact page_end*/ /*Gallery page_start*/ #contentwrapper_gallery{ position: absolute; width:900px; height: 520px; } #contentwrapper_gallery_back{ position: absolute; width:900px; height: 450px; background-image: url(images/Center_pos_1.jpg); background-repeat: no-repeat; } #maincontent_gallery { width: 610px; margin-top: 15px; margin-left: auto; margin-right: auto; height: 420px; opacity: .90; background-image: url(Wire_frame_pics/gallery_text_box_03.gif) } img.Thumbs { width: 75px; height: 100px; } #move { margin-top: 210px; } #gall p { padding: 40px; } #gall li { padding: 3px; display: inline; } #gall{ margin-top: 25px; } #parag { margin-left: 25px; } /*Gallery page_end*/ /*------------Middle_end------------*/ } li { list-style-type:none; } /*------------Footer------------*/ #footer{ clear: both; margin-top: 460px; height:50px; float: left; width: 900px; border-style: solid; border-color: #ffffff ; background-color:#000; margin-bottom: 10px; -moz-border-radius: 8px ; -webkit-border-radius: 8px ; } .table{ width:900px; max-width:800px; } /*------------Footer_end------------*/ td.info { text-align: right; } p { margin-right: 2px; margin-left: 2px; } /*------------Script gallery_Start------------*/ #lightbox{ background-color:#eee; padding: 10px; border-bottom: 2px solid #666; border-right: 2px solid #666; } #lightboxDetails{ font-size: 0.8em; padding-top: 0.4em; } #lightboxCaption{ float: left; } #keyboardMsg{ float: right; } #closeButton{ top: 5px; right: 5px; } #lightbox img{ border: none; clear: both;} #overlay img{ border: none; } #overlay{ background-image: url(images/overlay.png); } * html #overlay{ background-color: #333; back\ground-color: transparent; background-image: url(images/blank.gif); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www..com/forum/images/overlay.png", sizingMethod="scale"); } Here's what it looks like in Firefox: Here's safari: Thanks

Awesome! I just had to change the first letter to lower case to match the link in my html file. Thanks for you help!

That seems to have done the trick. Thanks. Now only the css problem to go!

Hello all, I have just put up a dummy site need some help in regards to the style sheet and front page. So here goes. 1. I've uploaded all the files for the website onto the server, but for some reason when I go to the url it seems to have no styles attached to it. It works fine on my computer but not on the server. How do I get my Style sheet to work with my site? 2. When I type in my url address it doesn't go to my frontpage as I want it to. It lists everything in directories and I have to open the front page from a list. How do I set my front page to be the first thing displayed when going to my url? Here's the url addres: http://www.Sumbop.co.uk And here's the front page html file and the main css file: HTML Front page: <!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" lang="en" xml:lang="en"> <head> <title>Vintage Freak</title> <link rel="stylesheet" type="text/css" href="littlem.css" /> </head> <body> <div id="maincontainer"> <div id="header"> <div id="navigation"> <ul> <li><a href=""><img src="Wire_frame_pics/Vintage_freak_template_03.png"></a> </li> <li><a href=""><img src="Wire_frame_pics/Vintage_freak_template_04.png"></a></li> <li><a href=""><img src="Wire_frame_pics/Vintage_freak_template_05.png"></a></a></li> <li><a href=""><img src="Wire_frame_pics/Vintage_freak_template_07.png"></a></a></li> </ul> </div> </div> <div id="contentwrapper_contact"> <div id="contentwrapper_contact_back"> <div id="maincontent_contact"> </div> </div> <div id="footer"> <table class="table"> <tr> <td></td> <td class="info">Designed by</td> </tr> <tr> <td>2009</td> <td class="info">Nick Ayoola</td> </tr> </table> </div> </div> </div> </body> </html> sdegdm CSS: html,body{ margin:0; padding:0; font-family:arial, verdana, sans-serif; background-color:#000; height:100%; background-image: url(Wire_frame_pics/); background-repeat: no-repeat; } #maincontainer { width:970px; margin-right: auto; margin-left: auto; min-height:100%; position:relative; margin-top: 10px; } /*------------Head------------*/ #topsection{ color:#ffffff; } #logo { background-repeat: no-repeat; } #header { width: 900px; height: 90px; background-image: url(Wire_frame_pics/Vintage_freak_header_top.png); background-repeat: no-repeat; margin-top: 70px; } #navigation li { display:inline; margin:0; padding:0; } #navigation { /*Width of left column*/ float: right; margin-top:25px; margin-right:px; } #navigation a { float:left; margin:0; padding:0 0 0 0px; text-decoration:none; } /*------------Head_end------------*/ /*------------Middle_start------------*/ /*homepage*/ #contentwrapper_contactr{ position: absolute; width:900px; height: 520px; } #contentwrapper_contact_backr{ position: absolute; width:900px; height: 450px; background-image: url(images/Front_1.jpg); background-repeat: no-repeat; } #maincontent_contactr { width: 390px; text-align: justify; float: right; margin-top: 15px; margin-right:60px ; height: 420px; background-repeat: no-repeat; opacity: .90; background-image: url(Wire_frame_pics/homepage_text_box_03.gif); background-repeat: no-repeat; } p { color: #ffffff; padding: 10px; margin-top: 40px; font-size: 13px; white-space: normal; } /*homepage_end*/ /*Contact page*/ #contentwrapper_contact{ position: absolute; width:900px; height: 520px; } #contentwrapper_contact_back{ position: absolute; width:900px; height: 450px; background-image: url(images/right_pos_1.jpg); background-repeat: no-repeat; } #maincontent_contact { width: 390px; float: left; margin-top: 15px; margin-left: 60px; height: 420px; opacity: .90; background-image: url(Wire_frame_pics/contact_text_box_03.gif) } /*Contact page_end*/ /*Gallery page_start*/ #contentwrapper_gallery{ position: absolute; width:900px; height: 520px; } #contentwrapper_gallery_back{ position: absolute; width:900px; height: 450px; background-image: url(images/Center_pos_1.jpg); background-repeat: no-repeat; } #maincontent_gallery { width: 610px; margin-top: 15px; margin-left: auto; margin-right: auto; height: 420px; opacity: .90; background-image: url(Wire_frame_pics/gallery_text_box_03.gif) } img.Thumbs { width: 75px; height: 100px; } #move { margin-top: 210px; } #gall p { padding: 40px; } #gall li { padding: 3px; display: inline; } #gall{ margin-top: 25px; } #parag { margin-left: 25px; } /*Gallery page_end*/ /*------------Middle_end------------*/ } li { list-style-type:none; } /*------------Footer------------*/ #footer{ clear: both; margin-top: 460px; height:50px; float: left; width: 900px; border-style: solid; border-color: #ffffff ; background-color:#000; margin-bottom: 10px; -moz-border-radius: 8px ; -webkit-border-radius: 8px ; } .table{ width:900px; max-width:800px; } /*------------Footer_end------------*/ td.info { text-align: right; } p { margin-right: 2px; margin-left: 2px; } /*------------Script gallery_Start------------*/ #lightbox{ background-color:#eee; padding: 10px; border-bottom: 2px solid #666; border-right: 2px solid #666; } #lightboxDetails{ font-size: 0.8em; padding-top: 0.4em; } #lightboxCaption{ float: left; } #keyboardMsg{ float: right; } #closeButton{ top: 5px; right: 5px; } #lightbox img{ border: none; clear: both;} #overlay img{ border: none; } #overlay{ background-image: url(images/overlay.png); } * html #overlay{ background-color: #333; back\ground-color: transparent; background-image: url(images/blank.gif); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www..com/forum/images/overlay.png", sizingMethod="scale"); } Thanks

Thanks HTML: <!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" lang="en" xml:lang="en"> <head> <title>Vintage Freak</title> <link rel="stylesheet" type="text/css" href="littlem.css" /> </head> <body> <div id="maincontainer"> <div id="header"> <div id="navigation"> <ul> <li><a href=""><img src="images/Tab.jpg"></a> </li> <li><a href=""><img src="images/Tab_1.jpg"></a></li> <li><a href=""><img src="images/Tab_2.jpg"></a></a></li> <li><a href=""><img src="images/Tab_3.jpg"></a></a></li> </ul> </div> </div> <div id="contentwrapper_contact"> <div id="maincontent_contact"> </div> </div> <div id="footer"> <table class="table"> <tr> <td></td> <td class="info">Designed by</td> </tr> <tr> <td>2009</td> <td class="info">Nick Ayoola</td> </tr> </table> </div> </div> </div> </body> </html> CSS: html,body{ margin:0; padding:0; font-family:arial, verdana, sans-serif; background-color:#000; height:100%; } #maincontainer { width:970px; margin-right: auto; margin-left: auto; min-height:100%; position:relative; margin-top: 10px; padding: px; } #topsection{ color:#ffffff; } #logo { background-repeat: no-repeat; } #header { width: 900px; height: 126px; background-image: url(images/header.gif); background-repeat: no-repeat; } #navigation li { display:inline; margin:0; padding:0; } #contentwrapper_contact{ width:900px; height: 450px; background-image: url(images/Contact.jpg); background-repeat: no-repeat; } #navigation { /*Width of left column*/ float: right; margin-top:46px; margin-right:20px; } #navigation a { float:left; margin:0; padding:0 0 0 0px; text-decoration:none; } .clear {clear:both; } #maincontent_contact { width: 380px; text-align: justify; border-style: solid; margin: auto; top: 15px; height: 410px; background-color: #000; background-repeat: no-repeat; opacity: .90; -moz-border-radius: 8px; -webkit-border-radius: 8px; } li { list-style-type:none; } #footer{ height:50px; clear: left; width: 900px; border-style: solid; border-color: #ffffff; background-color:#000; margin-bottom: 10px; margin-top: 20px; -moz-border-radius: 8px; -webkit-border-radius: 8px; } #logo { padding-right:100px; } .table{ width:900px; max-width:800px; } td.info { text-align: right; } p { margin-right: 2px; margin-left: 2px; } The <div> tags I'm refering to are "contentwrapper_contact" and "maincontent_contact". Cheers

Thanks HTML: <!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" lang="en" xml:lang="en"> <head> <title>Vintage Freak</title> <link rel="stylesheet" type="text/css" href="littlem.css" /> </head> <body> <div id="maincontainer"> <div id="header"> <div id="navigation"> <ul> <li><a href=""><img src="images/Tab.jpg"></a> </li> <li><a href=""><img src="images/Tab_1.jpg"></a></li> <li><a href=""><img src="images/Tab_2.jpg"></a></a></li> <li><a href=""><img src="images/Tab_3.jpg"></a></a></li> </ul> </div> </div> <div id="contentwrapper_contact"> <div id="maincontent_contact"> </div> </div> <div id="footer"> <table class="table"> <tr> <td></td> <td class="info">Designed by</td> </tr> <tr> <td>2009</td> <td class="info">Nick Ayoola</td> </tr> </table> </div> </div> </div> </body> </html> CSS: html,body{ margin:0; padding:0; font-family:arial, verdana, sans-serif; background-color:#000; height:100%; } #maincontainer { width:970px; margin-right: auto; margin-left: auto; min-height:100%; position:relative; margin-top: 10px; padding: px; } #topsection{ color:#ffffff; } #logo { background-repeat: no-repeat; } #header { width: 900px; height: 126px; background-image: url(images/header.gif); background-repeat: no-repeat; } #navigation li { display:inline; margin:0; padding:0; } #contentwrapper_contact{ width:900px; height: 450px; background-image: url(images/Contact.jpg); background-repeat: no-repeat; } #navigation { /*Width of left column*/ float: right; margin-top:46px; margin-right:20px; } #navigation a { float:left; margin:0; padding:0 0 0 0px; text-decoration:none; } .clear {clear:both; } #maincontent_contact { width: 380px; text-align: justify; border-style: solid; margin: auto; top: 15px; height: 410px; background-color: #000; background-repeat: no-repeat; opacity: .90; -moz-border-radius: 8px; -webkit-border-radius: 8px; } li { list-style-type:none; } #footer{ height:50px; clear: left; width: 900px; border-style: solid; border-color: #ffffff; background-color:#000; margin-bottom: 10px; margin-top: 20px; -moz-border-radius: 8px; -webkit-border-radius: 8px; } #logo { padding-right:100px; } .table{ width:900px; max-width:800px; } td.info { text-align: right; } p { margin-right: 2px; margin-left: 2px; } The <div> tags I'm refering to are "contentwrapper_contact" and "maincontent_contact". Cheers

I'm afraid I don't quite know how to do that. I can however post a jpeg of the page that has the problem if that can help. So here's a picture of what happens when I remove absolute positioning: and here's a picture of what happens when I use margin-top: 150px to try and adjust this.

Hey, Thanks for the help so far guys. But for some reason when I remove the absolute positioning and use the margin properties like so: #maincontent { width: 380px; text-align: justify; border-style: solid; margin: 10px auto; height: 410px; background-color: #000; background-repeat: no-repeat; -moz-border-radius: 8px; -webkit-border-radius: 8px; } The top of the "maincontent" element sticks to the top of the "contentwrapper" and when I try to use the margin-top property to move it down, it applies it to the "contentwrapper" as well so its moving both at the same time Any ideas as to why this is happening?

Hello again, I'm trying to center a <div> element in my webpage but can't seem to get it right. Here's the basic structure: <div id="contentwrapper"> <div id="maincontent"> </div> </div> So that part I want to center is the "maincontent" which contains the writing. Here's the css for both above: #contentwrapper{ width:900px; height: 450px; background-image: url(images/Front_1.jpg); background-repeat: no-repeat; } #maincontent { position:absolute; width: 380px; text-align: justify; border-style: solid; margin-top: 10px; margin-bottom: 10px; height: 410px; background-color: #000; background-repeat: no-repeat; -moz-border-radius: 8px; -webkit-border-radius: 8px; } I've tried using left/right margin set to Auto but with no success. I've also tried using the Left/right properties but you can only use pixels and percentages which still doesn't do it. Am I being stupid here? How do I go about getting the "maincontent" centered? Thanks Nick

Perfect, thanks guys!

Hello everyone, I'm new to the forums so be gentle! I'm designing my first website in photoshop and have a few question to ask about how to go about creating it. So here goes. Once I have all of the elements of my website in place in photoshop, how do I go about exporting each individual part i.e header, body and footer. Also how should I go about creating my menu tabs? shall I export them individually from photoshop. Or make them in illustrator and export them from there? And lastly, do you think its better for me to make the logo in illustrator then export it photoshop? Thanks guys