SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict jlisec01's Avatar
    Join Date
    Nov 2006
    Location
    MI
    Posts
    331
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS - styling my websites header

    Hi everyone, I was working on my header and I was just curious to know if I did this right? Screenshot is below. Thanks for any info.

    name.jpg

    CSS code:
    Code:
    body { background: #e4e3df url(images/background.png) repeat; }
    
    .lines { border-top: 1px solid #999; border-bottom: 1px solid #999; margin-top: -10px; }
    
    /* Header */
    div#header { 
    	background: url(images/header_background.png) repeat;
    	width: 100%;
    	padding: 65px 0px;
    	position: relative;
    	text-align: center;
    }
    div#header .topbg {
    	background: url(images/header_full_bar.png) repeat-x;
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 18px;
    }
    div#header .bottombg {
    	background: url(images/header_bottom.png) repeat-x;
    	position: absolute;
    	bottom: 0;
    	left: 0;
    	width: 100%;
    	height: 10px;
    }
    div#header #banner {
    	width: 750px;
    	margin: 0 auto;
    	position: relative;
    	text-indent: -9999px;
    }
    div#header #banner .lhs {
    	position: absolute;
    	top: 13px;
    	left: 0px;
    	width: 270px;
    	height: 1px;
    }
    div#header #banner .rhs {
    	position: absolute;
    	top: 13px;
    	right: 0px;
    	width: 270px;
    	height: 1px;
    }
    div#header #banner p.portfolio {
    	background: url(images/heading_portfolio.png) top center no-repeat;
    }
    div#header #banner h1 {
    	background: url(images/name.jpg) center no-repeat;
    	width: 639px;
    	height: 56px;
    	margin: 0 auto;
    	padding: 5px;
    }
    div#header #banner .lhstwo {
    	position: absolute;
    	left: 0px;
    	bottom: 3px;
    	width: 290px;
    	height: 1px;
    }
    div#header #banner .rhstwo {
    	position: absolute;
    	right: 0px;
    	bottom: 3px;
    	width: 290px;
    	height: 1px;
    }
    div#header #banner p.designer {
    	background: url(images/design.png) bottom center no-repeat;
    }
    and the HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title>Portfolio</title>
    	<link rel="stylesheet" type="text/css" href="reset.css" />
    	<link rel="stylesheet" type="text/css" href="main.css" />
    </head>
    
    <body>
    
    	<div id="header">
    		<div class="topbg"></div>
    
    		<div id="banner">
    			<div class="lhs lines"></div>
    				<p class="portfolio">The online portfolio of</p>
    			<div class="rhs lines"></div>
    			
    			<h1>Jeremy Lisecki</h1>
    			
    			<div class="lhstwo lines"></div>
    				<p class="designer">web design and developer</p>
    			<div class="rhstwo lines"></div>
    		</div>
    		
    		<div class="bottombg"></div>
    	</div>
    	
    </body>
    </html>

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,812
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Use a strict doctype.
    DON'T go so heavy on the selectors and if you are going to use IDs remember they are supposed to be unique to each doc so div#header div#banner{} is OVERKILL. #banner will do fine.
    You might get cleaner code by employing pseudo elements and wrapper DIVs.
    Consider what you MEAN. Is "designer /developer" really just a paragraph in the page or is it more meaningful and worthy of a semantically heavier tag?
    You may be better served by using semantic names to your classes, but that's just coders preference




    Here is a quick rework for you to study ( as I may not be pixel perfect as I didn't have your bg graphics slices, but those can be easily tweaked)



    Code:
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title>Portfolio</title>
    	<link rel="stylesheet" type="text/css" href="reset.css" />
    	<style type="text/css">
    	
    body { background: #e4e3df url(images/background.png) repeat; }
    
    .lines { border-top: 1px solid #999; border-bottom: 1px solid #999; margin-top: -10px; }
    
    /* Header */
    #header { 
    	background: url(images/header_background.png) repeat;
    	width: 100%;
    	padding: 65px 0px;
    	position: relative;
    	text-align: center;
    }
    #header:before, #header:after { content:'';	position: absolute;	left: 0; right:0;} 
    #header:before {
    	background: url(images/header_full_bar.png) repeat-x;
    	top: 0;
    	height: 18px;
    }
    #header:after {
    	background: url(images/header_bottom.png) repeat-x;
    	bottom: 0;
    	height: 10px;
    }
    #banner {
    	width: 750px;
    	margin: 0 auto;
    	position: relative;
    }
     #banner .portfolio {
    	background: url(images/heading_portfolio.png) top center no-repeat;
    }
    #header h1,  #header h2{ margin:0; padding:0; font-size:100%; font-weight:normal; }
    #header  h1 {
    	background: url(images/name.jpg) center no-repeat;
    	width: 639px;
    	height: 56px;
    	margin: 0 auto;
    	padding: 5px;
    }
    
    #banner .designer:before,#banner .designer:after{	top: 13px;	width: 270px;}
    #banner .portfolio:before,#banner .portfolio:after{		bottom: 3px;	width: 290px;}
    #banner .designer:before,#banner .portfolio:before {left: 0px;}
    #banner .designer:after,#banner .portfolio:after  {right: 0px;}
    #banner .designer {background: url(images/design.png) bottom center no-repeat;}
    #banner .portfolio:before, #banner .portfolio:after, #banner .designer:before, #banner .designer:after{
    	content:'';  	
    	position: absolute;	
    	height: 1px;
    	border-top: 1px solid #999; border-bottom: 1px solid #999; margin-top: -10px; 
    }
    
    	</style>
    </head>
    
    <body>
    
    	<div id="header">
    		<div id="banner">
     				<p class="portfolio">The online portfolio of</p>
    			    <h1>Jeremy Lisecki</h1>
     				<h2 class="designer">web design and developer</h2>
     		</div>
    	</div>
    	
    </body>
    </html>
    hope that helps

  3. #3
    SitePoint Addict jlisec01's Avatar
    Join Date
    Nov 2006
    Location
    MI
    Posts
    331
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help, I was gonna try to use :after and :before but I wasn't sure on the browser support. Is it covered on every browser?

  4. #4
    SitePoint Member mamahadija's Avatar
    Join Date
    Apr 2014
    Location
    South Africa
    Posts
    13
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    i dont recommend using after: & before: because they have poor browser support with Internet explorer

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,293
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by mamahadija View Post
    i dont recommend using after: & before: because they have poor browser support with Internet explorer
    That's not true. All of the versions commonly in use have good support for :before and :after: http://caniuse.com/css-gencontent

  6. #6
    SitePoint Member mamahadija's Avatar
    Join Date
    Apr 2014
    Location
    South Africa
    Posts
    13
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    if your target audience is using ie 7,8 they wont see that content Untitled.png

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,293
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Your screenshot confirms that :before is supported in IE8, but I'm pretty sure :after is supported too—at least to some degree. Designing a layout for IE7 and under nowadays is like designing a highway for horse and cart.

  8. #8
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,812
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Your screenshot confirms that :before is supported in IE8, but I'm pretty sure :after is supported too
    yes, it is.
    Designing a layout for IE7 and under nowadays is like designing a highway for horse and cart.
    yes, it is

    however, if you want :before and after support in IE.. you can add to your add this ( best i when loaded through a conditional comment) :
    Code:
    	 #header, #banner{zoom:expression(
    		runtimeStyle.zoom=1,
    		insertAdjacentHTML('beforeEnd','<span class="after"></span>')
    	);	
    
      zoom:expression(
    		runtimeStyle.zoom=1,
    		insertAdjacentHTML('afterBegin','<span class="before"></span>')
    	);}
    you and now do
    Code:
    #header:before, #header:after, #header .before, #header .after {...}
    and so forth, to include old IE


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
  •