Comments and feedback please

DJMK4 · 11 Apr 2007 at 11:39

On my website so far, i havnt finished the contact me page yet but what do you think of the layout?

Im not sure what color to have in the body div background? or shall i leave it white?

CSS

Code:

/* CSS Document */




/*Layout Objects*/

* {
        margin: 0;
        padding: 0;
}

body {
        margin: 3% auto;
        padding: 0;
        text-align: center;
        background-color: #CCCCCC;
}

#container {
        margin:0 auto;
        width: 70%;
        min-height: 600px;
        min-width: 850px;
        height: 600px;
        background-color: #FFFFFF;
        border:1px solid #000;
}

#banner {
        margin: 2px;
        height: 15%;
        border:1px solid #000;
        background:#000 url(images/Untitled-1.jpg) no-repeat right top;
}

#menu {
        margin: 2px;
        height:4%;
        background-color:#666666;
        border:1px solid #000;
}


#body {
        margin: 2px;
        height: 75%;
        background-color: #FFFFFF;
        border:1px solid #000;
        overflow: auto;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
}

#footer {
        margin: 2px;
        height:3%;
        background-color:#666666;
        border:1px solid #000;
        clear:left;
        text-align: right;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size: 10px;
        color:#cccccc;
}

#phpcontainer {
        padding-top:3%;
        padding-bottom: 3%;
        margin:0 auto;
        margin-top: 5%;
        width: 50%;
        height:60%;
        background-color: #FFFFFF;
}
/*End of Layout Objects*/






/*Start Of Navigation*/

#nav ul{
        padding : 1px 0;
        margin : 0;
        text-align: center;
        width: 100%;
       
}

#nav li{
           display : inline;
        list-style-type: none;
       
}


#nav ul li a{
        background-color: #666666;
           color: #cccccc;
           font-weight : bold;
           text-decoration : none;
           padding-left : 5%;
           padding-right : 5%;
           border:1px solid #000;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
}

#nav ul li a:hover{
        background-color:#333333;
        color:#ffffff;
}
/*End Of Navigation*/


/*Start of Text Styles*/

h1 {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 14px ;
        font-weight: bold ;
        margin: 5px auto ;
        text-align: center;
}

p {
        padding-left: 10%;
        padding-right: 10%;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px ;
        float: left;
}

Jet · 11 Apr 2007 at 13:42

I think people recommend doing it slightly off-white because it can be very bright on some monitors. Off the top of my head I think i've used #FAFAFA in the past. Try that and see if it looks any good.

Mr_L · 11 Apr 2007 at 18:11

It looks a bit plain, but if it's your first go at web design, then it's pretty good.

You have made a few mistakes with your XHTML, though.

You haven't included the open <html> element, just put the following above the <head> element and below the DocType.

Code:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en-GB" xml:lang="en-GB">

You've also missed out some double quotes on your CSS link, as well as not closing it. It should be the following:

Code:

<link rel="stylesheet" href="style.css" type="text/css" />

It's also a better idea to use the ascii code for the © character. Just replace the copyright character with:

Code:

&copy;

It's always a good idea to make sure your (X)HTML validates, it makes it a lot easier to debug any CSS positioning errors that may pop up.

Keep working at it and you'll soon get to grips with it.

Pixel · 11 Apr 2007 at 18:44

The banner cuts-off on the right-hand side on my screen (1680x1050 widescreen) and leaves the black bg color visible.

To fix this, change the bg color behind the banner to white, or edit your banner to fade into whatever bg color you desire. It shouldn't matter to most users, but widescreen is becoming more popular these days.

Code:

background:#fff url(images/Untitled-1.jpg) no-repeat right top;

DJMK4 · 12 Apr 2007 at 09:49

Isnt there no way to make the banner image fit into the css div instead of changing the BG color or making the banner fade?

Edit: Just re-done the banner, can someone tell me what it looks like in different screen resolutions?

Does it display ok on widescreen~?