Jump to content
Sign in to follow this  
MadFly

Help modify template

Recommended Posts

I downloaded a template and would like to get the info in the body to be centered. Don't really know how to explain...The attached image shows the template is stretched across the whole screen, I would like to limit the "white" content, or body to about 800px. I tried doing this by adding a width: 800px to various parts of the style.css, but i cannot get only the "white" content to stay in the center at 800px. When I add the width, it all goes to the left, and then there is this huge green open space on the left side of page. The code looks like this... style.css

body { margin:20px 20px; font-size:0.9em; font-family: "Myriad Pro", "Trebuchet MS", Arial; font-size:14px; border:1px solid #000; background: url(images/bckg.jpg) repeat-x #8fe909; }a { color:#64a520; text-decoration:none;}a:hover { text-decoration:underline;}p { padding: 0 10px 5px 10px; }h1 { text-transform:uppercase; font-size:18px; color:#fff; }h1 span { background-color:#477b1d; padding:0 10px;}#top { height:30px; background-color:#477b1d;border-bottom:4px solid #000; }#name { float:left; border-left:20px solid #70c32e; border-right:20px solid #70c32e;}#name a{ color:#fff; font-weight:bold; font-size:24px; text-transform:uppercase; background-color:#70c32e; text-decoration:none;}#split { float:left; height:30px; width:20px; border-left:3px solid #000000;}#slogan { float:left; color:#fff; text-transform:uppercase; padding:3px 0 0 10px;}#contact_us{ float:right; background-color:#7abb37;height:20px;  padding:2px 5px;}#contact_us a { color:#fff; text-transform:uppercase; text-decoration:none; }#logo { background:url(images/head_bckg.jpg) no-repeat #78ce31;}#logo_text { float:right; width:200px; height:80px; background-color:#70c32e; margin:40px 20px 53px 0; font-family: Tahoma, Arial; font-size:11px; color:#fff; padding:10px; font-weight:bold; }#menu { background:#70c32e; height:21px; width:600px; margin: 0 auto; clear:both; border:1px solid #a8f534; text-align:center;  color:#fff; padding-top:4px;}#menu a { color:#fff; font-size:14px; text-transform:uppercase; font-weight:bold; text-decoration:none; margin:0 20px; margin-top:3px;}#menu a:hover{ color:#d4ffa1}.item img { background-color:#fff; padding:6px; border:1px solid #d0d0d0;}.description { display:block; float:right; width:220px; padding: 10px 20px 20px 0; line-height:12px; font-family:Tahoma, Arial;}p.additional { margin:0 10px; color:#9c9c9c; font-size:10px; line-height:12px; border-top:1px solid #bdbdbd; padding: 10px 0; font-weight:normal; font-family:Tahoma, Arial;}#text { margin: 0 292px 0 0;  padding:10px; }#text li { list-style:none; padding-left:20px; background:url(images/li.gif) no-repeat 0px 4px;line-height:18px;}#sidebar { float:right; width:245px; padding: 20px 20px 0 30px; font-size:10px; }#sidebar a{ font-weight:bold; }#sidebar h2 { margin:0; padding:0 0 20px 0; text-transform:uppercase; color:#000; font-size:18px;}#main { background:url(images/sidebar_bckg.gif) no-repeat top right #fff; background-position:center; }#footer { background:url(images/footer_bckg.gif) repeat-x #000; height:55px; clear:both;  }#left_footer { float:left; padding:20px 0 0 30px; color:#fff; font-size:12px;}#left_footer a { color:#fff;}#left_footer a:hover { text-decoration:none;}#right_footer { float:right;  padding:20px 30px 0 0; color:#fff;  font-size:12px; text-align:right;}#right_footer a { color:#fff;}

index.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"><head><!-- Author: Reality Software Website: http://www.realitysoftware.ca Note: This is a free template released under the Creative Commons Attribution 3.0 license, which means you can use it in any way you want provided you keep the link to the author intact. --><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><link href="style.css" rel="stylesheet" type="text/css" /></head><body><!-- header --><div id="top"><div id="name"><a href="#">Company Name</a></div><div id="split"></div><div style="border-top: 6px solid rgb(122, 187, 55); background-color: blue;"><div id="slogan"> Your company slogan or other text here</div><div id="contact_us"><a href="#">Sitemap</a></div></div></div><div id="logo"><div id="logo_text"> LOGO TEXTLorem ipsum dolor sit amet,consectetuer adipiscing elit. Pellentesque lobortis nibh eu mauris.Morbi arcu tortor, auctor et, facilisis nec, egestas sit amet, enim. </div><div id="menu"> <a href="#">Home</a>| <a href="#">About Us</a>| <a href="#">Services</a>|<a href="#">Pricing</a>| <a href="#">Contacts</a></div></div><!--end header --><!-- main --><div id="main"><div id="sidebar"><h2>Lorem Ipsum</h2><div class="item"><a href="#"><img src="images/picture.jpg" alt=" " /></a> <span class="description">Lorem ipsum dolor sit amet, consectetueradipiscing elit. Phasellus ornare condimentum sem.</span> </div><div class="item"><a href="#"><img src="images/picture.jpg" alt=" " /></a> <span class="description">Lorem ipsum dolor sit amet, consectetueradipiscing elit. Phasellus ornare condimentum sem.</span> </div></div><div id="text"><h1><span>Welcome</span></h1><p><strong>Compus </strong> is a free templatereleased by <a href="http://www.realitysoftware.ca">RealitySoftware</a> under the <a href="http://creativecommons.org/licenses/by/3.0/">CreativeCommons Attribution 3.0</a> license, which means you can use itin any way you want provided you keep the link to the author intact.</p><ul><li>Lorem ipsum dolor sit amet.</li><li>Consectetuer adipiscing elit.</li><li>Maecenas ac lacus. Etiam quis ante.</li><li>Nullam accumsan metus sit amet est.</li><li>Nullam diam. Nunc ac ipsum at nisl pretium congue.</li></ul><h1><span>Lorem ipsum dolor</span></h1><p><strong>Lorem ipsum</strong> dolor sit amet,consectetuer adipiscing elit. Phasellus ornare condimentum sem. Nullama eros. Vivamus vestibulum hendrerit arcu. Integer a orci. Morbinonummy semper est. Donec at risus sed velit porta dictum. Maecenascondimentum orci aliquam nunc. Morbi nonummy tellus in nibh.Suspendisse orci eros, dapibus at, ultrices at, egestas ac, tortor.Suspendisse fringilla est id erat. Praesent et libero. Proin nisifelis, euismod a, tempus varius, elementum vel, nisl. Fusce non magnasit amet enim suscipit feugiat. Fusce et leo.</p><p class="additional">Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Pellentesque lobortis nibh eu mauris.Morbi arcu tortor, auctor et, facilisis nec, Nulla neque nisl, luctussit amet, varius ac, tincidunt ut, tellus. Proin dignissim sapien eturna. Morbi orci nisi, feugiat rutrum, tempus a, Curabitur eu nisl.Vivamus venenatis venenatis pede. Curabitur nibh mauris, pharetra quis,mattis sed, ma lesuada vitae, sem. Mauris pede iaculis eget, dapibusac, neque. Sed libero lectus, bibendum ac, volutpat at, convallis nec,mi. Mauris felis elit, ultrices a, fringilla in, </p></div></div><!-- end main --><!-- footer --><div id="footer"><div id="left_footer">© Copyright 2008 <b>Compus</b></div><div id="right_footer"><!-- Please do not change or delete this link. Read the license! Thanks. :-) -->Design by <a href="http://www.realitysoftware.ca" title="Website Design"><strong>Reality Software</strong></a></div></div><!-- end footer --><div style="font-size: 0.8em; text-align: center; margin-top: 1em; margin-bottom: 1em;">Designdownloaded from <a href="http://www.freewebtemplates.com/">FreeTemplates</a> - your source for free web templates<br />Supported by <a href="http://www.hosting24.com/" target="_blank">Hosting24.com</a></div></body></html>

post-13976-0-68405700-1339279435_thumb.jpg

Share this post


Link to post
Share on other sites

If you put your width back in and add:margin:auto; in to the CSS with the width it should be centered.And remember margin:10px auto 10px auto; = margin-top:10px; margin-right:auto; margin-bottom:10px; margin-left:auto;If you need further explanation, hit me up!!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...