Hey,

 

I'm looking to create a web hosting site with a layout similar to the link below. I want the header to go all the way across the screen, but then the content in the header to be centered. The I want the body to be centered, and be in the same width as the headers content (so the body and header both starts at the same point, despite the background of the header going all the way across the page).

http://www.bodhost.co.uk/

 

Then, the footer to just go all the way across the bottom.

 

I'm pretty familiar with HTML and CSS, so could anyone direct in the way of a good tutorial that shows you these kind of things.

 

Thank you, I really appreciate it,

Ryan

look at the source code (html and css) for that site you linked to

The thing is, I can't see their CSS, which is the most vital part I'm searching for!

I'll give you a clue. It involves

#footer {width:100%}

Their 2 CSS pages... (third is irrelevant)

 

• http://www.bodhost.co.uk/css/style.css
• http://www.bodhost.co.uk/SpryAssets/SpryMenuBarHorizontal.css

To get the effect your after is simple.

 

You need to make a Wrapper DIV which holds the content of the Header, Body and Footer and apply margin: 0 auto; to it.

 

To get the Footer and Header to spread all the way across make 2 empty DIVs for example (one outside each end of the wrapper div) and put your header and footer graphic in the style for it. for example...

 

HTML

<div id="header-tile"></div>

<div id="wrapper">
Content here.....
</div>

<div id="footer-tile"></div>

 

CSS

#wrapper {
margin: 0 auto;
}

#header-tile {
background: url(path/to/your/header/graphic.gif) repeat-x;
}


#footer-tile {
background: url(path/to/your/footer/graphic.gif) repeat-x;
}

 

usually try not spoon-feed this much but I remember when I first started off it was something I had trouble with.

 

There may be a better solution than using empty DIVs but never bothered to try anything else as of yet.

I'm a little confused, you said "You need to make a Wrapper DIV which holds the content of the Header, Body and Footer" but the Wrapper is outside of those tags.

 

Could you explain that a little so I understand what I'm coding please, thank you!

I'm a little confused, you said "You need to make a Wrapper DIV which holds the content of the Header, Body and Footer" but the Wrapper is outside of those tags.

 

Could you explain that a little so I understand what I'm coding please, thank you!

 

Ok say you have your basic layout you simply add the wrapper and empty divs as shown.

 

<html>

<head>
Head content here
</head>

<body>
<div id="header-tile"></div><!-- SPREADS ACROSS -->

<div id="wrapper"> <!-- start wrapper --><!-- ALL CENTERED -->
<div id="header">
	header content goes here such as your navigation.
</div>

<div id="main-content">
	all your main content and other DIVs go here...
</div>

<div id="footer">
	footer content here such as copyright
</div>
</div> <!-- end wrapper --><!-- ALL CENTERED -->

<div id="footer-tile"></div><!-- SPREADS ACROSS -->
</body>
</html>

 

So when you center your #wrapper along with all your content using margin: 0 auto and a set width it won't effect the #footer-tile or #header-tile div's which means you can set them to width: 100% and give them a background image (repeat-x) and it will spread across the screen as necessary.

 

There may be an easier way but I have only made 1 website which is near completion and this method worked so haven't needed to try any alternatives yet.

 

If your still not too sure just make a new index.html and try it.

Edited September 4, 201115 yr by Alluziion

Thank you for that, that's awesome! I've +Rep you twice for being very helpful!

 

Another question, a little different too. Could I use this code..

<?php include("header.php"); ?>

.. and stick..

<html>

<head>
Head content here
</head>

<body>
<div id="header-tile"></div><!-- SPREADS ACROSS -->

in it?

 

Would that work?

 

Cheers

Ryan

Thank you for that, that's awesome! I've +Rep you twice for being very helpful!

 

Another question, a little different too. Could I use this code..

<?php include("header.php"); ?>

.. and stick..

<html>

<head>
Head content here
</head>

<body>
<div id="header-tile"></div><!-- SPREADS ACROSS -->

in it?

 

Would that work?

 

Cheers

Ryan

 

Thanks!

 

And yeah of course.

Includes will always work in ways like that.

All it does is pull the contents into the page it is being included on as if it had always been there in the first place.

 

