SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast cowboystyle's Avatar
    Join Date
    Jun 2005
    Location
    Binghamton, NY or New Windsor, NY
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    tables to css for layout

    I recently took: Old Site, which used all tables for layout to New Site, which is table free! Tell me what you guys think.

    Note: I know the links don't work.

  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should use a complete DTD. Try this one :
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd ">
    You should maybe use classes and id's correctly... (read this : http://bonrouge.com/br.php?page=faq#class-id)

    I would recommend using relative positioning and floats rather than absolutely positioning everything as it helps to maintain some kind of flow. When you absolutely position things they start overlapping each other when you add more content. Relative positioning means that one element will push another element down when it has more content - like a document naturally does.

    Besides that, it looks good.

    I hope this helps.

  3. #3
    SitePoint Enthusiast cowboystyle's Avatar
    Join Date
    Jun 2005
    Location
    Binghamton, NY or New Windsor, NY
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah... when I try relative positioning ie blows up... you are right though, I'm going to give it another go now that I know some of ie's "quirks"

    thanks for the input

  4. #4
    SitePoint Enthusiast cowboystyle's Avatar
    Join Date
    Jun 2005
    Location
    Binghamton, NY or New Windsor, NY
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BonRouge
    You should use a complete DTD. Try this one :
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd ">
    You should maybe use classes and id's correctly... (read this : http://bonrouge.com/br.php?page=faq#class-id)

    I would recommend using relative positioning and floats rather than absolutely positioning everything as it helps to maintain some kind of flow. When you absolutely position things they start overlapping each other when you add more content. Relative positioning means that one element will push another element down when it has more content - like a document naturally does.

    Besides that, it looks good.

    I hope this helps.
    The changes are: here.

    Hey there. I took your advice and stayed away from absolute... there are three elements on my page that are absolute now: "environmental management" text, the left hand green curve and the top of the list curve. I made these absolute because these elements had to overlay existing elements. If there is a better way to do this I'm all ears. Here is my css:

    Code:
    /********** POSITION *********************/
    body {
    	position:absolute;
    	left:50%;
    	margin:0 0 0 -300px; padding:0;
    	width:600px;
    	height:auto;
    	background:#FFF;
    }
    
    #Header {
    	width:100%;height:70px;
    	margin:2px 0 0 0;padding:0;
    }
    
    #Content {
    	float:left;
    	width:400px;
    	margin:0;padding:0;
    }
    
    #Menu {
    	float:right;
    	width:180px;
    	margin:0;padding:0;
    }
    
    /********** HEADER ***********************/
    .line-green {
    	margin:0;padding:0;
    	width:600px;
    	line-height:0;
    	border:solid #9C9;
    	border-width:4px 0;
    }
    
    #Header h1{
    	color:#FFF;
    	position:absolute;
    	top:36px;left:10px;
    	margin:0;padding:0 0 2px 0;
    	font-size:18px;
    	line-height:18px;
    	text-align:left;
    	display:inline;
    	z-index:6001;
    	font-weight:900;
    	font-family:tahoma,sans-serif;
    }
    
    .head_img01{
    	margin:0;padding:0;
    	width:600;height:50px;
    	
    	border-style:solid;
    	border-color:#030;
    	border-width:0 0 4px 0;
    	
    	background-image:url("nav/head01.jpg");
    	background-repeat:no-repeat;
    }
    
    .head_img02{
    	position:absolute;
    	top:56px;left:0px;
    	margin:0;padding:0;
    	width:8px;height:8px;
    	
    	background-image:url("nav/head03.gif");
    	background-repeat:no-repeat;
    	
    	z-index:6000;
    	
    }
    
    .head_img03 {
    	position:absolute;
    	top:64px;right:0px;
    	margin:0;padding:0;
    	width:188px;height:8px;
    	
    	background-image:url("nav/head02.gif");
    	background-repeat:no-repeat;
    	
    	z-index:6000;
    }
    
    /********** MENU *************************/
    #Menu ul {
    	float:left;
    	width:180px;
    	margin:0;padding:0;
    	list-style-type:none;
    	display:block;
    }
    
    #Menu li {display:inline;}
    
    #Menu a {color:#000;font-size:11px;text-decoration:none;}
    
    #Menu b {color:#FFF;font-size:14px;font-weight:700;}
    
    #Menu a, #Menu b {
    	padding:2px 5px;
    	line-height:16px;
    	font-family:tahoma, sans-serif;
    	display:block;
    }
    
    #Menu img.nav {
    	margin:0;padding:0;
    	width:180px;height:auto;
    	background:#FFF;
    	display:block;
    }
    
    #Menu img.val {
    	display:block;
    	border-style:none;
    }
    
    /* Navigation menu roll over colors */
    .nava,
    .nava b,
    .nava a:visited, 
    .nava a:active,
    .nava a:link  {background:#9C9;}
    .nava a:hover {background:#9F6;}
    
    .navb,
    .navb b,
    .navb a:visited, 
    .navb a:active, 
    .navb a:link  {background:#C66;}	
    .navb a:hover {background:#C30;}	
    
    .navc,
    .navc b,
    .navc a:visited, 
    .navc a:active, 
    .navc a:link  {background:#9CC;}
    .navc a:hover {background:#6CF;}
    
    /********** CONTENT **********************/
    #Content h2 {
    	color:#9C6;
    	font-size:16px;
    	line-height:16px;
    	font-weight:900;
    	margin:15px 0 0 10px;
    }
    
    #Content p.copyright {
    	color:#CCC;
    	font-size:10px;
    	line-height:10px;
    	margin:20px 0 0 10px;
    }
    
    #Content p {
    	color:#000;
    	font-size:11px;
    	line-height:15px;
    	margin:0 0 0 10px;
    }
    
    #Content a{
    	color:#9C6;
    	font-size:11px;
    	font-weight:600;
    	text-decoration:none;
    	line-height:15px;
    	margin:0;
    }
    
    #Content a:hover{background:#FFC;}
    
    #Content a,#Content p, 
    #Content h2 {font-family:verdana, arial, helvetica, sans-serif;}
    Once again, thanks for the help!

  5. #5
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks very good.

    Did I mention the dodgy use of classes?

  6. #6
    SitePoint Enthusiast cowboystyle's Avatar
    Join Date
    Jun 2005
    Location
    Binghamton, NY or New Windsor, NY
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    haha... umm, yes, I thought I had solved this... I read your site (very informative btw) and I thought I had solved the whole "overuse" of id's... please tell me what's still wrong.

    btw, I would like to use Fahrner Image Replacement method on the images I use to round corners on the right hand side menu, but I keep getting breaks under the div's... any suggestions?

  7. #7
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not talking about the overuse of id's - it's the use of classes as id's that I'm trying to point out. It doesn't affect your page, but it's... not right.

    Breaks (gaps?) under images? Sounds like you need this :
    Code:
    img {
    display:block;
    }


Bookmarks

Posting Permissions

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