PDA

View Full Version : CSS Problems


JJT
04-06-2011, 10:33 PM
I am having a problem with positioning elements. My container div is a grey background, but that stops part way down the page. I have been trying to clean up my coding, so I am not done by any means, but I am not understanding why my container background stops earlier than my content.
Thank you for your help!

The site I am working on is http://www.all-autorepair.com

@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
#container {
background-color: #CCC;
width: 800px;
margin-right: auto;
margin-left: auto;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000;
border-left-color: #000;
}
#allautorepairs {
margin-top: 0px;
margin-left: 0px;
font-family: "Bauhaus 93";
font-size: 80px;
color: #03F;
background-color: #CCC;
text-align: center;
}
#p {
font-family: Arial, Helvetica, sans-serif, "Arial Black", Andy, "Comic Sans MS";
font-size: 18px;
font-style: normal;
font-weight: bold;
color: #000;
text-align: center;
}
#p2 {
font-family: Arial, Helvetica, sans-serif, "Arial Black", Andy, "Comic Sans MS";
font-size: 22px;
font-style: normal;
font-weight: bold;
color: #000;
text-align: center;
text-decoration: none;
}
#p3 {
font-family: Arial, Helvetica, sans-serif, "Arial Black", Andy, "Comic Sans MS";
font-size: 18px;
font-style: italic;
font-weight: bold;
color: #000;
margin-left: 60px;
width: 200px;
margin-top: 30px;
position: absolute;
float: left;
}
span {
font-family: Arial, Helvetica, sans-serif, "Arial Black", Andy, "Comic Sans MS";
font-size: 14px;
font-style: italic;
font-weight: normal;
color: #000;
}
#p4 {
font-family: Arial, Helvetica, sans-serif, "Arial Black", Andy, "Comic Sans MS";
font-size: 18px;
font-style: italic;
font-weight: bold;
color: #000;
margin-left: 510px;
position: absolute;
width: 275px;
text-align: center;
margin-top: 30px;
}
#phonenumber {
font-family: "Comic Sans MS", cursive;
font-size: 30px;
font-style: italic;
font-weight: bold;
color: #03F;
text-decoration: none;
margin-left: 520px;
margin-top: 25px;
}
#container h1 {
font-family: Arial, Helvetica, sans-serif, "Arial Black", Andy, "Comic Sans MS";
font-size: 36px;
font-style: italic;
font-weight: bold;
color: #039;
text-align: center;
}
#gemoney {
margin-left: 670px;
}

#visa {
margin-left: 660px;
padding-bottom: 10px;
margin-top: -160px;
}
#affordablepricing {
font-family: Arial, Helvetica, sans-serif, "Arial Black", Andy, "Comic Sans MS";
font-size: 14px;
font-style: normal;
font-weight: normal;
color: #000;
margin-left: 20px;
padding: 5px;
width: 15%;
position: absolute;
margin-top: 0px;
top: 900px;
display: block;
}
#financingavailable {
font-family: Arial, Helvetica, sans-serif, "Arial Black", Andy, "Comic Sans MS";
font-size: 14px;
font-style: normal;
font-weight: normal;
color: #000;
position: absolute;
width: 20%;
margin-left: 250px;
padding: 5px;
top: 900px;
display: block;
}
#specializedtraining {
font-family: Arial, Helvetica, sans-serif, "Arial Black", Andy, "Comic Sans MS";
font-size: 14px;
font-style: normal;
font-weight: normal;
color: #000;
width: 17%;
padding: 5px;
margin-left: 550px;
display: block;
position: absolute;
top: 900px;
}
#container h3 {
font-family: Arial, Helvetica, sans-serif, "Arial Black", Andy, "Comic Sans MS";
font-size: 16px;
font-style: italic;
font-weight: bold;
color: #000;
margin-left: 45px;
text-decoration: underline;
position: absolute;
width: 150px;
top: 875px;
}
#container h4 {
font-family: Arial, Helvetica, sans-serif, "Arial Black", Andy, "Comic Sans MS";
font-size: 16px;
font-style: italic;
font-weight: bold;
color: #000;
margin-left: 300px;
position: absolute;
width: 175px;
text-decoration: underline;
top: 875px;
}
#container h5 {
font-family: Arial, Helvetica, sans-serif, "Arial Black", Andy, "Comic Sans MS";
font-size: 16px;
font-style: italic;
font-weight: bold;
color: #000;
width: 160px;
position: absolute;
margin-left: 580px;
top: 875px;
text-decoration: underline;
}