P.S. You can do the same for the footer to

 

 

 

Hey, I'm having some problems. It doesn't use any of the CSS effects. My code's below..

 

index.php

<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>

<body>
<div id="header-tile"></div><!-- SPREADS ACROSS -->

<div id="wrapper"> <!-- start wrapper --><!-- ALL CENTERED -->
       <div id="header">
               header content goes here such as your navigation.
       </div>

       <div id="main-content">
               all your main content and other DIVs go here...
       </div>

       <div id="footer">
               footer content here such as copyright
       </div>
</div> <!-- end wrapper --><!-- ALL CENTERED -->

<div id="footer-tile"></div><!-- SPREADS ACROSS -->
</body>
</html>

 

CSS.css

#wrapper {
margin: 0 auto;
}

#header-tile {
background: url(images/header_bar.png) repeat-x;
}


#footer-tile {
background: url(path/to/your/footer/graphic.gif) repeat-x;
}

 

Can you see where I'm going wrong?

You need to add a width for margin auto to work

 

add a height to #header-tile

 

#wrapper { 
margin: 0 auto;
width:960px; 
} 

#header-tile { 
background: url(images/header_bar.png) repeat-x; 
height:50px;
} 

Edited September 4, 201115 yr by mteam

I really do apologise for all the questions, but as for the header - how do I remove the whitespace, I know there's a simple line you add to the CSS and it covers the whole top and side bits of the CSS instead of leaving a little white bit.

 

Thank you!

I really do apologise for all the questions, but as for the header - how do I remove the whitespace, I know there's a simple line you add to the CSS and it covers the whole top and side bits of the CSS instead of leaving a little white bit.

 

Thank you!

 

Do you mean...

 

clear: both;

 

?

It may be, where would I place this code?

Have you got a link to this ? not sure what you mean with the whitespace

Well rather than asking try placing it in each and see what the result is. (experimenting is the key)

I would try either header-tile or header.

http://rhphosting.com/new/

 

For me, I mean the whitespace above the blue bit and on the sides of it.

 

Thank you

You need a css reset also a doctype

You need a reset css.

 

Or alternatively you could add this to the top of your CSS (although not the best method but the easiest).

 

* {margin: 0; padding: 0;}

 

EDIT: mteam beat me to it XD

Edited September 4, 201115 yr by Alluziion

That's perfect!

 

My last question for a while hopefully!

 

How would I go about placing my logo in the header (like where it's blue) but with it still being the same level as the content?

 

I've placed it in the header-tile div, but it's not level with my content.

 

Thank you,

Ryan

That's perfect!

 

My last question for a while hopefully!

 

How would I go about placing my logo in the header (like where it's blue) but with it still being the same level as the content?

 

I've placed it in the header-tile div, but it's not level with my content.

 

Thank you,

Ryan

 

Place it in the normal header div and position it using CSS.

If you look at it at http://rhphosting.com/new/ - that's the logo placed in the "header" div. I want it like it is in the "header-tile" div, just in line with all the content

If you look at it at http://rhphosting.com/new/ - that's the logo placed in the "header" div. I want it like it is in the "header-tile" div, just in line with all the content

 

Position it using CSS.

 

Something like...

 

#header {
position: relative;
bottom: 200px; /* tweak this until it is in the right place */
}

Sorry to bring an old topic up, but it's related to the same problems.

 

The link I'm relating to is here: http://rhphosting.com/new/

 

Basically I have a "header" div, where I want me navigation to be (I also want this div centered and to start at the same point as the logo starts at).

 

It's not showing the test text I have though.

 

My CSS code is..

* {
margin: 0; 
padding: 0;
}

#header {
position: relative;
bottom: 140px; /* tweak this until it is in the right place */
font-family: arial;
font-style: bold;
}

#header-logo {
width: 50%;
position: center;
height: 85px;
}

#wrapper {
margin: 0 auto;
}

#header-tile { 
background: url(images/header_bg.png) repeat-x; 
height:134px;
} 

#footer-tile {
background: url(path/to/your/footer/graphic.gif) repeat-x;
}

#main-content {

}

 

Cheers guys

Sorry to bring an old topic up, but it's related to the same problems.

 

The link I'm relating to is here: http://rhphosting.com/new/

 

