SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 34
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    79
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question CSS positioning background image elements on top of background image elements.

    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="utf-8" />
    	<title>Section</title>
    	
    	<style>
    	#hero{
    	margin: 0 auto 0 auto; 
    	padding: 0 auto 0 auto;
    	width: 100%
    	height: 500px;
    	background: url("./img/bg_b.png");
    	background-repeat: no-repeat; 
    	color: white; 
    	font-family: 'Source Sans Pro', sans-serif;
    	padding: 150px 0; 
    	clear: left; 
    	text-align: center; 
    	font-size: 3em; 
    	position: relative; 
    	}
    	
    	section #back a{
    	background: url("./img/arrow_left.png");
    	text-indent: 100%; 
    	width: 42px;
        height: 30px;
        display: inline-block; 
        position: absolute; 
       
    	}
    	
    	</style>
    
    </head>
    <body>
    
    <section id="hero">
    <span class="bolded">
    HELLO.
    </span>
    
     We're a fancy startup. 
     
     <span id="#back"><a href="back.html">back</a></span>
     
     <span id="#next"><a href="next.html">next</a></span>
    </section>
    
    
    
    
    </body>
    </html>

    I'm trying to put a back and next button on the left and right hand side of a section tag that is sort of a hero banner.

    I keep trying and all i get is the link and not the background image of an arrow pointing left and right. The code above is a stripped down version of the code i'm working with.

    I'm working on this to learn css layout.

    Please help.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    HI,

    You have the ids in the html as id="#next" and id="#back". They should be id="next" and id="back".

    You are also missing a semi colon after the width:100% in #hero but I guess that's just a typo here.

    If you wanted the words either side of the text I would use inline block instead.

    e.g.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    p.startup{text-align:center}
    .next,.back,.txt{
    	display:inline-block;
    	vertical-align:top;
    }
    .txt{padding:0 20px;}
    .back{background:red}/* size this element to fit your arrow*/
    .next{background:yellow}/* size this element to fit your arrow*/
    </style>
    </head>
    
    <body>
    <p class="startup"><a class="back" href="#">back</a> <span class="txt"><b>Hello </b> We're a fancy startup</span> <a class="next" href="#">next</a> </p>
    </body>
    </html>

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    79
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    positioning problems

    Quote Originally Posted by Paul O'B View Post
    HI,

    You have the ids in the html as id="#next" and id="#back". They should be id="next" and id="back".

    You are also missing a semi colon after the width:100% in #hero but I guess that's just a typo here.

    If you wanted the words either side of the text I would use inline block instead.

    e.g.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    p.startup{text-align:center}
    .next,.back,.txt{
    	display:inline-block;
    	vertical-align:top;
    }
    .txt{padding:0 20px;}
    .back{background:red}/* size this element to fit your arrow*/
    .next{background:yellow}/* size this element to fit your arrow*/
    </style>
    </head>
    
    <body>
    <p class="startup"><a class="back" href="#">back</a> <span class="txt"><b>Hello </b> We're a fancy startup</span> <a class="next" href="#">next</a> </p>
    </body>
    </html>



    Thanks a lot. I thought i was going crazy there.

    It worked to show the arrow images on the far left and the far right, however, i still get some back text showing on the right hand side.

    The hero section has a huge gradient image that spans 100% of the width of the screen.

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<title>
    	Engine labs
    	</title>
    	
    	<script>
    		//For IE
    		document.createElement('header');
    		document.createElement('footer');
    		document.createElement('section');
    		document.createElement('article');
    		document.createElement('time');
    		document.createElement('nav');
    	</script>
    			
    			
    			<link href="http://yui.yahooapis.com/3.10.1/build/cssreset/cssreset-min.css" type="text/css">
    
    			<!--Get web font-->
    
    			<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,700,200italic,400italic' rel='stylesheet' type='text/css'>
    
    
    <style>
    
    
    body {
    	font-family: 'Source Sans Pro', sans-serif;
    	font-weight:400;
    }
    
    .container
        {
        margin: 0 auto;
        width: 724px;
        position: relative;
        background: #fff;
        padding: 0 10px 0 10px;
        text-align: left;
        }
    * html .container
        {
        width: 744px;
        w\idth: 724px;
        }
    
    
    header{
    margin-top: 30px; 
    margin-bottom: 50px; 
    }
    
    h1
        {
        background: url("./img/logo.png");
        width: 204px;
        height: 93px;
        overflow: hidden;
    	float: left; 
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        }
    
    
    
    	 
    nav #nav{
    	float: right; 
        margin-top: 30px; 
    	}
    
    #nav li{
    	display: inline;
        list-style-type: none;
        padding-right: 20px;
      
        }
    
    #nav li a{
    	text-decoration: none; 
    	color: black;
    
    	}
    
    #nav li a:hover{
    	color: cornflowerblue; 
    	text-decoration: none; 
    
    	}
        
    #circular{
    background: #000000;
    
    border-radius: 15px;
    color: white; 
    text-align: center; 
    
    }
    
    #circular a:link{
    color: white; 
    }
    
    #circular a:active{
    color: white;
    }
    
    #circular a{
    margin: 0 20px;
    }
    
    #hero{
    margin: 0 auto 0 auto; 
    padding: 0 auto 0 auto;
    width: 100%; 
    height: 500px;
    background: url("./img/bg_b.png");
    background-repeat: no-repeat; 
    color: white; 
    font-family: 'Source Sans Pro', sans-serif;
    padding: 150px 0; 
    clear: left; 
    text-align: center; 
    font-size: 3em; 
    position: relative; 
    }
    
    
    /* back button */
    span#back a{
    background: url("./img/arrow_left.png");
    text-indent: 100%;
    width: 42px;
    height: 30px;
    display: block;
    position: absolute;
    top: 50%;
    left: 0px;
    
    }
    
    /* end back button */
    
    /* next button */
    
    span#next a{
    
    background: url("./img/arrow_right.png");
    text-indent: 100%;
    width: 42px;
    height: 30px;
    display: block; 
    position: absolute;
    top: 50%;
    right: 0px;
    
    }
    
    /* next button end */
    
    .bolded{
    display: block;
    font-weight: 900; 
    }
        
    </style>
    </head>
    
    <body>
    <div class="container">
    
    <header id="header">
    
    
    <h1 id="logo">
    <a href="#link">Engine Labs</a>
    </h1>
    
    
    <nav>
    	<ul id="nav">
    		<li>
    		<a href="#about">
    		ABOUT
    		</a>
    		</li>
    		
    		<li>
    		<a href="#demo">
    		DEMOS
    		</a>
    		</li>
    		
    		<li>
    		<a href="#api">
    		API
    		</a>
    		</li>
    		
    		<li>
    		<a href="#media">
    		MEDIA
    		</a>
    		</li>
    		
    		<li>
    		<span id="circular">
    		<a href="#login">
    		Log in
    		</a>
    		</span>
    		</li>
    	</ul>
    	
    </nav>
    
    </header>
    
    
    
    </div>
    
    <section id="hero">
    <span class="bolded">
    HELLO.
    </span>
    
     We're a fancy startup. 
     
     <span id="back"><a href="back.html">back</a></span>
     
     <span id="next"><a href="next.html">next</a></span>
    </section>
    
    
    
    </body>
    
    </html>

    Here's the full code i have. I hope it makes sense. i feel i typed too much excessive stuff that's not necessary.

    the problem here is the back link shows on the right hand side of the arrow and the arrows are way too low in the hero image.

    the image hero section is basically a big gradient spanning 100% with the words HELLO. We're a fancy startup in the middle.
    Hello should be on one line and we're fancy startup should be directly underneath.

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    79
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<title>
    	Engine labs
    	</title>
    	
    	<script>
    		//For IE
    		document.createElement('header');
    		document.createElement('footer');
    		document.createElement('section');
    		document.createElement('article');
    		document.createElement('time');
    		document.createElement('nav');
    	</script>
    			
    			
    			<link href="http://yui.yahooapis.com/3.10.1/build/cssreset/cssreset-min.css" type="text/css">
    
    			<!--Get web font-->
    
    			<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,700,200italic,400italic' rel='stylesheet' type='text/css'>
    
    
    <style>
    
    
    body {
    	font-family: 'Source Sans Pro', sans-serif;
    	font-weight:400;
    }
    
    .container
        {
        margin: 0 auto;
        width: 724px;
        position: relative;
        background: #fff;
        padding: 0 10px 0 10px;
        text-align: left;
        }
    * html .container
        {
        width: 744px;
        w\idth: 724px;
        }
    
    
    header{
    margin-top: 30px; 
    margin-bottom: 50px; 
    }
    
    h1
        {
        background: url("./img/logo.png");
        width: 204px;
        height: 93px;
        overflow: hidden;
    	float: left; 
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        }
    
    
    
    	 
    nav #nav{
    	float: right; 
        margin-top: 30px; 
    	}
    
    #nav li{
    	display: inline;
        list-style-type: none;
        padding-right: 20px;
      
        }
    
    #nav li a{
    	text-decoration: none; 
    	color: black;
    
    	}
    
    #nav li a:hover{
    	color: cornflowerblue; 
    	text-decoration: none; 
    
    	}
        
    #circular{
    background: #000000;
    
    border-radius: 15px;
    color: white; 
    text-align: center; 
    
    }
    
    #circular a:link{
    color: white; 
    }
    
    #circular a:active{
    color: white;
    }
    
    #circular a{
    margin: 0 20px;
    }
    
    #hero{
    margin: 0 auto 0 auto; 
    padding: 0 auto 0 auto;
    width: 100%; 
    height: 500px;
    background: url("./img/bg_b.png");
    background-repeat: no-repeat; 
    color: white; 
    font-family: 'Source Sans Pro', sans-serif;
    padding: 150px 0; 
    clear: left; 
    text-align: center; 
    font-size: 3em; 
    position: relative; 
    }
    
    
    /* back button */
    span#back a{
    background: url("./img/arrow_left.png");
    text-indent: -1000%;
    width: 42px;
    height: 30px;
    display: block;
    position: absolute;
    top: 30%;
    left: 0px;
    
    }
    
    /* end back button */
    
    /* next button */
    
    span#next a{
    
    background: url("./img/arrow_right.png");
    text-indent: -1000%;
    width: 42px;
    height: 30px;
    display: block; 
    position: absolute;
    top: 30%;
    right: 0px;
    
    }
    
    /* next button end */
    
    .bolded{
    display: block;
    font-weight: 900; 
    }
        
    </style>
    </head>
    
    <body>
    <div class="container">
    
    <header id="header">
    
    
    <h1 id="logo">
    <a href="#link">Engine Labs</a>
    </h1>
    
    
    <nav>
    	<ul id="nav">
    		<li>
    		<a href="#about">
    		ABOUT
    		</a>
    		</li>
    		
    		<li>
    		<a href="#demo">
    		DEMOS
    		</a>
    		</li>
    		
    		<li>
    		<a href="#api">
    		API
    		</a>
    		</li>
    		
    		<li>
    		<a href="#media">
    		MEDIA
    		</a>
    		</li>
    		
    		<li>
    		<span id="circular">
    		<a href="#login">
    		Log in
    		</a>
    		</span>
    		</li>
    	</ul>
    	
    </nav>
    
    </header>
    
    
    
    </div>
    
    <section id="hero">
    <span class="bolded">
    HELLO.
    </span>
    
     We're a fancy startup. 
     
     <span id="back"><a href="back.html">back</a></span>
     
     <span id="next"><a href="next.html">next</a></span>
    </section>
    
    
    
    </body>
    
    </html>
    This seems to get my intended design outcome. But do you see any bad practices in my code here or something you would do differently to make the code cleaner or shorter in length?

    Is my use of text-indent correct? To put text there for semantic purposes and then moving it off screen with negative indents correct to show the background?

    it works as intended. i just think i'm doing something wrong.

    my understanding of relative positioning and absolute positioning seems kind of flawed?

    is the way i'm putting my logo inside a h1 also correct practice?

    i also wanted to point i'm not sure why firefox displays border radius correctly for the rounded button for login but not
    safari.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    It's hard to see without your images so a link would be better but I would still do it like this.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Engine labs</title>
    <script>
    		//For IE
    		document.createElement('header');
    		document.createElement('footer');
    		document.createElement('section');
    		document.createElement('article');
    		document.createElement('time');
    		document.createElement('nav');
    	</script>
    <link href="http://yui.yahooapis.com/3.10.1/build/cssreset/cssreset-min.css" type="text/css">
    
    <!--Get web font-->
    
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,700,200italic,400italic' rel='stylesheet' type='text/css'>
    <style>
    body {
    	font-family: 'Source Sans Pro', sans-serif;
    	font-weight:400;
    }
    .container {
    	margin: 0 auto;
    	width: 724px;
    	position: relative;
    	background: #fffccc;
    	padding: 0 10px 0 10px;
    	text-align: left;
    }
    .container:after{
    	content:".";
    	height:0;
    	clear:both;
    	display:block;
    	visibility:hidden;	
    }
    
    /* the code below is nonsense so remove it */
    * html .container {
    	width: 744px;
    	w\idth: 724px;
    }
    /*  remove the above code as it refers to IE5 and ide6 but is wrong anyway */
    
    header {
    	margin-top: 30px;
    	margin-bottom: 50px;
    }
    h1 {
    	background: url("./img/logo.png");
    	width: 204px;
    	height: 93px;
    	overflow: hidden;
    	float: left;
    	text-indent: 100%;
    	white-space: nowrap;
    	overflow: hidden;
    }
    nav #nav {
    	float: right;
    	margin-top: 30px;
    }
    #nav li {
    	display: inline;
    	list-style-type: none;
    	padding-right: 20px;
    }
    #nav li a {
    	text-decoration: none;
    	color: black;
    }
    #nav li a:hover {
    	color: cornflowerblue;
    	text-decoration: none;
    }
    #circular {
    	background: #000000;
    	border-radius: 15px;
    	color: white;
    	text-align: center;
    }
    #circular a:link { color: white; }
    #circular a:active { color: white; }
    #circular a { margin: 0 20px; }
    #hero {
    	clear:both;
    	margin: 0 auto 0 auto;
    	height: 500px;
    	background:red  url("./img/bg_b.png") no-repeat;
    	color: white;
    	font-family: 'Source Sans Pro', sans-serif;
    	padding: 150px 0;
    	text-align: center;
    	font-size: 3em;
    	position: relative;
    }
    /* back button */
    a#back  {
    	background:green url("./img/arrow_left.png");
    	text-indent: 100%;
    	width: 42px;
    	height: 30px;
    }
    /* end back button */
    
    /* next button */
    
    a#next {
    	background:yellow url("./img/arrow_right.png");
    	text-indent: 100%;
    	width: 42px;
    	height: 30px;
    }
    /* next button end */
    p.startup{text-align:center}
    .next,.back,.txt{
    	display:inline-block;
    	vertical-align:middle;
    }
    .txt{padding:0 50px}
    .txt b {
    	display: block;
    	font-weight: 900;
    }
    </style>
    </head>
    
    <body>
    <div class="container">
    		<header id="header">
    				<h1 id="logo"> <a href="#link">Engine Labs</a> </h1>
    				<nav>
    						<ul id="nav">
    								<li> <a href="#about"> ABOUT </a> </li>
    								<li> <a href="#demo"> DEMOS </a> </li>
    								<li> <a href="#api"> API </a> </li>
    								<li> <a href="#media"> MEDIA </a> </li>
    								<li> <span id="circular"> <a href="#login"> Log in </a> </span> </li>
    						</ul>
    				</nav>
    		</header>
    </div>
    <section id="hero"> 
    <p class="startup"><a id="back" href="#">back</a> <span class="txt"><b>Hello </b> We're a fancy startup</span> <a id="next" href="#">next</a> </p>
    </section>
    </body>
    </html>
    Unless you wanted the back and next at the edges then you would need to absolutely position them.

    e.g.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Engine labs</title>
    <script>
    		//For IE
    		document.createElement('header');
    		document.createElement('footer');
    		document.createElement('section');
    		document.createElement('article');
    		document.createElement('time');
    		document.createElement('nav');
    	</script>
    <link href="http://yui.yahooapis.com/3.10.1/build/cssreset/cssreset-min.css" type="text/css">
    
    <!--Get web font-->
    
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,700,200italic,400italic' rel='stylesheet' type='text/css'>
    <style>
    body {
    	font-family: 'Source Sans Pro', sans-serif;
    	font-weight:400;
    }
    .container {
    	margin: 0 auto;
    	width: 724px;
    	position: relative;
    	background: #fffccc;
    	padding: 0 10px 0 10px;
    	text-align: left;
    }
    .container:after{
    	content:".";
    	height:0;
    	clear:both;
    	display:block;
    	visibility:hidden;	
    }
    
    /* the code below is nonsense so remove it */
    * html .container {
    	width: 744px;
    	w\idth: 724px;
    }
    /*  remove the above code as it refers to IE5 and ide6 but is wrong anyway */
    
    header {
    	margin-top: 30px;
    	margin-bottom: 50px;
    }
    h1 {
    	background: url("./img/logo.png");
    	width: 204px;
    	height: 93px;
    	overflow: hidden;
    	float: left;
    	text-indent: 100%;
    	white-space: nowrap;
    	overflow: hidden;
    }
    nav #nav {
    	float: right;
    	margin-top: 30px;
    }
    #nav li {
    	display: inline;
    	list-style-type: none;
    	padding-right: 20px;
    }
    #nav li a {
    	text-decoration: none;
    	color: black;
    }
    #nav li a:hover {
    	color: cornflowerblue;
    	text-decoration: none;
    }
    #circular {
    	background: #000000;
    	border-radius: 15px;
    	color: white;
    	text-align: center;
    }
    #circular a:link { color: white; }
    #circular a:active { color: white; }
    #circular a { margin: 0 20px; }
    #hero {
    	clear:both;
    	margin: 0 auto;
    	height: 500px;
    	background:red  url("./img/bg_b.png") no-repeat;
    	color: white;
    	font-family: 'Source Sans Pro', sans-serif;
    	padding: 150px 0;
    	text-align: center;
    	font-size: 3em;
    	position: relative;
    }
    /* back button */
    a#back  {
    	background:green url("./img/arrow_left.png");
    	text-indent: 100%;
    	width: 42px;
    	height: 30px;
    	position:absolute;
    	left:0;
    	margin-top:-15px;
    }
    /* end back button */
    
    /* next button */
    
    a#next {
    	background:yellow url("./img/arrow_right.png");
    	text-indent: 100%;
    	width: 42px;
    	height: 30px;
    	position:absolute;
    	right:0;
    	margin-top:-15px;
    }
    /* next button end */
    .txt{
    	text-align:center;
    	margin:0;
    	padding:0 50px;
    	color:#fff;
    	font-weight:normal;
    }
    .txt b {
    	display: block;
    	font-weight: 900;
    }
    </style>
    </head>
    
    <body>
    <div class="container">
    		<header id="header">
    				<h1 id="logo"> <a href="#link">Engine Labs</a> </h1>
    				<nav>
    						<ul id="nav">
    								<li> <a href="#about"> ABOUT </a> </li>
    								<li> <a href="#demo"> DEMOS </a> </li>
    								<li> <a href="#api"> API </a> </li>
    								<li> <a href="#media"> MEDIA </a> </li>
    								<li> <span id="circular"> <a href="#login"> Log in </a> </span> </li>
    						</ul>
    				</nav>
    		</header>
    </div>
    <section id="hero"> 
     <h2 class="txt"><b>Hello </b> We're a fancy startup</h2>
    <p class="startup"><a id="back" href="#">back</a> <a id="next" href="#">next</a></p>
    </section>
    </body>
    </html>

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    79
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    the versions above don't work as intended.

    Hey, thanks for getting back to me.

    I tried the second version of your code above, it didn't look as intended.

    I'll show you mine.

    http://webpage.pace.edu/wc43870n/engine/index.html

    HTML Code:
    /* the code below is nonsense so remove it */
    * html .container {
    	width: 744px;
    	w\idth: 724px;
    }
    /*  remove the above code as it refers to IE5 and ide6 but is wrong anyway */
    How would i fix this for IE 6 since the code above is wrong. please provide some hints. thanks.

    Some corporations still use IE 6 from my limited knowledge.

    HTML Code:
    .container:after{
    	content:".";
    	height:0;
    	clear:both;
    	display:block;
    	visibility:hidden;	
    }
    In the code excerpt above, i'm not sure what the content: "." does and i don't know why the container wrapper, has no height? and why we are clearing both sides and why display block and why visibility hidden?

    Please clarify , thanks.

  7. #7
    SitePoint Zealot moretea's Avatar
    Join Date
    Jun 2004
    Location
    Texas, USA
    Posts
    117
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    One other nit... you might want to give #back and #next the attribute of "outline: none;". Otherwise, when you tab or focus onto those elements, you're going to get a faint blue dotted border around the arrow images; it disturbs the nice gradient background.

  8. #8
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    79
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by moretea View Post
    One other nit... you might want to give #back and #next the attribute of "outline: none;". Otherwise, when you tab or focus onto those elements, you're going to get a faint blue dotted border around the arrow images; it disturbs the nice gradient background.
    Thanks for the tip. Judging from the link i provided above, do you see any issues with my source code other than that?

    i can tell you that the border radius that's supposed to give me a nice round button for login is not showing properly rounded corners in safari on my mac. in firefox , it looks proper though.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by wc43870n View Post
    Hey, thanks for getting back to me.

    I tried the second version of your code above, it didn't look as intended.
    Looked fine to me

    The problem with your approach (apart from the non semantic use of html elements which we will talk about later ) is that you have placed the arrows at the absolute left and right of your 100% wide hero element but your image isn't 100% wide and so the right arrow is miles away from the background when the browser is maximised. You will either have to set that element to the width of the image or make the image stretch or reach the viewport edges.

    HTML Code:
    /* the code below is nonsense so remove it */
    * html .container {
    	width: 744px;
    	w\idth: 724px;
    }
    /*  remove the above code as it refers to IE5 and ide6 but is wrong anyway */
    How would i fix this for IE 6 since the code above is wrong. please provide some hints. thanks.
    It's an old IE5 hack and isn't needed for IE6 so just remove it and it will be fixed in IE6 (it would be fine if you needed to support ie5). IE6 has no need for any different rules there and you certainly won't be supporting IE5 which is what the whole hack is aimed at. Virtually no one I know supports IE6 these days and support is down to 0.2% or less. You have bigger issues than that anyway because IE8 and under are not displaying correctly anyway.

    Some corporations still use IE 6 from my limited knowledge.
    As I said IE6 usage is about 0.2% and so you shouldn't do out of your way to support it. However, If you code this correctly it will most likely display in IE6 anyway (as per my example).

    HTML Code:
    .container:after{
    	content:".";
    	height:0;
    	clear:both;
    	display:block;
    	visibility:hidden;	
    }
    In the code excerpt above, i'm not sure what the content: "." does and i don't know why the container wrapper, has no height? and why we are clearing both sides and why display block and why visibility hidden?

    Please clarify , thanks.
    The above is a method to contain floats as your floated nav is not contained properly within the parent (just add a coloured background to container and you will see it has no height). You need to contain and clear the floats so that the backgrounds of following elements do not slide under the float above (which is what is happening in IE8 and under). Just google "clearfix" or read the CSS faq on floats.

    The basics are that you insert generated content after the content in the element and set the geenerated content to display:block and clear:both and thus regain the flow of the document. The "." is to stop margin collapse in older browsers but is not needed. A space or empty quotes will do.

    We use clear:both on the hero element rather than clear:left just in case you introduce any right floating elements at a later date which would snag the layout. When you want content to clear all floats above then just use clear:both.

    Here is the code revised again and using the html5 shiv for proper IE8 and under support and extra css to set the html5 elements to display:block or they won't render correctly in older browsers either.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Engine labs</title>
    <!--[if lt IE 9]>  
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>  
    <![endif]-->
    <link href="http://yui.yahooapis.com/3.10.1/build/cssreset/cssreset-min.css" type="text/css">
    
    <!--Get web font-->
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,700,200italic,400italic' rel='stylesheet' type='text/css'>
    <style type="text/css">
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; /* for html5 elements*/ }
    body {
    	font-family: 'Source Sans Pro', sans-serif;
    	font-weight:400;
    }
    .container {
    	margin: 0 auto;
    	width: 724px;
    	position: relative;
    	background:#fff;
    	padding: 0 10px 0 10px;
    	text-align: left;
    }
    .container:after {/* contain floats*/
    	content:".";
    	height:0;
    	clear:both;
    	display:block;
    	visibility:hidden;
    }
    header {
    	margin-top: 30px;
    	margin-bottom: 50px;
    }
    h1 {
    	background: url("http://webpage.pace.edu/wc43870n/engine/img/logo.png");
    	width: 204px;
    	height: 93px;
    	overflow: hidden;
    	float: left;
    	text-indent: 100%;
    	white-space: nowrap;
    	overflow: hidden;
    }
    nav #nav {
    	float: right;
    	margin-top: 30px;
    }
    #nav li {
    	display: inline;
    	list-style-type: none;
    	padding-right: 20px;
    }
    #nav li a {
    	text-decoration: none;
    	color: black;
    	display:inline-block;
    	vertical-align:top;
    	text-transform:uppercase;
    }
    #nav li a:hover {
    	color: cornflowerblue;
    	text-decoration: none;
    }
    #nav li.login a {
    	background: #000000;
    	-moz-border-radius:15px;
    	-webkit-border-radius: 15px;
    	border-radius: 15px;
    	color: white;
    	text-align: center;
    	padding:0 20px;
    	text-transform:none;
    }
    #nav li.login a { color: white; }
    #nav li.login a:active { color: white; }
    #hero {
    	margin: 0 auto;
    	height: 200px;
    	background:#012234 url("http://webpage.pace.edu/wc43870n/engine/img/bg_b.png") no-repeat 50% 0;
    	color: white;
    	font-family: 'Source Sans Pro', sans-serif;
    	padding: 150px 0;
    	clear: both;
    	text-align: center;
    	font-size: 3em;
    	position: relative;
    }
    /* back button */
    a#back {
    	background:url("http://webpage.pace.edu/wc43870n/engine/img/arrow_left.png");
    	text-indent:-999em;
    	width: 42px;
    	height: 30px;
    	position:absolute;
    	left:0;
    	top:50%;
    	margin-top:-15px;
    }
    /* end back button */
    
    /* next button */
    a#next {
    	background: url("http://webpage.pace.edu/wc43870n/engine/img/arrow_right.png");
    	text-indent:-999em;
    	width: 42px;
    	height: 30px;
    	position:absolute;
    	right:0;
    	top:50%;
    	margin-top:-15px;
    }
    a#back:focus, a#next:focus { outline:0;/*if you remove the outline you should instead add alternative focus styles to aid keyboard users*/ }
    /* next button end */
    .txt {
    	text-align:center;
    	margin:0;
    	padding:0 50px;
    	color:#fff;
    	font-weight:normal;
    	font-size:100%;
    }
    .txt b {
    	display: block;
    	font-weight: 900;
    	text-transform:uppercase;
    }
    p.startup { zoom:1.0 }
    </style>
    </head>
    
    <body>
    <div class="container">
    		<header id="header">
    				<h1 id="logo"> <a href="#link">Engine Labs</a> </h1>
    				<nav>
    						<ul id="nav">
    								<li> <a href="#about"> About </a> </li>
    								<li> <a href="#demo"> Demos </a> </li>
    								<li> <a href="#api"> API </a> </li>
    								<li> <a href="#media"> Media </a> </li>
    								<li class="login"><a href="#login"> Log in </a></li>
    						</ul>
    				</nav>
    		</header>
    </div>
    <section id="hero">
    		<h2 class="txt"><b>Hello </b> We're a fancy startup</h2>
    		<p class="startup"><a id="back" href="#">back</a> <a id="next" href="#">next</a></p>
    </section>
    </body>
    </html>
    The issue is still that your gradient image does not stretch full width so either slice the end section and repeat it behind the image to get a full width effect or just have a centred section (or for modern browsers try a css3 gradient instead).

    Don't add spans around elements just to style them (as you did with the anchors and other elements). Just style the element concerned directly. Use semantic html. If you have a heading use a heading tag and if its text then its most likely a p element.

    My demo will display back to IE6 apart from the transparent images which IE6 doesn;t support. (Your demo wasn't working in IE8 and under at all.)

  10. #10
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,234
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    But do you see any bad practices in my code here or something you would do differently to make the code cleaner or shorter in length?
    Dunno, you could fiddle with your IE element code:
    Code:
    //For IE
    		document.createElement('header');
    		document.createElement('footer');
    		document.createElement('section');
    		document.createElement('article');
    		document.createElement('time');
    		document.createElement('nav');
    Instead you could do
    Code:
        <!--[if lte IE 8]>
          <script>
            var list='nav,time,article,section,footer,header'.split(','),
                el;
            while( el=list.pop() ){
                document.createElement(el);
            }
          </script>
        <![endif]-->
    Where instead if var list=longlistofthings, you could store a list somewhere and add to it whenever you needed. then you'd be splitting some array.

    Quote Originally Posted by Paul
    Use semantic html. If you have a heading use a heading tag and if its text then its most likely a p element.
    THIS. This is the rule you strive to hit with every line of code. Especially for interactive things. Mostly because it's too much work to be adding these everywhere: http://www.karlgroves.com/2013/03/02...-it-all-about/ when browsers'll do it for us if we use the right element in the first place. http://www.karlgroves.com/2013/05/14...ivs-and-spans/

    Quote Originally Posted by moreta
    One other nit... you might want to give #back and #next the attribute of "outline: none;". Otherwise, when you tab or focus onto those elements, you're going to get a faint blue dotted border around the arrow images; it disturbs the nice gradient background.
    This is horrible advice, or at least it is if you stop there. Those outlines are there for a reason!! Anyone using keyboard!! As a keyboard user, this is one of the most frustrating things in teh whole universe other than wedgies and toast always falling jam-side down.

    But the outlines can indeed be ugly, so *if* you want to remove them, that can be okay *IF* you replace with something else for focus. Like, if there's a hover state, add :focus to it!

    Now I don't see any :hover styles here yet either. When I use images that need to be interacted with, I almost always either have another state as part of an image sprite, or I sometimes add a semi-trans PNG overlay so I can do something like, go from a flat colour to a gradient, or just make the flat colour darker. User feedback ++, the thing changing usually signals "I DO SOMETHING! CLICK ME!" and too many developers rely on the pointer changing state (an arrow to a hand for instance). Touch and keyboard and voice users usually don't have a pointer, so relying on it is discriminatin' yo!

    In this case, for now I'd add a solid outline on focus and to help avoid mouse users from seeing it, a focus/hover override. The override doesn't seem to work well in Firefox, who is one of the browsers who places keyboard focus wherever a mouse clicks. Keyboard and mouse focus are starting to diverge in browsers, so I'm hoping eventually there'll be clear, separate, cross-browser styles for them in the future.

    Code:
    #next a:focus, #back a:focus {
      outline: 1px solid #someColorMatchingYourDesign;
    }
    #next a:focus:hover, #back a:focus:hover {
      outline: 0;
    }
    Or add a 2px bottom border or just add something so keyboarders know where they are!

  11. #11
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    79
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    http://webpage.pace.edu/wc43870n/engine/newengine.html

    I have a new problem. The articles that i have posted on this version above, the width of the text is not showing the way i want.

    I would like some advice on that if possible.

    I appreciate all the information provided thus far. I will post more questions as i look through it.

    THANKS!

  12. #12
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    79
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    http://webpage.pace.edu/wc43870n/engine/newengine2.html

    This is version 2 of the code. i seem to have figured out what i did wrong in the previous code version.

    but can you see anyway to improve this by looking at how i implemented it.

    Any suggestions on changing it or anything you would do differently.

    i want to learn the best practices. so any advice is appreciated.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    The code is looking better now. Well done

    A couple of visual observations:

    I have a 27" imac and when maximised your text stretches for miles and miles in one long line which is very hard to read. Consider putting a max-width on the content (around 1280px max or em equivalent). If you use auto margins then the content will centralise also and the whole thing becomes much easier to read. I would set the same max-width container for all those elements (apart from the banner) so that you have a centred page.

    The three feature images seem to be to be nothing more than decoration and as you have a heading tag underneath anyway they would be superfluous to the content so those images would be better as background images instead. You could add a class to the article element and apply the image as a background without adding any extra html. Just give some top padding to accommodate the height of the image. This also makes the html cleaner and easier to manage.

    For your hero element add 'background-size:cover' after the background rule and that will ensure the element stretches full browser width in modern browsers. Older browsers just get what they've got now.

    Code:
    #here{background-size:cover}
    It's looking much better now.

    BTW don't foget to add focus styles to the previous and next arrows so that keyboard users can tab to them.

  14. #14
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    79
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    The code is looking better now. Well done

    A couple of visual observations:

    I have a 27" imac and when maximised your text stretches for miles and miles in one long line which is very hard to read. Consider putting a max-width on the content (around 1280px max or em equivalent). If you use auto margins then the content will centralise also and the whole thing becomes much easier to read. I would set the same max-width container for all those elements (apart from the banner) so that you have a centred page.

    The three feature images seem to be to be nothing more than decoration and as you have a heading tag underneath anyway they would be superfluous to the content so those images would be better as background images instead. You could add a class to the article element and apply the image as a background without adding any extra html. Just give some top padding to accommodate the height of the image. This also makes the html cleaner and easier to manage.

    For your hero element add 'background-size:cover' after the background rule and that will ensure the element stretches full browser width in modern browsers. Older browsers just get what they've got now.

    Code:
    #here{background-size:cover}
    It's looking much better now.

    BTW don't foget to add focus styles to the previous and next arrows so that keyboard users can tab to them.
    Hi Paul, please check out my updated version:

    http://webpage.pace.edu/wc43870n/engine/newengine2.html


    There's still issues on bigger screens resolutions, apparently the quote won't center properly despite using text-align.

    i was thinking using absolute positioning , but that doesn't seem to work for this.

  15. #15
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,236
    Mentioned
    52 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by wc43870n View Post
    Hi Paul, please check out my updated version:

    http://webpage.pace.edu/wc43870n/engine/newengine2.html


    There's still issues on bigger screens resolutions, apparently the quote won't center properly despite using text-align.

    i was thinking using absolute positioning , but that doesn't seem to work for this.
    Try this:

    Code:
    blockquote p {
        max-width: 1024px;
        color: #808080;
        font-size: 2em;
        font-style: italic;
        text-align: center;
        margin:0 auto;        /* ADD ME */
    }
    .txt {
        color: #FFFFFF;
        font-weight: normal;
        margin: 0;    /* DELETE ME */
        text-align: center;    /* DELETE ME */
        padding: 0 50px;
    }
    blockquote footer {
        max-width: 1024px;
        font-size: 1.5em;
        text-align: center;
        margin:0 auto;        /* ADD ME */
    }

  16. #16
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    79
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    Try this:

    Code:
    blockquote p {
        max-width: 1024px;
        color: #808080;
        font-size: 2em;
        font-style: italic;
        text-align: center;
        margin:0 auto;        /* ADD ME */
    }
    .txt {
        color: #FFFFFF;
        font-weight: normal;
        margin: 0;    /* DELETE ME */
        text-align: center;    /* DELETE ME */
        padding: 0 50px;
    }
    blockquote footer {
        max-width: 1024px;
        font-size: 1.5em;
        text-align: center;
        margin:0 auto;        /* ADD ME */
    }
    Please check out this :
    http://webpage.pace.edu/wc43870n/engine/newengine2.html

    I added your suggestions. I also tried to add another section and tried put a background on the section tag to save on putting html in.

    But the background for the iphone is not showing up to the right of this text.

    i've tried padding and numerous other things. any clues?

    Thanks.

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Did you mean something like this:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Engine labs</title>
    <meta charset="utf-8">
    
    <!--[if lt IE 9]>  
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>  
    <![endif]-->
    
    <link href="http://yui.yahooapis.com/3.10.1/build/cssreset/cssreset-min.css" type="text/css">
    
    <!--Get web font-->
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,700,200italic,400italic' rel='stylesheet' type='text/css'>
    <style type="text/css">
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; /* for html5 elements*/ }
    .feature {
    	width:100%;
    	display:table;
    }
    .feature h2 { text-align:center; }
    .feature p {
    	padding:0 10px;
    	margin:0 0 1em
    }
    article.main-article {
    	display:table-cell;/* enable equal columns in ie8+ */
    	padding: 238px 0 10px;
    	background: pink;
    }
    * html .main-article { float:left }/* ie6 gets floarted */
    *+html .main-article { float:left }/* ie7 gets floarted */
    article.firstb {
    	background: url("http://webpage.pace.edu/wc43870n/engine/img/feature_01_b.png") no-repeat 50% 20px;
    	width: 33.3%;
    	background-color: pink;
    }
    article.secondb {
    	background: url("http://webpage.pace.edu/wc43870n/engine/img/feature_02_b.png") no-repeat 50% 20px;
    	width: 33.3%;
    	background-color: skyblue;
    }
    article.thirdb {
    	background: url("http://webpage.pace.edu/wc43870n/engine/img/feature_03_b.png") no-repeat 50% 20px;
    	width: 33.3%;
    	background-color: lime;
    }
    body {
    	font-family: 'Source Sans Pro', sans-serif;
    	font-weight:400;
    }
    .container {
    	margin: 0 auto;
    	width: 724px;
    	max-width: 1024px;
    	position: relative;
    	background:#fff;
    	padding: 0 10px 0 10px;
    	text-align: left;
    }
    .container:after {/* contain floats*/
    	content:".";
    	height:0;
    	clear:both;
    	display:block;
    	visibility:hidden;
    }
    header {
    	margin-top: 30px;
    	margin-bottom: 50px;
    }
    h1 {
    	background: url("http://webpage.pace.edu/wc43870n/engine/img/logo.png");
    	width: 204px;
    	height: 93px;
    	overflow: hidden;
    	float: left;
    	text-indent: 100%;
    	white-space: nowrap;
    	overflow: hidden;
    }
    nav #nav {
    	float: right;
    	margin-top: 30px;
    	max-width: 1024px;
    }
    #nav li {
    	display: inline;
    	list-style-type: none;
    	padding-right: 20px;
    }
    #nav li a {
    	text-decoration: none;
    	color: black;
    	display:inline-block;
    	vertical-align:top;
    	text-transform:uppercase;
    }
    #nav li a:hover {
    	color: cornflowerblue;
    	text-decoration: none;
    }
    #nav li.login a {
    	background: #000000;
    	-moz-border-radius:15px;
    	-webkit-border-radius: 15px;
    	border-radius: 15px;
    	color: white;
    	text-align: center;
    	padding:0 20px;
    	text-transform:none;
    }
    #nav li.login a { color: white; }
    #nav li.login a:active { color: white; }
    #nav li.login a:hover { color: cornflowerblue; }
    .buttonb {
    	background: #000000;
    	-moz-border-radius:15px;
    	-webkit-border-radius: 15px;
    	border-radius: 15px;
    	color: white;
    	text-align: center;
    	padding:0 20px;
    	text-transform:none;
    	text-decoration: none;
    	position: relative;
    	left: 10%;
    }
    .buttonb a { color: white; }
    .buttonb a:hover { color: cornflowerblue; }
    #hero {
    	margin: 0 auto;
    	height: 200px;
    	background:#012234 url("http://webpage.pace.edu/wc43870n/engine/img/bg_b.png") no-repeat 50% 0;
    	background-size: cover;
    	color: white;
    	font-family: 'Source Sans Pro', sans-serif;
    	padding: 150px 0;
    	clear: both;
    	text-align: center;
    	font-size: 3em;
    	position: relative;
    }
    /* back button */
    a#back {
    	background:url("http://webpage.pace.edu/wc43870n/engine/img/arrow_left.png");
    	text-indent:-999em;
    	width: 42px;
    	height: 30px;
    	position:absolute;
    	left:0;
    	top:50%;
    	margin-top:-15px;
    }
    /* end back button */
    
    a#back:hover { opacity: .5; }
    /* next button */
    a#next {
    	background: url("http://webpage.pace.edu/wc43870n/engine/img/arrow_right.png");
    	text-indent:-999em;
    	width: 42px;
    	height: 30px;
    	position:absolute;
    	right:0;
    	top:50%;
    	margin-top:-15px;
    }
    a#next:hover { opacity: .5; }
    a#back:focus, a#next:focus { outline:0;/*if you remove the outline you should instead add alternative focus styles to aid keyboard users*/ }
    /* next button end */
    .txt {
    	padding:0 50px;
    	color:#fff;
    	font-weight:normal;/*	font-size:100%;  */
    }
    .txt b {
    	display: block;
    	font-weight: 900;
    	text-transform:uppercase;
    }
    p.startup { zoom:1.0 }
    blockquote p {
    	color: gray;
    	text-align: center;
    	font-style: italic;
    	font-size: 2em;
    	max-width: 1024px;
    }
    blockquote footer {
    	text-align: center;
    	margin: 0 auto;
    	font-size: 1.5em;
    	max-width: 1024px;
    }
    .black { color: black; }
    article p { line-height: 150%; }
    hr { margin-bottom: 10px; }
    .product {
    	width: 33.3%;
    	padding:10px 480px 10px 0;
    	min-height:400px;
    }
    .iphone { background:pink url("http://webpage.pace.edu/wc43870n/engine/img/iphone_b.png") no-repeat 100% 10px; }
    .product p, .product h2 {
    	padding:0 10px;
    	margin:0 0 1em
    }
    .main-quote {
    	margin:auto;
    	width:1000px
    }
    section.main {
    	max-width:1280px;
    	margin:auto;
    	overflow:hidden;
    }
    </style>
    </head>
    
    <body>
    <div class="container">
    		<header id="header">
    				<h1 id="logo"> <a href="#link">Engine Labs</a> </h1>
    				<nav>
    						<ul id="nav">
    								<li> <a href="#about"> About </a> </li>
    								<li> <a href="#demo"> Demos </a> </li>
    								<li> <a href="#api"> API </a> </li>
    								<li> <a href="#media"> Media </a> </li>
    								<li class="login"><a href="#login"> Log in </a></li>
    						</ul>
    				</nav>
    		</header>
    </div>
    <section id="hero">
    		<h2 class="txt"><b>Hello </b> We're a fancy startup</h2>
    		<p class="startup"><a id="back" href="#">back</a> <a id="next" href="#">next</a></p>
    </section>
    <blockquote class="main-quote">
    		<p>"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum 
    				has been the industry's standard dummy text ever since the 1500s, when "</p>
    		<footer class="black txt" > — Joe smith <b>- CEO </b></footer>
    </blockquote>
    <hr>
    <section class="main feature">
    		<article class="main-article firstb">
    				<h2>feature1</h2>
    				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum 
    						has been the industry's standard dummy text ever since the 1500s, when an unknown printer 
    						took a galley of type and scrambled it to make a type specimen book. It has survived not 
    						only five centuries, but also the leap into electronic typesetting, remaining essentially 
    						unchanged. It was popularised in the 1960s with the release of Letraset sheets containing 
    						Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker 
    						including versions of Lorem Ipsum. </p>
    		</article>
    		<article class="main-article secondb">
    				<h2>feature2</h2>
    				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum 
    						has been the industry's standard dummy text ever since the 1500s, when an unknown printer 
    						took a galley of type and scrambled it to make a type specimen book. It has survived not 
    						only five centuries, but also the leap into electronic typesetting, remaining essentially 
    						unchanged. It was popularised in the 1960s with the release of Letraset sheets containing 
    						Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker 
    						including versions of Lorem Ipsum.1960s with the release of Letraset sheets containing 
    						Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker 
    						including versions of Lorem Ipsum. </p>
    		</article>
    		<article class="main-article thirdb">
    				<h2>feature3</h2>
    				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum 
    						has been the industry's standard dummy text ever since the 1500s, when an unknown printer 
    						took a galley of type and scrambled it to make a type specimen book. It has survived not 
    						only five centuries, but also the leap </p>
    		</article>
    </section>
    <hr>
    <section class="main">
    		<div class="product iphone">
    				<h2> Exciting tagline about culture </h2>
    				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum 
    						has been the industry's standard dummy text ever since the 1500s, when an unknown printer 
    						took a galley of type and scrambled it to make a type specimen book. It has survived not 
    						only five centuries, but also the leap into electronic typesetting, remaining essentially 
    						unchanged. It was popularised in the 1960s with the release of Letraset sheets containing 
    						Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker 
    						including versions of Lorem Ipsum. </p>
    				<p><a href="#learnmore" class="buttonb">Learn More &raquo; </a></p>
    		</div>
    </section>
    </body>
    </html>

    I wrapped a max width container around those elements to stop them getting too wide. The images are placed using the background-position to line them up in the right place.

    I added some padding here and there to give some breathing space and I also use display:table-cell for the thee equal height divs (IE7 just get normal floats).

    Be careful width your global rules because you are setting things like:

    Code:
    article{float:left:width:33.3%;padding:218px 0 0}
    It is unlikely that you want all article elements throughout your site styled like that so use a class instead.

    Global rules should only be used for basic margins and padding and rarely to set specifics unless you know that every time you use that element it will be the same..

  18. #18
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    79
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    http://webpage.pace.edu/wc43870n/eng...ginelayout.jpg

    That's what i want it to look like.

    http://webpage.pace.edu/wc43870n/engine/newengine3.html

    This is what i have thus far.

    I'm trying to center that section where i have the cellphone photo and text.

    I hope i've implemented this correctly for the most part.

    There's so much to learn still.

    I'm going to look over all your code and comments and start coming up questions.

    Thanks for all the help thus far.

  19. #19
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    79
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by wc43870n View Post
    http://webpage.pace.edu/wc43870n/eng...ginelayout.jpg

    That's what i want it to look like.

    http://webpage.pace.edu/wc43870n/engine/newengine3.html

    This is what i have thus far.

    I'm trying to center that section where i have the cellphone photo and text.

    I hope i've implemented this correctly for the most part.

    There's so much to learn still.

    I'm going to look over all your code and comments and start coming up questions.

    Thanks for all the help thus far.
    Hey Paul, I have another question, do you have any good suggestions for planning out layouts.

    There are some people who use grids such as 960. But i feel like i need to understand layouts myself first before using that.

    What's the best way to do layouts quickly and make them compatible and do testing across different resolutions.

    Any suggestions for quickly planning responsive layouts as well?

    Thanks in advance.

  20. #20
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    79
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by wc43870n View Post
    Hey Paul, I have another question, do you have any good suggestions for planning out layouts.

    There are some people who use grids such as 960. But i feel like i need to understand layouts myself first before using that.

    What's the best way to do layouts quickly and make them compatible and do testing across different resolutions.

    Any suggestions for quickly planning responsive layouts as well?

    Thanks in advance.
    width: 724px;
    I was looking at the width i set for my container.

    I actually pulled this value from another similar css layout.

    was wondering how to best estimate the value that i need for this section or other layouts. any advice is appreciated.

    Thanks.

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by wc43870n View Post

    I'm trying to center that section where i have the cellphone photo and text.

    I hope i've implemented this correctly for the most part.
    To center an element that has a width (and is not floated) then you should use auto left and right margins and it will centre automatically, No need to put 15% left and right margins as that is just guessing and indeed ensures that the element can never occupy only its own width should the page be constructed in a fluid way.

    It looks as though from your drawing that you want that element left aligned anyway so remove the 33.3 % width from it and if required apply a width to nested div instead if you want to restrict the content width.

    Code:
    .product {
        margin: 50px auto;
        min-height: 374px;
        padding: 10px 464px 10px 0;
      /*  width: 33.3%;*/
    }
    Hey Paul, I have another question, do you have any good suggestions for planning out layouts.

    There are some people who use grids such as 960. But i feel like i need to understand layouts myself first before using that.
    I would avoid grids until you have a good understanding of CSS otherwise you will never learn how to modify them to your needs.

    These days its all about fluid/elastic design so some grids are a bit outdated in that respect but the new ones like bootstrap or foundation do take a mobile first approach and are quite good but are a heavy price to pay for most small sites when a couple of simple divs will do the trick.

    There is no magic to creating a fluid layout as that is how a div behaves by default. Just put text in a div and it will fit on every device known to man. The problem is when designers get in the way and start restricting things to behave as if the web was paper. It's not.

    The concept is simple (but it's not always easy) and to create a fluid layout to fit on as many devices as possible you have to ensure your design can adapt as you open and close your window. Normally this would mean using a max-width that is suitable for large screens (nothing too wide though as that is just as bad - around 1280px max usually but depends on text size).

    As you close your browser window there will come a point where something just doesn't fit (or if you are designing mobile first the opposite is true) and at that point you will need to change the design so that it adapts and you do this with media queries using the current width as the breakpoint. This could simply be moving three columns into one column for smaller devices (or vice versa for the mobile approach). In that way you end up with a layout that works through the whole range and collects all devices on the way without ever needing to know anything about device width.

    width: 724px;
    I was looking at the width i set for my container.
    I actually pulled this value from another similar css layout.
    was wondering how to best estimate the value that i need for this section or other layouts. any advice is appreciated.
    724px is probably too small unless you have a minimalist design but will look lost on my 27" imac. It's fine for odd sections though but again it should really be a max-width anyway so that when you close the window the nav can move below the logo and the site can get smaller and smaller without a scrollbar appearing. That should be your goal these days.

    Testing browsers is easy. Just download all the main ones and test your design as you build. Older IE is a challenge though and an old spare computer is useful for loading older versions of IE to test (most of us have chucked out old computers but they are useful for testing even if they don't work very well). You can set up virtual machines for IE but I find that too much trouble for a computer illiterate like me.

  22. #22
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    79
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    despite finishing the css missing manuals book, i didn't try every example in the book, i guess the best way for me to master this will be to devote time to trying out all the code each day until i see every possible issue.

    what's a good method for testing ie on a mac?

  23. #23
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    79
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    To center an element that has a width (and is not floated) then you should use auto left and right margins and it will centre automatically, No need to put 15% left and right margins as that is just guessing and indeed ensures that the element can never occupy only its own width should the page be constructed in a fluid way.

    It looks as though from your drawing that you want that element left aligned anyway so remove the 33.3 % width from it and if required apply a width to nested div instead if you want to restrict the content width.

    Code:
    .product {
        margin: 50px auto;
        min-height: 374px;
        padding: 10px 464px 10px 0;
      /*  width: 33.3%;*/
    }


    I would avoid grids until you have a good understanding of CSS otherwise you will never learn how to modify them to your needs.

    These days its all about fluid/elastic design so some grids are a bit outdated in that respect but the new ones like bootstrap or foundation do take a mobile first approach and are quite good but are a heavy price to pay for most small sites when a couple of simple divs will do the trick.

    There is no magic to creating a fluid layout as that is how a div behaves by default. Just put text in a div and it will fit on every device known to man. The problem is when designers get in the way and start restricting things to behave as if the web was paper. It's not.

    The concept is simple (but it's not always easy) and to create a fluid layout to fit on as many devices as possible you have to ensure your design can adapt as you open and close your window. Normally this would mean using a max-width that is suitable for large screens (nothing too wide though as that is just as bad - around 1280px max usually but depends on text size).

    As you close your browser window there will come a point where something just doesn't fit (or if you are designing mobile first the opposite is true) and at that point you will need to change the design so that it adapts and you do this with media queries using the current width as the breakpoint. This could simply be moving three columns into one column for smaller devices (or vice versa for the mobile approach). In that way you end up with a layout that works through the whole range and collects all devices on the way without ever needing to know anything about device width.



    724px is probably too small unless you have a minimalist design but will look lost on my 27" imac. It's fine for odd sections though but again it should really be a max-width anyway so that when you close the window the nav can move below the logo and the site can get smaller and smaller without a scrollbar appearing. That should be your goal these days.

    Testing browsers is easy. Just download all the main ones and test your design as you build. Older IE is a challenge though and an old spare computer is useful for loading older versions of IE to test (most of us have chucked out old computers but they are useful for testing even if they don't work very well). You can set up virtual machines for IE but I find that too much trouble for a computer illiterate like me.
    i don't know why but when i tried that auto left and right margin, it didn't center the layout before.

    so if i have a div called abc, and i want to center it, do i need to set a width first and then use auto left and right margin?
    and what would be the best width to set it to ?

    so if i have a design that is approximately 724 px and i always want it to be centered and have space on both the left and right sides.

    what would be the best way to do this?

    would i use any specific type of positioning scheme?

  24. #24
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    79
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hey paul, i'm wondering how do you get the border radius rounded buttons to work in IE any version? 6-8 for example. it works in 9 right?

    i was looking at a htc workaround , but it doesn't seem to work for me.

    the htc workaround seems to work now. Does this work in IE 6-8?

  25. #25
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    79
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    i read that position: fixed does not work in IE 6 or 5. Does it work in IE 8?

    when are the best times to use this? only when you want something to stay in the same spot all the time when you scroll.

    like a nav bar or footer?

    what is the workaround for making it work in IE 6 ?


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
  •