What is the best practice for this?

[viciouskitten]

Hiya

This is only my second post and I am still learning the best practices of code.

Basically I found a solution to my problem but I want to know if I should usually do it this way? It has taken me a LONG time to get this to work but I couldn't find any other way to do it online/in my books (not sure what to google!)

I wanted to make a header/navigation bar that overlapped so i had one header image and then 6 navigation buttons. I couldn't get the navigation buttons to lie flush with each other so I put them in a table and then creaded a new empty table row to bring it down so it would align in the right place with the header.

I had an issue that I needed the alignment on the left to work correctly so that it fitted in the right space and this would only work when the window was on max but not when minimized. This worked when I used a cell space and  

I bet there's a much easier way to do this! So any info would be very appreciated thank you


Here is the website: www.kieronhuntdesign.com/contact

<div class="header">
							
							
							
							<div id="top">
								
									<a href="index.html"><img src="images/header.png" width="960" height="90" align="center"/></a>
							
							</div>

						<div class="nav">
						
							<div id="under">
				
								<table border="0" cellpadding="0" cellspacing="0">
									<tr>
										<td colspan="6" height="69"></td>
									</tr>
									<tr>
										<td width="100"> <font color="white">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</font></td>
										<td><a href="index.html"><img src="nav/homebutton.png" height="50" name="home" onMouseOver="document.home.src='nav/homebuttonmouseover.png' " onMouseOut="document.home.src='nav/homebutton.png' " /></a></td>
										<td><a href="about.html"><img src="nav/aboutbutton.png" height="50" name="about" onMouseOver="document.about.src='nav/aboutbuttonmouseover.png' " onMouseOut="document.about.src='nav/aboutbutton.png' "/></a></td>
										<td><a href="design.html"><img src="nav/designbuttonmouseover.png" height="50" name="design" /></a><td>
										<td><a href="illustration.html"><img src="nav/illustrationbutton.png" height="50" name="illustration" onMouseOver="document.illustration.src='nav/illustrationbuttonmouseover.png' " onMouseOut="document.illustration.src='nav/illustrationbutton.png' " /></a></td>
										<td><a href="photography.html"><img src="nav/photographybutton.png" height="50" name="photography" onMouseOver="document.photography.src='nav/photographybuttonmouseover.png' " onMouseOut="document.photography.src='nav/photographybutton.png' " /></a></td>
										<td><a href="contact.html"><img src="nav/contactbutton.png" height="50" name="contact" onMouseOver="document.contact.src='nav/contactbuttonmouseover.png' " onMouseOut="document.contact.src='nav/contactbutton.png' " /></a></td>
									</tr>
								</table>
								
							</div>
							
						</div>

			</div>

and css some of which probably isn't needed

#top {
	margin-left: 0 auto;
	margin-right: 0 auto;
	position: absolute;
	z-index: 1;
}

#under {
	margin-left: 0 auto;
	margin-right: 0 auto;
	position: absolute;
	z-index: 2;
}

#container {
	clear: right;
	display: inline;
	padding: 0px 0px 0px 0px;
	margin : 0;
	margin-left:auto;
	margin-right:auto;
	float: center;
}

[AndrewGSW]

Best practices:

Don't use tables for layout. If you search CSS navigation bar there are many tutorials to study.

<td width="100"> <font color="white">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</font></td>

Height and width attributes for td and tables, etc., are deprecated: use CSS.

The font tag is obsolete.

Don't use nbsp's repeatedly, this is a poor practice; use margins to separate elements (or float elements, etc.).

#top {
	margin-left: 0 auto; /* margin-left/right only have one value */
	margin-right: 0 auto; /* you could write both as margin: auto 0; 
 - though it's normally margin: 0 auto; to center an element */
	position: absolute; /* absolute positioning should be a last resort */
	z-index: 1;
}

#under {
	margin-left: 0 auto; /* notes as above */
	margin-right: 0 auto;
	position: absolute;
	z-index: 2;
}

#container {
	clear: right; /* there is nothing floated to clear */
	display: inline;
	padding: 0px 0px 0px 0px; /* padding: 0; */
	margin : 0;
	margin-left:auto;
	margin-right:auto;
	float: center; /* there is no center value */
}

I think you need to spend some time studying CSS.

[viciouskitten]

Thank you!

I knew what I was doing wasn't correct but had no idea how to go about it. I only started using CSS about a month ago

[AndrewGSW]

Originally Posted by viciouskitten

Thank you!

I knew what I was doing wasn't correct but had no idea how to go about it. I only started using CSS about a month ago

Not sure what to recommend. Perhaps start with HTML Dog for the basics. (Try to avoid w3schools..).

Eventually.. floatutorial is very good, but there are other things you might study before this.

There are many resources in the Sticky.

[AndrewGSW]

Originally Posted by viciouskitten

Thank you!

I knew what I was doing wasn't correct but had no idea how to go about it. I only started using CSS about a month ago

Just curious: what book or website did you study..?

[viciouskitten]

Originally Posted by AndrewGSW

Just curious: what book or website did you study..?

I've been using W3 schools a lot- should i stop?
And html and css by Jon Duckett

I'm just trying to get the practice and used to it by doing my own and my fiance's websites..

Thank you for the resource suggestions

[viciouskitten]

Some of the things I wanted to do were not covered in the book so I just tried to google them. It's hard to know what are good/bad suggestions though. The table idea was recommended to someone else on a forum so that's why I used that. I had made a navigation bar before (www.midlandspolechampionships.co.uk) but I didn't have to use hovers and align the buttons in the same way which made it seem more complicated

[felgall]

Originally Posted by viciouskitten

I've been using W3 schools a lot- should i stop?

The two guys that run that site don't have time to properly update all the pages to keep them up to date so a lot of the pages that have been there for a while are getting really dated with the info they provide.

The HTML secion isn't too bad but the programming languages are significantly out of date - particularly JavaScript where most of the commands they use in the introductory tutorials are either obsolete or have been re-purposed.

The site is a good history of how things used to be done at the end of the 20th Century but far less useful for how things should be done now.

[AndrewGSW]

That book by Jon Duckett is very good. Going a little further/deeper, CSS The Missing Manual is very good as well. (It's from 2009 but still very relevant.)

[viciouskitten]

Thank you for the info AndrewGSW and felgall. I am very interested in learning the up to date info and doing things correctly rather than just getting by with things that work. Will get hold of a copy of CSS The Missing Manual!