Css html

xarzu

New Member
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:


Here is what I would like it to look like:


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?
 

chrishirst

Well-Known Member
Staff member
because I would prefer if this design was on a table rather than on the entire HTML page.
No you wouldn't!!!!!!!

And shouldn't.


I am not as experienced with CSS as I would like to be.
The ONLY way that is going to happen is by practicing, NOT giving up and stepping backwards fifteen years to use tables at the first hurdle.

AND rather than applying a lot of rules to the html and body elements you should be adding a 'wrapper' element that is 100% wide 100% long and targeting that with the CSS.
 

xarzu

New Member
No you wouldn't!!!!!!!

And shouldn't.


The ONLY way that is going to happen is by practicing, NOT giving up and stepping backwards fifteen years to use tables at the first hurdle.

AND rather than applying a lot of rules to the html and body elements you should be adding a 'wrapper' element that is 100% wide 100% long and targeting that with the CSS.

I would very much like to know how to add a wrapper element.

The code was handed to me such that the html element is defined in a css. I am guessing you are saying I should abandon that?
 

chrishirst

Well-Known Member
Staff member
HTML:
<html>
<head>
</head>
<body> 
      <div id="something">
All content goes here.

      </div> <!-- /something -->
</html>

Then set 100% height on html, body and something, margins and padding to zero on body then your overall background is applied to 'something'
 
Top