CSS positioning background image elements on top of background image elements



<!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.

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.


<!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.


<!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.



<!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.

Hi,

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


<!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.


<!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>


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


/* 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.


.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.

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.

Looked fine to me:)

I’ll show you mine.

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

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.


/* 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).


.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.


<!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.)

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:


//For IE
		document.createElement('header');
		document.createElement('footer');
		document.createElement('section');
		document.createElement('article');
		document.createElement('time');
		document.createElement('nav');

Instead you could do


    <!--[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.

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/name-state-role-and-value-whats-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/links-are-not-buttons-neither-are-divs-and-spans/

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.


#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!

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!

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.

Hi,

The code is looking better now. Well done :slight_smile:

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.


#here{background-size:cover}

It’s looking much better now.:slight_smile:

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.

Try this:


blockquote p {
    max-width: 1024px;
    color: #808080;
    font-size: 2em;
    font-style: italic;
    text-align: center;
    [color=blue]margin:0 auto;[/color]        /* ADD ME */
}
.txt {
    color: #FFFFFF;
    font-weight: normal;
    [color=red][s]margin: 0;[/s][/color]    /* DELETE ME */
    [color=red][s]text-align: center;[/s][/color]    /* DELETE ME */
    padding: 0 50px;
}
blockquote footer {
    max-width: 1024px;
    font-size: 1.5em;
    text-align: center;
    [color=blue]margin:0 auto;[/color]        /* 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.

Hi,

Did you mean something like this:


<!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" > &#8212; 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:


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…

http://webpage.pace.edu/wc43870n/engine/enginelayout.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.

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.