Help

xkatx21x · #1 (**permalink**) Sep 21st, 2007, 01:31

Hi, I'm pretty new to web design.

I've just designed a website for my boyfriends building firm, I ran it through the validating thing and used the tidy thing (sorry not technical!) but now the text size has changed, the menu header is to the right and a different colour and the photos page has gone funny at the bottom.

I used bravenet as a host and used one of their templates for the layout but then customised it for my taste using my very basic knowledge of css.

The website is http://solidconstruction.bravehost.com

The css page is http://solidconstruction.bravehost.com/style.css

Any help would be appreciated

Thank you.

xkatx21x · #2 (**permalink**) Sep 21st, 2007, 06:09

hi Ive managed to solve some of the problems but on some pages the footer is out of line and I still can't find a way to change the position and size of the menu header

karinne · #3 (**permalink**) Sep 21st, 2007, 14:39

Oh dear ... there's A LOT of work to be done. Did you see it in IE6?

Nice to see that you are using CSS for the layout at least.

You don't have a full doctype. You're better off using a strict doctype anyways.

There's A LOT of unnecessary divs in there! Like all those c??? What's with that?

And

Code: Select all

#pageWrapper {

width : 754px;

margin : auto;

text-align : center;

}

#pageAlign {

text-align : left;

}

Why do you align the text to the center and then re-align it to the left?!

This is the code for a basic 2-column layout site

HTML: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
   
<html lang="en-CA">

<head>
	<title>Some title</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	
	<style type="text/css">
	html, body, div { margin: 0; padding: 0; }
	
	body {
		margin: 0 auto;
		width: 770px;
	}
	
	#branding, #container, #siteinfo {
		width: 770px;
	}
	
	#container {
		overflow: auto;
	}
	
	#menu {
		width: 200px;
		float: left;
		background-color: #900
	}
	
	#content {
		width: 560px;
		margin-left: 10px;
		float: right;
		background-color: #090;
	}
	
	#siteinfo {
		background-color: #009;
		color: #fff;
	}
	</style>
	
</head>

<body>

<div id="branding"><h1>some header stuff here</h1></div>

<div id="container">

	<div id="menu">menu here<br><br><br>all the way!</div>
	
	<div id="content">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis feugiat. Curabitur condimentum ligula imperdiet lectus. Sed justo. Suspendisse faucibus. Morbi sit amet diam. Phasellus egestas elit ac ante. Suspendisse sed tortor. Mauris vel nunc et risus pharetra elementum. Phasellus accumsan risus non arcu. Phasellus mollis eros id lorem. Sed nec felis. In eget diam fringilla risus accumsan malesuada. Cras urna neque, convallis quis, consequat sed, tristique at, metus. Nulla tincidunt, lacus in feugiat posuere, diam pede mattis nisi, vulputate feugiat massa justo et arcu. Integer pretium tellus et dui.</p>
		
		<p>Vivamus sit amet lectus. Sed lorem tellus, sagittis vel, volutpat eu, sodales at, tellus. Nunc quis ipsum et erat malesuada suscipit. Integer urna mi, feugiat et, lacinia eu, suscipit nec, nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam iaculis magna eget nunc. Curabitur aliquam vestibulum enim. Duis mattis varius leo. Vivamus vel turpis. Quisque lectus massa, euismod mattis, aliquam at, feugiat at, massa. Vivamus eget enim eget felis congue fringilla. Phasellus nec nibh eget lectus pretium ullamcorper.</p>
		
		<p>Nullam eleifend. Fusce sed nunc. Ut consequat. Etiam interdum massa. Nulla aliquam, dui quis mollis eleifend, est massa pretium justo, a porttitor pede tortor at velit. Morbi tellus sapien, condimentum eget, sollicitudin nec, faucibus pretium, velit. Morbi eu odio scelerisque metus porta venenatis. Aliquam erat volutpat. Curabitur convallis, tellus eget scelerisque euismod, metus ligula molestie elit, a varius risus nibh sit amet mi. Mauris erat est, fringilla sit amet, pellentesque eget, dapibus vel, augue. Aliquam justo quam, varius non, ornare sed, lobortis sed, ante. Morbi rutrum.</p>
	</div>

</div>

<div id="siteinfo">and some copyright bla bla here</div>

</body>
</html>

xkatx21x · #4 (**permalink**) Sep 21st, 2007, 17:13

Ok basically like I said, I used a template from bravenet, deleted a few bits I didn't want, changed the colours and changed one of the images, then I used their visual editor to change the text because I "thought" it would be easier. But instead it left alot of mark up behind so I attempted to fix it by hand.

Then I ran it through validator.w3.org which showed up some errors so, I used the tidy program thing at the bottom of their page. I just copied and pasted it which is where all the c's come from thats what they changed it to.

As for the unnecessary code I haven't changed much code as I am still learning css (using w3shools.com) and wasn't sure what to delete. Which has obviously resulted in the conflicting code.

The reason I didn't use a strict doctype is w3schools recommended transitional as strict was too strict.

So should I start again using a new hand written css rather than cheating

using the template you posted above or is the page I have salvagable? If so where do I start.

Sorry if I'm asking too much but what better way to learn than to practice.

And I promise not to cheat in future it causes to much hassle

karinne · #5 (**permalink**) Sep 21st, 2007, 17:28

Quote:

Originally Posted by xkatx21x

And I promise not to cheat in future it causes to much hassle

:rofl: Now you see why we ALWAYS encourage people to learn HTML and CSS and hand-code their sites

I would start from scratch if I were you. Going through that jungle of code will be a nightmare.

Start with the basic code I posted earlier and continue on from there.

There are also more links to css examples in the thread - Resources for learning how to use CSS for layout

xkatx21x · #6 (**permalink**) Sep 22nd, 2007, 17:05

Thanks for the help I will try and start again, but in the mean time is there a quick fix to get rid of that huge gap between the header and the image in IE just so I can keep the site up and running while im redoing it?

xkatx21x · #7 (**permalink**) Sep 22nd, 2007, 19:06

Nevermind I've managed to get rid of the space for now by putting the div tags in a row instead of a list.

Marc · #8 (**permalink**) Sep 22nd, 2007, 20:23

Glad you got it fixed, and thanks for posting the soloution!

		Webforumz.com > Main Forums > Design Your Website > Starting Out
Help