Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    What is the best practice for this?

    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


    Code:
    <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

    Code:
    #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;
    }
    Last edited by viciouskitten; 01-09-2013 at 11:54 AM.

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Best practices:

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

    Code:
    <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.).

    Code:
    #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.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Quote Originally Posted by viciouskitten View Post
    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.
    Last edited by AndrewGSW; 01-09-2013 at 12:57 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #5
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Quote Originally Posted by viciouskitten View Post
    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..?
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #6
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by AndrewGSW View Post
    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

  • #7
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,627
    Thanks
    0
    Thanked 648 Times in 638 Posts
    Quote Originally Posted by viciouskitten View Post
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #9
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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.)
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #10
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •