June 17, 200818 yr I am re-designing my pages slowly. Here is the original, what i would consider... Boring page here and then here is my new test design here. Why is the sidebar not letting em pad it? i want the padding to be about 20 px from the right, and i have tried for hours to no avail.. Here is the css body { margin: 0; background: #43464D; font-family: "Trebuchet MS", Arial, Helvetica; font-size: 13px; color: #58AFFF; } h1 { font-size: 2.0em; color: #FFFFFF; text-align: left; text-transform: capitalize; } h2 { font-size: 1.4em; color: #FFFFFF; } h3 { font-size: 1.2em; color: #FFFFFF; } h1 a{ color: #FFFFFF; } h2 a{ color: #FFFFFF; } h3 a{ color: #FFFFFF; } p, ul, ol { margin-top: 0; line-height: 180%; } ul, ol { } a { text-decoration: none; color: #52AF35; } a:hover { background: none; text-decoration: underline; } /* Header */ #header { width: 940px; height: 200px; margin: 0 auto; background: #48577D; align: center; } /* Logo */ #logo { float: left; } #logo h1 { float: left; margin-left: 40px; padding-top: 85px; text-transform: uppercase; font-size: 2.6em; } #logo p { float: left; margin: 0; padding: 102px 0 0 2px; text-transform: lowercase; letter-spacing: .2em; font: bold 1.2em Arial, Helvetica, sans-serif; } #logo a { background: #48577D; text-decoration: none; color: #FFFFFF; } /* Menub */ #menub { width: 550px; height: 60px; margin: 0 auto; } #menub ul { margin: 0; margin-left: 0px; padding: 16px 0 0 10px; list-style: none; line-height: normal; } #menub li { float: left; } #menub a { margin-right: 3px; padding: 5px 20px; background: #48577D; text-transform: lowercase; text-decoration: none; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 16px; font-weight: normal; color: #FFFFFF; } #menub a:hover, #menu .navigation a { color: #FFFFFF; } #menub a:hover { text-decoration: underline; } /* Menu */ #menu { width: 940px; height: 60px; margin: 0 auto; } #menu ul { margin: 0; margin-left: 30px; padding: 16px 0 0 10px; list-style: none; line-height: normal; } #menu li { float: left; } #menu a { margin-right: 3px; padding: 5px 20px; background: #48577D; text-transform: lowercase; text-decoration: none; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 16px; font-weight: normal; color: #FFFFFF; } #menu a:hover, #menu .navigation a { color: #FFFFFF; } #menu a:hover { text-decoration: underline; } /* Page */ #page { width: 940px; height: 600px; margin: 0 auto; padding: 0px; border-left: 1px solid #0033CC; border-right: 1px solid #0033CC; } /* Flash */ #flash { position: absolute; left: 530px; top: 25px; height: 50px; width: 500px; } /* Content */ #content { float: left; width: 560px; height: 500px; padding-right: 0px; padding-left: 20px; overflow: auto } .csoon { text-align: center; text-decoration: blink; } .post { } .post .title { padding: 5px 0; text-align: justify; color: #FFFFFF; text-transform: uppercase; } .post .title a { background: none; text-align: justify; color: #FFFFFF; } .post .meta { padding: 2px 10px; background: #48577D; border-top: 1px solid #000000; border-bottom: 1px solid #000000; text-transform: uppercase; text-align: left; font-size: 9px; color: #7690CF; } .post .entry { padding: 20px 0; text-align: justify; font-size: 1.2em; } /* Sidebar */ * { margin: 0; border: 0; } #sidebar { float: right; width: 270px; background: #43464d; border: 3px solid #48577D; } #sidebar ul { margin: 0; padding: 0; list-style: none; } #sidebar li ul { padding: 20px; } #sidebar h2 { padding: 5px 10px; background: #48577D; font-size: 1.2em; } #sidebar p { padding: 20px; } /* Footer */ #footer { width: 940px; margin: 0 auto; padding: 20px 0; background: #48577D; color: #000000; } #footer p { margin: 0; line-height: normal; font-size: 12px; text-transform: uppercase; text-align: center; color: #FFFFFF; } Here is the XHTML <!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 name="keywords" content="" /> <meta name="description" content="" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Alex-McIntosh.com | Contacting Alexander McIntosh</title> <link href="test_style.css" rel="stylesheet" type="text/css" media="screen" /> <script language="JavaScript" type="text/JavaScript"> <!-- function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> </head> <body onload="MM_preloadImages('images/e-mailMO.png')"> <div id="header"> <img src="images/contact.jpg" alt="Contact Me"> </div> <!-- end #header --> <div id="page"> <?php include("navigation.php"); ?> <div style="clear: both;"> </div> <!-- end #menu --> <div id="content"> <div style="font-size: 1.2em;"> <h1 id="title">E-Mail</h1> <p> I will only be contacted by e-mail, so regarding anything you may have to ask me or tell me from needing a website built to commenting on mine. Please e-mail to: <p> </p> <p align="center"><a href="mailto:design@alex-mcintosh.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('E-mail','','images/e-mailMO.png',1)"><img src="images/e-mail.png" name="E-mail" width="354" height="75" border="0" id="E-mail" alt=design@alex-mcintosh.com/></a></p> </p> <p> </p> <h1 id="title">Alternate</h1> <p> <form action="contact.php" method ="post"> <table width="39%" border="0" cellpadding="4"> <tr> <td width="35%"><div align="center"><strong><em>*</em>Name:</strong></div></td> <td width="75%"><div align="center"> <input name="name" type="text" id="name"> </div></td> </tr> <tr> <td><div align="center"><strong><em>*</em>Subject:</strong></div></td> <td><div align="center"> <input name="subject" type="text" id="subject" /> </div></td> </tr> <tr> <td><div align="center"><strong>Company:</strong></div></td> <td><div align="center"> <input name="company" type="text" id="company" /> </div></td> </tr> <tr> <td><div align="center"><strong><em>*</em>Email:</strong></div></td> <td><div align="center"> <input name="email" type="text" id="email2" /> </div></td> </tr> <tr> <td><div align="center"><strong><em>*</em>Message:</strong></div></td> <td><textarea name="text" cols="45" rows="5" id="textarea"></textarea></td> </tr> <tr> <td colspan="2"><center> <input name="submit" type="submit" value="submit"> <strong>|</strong> <input type="reset" name="Reset" id="Reset" value="Reset"> </center></td> </tr> </table> </form> </p> <p> <p align="center"><strong>Privacy Policy</strong></p> <em>I will not sell or distribute any information such as your name or email address to any 3rd party. so basically, only i can access this information and it will stay that way.</em> </p> </div> </div> <!-- end #content --> <?php include("sidebar.php"); ?> <!-- end #sidebar --> </div> <div id="footer"> <p>Created and Designed by Alexander McIntosh.</p> </div> <!-- end #footer --> </body> </html> Sidebar.PHP <!-- start #sidebar --> <div id="sidebar"> <ul> <li> <h2>Latest Entries/news</h2> <ul> <li><a href="news_homepage.php">Whats your homepage?...</a></li> <li><a href="news_php.php">PHP Update!...</a></li> <li><a href="news_blog.php">Blog is now functional...</a></li> <li><a href="news_welcome.php">WELCOME! First bit of news...</a></li> </ul> </li> <li> <h2>Archives</h2> <ul> <li><a href="arc_june.php">June 2008 <strong>(1)</strong></a></li> <li><a href="arc_may.php">May 2008 <strong>(3)</strong></a></li> </ul> </li> <li> <h2>External Links</h2> </li> </ul> <p><a href="http://www.geekstogo.com"><img src="images/GTG.png" width="230" height="65" alt="Geekstogo" /></a> <a href="http://jigsaw.w3.org/css-validator/"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" /> </a> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a> </p> </div> <!-- end #sidebar --> Please help me!
June 17, 200818 yr If you add padding to your sidebar, it won't appear to move because the border property outlines the element including any padding. If you wrap the sidebar in another div <div id="barwrapper"> sidebar code in here </div> and add this to your CSS #barcontainer { float:right; width:270px; padding-right:1em; } It will work. Someone may come along with a better solution, but that's how I'd approach it with minimal disruption to your code.
June 18, 200818 yr Yeah thanks that worked How comes you cant have a corder adn padding? In theory you can - you use padding to find the right size for your element - your border will take padding into account. If you then want to give extra space you can use margin. The only problem with margin, is if you float an element right, then add margin on the right, IE6 will double your right margin because it is a piece of sh!t. So we all must resort to using extra divs and messing up our code
Create an account or sign in to comment