What do you think of my layout?

DJMK4 · 5 Apr 2007 at 13:51

Iv managed to upload the site to some webspace i have from my ISP, what do you think of the CSS Layout and menu?

Im not sure about the menu, i have a menu div which is the long menu bar, then inside that i have the menu items, but im not sure if it looks ok like this.

Anybody got any suggestions?

Ignore the banner part, thats just a test banner i made.

link to website below:

arrond · 5 Apr 2007 at 14:06

[Sniper][Wolf] said:
Iv managed to upload the site to some webspace i have from my ISP, what do you think of the CSS Layout and menu?

Im not sure about the menu, i have a menu div which is the long menu bar, then inside that i have the menu items, but im not sure if it looks ok like this.

Anybody got any suggestions?

Ignore the banner part, thats just a test banner i made.

link to website below:

www.dmoranda.ukfsn.org

Looks ok to me buddy

RandomTom · 5 Apr 2007 at 15:40

Get some content packed into soon as or it'll just be another empty site out there lol, I think there's a bit too much 'wasted' space at the top seen as you're using 'margin: 100px auto' but aside from that keep working on it.

DJMK4 · 5 Apr 2007 at 15:45

RandomTom said:
Get some content packed into soon as or it'll just be another empty site out there lol, I think there's a bit too much 'wasted' space at the top seen as you're using 'margin: 100px auto' but aside from that keep working on it.

Im getting there, just wanted to get the layout perfect before i cram anything on it.

What do you think of the menu? i wasnt sure about this

What do you think i should set the top margin too?

shadow4509 · 5 Apr 2007 at 15:47

as the others have said looks good but i agree with the wasted space. I think it would look better without having to scroll at all and maybe a different colour than white as background.

Mark M · 5 Apr 2007 at 15:57

I take it you like the black to grey fade judging by your site and your sig

DJMK4 · 5 Apr 2007 at 17:04

shadow4509 said:
as the others have said looks good but i agree with the wasted space. I think it would look better without having to scroll at all and maybe a different colour than white as background.

I dont get you?

Im using it on 1280x1024 and i dont have to scroll, all the divs are in the centre of the screen, no need to scroll?

if your viewing it on a lower res e.g. 800x600 it should automatically adjust it to fit in the centre of the screen, e.g. no need to scroll?

Any suggestions on colours to suit my scheme, and the banner will change, it was just off chance that it was a black-grey fade

DJMK4 · 5 Apr 2007 at 17:29

Just viewed the website using a lower res (1024x768) and it doesnt automatically resize it to fit it centre in the page.

Anyone know what im doing wrong :confused:

here is an update of the css

Code:

/* CSS Document */




/*Layout Objects*/

* {
		margin: 0;
		padding: 0;
}

body {

		margin: 100px auto;

		padding: 0;

		text-align: center;

}

#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%;
		background-image: url("images/Untitled-1.jpg");
		border:1px solid #000;
}

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

#footer {
		margin: 2px;
		height:3%;
		background-color:#666666;
		border:1px solid #000;
}
/*End of Layout Objects*/






/*Start Of Navigation*/

#nav ul{
		padding : 2px 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*/

RandomTom · 5 Apr 2007 at 17:30

www.colorwhore.com for colour choices

www.cssremix.com for inspiration on where to take it

edit: the margin of 100px is a constant no matter the browser resolution, that's why, although i'm not 100% how to alter that, google might answer the question.

DJMK4 · 5 Apr 2007 at 17:30

Cool, ta mate, any ideas on the post i made just before you replied^^

DJMK4 · 5 Apr 2007 at 17:40

RandomTom said:
edit: the margin of 100px is a ...entages though which is why im abit confused.

DJMK4 · 5 Apr 2007 at 19:59

Hmmm, iv had abit of a play around with it but as soon as i convert px to % on the following:

Code:

body {

        margin: 5% auto;

        padding: 0;

        text-align: center;

}

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

That works fine, but as soon as you you change the height from px to % all i get in the browser is this: