Jump to content
Web Marketing Help Forum
Xarzu

CSS HTML

Recommended Posts

Hello forum.  I have inherited a project.  It uses CSS to format the body of the web page.

Its appearance needs reworking.  Right now it looks like a bock plopped in the middle of the browser window.  I want it to have nice borders and a header going across the top and the bottom.

Here is what it looks like now:
one_zps3af0c330.png

Here is what I would like it to look like:
two_zpsa202e626.png

I am not as experienced with CSS as I would like to be.  But I was able to dig into the code and find where the html was formatted.  I am writing this post now because I would prefer if this design was on a table rather than on the entire HTML page.

The CSS element "html" is defined ni a "main.css" file like this:

 

html {
background-color:#eee;
padding:0px;
overflow:auto;
height:100%;
}
html body,html form {
background-image:url('../images/body-background.gif');
width:1200px;
margin:0px auto;
box-shadow:0 0 15px 15px #bbbbbb;
padding:0px;
}

the image
../images/body-background.gif

is not the background of the whitespace on the right and left.  This gif file is the background of the block in the middle.

So, how do I make this declaration a table declaration instead of a declaration and format for the entire page?  And once this change has been made, what sort of corresponding code changes do I need to do in other code files?

Edited by WiseWebmaster

Share this post


Link to post
Share on other sites

I'm not 100% clear on what you want with the background but here's a start.

 

 

<div id="topband">
coding for the stuff you want in the top band
</div>
coding for the middle stuff
<div id="footer">
 
</div>

 

 

body {
backgroud-image: path to image;
}
#topband {
background-color: the number of the burgendy you want;
width: 100%;
}
#footer {
background-color: the number of the blue you want;
width:100%;
clear: both;
border-top: spec width, color and type;
margin-top: put a negative number to expand the blue strip up;
}

 

You will probably have to change the z-index of the middle stuff to get the footer to go behind it.

Share this post


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

×