RESOLVED – Happy with the design and layout, not the errors!

[Malice]

I’ve done graphic design for a long time now but just started getting into coding my own sites in an effort to stop paying my coder for projects I’m fully capable of finishing with only a couple more details.

I decided to start the process on my own personal web design site and I am learning as I go, it was always so much easier to just pay him =)

Chugging along in CSS most of it makes sense, but when I run into an error I can’t figure out the fix!
I’ve been using Programmers Notepad for everything because I’m just not into the WYSIWYG editors.

1) Why won’t my background image (color) fill the screen at higher resolutions? When I extend the px. size I can do it but I don’t want to extend the background to fill larger displays because then it shows a vertical scroll bar.
2) Why does a sliver of my footer show up again on larger resolutions? I can’t get rid of it even though I have overflow set to hidden.
3) I know there are errors with the display in IE (so use FireFox to test it if you would) but I wasn’t going to fix those until after I get the FireFox version working completely.
4) I know about the blank space in the middle, that is where my jQuery portfolio images will go.

Website
Any help would be GREATLY appreciated!

Code:

/*
Theme Name: D2WebDesigns.com
Theme URI: http://www.d2webdesigns.com
Description: Test WordPress theme for D2webdesigns.com
Version: 2.0a
Author: Dennis Stevenson
Author URI: http://www.d2webdesigns.com/

Primary Colors:
bgcolor: #776d62
textcolor: #7e7e7e
texthover color: #443d62
heading1 color: #7fff00

*/

ul, li, img, body, html {
margin: 0; padding: 0;
}

/* no link decoration */
a {
text-decoration: none;
color: #7e7e7e;
}

/* hover underline */
a:hover {
text-decoration: underline;
color: #443d62;
}

/* no border around images */
a img {
border: none;
}

h1 {
text-decoration: none;
color: #7fff00;
font-family: Calibri, helvetica, georgia, sans-serif;
padding-top: 80px;
font-size: 48px;
font-weight: normal;
line-height: 1px;
}

h2 {
color: #000;
font-family: Calibri, helvetica, georgia, sans-serif;
text-align: center;
text-decoration: none;
}

h3 {
color: #7e7e7e;
font-family: Calibri, helvetica, georgia, sans-serif;
text-align: left;
text-decoration: none;
font-size: 12px;
font-weight: normal;
padding-left: 2em;
padding-right: 1em;
padding-bottom: 1em;
line-height: 1.25em;

}

h4 {
font-family: Calibri, helvetica, georgia, sans-serif;
color: #000;
padding-top: 10px;
padding-left: 1em;
padding-right: 3em;
font-size: 12px;
font-weight: normal;
}

h5 {
text-decoration: none;
color: #786d61;
font-family: Calibri, helvetica, georgia, sans-serif;
font-size: 18px;
font-weight: normal;
line-height: 1px;
}

h6 {
font-family: Calibri, helvetica, georgia, sans-serif;
color: #000;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
font-size: 16px;
font-weight: normal;
text-align: left;
line-height: 1em;
}

navhead {
font-family: Calibri, helvetica, georgia, sans-serif;
color: #000000;
font-weight: bold;
margin-left: 1em;
line-height: 3em;
}

navtext {
font-family: Calibri, helvetica, georgia, sans-serif;
color: #7e7e7e;
margin-left: 2em;
}

.body {
background: #776d62 url(d2webdesigns/images/bgImage.jpg) repeat-x top left;
font-size: 90%;
font-family: Calibri, helvetica, georgia, sans-serif;
line-height: 1.6em;
text-align: center;
color: #7e7e7e;
overflow: hidden;
}

.Wrapper {
background-image: url(d2webdesigns/images/Header.png);
background-repeat: repeat-x;
background-color: transparent;
border: none;
height: 926px;
position: relative;
width: 1025px;
overflow: hidden;
}

.D2Logo {
background-image: url(d2webdesigns/images/D2Logo.png);
background-color: transparent;
border: none;
height: 250px;
left: 0px;
padding: 0px;
position: absolute;
top: 0px;
width: 254px;
overflow: hidden;
}

