Grow your CSS skills. Land your dream job.

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

  • # November 28, 2008 at 12:02 pm

    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;
    }

    # November 28, 2008 at 12:20 pm

    1) Are you experiencing this with a particular browser? I was able to span the site across two monitors in FF3 and IE7 and the background looked fine on both.

    2) change the following in the .Footer

    Code:
    background-image: url(d2webdesigns/images/Footer.png);

    to

    Code:
    background: url(d2webdesigns/imgeas/Footer.png) no-repeat;

    These may be specific to me and how I code, but, some notes on CSS:

    1) Always use lowercase. It can become tough later on to remember, "oh did I use an upper case here or not?". Having to constantly double check your style sheet is a time waster, and upper case can lead to problems later. (This actually goes for not only names of divs, but also names of images as well (eg. .Footer, Footer.png)

    2) There is a fundamental difference between .Footer and #Footer. As you have it right now, all of your divs are "classes" (.Footer) when some of them should really be "id’s" (#Footer). Things that are used more than once on a page is a class, and something that will only be on the page once should be an id.

    3) Time savers are great, and the less code you need to write means less code that a browser needs to read, which in the end means faster load times! Here’s an example:

    Right now on your .Wrapper div you have the following:

    Code:
    background-image: url(d2webdesigns/images/Header.png);
    background-repeat: repeat-x;
    background-color: transparent;

    All of those can actually be on one line, like this:

    Code:
    background: url(d2webdesigns/images/Header.png) repeat-x transparent;

    (Though I don’t think ‘transparent’ is even necessary here.)

    Hope these help!

    # November 28, 2008 at 1:51 pm

    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.

    # November 28, 2008 at 5:25 pm

    Every website should have a body tag.

    Replace this:

    Code:

    With this:

    Code:

    And This:

    Code:

    With this:

    Code:

    Now on your stylesheet, change this:

    Code:
    .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;
    }

    To this:

    Code:
    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;
    }

    That should solve your problem I think

    # November 29, 2008 at 8:32 am

    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.

    Rob
    # November 29, 2008 at 10:36 am
    "Malice" wrote:
    Remember, I’m learning this as I go…. why the heck wouldn’t the body div get a "." before it but the others don’t?

    Ahh well you see now lets have a quick session here simply hopefully. :)

    .body
    This is a class – in HTML it would look like this <div class="body">, it will select any tag that has that class assigned, as you probably know

    #body
    This is an ID – again in HTML… <div id="body">

    body
    BUT this here, isnt a class or an id, its an actualy tag. You are calling the style on the actual <body> tag. So any changes you make to it in CSS will style your <body> tag in the HTML :) This is the same if you used any of the HTML tags in CSS… so H1, H2, H3, B, I, U, HR, DIV, SPAN, and so on… You dont HAVE to make a class or ID to style something, you can just use the tag itself.

    You do not need a whole DIV to style the background of your document, you just style the body tag, which encompases all of your document. (you can even style the <html> tag…)

    I hope that made a tiny bit of sense…

    Useful links…
    http://w3schools.com/css/default.asp
    http://www.w3.org/TR/CSS21/

    # November 29, 2008 at 8:46 pm

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

    # November 30, 2008 at 12:31 pm

    don’t hide your overflow on the body though otherwise most people wont see all of the content, Like I cant

    # December 2, 2008 at 12:35 pm

    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!

    # December 2, 2008 at 3:19 pm
    "Malice" wrote:
    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.

    It’s a bit of a learning curve there because you essentially need to memorize what can go into one line, but once you get it down, you’re golden!

    Good luck on your future projects.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".