Web Design Forums

?uestlove · 25-02-2007, 12:38

I've having a little trouble figuring out how I should design this layout best. I've finally gotten away from changing my layouts simply because my coding skills were good enough to get it done. I'm trying to challenge myself a little more, but I'm having trouble. The main page is the scanline decoration I have under the grey box and navigation. What do you guys suggest? Thanks in advance

.

D856C · 25-02-2007, 16:12

Quote:

figuring out how I should design this layout best.

[empasis added]

Is there some law that says you must not start with the content, then work out the layout requirments?

That's an (apparently) novel way to develop a layout. I don't know about "best," but developing a content driven site is certainly better than the way the vast majority go about designing layouts.

swiecki · 25-02-2007, 17:33

Quote:

Originally Posted by D856C

[empasis added]

Is there some law that says you must not start with the content, then work out the layout requirments?

Obviously, if hes REDESIGNING, THEN HE ALREADY HAS CONTENT.

You have good design skills. However, i would recommend removing the diagonal line background.

I added in a footer:
http://img522.imageshack.us/img522/8...withoutnq5.jpg
I would being by slicing it up like so:
http://img138.imageshack.us/img138/6...kd5copyhd9.jpg

sorry for the shitty image hosting, but i didn't want to waste bandwidth on my own server

{edit} I think the rest could be done with CSS

?uestlove · 26-02-2007, 01:05

well my first attempt sort of worked, but when the text gets bigger the navigation immediately breaks. My method is pretty bizarre lol. I made an ul for the navigation and gut the scan lines below the links into 2 sections and made them into the background of the 6th and 7th li's.

Code:

<html>
<head>
<title>Welcome to Modus</title>
<meta name="keywords" content="modus,duquesne,multimedia,web">
<link rel="stylesheet" type="text/css" href="modus_styles.css" />
</head>

<body>
	<div><img src="images/header.gif" width="998" height="123"></div>
	<div id="wrap">
		<div id="graybox"></div>
		<div id="sidebar"></div>
		<div id="nav">
			<ul>
				<li id="links">Projects</li>
				<li id="links">Newsletter</li>
				<li id="links">Members</li>
				<li id="links">About Us</li>
				<li id="links">Contact</li>
				<li id="scanbox1"></li>
				<li id="scanbox2"></li>
			</ul>
		</div>
		<div id="main">
			<div id="border">Text goes here</div>
		</div>
		<div id="footer"></div>
	</div>
</body>
</html>

Code:

/* CSS Document */

#wrap
{
	width: 998px;
	margin: 0px;
	border: #b7b7b7 thin;
}

#graybox
{
	background: #676767 url(images/bottombox.gif) no-repeat bottom;
	width: 497px;
	height: 255px;
	float: left;
	
}

#sidebar
{
	background: #d7d7d7;
	width: 191px;
	height: 100%;
	float: right;
}

#nav
{
	position: absolute;
	top: 113px;
	left: 465px;
}

#links
{
	background: #6ec73b;
	width: 310px;
	height: 35px;
	font-family: Century Gothic, Helvetica, sans-serif;
	font-size: 14pt;
	font-weight: normal;
	color: #ffffff;
	text-decoration: none;
	text-align: right;
	list-style-type: none;
	border-bottom: dashed thin;
}

#div.links.li
{
	 padding: 5px;
}

#scanbox1
{
	background: url(images/scanbox1.gif) no-repeat;
	width: 310px;
	height: 39px;
	list-style-type: none;
}

#scanbox2
{
	background: url(images/scanbox2.gif) no-repeat;
	width: 310px;
	height: 38px;
	list-style-type: none;
}

#main
{
	background: #ffffff left;
	width: 653px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	font-weight: normal;
	text-decoration: none;
	float: left;
	color: #676767;
	padding-top: 10px;
	padding-left: 5px;
}

/*#border
{
	border-left: #b7b7b7 thin;
}*/

#footer
{
	clear: both;
	background: url(images/footer.gif) no-repeat;
	width: 998px;
	height: 29px;
}

swiecki · 26-02-2007, 22:29

Quote:

Originally Posted by ?uestlove

<li id="links">Projects</li>
<li id="links">Newsletter</li>
<li id="links">Members</li>
<li id="links">About Us</li>
<li id="links">Contact</li>
<li id="scanbox1"></li>
<li id="scanbox2"></li>

Hey!!! first rule of XHTML. When you have a style that you want to use over and over, you specify a class, not an id. Also, so you do not have repeated code, i recommend styling however much you can for just the ul, and then for the links class and scanbox1 and 2 ids separately.

2Dfruit · 27-02-2007, 15:21

that could be coded using very simple css and xhtml....well, there's a revelation!

i always slice my images up. recreate the table widths and use the images as bg's. add hacks etc. simple really...

?uestlove · 28-02-2007, 14:12

the problems im having with the way i coded it first is that the navigation breaks as soon as the text size is increased. That and I can't seem to get the border to work on the left side of the content. I tried absolutely positioning everything, but there are still problems.

25-02-2007, 12:38	#1 (permalink)
?uestlove Registered User Join Date: Sep 2006 Posts: 44	best way to design this layout I've having a little trouble figuring out how I should design this layout best. I've finally gotten away from changing my layouts simply because my coding skills were good enough to get it done. I'm trying to challenge myself a little more, but I'm having trouble. The main page is the scanline decoration I have under the grey box and navigation. What do you guys suggest? Thanks in advance .

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

27-02-2007, 15:21	#6 (permalink)
2Dfruit Biscuit Join Date: Jun 2006 Location: Ireland Posts: 975	that could be coded using very simple css and xhtml....well, there's a revelation! i always slice my images up. recreate the table widths and use the images as bg's. add hacks etc. simple really...

28-02-2007, 14:12	#7 (permalink)
?uestlove Registered User Join Date: Sep 2006 Posts: 44	the problems im having with the way i coded it first is that the navigation breaks as soon as the text size is increased. That and I can't seem to get the border to work on the left side of the content. I tried absolutely positioning everything, but there are still problems.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)