Basically I have a "header" div, where I want me navigation to be (I also want this div centered and to start at the same point as the logo starts at).

 

It's not showing the test text I have though.

 

 

Try the following. Just copy and paste it into an editor like Notepad++ and run it.

 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RHP Hosting</title>
<style type="text/css">
* {
margin: 0; 
padding: 0;
}
body{
background-color:#f7f7f7;
font-family:arial;
}
#header {
position: relative;
bottom: 140px; /* tweak this until it is in the right place */
font-family: arial;
font-weight: bold;
color:#fff;
width:960px;
}

#header-logo {
width: 50%;
position: center;
height: 85px;
}

#wrapper {
width:960px;
margin: 0 auto;
}

#header-tile { 
background: url(images/header_bg.png) repeat-x; 
height:134px;
} 

#footer {
background:#000000 url(path/to/your/footer/graphic.gif) repeat-x;
height:40px;
color:#fff;
margin-top:20px;
}

#footer-wrapper {
width:960px;
margin: 0 auto;
}

#main-content {

}
#filler-text{
padding:20px;
background-color:#fff;
}

/* upper and lower navigation */

#upper-nav{
list-style:none;
margin-top:50px;
font-size:12px;
font-weight:bold;
float:right;
margin-right:50px;
}

#upper-nav li{
display:inline;
margin-right:10px;
}

#upper-nav a:link, #upper-nav a:visited 
{color:#fff; 
text-decoration:none;
}

#upper-nav a:hover, #upper-nav a:active 
{color:#fff;
text-decoration:underline;
}

#lower-nav{
list-style:none;
padding-top:14px;
font-size:12px;
font-weight:bold;
}

#lower-nav li{
display:inline;
margin-right:15px;
}
#lower-nav a:link, #lower-nav a:visited
{color:#fff;
text-decoration:none;
}

#lower-nav a:hover, #lower-nav a:active
{color:#fff;
text-decoration:underline;
}
</style>


</head>

<body>
<div id="header-tile"><div id="header-logo" align="center"><img src="images/logo_small.png"></div></div> <!-- SPREADS ACROSS -->

<div id="wrapper"> <!-- start wrapper --><!-- ALL CENTERED -->

<div id="header"> <!-- start header -->

       <ul id="upper-nav">
         <li><a href="#nogo">Home</a></li>
         <li><a href="#nogo">My Account</a></li>
         <li><a href="#nogo">Support</a></li>
         <li><a href="#nogo">Knowledgebase</a></li>

         <li><a href="#nogo">Forum</a></li>
         <li><a href="#nogo">About Us</a></li>
	</ul>    

</div> <!-- end header -->

<div id="main-content"> <!-- start main content -->
               <p>all your main content and other DIVs go here...</p>

               <br>
               <p id="filler-text">In hac habitasse platea dictumst. Mauris rutrum enim vitae mauris. Proin mattis eleifend pede. Sed pretium ante sit amet elit. Quisque pede tellus, dictum eget, dapibus ac, sodales dictum, lectus. Pellentesque mi dui, molestie sit amet, adipiscing id, iaculis quis, arcu. Nulla tellus sem, viverra eu, ultricies ac, mattis et, velit. Maecenas quis magna. Ut viverra nisl eu ipsum. Maecenas rhoncus. Duis mattis nisi nec sapien. Nullam eu ante non enim tincidunt fringilla. Integer leo. Duis eget enim.</p>
</div> <!-- end main content -->
</div>  <!-- end wrapper -->

<div id="footer"> <!-- start footer -->
<div id="footer-wrapper"> <!-- start footer wrapper -->
       <ul id="lower-nav">

         <li><a href="#nogo">FORUM</a></li>
         <li><a href="#nogo">AFFILIATE PROGRAM</a></li>
         <li><a href="#nogo">DATA CENTER</a></li>
         <li><a href="#nogo">TERMS OF USE</a></li>
         <li><a href="#nogo">SITEMAP</a></li>
         <li><a href="#nogo">CONTACT US</a></li>

	</ul>
</div> <!-- end footer wrapper -->
</div> <!-- end footer -->


</body>
</html>

Edited September 11, 201115 yr by nfc212