.Header {
background-image: url(d2webdesigns/images/Header.png);
border: none;
height: 250px;
left: 254px;
padding: 18px;
position: absolute;
top: 0px;
width: 771px;
text-align: left;
overflow: hidden;
}

.LeftShadow {
background-image: url(d2webdesigns/images/LeftShadow.png);
border: none;
height: 675px;
left: 0px;
padding: 0px;
position: absolute;
top: 250px;
width: 50px;
overflow: hidden;
}

.Statement {
background: #e7e7e7;
border: none;
height: 160px;
left: 50px;
padding: 0;
position: absolute;
top: 250px;
width: 951px;
overflow: hidden;
}

.RightShadow {
background-image: url(d2webdesigns/images/RightShadow.png);
border: none;
height: 675px;
left: 1001px;
padding: 0px;
position: absolute;
top: 250px;
width: 24px;
overflow: hidden;
}

.PortfolioBar {
background-image: url(d2webdesigns/images/PortfolioBar.png);
border: none;
height: 153px;
left: 50px;
line-height: 153px;
padding: 0px;
position: absolute;
top: 410px;
width: 765px;
overflow: hidden;
}

.Navigation {
background-image: url(d2webdesigns/images/Navigation.png);
font-family: Calibri, helvetica, georgia, sans-serif;
font-size: 80%;
border: none;
height: 388px;
left: 815px;
padding: 0px;
position: absolute;
top: 410px;
width: 186px;
text-align: left;
overflow: hidden;
}

.WhyD2 {
background-image: url(d2webdesigns/images/WhyD2.png);
border: none;
height: 235px;
left: 50px;
padding: 0px;
position: absolute;
top: 563px;
width: 267px;
text-align: left;
overflow: hidden;
}

.Results {
background-image: url(d2webdesigns/images/Results.png);
border: none;
height: 235px;
left: 317px;
padding: 0px;
position: absolute;
top: 563px;
width: 258px;
overflow: hidden;
}

.Bubble {
background-image: url(d2webdesigns/images/Bubble.png);
border: none;
height: 235px;
left: 575px;
padding: 0px;
position: absolute;
top: 563px;
width: 240px;
text-align: left;
line-height: .85em;
overflow: hidden;
}

.Footer {
background-image: url(d2webdesigns/images/Footer.png);
height: 85px;
left: 50px;
position: absolute;
top: 798px;
width: 951px;
padding-top: 57px;
overflow: hidden;

}

.BottomShadow {
background-image: url(d2webdesigns/images/BottomShadow.png);
border: none;
height: 42px;
left: 50px;
padding: 0px;
position: absolute;
top: 883px;
width: 951px;
overflow: hidden;
}

.Content {
background: #e7e7e7;
border: none;
height: 388px;
left: 50px;
line-height: 153px;
padding: 0px;
position: absolute;
top: 410px;
width: 765px;
overflow: auto;
}

[Malice]

Awesome, a huge help… Thanks for the comments on my code. I need feedback exactly like that if I ever intend on doing it often.

The background issue I have though isn’t horizontal, it’s vertical. At resolutions around 1900×1200 I get a white bar at the bottom where I selected the end of my document to be at 926px or something like that. I would like the color to extend indefinitely down which I thought setting the background color would do no matter the resolution.

I’ll read more on classes and tweak the code over the next couple days… again thanks a ton.

[Malice]

AWESOME! Thanks for all the help!

Now to work on the IE issues =D

Remember, I’m learning this as I go…. why the heck wouldn’t the body div get a "." before it but the others do?

I need to pick up that CSS Missing Manual sooner than I expected.

[ScottMacD]

There is no scroll bar for you site with Firefox 3, Safari 3 (Windows) and Opera but there is in IE7???

[Malice]

All the feedback was excellent… I took everything, soaked it up just to forget it before my next project.

I will still need to fumble with the IE issues (maybe I’ll do that today)….

The space and time saving code supplied by TheDoc is great in theory and easily best practice… but while learning, it was easier for me to see each function as it did it’s job. Compressing them into one line will only create confusion for me while I figure the stuff out. I made the changes, and I absolutely appreciate the comments… thanks to everyone!

[Author]

Posts