Jump to content
Please Use CODE Tags

I need a little help with my website...

Gilbernata
By Gilbernata
in Programming
 Share
Go to solution Solved by Dredgy,

@Gilbernata Not a greatly coded site, but far from the worst I've seen, so good job I've guessed. Fixed width is not good.

In regards to your actual problem.

 

Replace

#header{    background:transparent;} 
#header{    background-color:#fff;}

Should do it.

Posted

Just started working on a website for a friend. How can i get the middle white area to continue all the way to the top of the page, while still having the tabs exactly where they are on the page? 

post-48917-0-26747400-1418269365_thumb.p

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  <head>  <title>Double A Homes - Home</title>  <meta name="description" content="free website template" />  <meta name="keywords" content="enter your keywords here" />  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />  <link rel="stylesheet" type="text/css" href="css/style.css" />  <script type="text/javascript" src="js/jquery.min.js"></script>  <script type="text/javascript" src="js/image_slide.js"></script></head><body><div id="main">    <div id="header">	 <img src="images/image.jpg" alt="image" />      <div id="banner">	    <a href="#">Double A Homes</a>	  </div><!--end banner-->      <div id="menubar">        <ul id="menu">			<li><a href="index.html">Home</a></li><li>			<a href="ourwork.html">Plans</a></li><li>			<a href="testimonials.html">Lots</a></li><li>            <a href="projects.html">Available Homes</a></li>          <li class="last"><a href="contact.html">Contact Us</a></li>        </ul>      </div><!--end menubar-->    </div><!--end header-->    	<div id="site_content">       <ul class="slideshow">        <li class="show"><img width="880" height="350" src="images/home_1.jpg" alt=""May your home know joy, Every room hold laughter, Every window open to great possibilities."" /></li>        <li><img width="880" height="350" src="images/home_2.jpg" alt=""Theres no place like home."" /></li>      </ul>     	  <div id="content">        <div class="content_item">			<p>This standards compliant, simple, fixed width website template is released as an 'open source' design (under the Creative Commons Attribution 3.0 Licence), which means that you are free to download and use it for anything you want (including modifying and amending it). If you wish to remove the 'ARaynorDesign' link in the footer of the template, please contact me first, but other than that...</p>			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus tempor enim. Aliquam facilisis neque non nunc posuere eget volutpat metus tincidunt. Nunc mollis felis vitae leo dignissim facilisis. Aenean vitae posuere quam.</p>            <h4>Heading 1</h4>			<p> Phasellus laoreet feugiat risus. Ut tincidunt, ante vel fermentum iaculis, turpis sem pulvinar diam, sit amet ullamcorper nibh dui ac nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos:</p>			<p> Phasellus laoreet feugiat risus. Ut tincidunt, ante vel fermentum iaculis, turpis sem pulvinar diam, sit amet ullamcorper nibh dui ac nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos:</p>        </div><!--end content_item-->      </div><!--end content-->      	  <div class="sidebar_container">        <div class="sidebar">          <div class="sidebar_top"></div>          <div class="sidebar_item">            <h2>Contact</h2>            <h3>Phone:<br> 780-874-9433 <br> 780-870-1342</h3>            <h3>Email: <a href="[email protected]<script type="text/javascript">/*  */</script>">[email protected]/*  */</a></h3>          </div>          <div class="sidebar_base"></div>        </div><!--end sidebar-->        		<div class="sidebar">          <div class="sidebar_top"></div>          <div class="sidebar_item">            <h2>Latest Update</h2>            <h4>January 2012</h4>            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus tempor enim. Aliquam facilisis neque non nunc posuere eget volutpat metus tincidunt</p>          </div>          <div class="sidebar_base"></div>        </div><!--end sidebar-->      </div><!--end sidebar_container-->    	</div><!--end site_content-->  </div><!--end main-->    <div id="footer">	  <a>Website Built By Alex.</a>  </div><!--end footer--></body></html>
html{ height: 100%;}*{ margin: 0;  padding: 0;}body{ font: normal .90em 'arial', arial, sans-serif;  background: transparent;  color: #000;}p{ padding: 0 0 20px 0;  line-height: 1.7em;  font-size: 120% }img{ border: 0;}h1, h2, h3, h4, h5, h6 { font: normal 175% 'arial', arial, sans-serif;  color: #000;  letter-spacing: -1px;  margin: 0 0 10px 0;  padding: 10px 0 0 0;}h2{ font: normal 165% 'arial', arial, sans-serif;}h3{ font: normal 120% 'arial', arial, sans-serif;}h3 a, h3 a:hover{ color: #941014;}h4, h5, h6{ margin: 0;  padding: 0 0 5px 0;  font: normal 150% 'arial', arial, sans-serif;  color: #941014;  line-height: 1.5em;}h5, h6{ font: normal 95% 'arial', arial, sans-serif;  color: #888;  padding-bottom: 15px;}a, a:hover{ background: transparent;  outline: none;  text-decoration: none;  color: #00C0C0;}a:hover{ text-decoration: underline;}ul{ margin: 2px 0 22px 30px;  line-height: 1.7em;  font-style: normal;  font-size: 120%;}ol{ margin: 8px 0 22px 20px;}ol li{ margin: 0 0 11px 0;}#main, #header, #banner, #menubar, #site_content, #footer{ margin-left: auto;   margin-right: auto;}#main{ background: #1B1B1B;}#header{ width: 920px;  padding: 0px 0 0 0;  background: transparent;}#banner{ width: 920px;  position: relative;  text-align: left;   height: 85px;  padding: 30px 0px 0px 0px;  background: transparent;}#banner a{ margin-top: 30px;  font: normal 300% arial;  letter-spacing: -1px;  text-decoration: none;  color: #FFF;}  #menubar{ width: 920px;  height: 35px;  text-align: center;   margin: 0 auto;  background: transparent;} ul#menu{   margin:0}ul#menu li{ padding: 0 0 0 0px;  list-style: none;  margin: 2px 0 0 0;  display: inline;  background: transparent;}ul#menu li a{ font: normal 130% 'arial', arial, sans-serif;  float: left;  letter-spacing: -1px;  height: 35px;  width: 184px;  padding: 15px 0 0 0;  text-align: center;  color: #FFF;  text-decoration: none;  background: transparent url(../images/tab.png);} ul#menu li.last{ margin: 2px 0 0 0;  background: transparent;}ul#menu li.last a, ul#menu li.last a:hover{ background: transparent url(../images/tab_l.png);  color: #FFF;}ul#menu li a:hover{ color: #000;}#nav ul li a: hover ul{	display: block;}#nav ul ul{	display: none;	position: absolute;}#site_content{ width: 900px;  overflow: hidden;  margin: 0 auto;  padding: 0 0px 0 20px;  background: #FFF;} .sidebar_container{ float: left;  width: 224px;  padding: 0;}.sidebar_top{ float: left;  width: 224px;  height: 15px;  background: url(../images/side_top.png) no-repeat;}.sidebar_base{ float: left;  width: 224px;  height: 15px;  background: url(../images/side_base.png) no-repeat;}.sidebar{ float: left;  width: 225px;  padding: 0;  background: url(../images/side_back.png) repeat-y;  margin-top: 20px;  margin-bottom: 20px;}.sidebar h4{ font-size: 125%;}.sidebar ul li, .sidebar ul li.selected{ list-style: none;   margin: 15px 0;  padding: 0;}.sidebar li.selected, .sidebar li:hover{ color: #5D5D5D;  text-decoration: none;} .sidebar_item{ padding: 0 0 0 15px;  width: 201px;}.sidebar_item h1{ padding: 20px 0 10px 0;  margin: 0;}.content_item{ margin-top: 20px;  margin-bottom: 20px;}#content{ width: 655px;  padding: 0;  margin: 0;  float: left;}#footer{ font: normal 130% 'arial', arial, sans-serif;  letter-spacing: -1px;  height: 230px;  padding: 0px 0 25px 0;  text-align: center;   background: #00C0C0 url(../images/footer.jpg) repeat;  color: #FFF;  border-top: 5px solid #000;}#footer a, #footer a:hover{ color: #FFF;  text-decoration: none;}#footer a:hover{ text-decoration: underline;}#footer_container{ width: 880px;  margin: 0 auto;}.footer_container_box{ font: normal 80% 'arial', arial, sans-serif;  width: 260px;  padding: 5px;  text-align: left;  margin: 10px 10px 10px 10px;  float: left;  background: transparent;  color: #FFF;}   .button{ height: 30px;  width: 100px;  padding: 12px 0 0 30px;  background: transparent url(../images/button.png) no-repeat;}.footer_container_boxl{ font: normal 80% 'arial', arial, sans-serif;  width: 260px;  padding: 5px;  text-align: left;  margin: 10px 0 10px 10px;  float: left;  background: transparent;  color: #FFF;}.form_settings{ margin: 15px 0 0 0;}.form_settings p{ padding: 0 0 4px 0;}.form_settings span{ float: left;   width: 280px;   text-align: left;}  .form_settings input, .form_settings textarea{ padding: 2px;   width: 299px;   font: 100% arial;   border: 1px solid #E5E5DB;   background: #FFF;   color: #47433F;}  .form_settings input[type="checkbox"]{ padding: 2px 0;   width: 15px;   font: 100% arial;   border: 0;   background: #FFF;   color: #47433F;  margin: 28px 0;}.form_settings .submit{ font: 100% arial;   border: 1px solid;   width: 99px;   margin: 0 0 0 206px;   height: 26px;  padding: 2px 0 3px 0;  cursor: pointer;   background: #5082BD;   color: #FFF;}/* styling for the slideshow on the homepage */ul.slideshow {  list-style: none;  width: 880px;  height: 300px;  overflow: hidden;  position: relative;  margin: 0;  padding-top: 20px;}  ul.slideshow li {  position: absolute;  margin: 0;  padding: 0;  left: 0;  right: 0;} ul.slideshow li.show {  z-index: 500;} ul img {  border: none;} #slideshow-caption {  width: 880px;  height: 300px;  position: absolute;  bottom: 0;  left: 0;   z-index: 500;} #slideshow-caption .slideshow-caption-container {  padding: 20px 25px 0 25px;     z-index: 1000;} #slideshow-caption p {  padding: 0;  font: normal 130% arial, sans-serif;  color: #FFF;}

ＧＩＬＢＥＲＮＡＴＡ

"They will suck your energy from you -- the energy you call money and will put it to evil ends giving you worthless dross in return, Your inner self will protect you from this."

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Wrap all the middle content in a div and set the background colour of that div to white, shouldn't affect anything else

I am good at computer

Spoiler

Motherboard: Gigabyte G1 sniper 3 | CPU: Intel 3770k @5.1Ghz | RAM: 32Gb G.Skill Ripjaws X @1600Mhz | Graphics card: EVGA 980 Ti SC | HDD: Seagate barracuda 3298534883327.74B + Samsung OEM 5400rpm drive + Seatgate barracude 2TB | PSU: Cougar CMX 1200w | CPU cooler: Custom loop

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Solution

@Gilbernata Not a greatly coded site, but far from the worst I've seen, so good job I've guessed. Fixed width is not good.

In regards to your actual problem.

 

Replace

#header{    background:transparent;} 
#header{    background-color:#fff;}

Should do it.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

@Gilbernata Not a greatly coded site, but far from the worst I've seen, so good job I've guessed. Fixed width is not good.

In regards to your actual problem.

 

Replace

#header{    background:transparent;} 
#header{    background-color:#fff;}

Should do it.

Thanks man you are a life saver! :D

ＧＩＬＢＥＲＮＡＴＡ

"They will suck your energy from you -- the energy you call money and will put it to evil ends giving you worthless dross in return, Your inner self will protect you from this."

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×