#contactinfo {
font-family: Arial, Helvetica, sans-serif, "Arial Black", Andy, "Comic Sans MS";
font-size: 18px;
font-style: normal;
font-weight: normal;
color: #000;
margin-left: 50px;
position: absolute;
width: 275px;
top: 700px;
}
#toolbox {
font-family: Arial, Helvetica, sans-serif, "Arial Black", Andy, "Comic Sans MS";
font-size: 14px;
font-style: normal;
font-weight: normal;
color: #000;
width: 206px;
margin-left: 300px;
margin-right: 300px;
position: absolute;
clear: left;
margin-top: 15px;
}
#container h2 {
font-family: Arial, Helvetica, sans-serif, "Arial Black", Andy, "Comic Sans MS";
font-size: 24px;
font-style: italic;
font-weight: bold;
color: #039;
text-align: center;
}


#underconstruction {
text-align: center;
}
#ase {
margin-left: 525px;
margin-top: -230px;
}
#video {
margin-left: 50px;
}
#google {
float: right;
margin-right: 25px;
margin-top: 25px;
}
#footer {
font-family: Arial, Helvetica, sans-serif, "Arial Black", Andy, "Comic Sans MS";
font-size: 12px;
font-style: italic;
font-weight: bold;
color: #000;
text-align: center;
border-top-width: medium;
border-top-style: solid;
border-top-color: #000;
width: 800px;
clear: none;
position: relative;
top: 500px;
}
#container #toolbox table tr td li a {
font-size: 16px;
}
#container #tableservices table tr td {
font-family: Arial, Helvetica, sans-serif, "Arial Black", Andy, "Comic Sans MS";
font-size: 16px;
color: #039;
font-weight: bold;
font-style: italic;
text-indent: 20px;
}

DWcourse
04-06-2011, 11:30 PM
In the #toolbox rule remove the postition: absolute property. That should solve your immediate issue but you've really got something of a mess there in the code.

JJT
04-07-2011, 01:47 AM
I appreciate that. Can you give me a little more as far as what is a mess. Is it actually in the coding of the toolbox? because I can't change that, another company gave me the code to copy & paste.

If you can direct me on what area I need to correct I would really appreciate it.

Thank you!

johnMoss
04-07-2011, 01:52 AM
Be aware also that the use of absolute in a div means it will be completely ignored position-wise by other elements which are not absolute, or in other words, the 'flow' of the HTML. It will just lay on top of them.

DWcourse
04-07-2011, 03:22 AM
You've way overused divs. The goal of HTML is to create a logical page structure. Each HTML tag is a container. A div is a generic container. In most cases it makes no logical sense to wrap on hTML tag in a div. It's like buying a box to hold a box.

Example: You have divs with ids p, p2, p3, p4

It would make for sense to have

<div>
<p></p>
<p></p>
<p></p>
<p></p>
</div>

You could then create one style rule and apply it to the div. the text properties in this rule would also apply to the paragraphs within the div. You could then create special rules for the paragraphs (or spans within the paragraphs) as needed.

d a v e
04-07-2011, 04:52 AM
also you have this little devil in there
""Comic Sans MS";" :)

johnMoss
04-07-2011, 05:19 AM
Keep going... You've got unclosed image tags, divs, improperly nested p tags, etc... Are you familiar yet with W3.org, and their 'validation' tools? They help you identify errors...

JJT
04-07-2011, 03:21 PM
Thank you for your help, I will work on them. All of you are awesome for helping!:-D