I can't get the background-image to display. I thought adding the min-width might make the image visible in case it was really small, but that didn't work. I've checked the url. It works as a normal image if put straight into the body.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel = stylesheet href = Father.css>
<title> Very Important Company </title>
</head>
<body>
<div id = backs </div>
<div class = header>
<p>
<img src = http://www.unixstickers.com/image/data/stickers/opensuse/Opensuse-logo-wob.sh.png id = gecko>
</p>
<div class = navigation>
<ul>
<li> SHOP </li>
<li> ABOUT US </li>
<li> RENTALS </li>
<li> CONTACT </li>
<li> PARTIES </li>
</ul>
</div>
</div>
<p>
<div class = main>
<p1> Our Eggs
</p1>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
}
#backs {
background: white;
}
#gecko {
content:url(http://www.unixstickers.com/image/data/stickers/opensuse/Opensuse-logo-wob.sh.png);
height: 128px;
width: 128px;
position: relative;
float: left;
margin-left: 10px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
}
li {
display: inline;
padding-left: 50px;
min-width: 100%
}
.navigation {
color: black;
letter-spacing: 2px;
float: right;
vertical-align: top;
width: 800px;
height: 70px;
margin-top: 47px;
min-width:800px;
padding-left: 150px;
position: absolute;
}
.main {
color: black;
font-size: 60px;
position: relative;
top: 150px;
background-image: url (http://files.vividscreen.info/soft/fc5e9b0dc8833c69951d28bb856b9ef4/Decorated-Easter-Eggs-2880x1920.jpg);
min-width: 100%;
height: 900px;
border: 2px solid red;
padding-top: 100px;
}
The format for the path to an image in background-image is url(...) not url (...)
So your line should be
background-image: url(http://files.vividscreen.info/soft/fc5e9b0dc8833c69951d28bb856b9ef4/Decorated-Easter-Eggs-2880x1920.jpg);
I think you should use bakground-image property rather than content
background-image:url(http://files.vividscreen.info/soft/fc5e9b0dc8833c69951d28bb856b9ef4/Decorated-Easter-Eggs-2880x1920.jpg);
this is your css
.main {
color: black;
font-size: 60px;
position: relative;
top: 150px;
background-image: url (http://files.vividscreen.info/soft/fc5e9b0dc8833c69951d28bb856b9ef4/Decorated-Easter-Eggs-2880x1920.jpg);
min-width: 100%;
height: 900px;
border: 2px solid red;
padding-top: 100px;
}
you have space between url and (http://files.vividscreen.info/soft/fc5e9b0dc8833c69951d28bb856b9ef4/Decorated-Easter-Eggs-2880x1920.jpg); in the background-image:. Remove the space and it should work.
Hi just remove the space before background-image:url and then check it (code as below) and close the div tag in <div id=backs> </div>
background-image: url(http://files.vividscreen.info/soft/fc5e9b0dc8833c69951d28bb856b9ef4/Decorated-Easter-Eggs-2880x1920.jpg);
demo
* {
margin: 0;
padding: 0;
}
#backs {
background: white;
}
#gecko {
content:url(http://www.unixstickers.com/image/data/stickers/opensuse/Opensuse-logo-wob.sh.png);
height: 128px;
width: 128px;
position: relative;
float: left;
margin-left: 10px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
}
li {
display: inline;
padding-left: 50px;
min-width: 100%
}
.navigation {
color: black;
letter-spacing: 2px;
float: right;
vertical-align: top;
width: 800px;
height: 70px;
margin-top: 47px;
min-width:800px;
padding-left: 150px;
position: absolute;
}
.main {
background: rgba(0, 0, 0, 0) url("http://files.vividscreen.info/soft/fc5e9b0dc8833c69951d28bb856b9ef4/Decorated-Easter-Eggs-2880x1920.jpg") repeat scroll 0 0;
border: 2px solid red;
color: black;
font-size: 60px;
height: 900px;
min-width: 100%;
padding-top: 100px;
position: relative;
top: 150px;
}
<div id ="backs"></div>
<div class ="header">
<p>
<img src = "http://www.unixstickers.com/image/data/stickers/opensuse/Opensuse-logo-wob.sh.png id = gecko" alt="">
</p>
<div class ="navigation">
<ul>
<li> SHOP </li>
<li> ABOUT US </li>
<li> RENTALS </li>
<li> CONTACT </li>
<li> PARTIES </li>
</ul>
</div>
</div>
<div class ="main">
<p1> Our Eggs
</p1>
</div>
Related
There is a weird downward shift of the div's on both sides of the page. Definitely something to do with relative and absolute positioning. I've heard a lot about setting the elements width and height when working with position:absolute and relative but no luck.
Is there a better way of positioning these containers inside each other also, all padding and margin is 0px (stated in body tag).
What it's supposed to look like: !https://imgur.com/a/Yol1Kf8
What I have made so far: !https://imgur.com/a/u4zU4iA
CSS:
#mid-section-container {
position: relative;
height: 800px;
width: 100%;
background-color: white;
}
.apps-container {
position: absolute;
height: 617px;
background-color: black;
}
#monthly-leaderboard {
right: 50px;
top: 50px;
}
#tournament-board {
width: 800px;
top: 50px;
left: 50px;
}
.boards-container-nav {
background-color: #363636;
border-bottom: solid 2px #25b6e6;
}
#monthly-leaderboard-header {
height: 85px;
}
#tournament-header {
width: 100%;
height: 85px;
}
.apps-content-container {
height: 80%;
margin: 0px 10px;
background-color: #252525;
border-radius: 7px;
}
#monthly-content {
width: 286px;
}
#tourn-content {
width: 780px;
}
HTML:
<div id="mid-section-container">
<div id="monthly-leaderboard" class="apps-container">
<div id="monthly-leaderboard-header" class="boards-container-nav">
<h1>Monthly Leaderboard</h1>
</div>
<div id="monthly-content" class="apps-content-container">
<div id="monthly-content-header" class="boards-content-nav">
<ul>
<li>Rank</li>
<li>User</li>
<li>Wins</li>
</ul>
</div>
<p>content goes here.</p>
<p>and here.</p>
</div>
</div>
<div id="tournament-board" class="apps-container">
<div id="tournament-header" class="boards-container-nav">
<ul>
<li>Current</li>
<li>Upcoming</li>
</ul>
</div>
<div id="tourn-content" class="apps-content-container">
<div id="tourn-content-header" class="boards-content-nav">
<ul>
<li>Platform</li>
<li>Torunament</li>
<li>Start Time</li>
<li>Teams</li>
</ul>
</div>
</div>
</div>
</div>
Try this one it is help full
#mid-section-container {
position: relative;
height: 800px;
width: 100%;
background-color: white;
}
.apps-container {
position: absolute;
height: 617px;
background-color: black;
}
#monthly-leaderboard {
right: 50px;
top: 50px;
}
#tournament-board {
width: 800px;
top: 50px;
left: 50px;
}
.boards-container-nav {
background-color: #363636;
border-bottom: solid 2px #25b6e6;
}
#monthly-leaderboard-header h1{
margin: 0;
padding: 10px 10px;
color: #FFF;
}
#tournament-header {
width: 100%;
}
.apps-content-container {
height: 80%;
margin: 0px 10px;
background-color: #252525;
border-radius: 7px;
}
#monthly-content {
width: 286px;
}
#tourn-content {
width: 780px;
}
ul li {
display: inline-block;
width: auto;
}
ul li a{
color: #FFF;
}
ul li {
color: #FFF;
}
#tournament-header ul li a{
padding: 10px 20px;
}
#tourn-content-header ul li{
padding: 10px 20px;
}
#monthly-content-header ul li{
padding: 10px 20px;
}
#monthly-content-header{
background-color: #404040;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
#tourn-content-header{
background-color: #404040;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
<div id="mid-section-container">
<div id="monthly-leaderboard" class="apps-container">
<div id="monthly-leaderboard-header" class="boards-container-nav">
<h1>Monthly Leaderboard</h1>
</div>
<div id="monthly-content" class="apps-content-container">
<div id="monthly-content-header" class="boards-content-nav">
<ul>
<li>Rank</li>
<li>User</li>
<li>Wins</li>
</ul>
</div>
<p>content goes here.</p>
<p>and here.</p>
</div>
</div>
<div id="tournament-board" class="apps-container">
<div id="tournament-header" class="boards-container-nav">
<ul>
<li>Current</li>
<li>Upcoming</li>
</ul>
</div>
<div id="tourn-content" class="apps-content-container">
<div id="tourn-content-header" class="boards-content-nav">
<ul>
<li>Platform</li>
<li>Torunament</li>
<li>Start Time</li>
<li>Teams</li>
</ul>
</div>
</div>
</div>
</div>
there is a unnecessary use of position:absolute; i have made changes in your code and removed unwanted css.
#mid-section-container {
position: relative;
height: 800px;
width: 100%;
background-color: white;
display:flex;
}
.apps-container {
height: 617px;
background-color: black;
}
.boards-container-nav {
background-color: #363636;
border-bottom: solid 2px #25b6e6;
}
#monthly-leaderboard-header {
height: 85px;
}
#tournament-header {
width: 100%;
height: 85px;
}
.apps-content-container {
height: 80%;
margin: 0px 10px;
background-color: #252525;
border-radius: 7px;
}
#tournament-board {
width: 70%;
}
#monthly-leaderboard {
width: 30%;
margin-left:20px;
}
<div id="mid-section-container">
<div id="tournament-board" class="apps-container">
<div id="tournament-header" class="boards-container-nav">
<ul>
<li>Current</li>
<li>Upcoming</li>
</ul>
</div>
<div id="tourn-content" class="apps-content-container">
<div id="tourn-content-header" class="boards-content-nav">
<ul>
<li>Platform</li>
<li>Torunament</li>
<li>Start Time</li>
<li>Teams</li>
</ul>
</div>
</div>
</div>
<div id="monthly-leaderboard" class="apps-container">
<div id="monthly-leaderboard-header" class="boards-container-nav">
<h1>Monthly Leaderboard</h1>
</div>
<div id="monthly-content" class="apps-content-container">
<div id="monthly-content-header" class="boards-content-nav">
<ul>
<li>Rank</li>
<li>User</li>
<li>Wins</li>
</ul>
</div>
<p>content goes here.</p>
<p>and here.</p>
</div>
</div>
</div>
Please update following css into your existing css. just add max-width: 1250px; you want. and margin: 0 auto;
#mid-section-container {
position: relative;
height: 800px;
width: 100%;
background-color: white;
max-width: 1250px;
margin: 0 auto;
}
add css
#mid-section-container{
display:flex;
}
#monthly-leaderboard{
width:70%;
height:100%;
}
#tournament-board{
width:30%;
height:100%;
}
also add relevant properties of flex
may be this is the best way to position divs
I am trying to create my header. Which includes a Logo (left), Banner (center) and NavBar (Right). I can get them level with each other but cannot get the banner to sit perfectly central of the page.
The banner is pushed over towards the right, sitting approximately 70% of the way across the screen.
Any ideas as to why this may be happening?
#header1 {
position: absolute;
width: 100%;
height: 100px;
text-align: center;
margin: 0px;
padding-top: 2px;
padding-right: 2px;
padding-left: 2px;
padding-bottom: 2px;
color: white;
font-size: 18px;
background-image: url(content/structure/fmabannerbehind.jpg);
background-position: center;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
font-style: italic;
}
#logo {
margin-left: 0px;
height: 100px;
width: 200px;
float: left;
border-color: red;
border-width: 3px;
border-style: solid;
}
#logo img {
height: 100px;
width: auto;
}
#banner {
position: absolute;
height: 100px;
width: auto;
display: inline-block;
margin: 0 auto;
border-color: red;
border-width: 3px;
border-style: solid;
}
#banner img {
height: 100px;
width: auto;
}
#menu1 {
margin-right: 0px;
height: 100px;
width: auto;
float: right;
border-color: red;
border-width: 3px;
border-style: solid;
}
<div id="header1">
<div id="logo">
<a href="http://www.fmarchived.com">
<img src="/content/structure/logo3.jpg" alt="logo">
</a>
</div>
<div id="banner">
<a href="/">
<img src="/content/structure/fmabanneronly.jpg" alt="banner">
</a>
</div>
<div id="menu1">
<div class="child2menu">
<ul>
<li>About Us
</li>
<li>Facebook
</li>
<li>Twitter
</li>
<li>Youtube
</li>
</ul>
</div>
</div>
</div>
UPDATE
Perhaps I should have explained better, I want the banner to be center
of the entire page, regardless of what the other divs are doing
Then add position:relative to #header1 and position:absolute + display: inline-table; position:absolute; left:0; right:0;
margin:auto; to #banner in both snippets
Option#1 - using CSS flexbox
Using justify-content: space-between from flexbox you can do this, and simplify a lot your code
* {
box-sizing: border-box;
margin: 0
}
#header1 {
display: flex;
justify-content: space-between;
position: relative
}
#header1 > div {
border: solid red
}
img {
vertical-align: bottom
}
#banner {
display: inline-table;
position: absolute;
left: 0;
right: 0;
margin: auto;
}
<div id="header1">
<div id="logo">
<a href="http://www.fmarchived.com">
<img src="//lorempixel.com/200/100" alt="logo">
</a>
</div>
<div id="banner">
<a href="/">
<img src="//lorempixel.com/100/100" alt="banner">
</a>
</div>
<div id="menu1">
<div class="child2menu">
<ul>
<li>About Us
</li>
<li>Facebook
</li>
<li>Twitter
</li>
<li>Youtube
</li>
</ul>
</div>
</div>
</div>
Option#2 - using your current code
Change position:absolute from #header1 to relative to remove scrollbars
* {
box-sizing: border-box;
margin: 0
}
#header1 {
position: relative;
width: 100%;
height: 100px;
text-align: center;
margin: 0;
padding: 2px;
color: white;
font-size: 18px;
background-image: url(content/structure/fmabannerbehind.jpg);
background-position: center;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
font-style: italic;
}
#header1 > div {
border: 3px solid red
}
img {
height: 100px;
width: auto;
vertical-align:bottom
}
#logo {
margin-left: 0;
width: 200px;
float: left;
}
#banner {
width: auto;
display: inline-table;
position:absolute;
left:0;
right:0;
margin:auto;
}
#menu1 {
margin-right: 0px;
float: right;
}
<div id="header1">
<div id="logo">
<a href="http://www.fmarchived.com">
<img src="//lorempixel.com/100/100" alt="logo">
</a>
</div>
<div id="banner">
<a href="/">
<img src="//lorempixel.com/100/100" alt="banner">
</a>
</div>
<div id="menu1">
<div class="child2menu">
<ul>
<li>About Us
</li>
<li>Facebook
</li>
<li>Twitter
</li>
<li>Youtube
</li>
</ul>
</div>
</div>
</div>
Remove the position: absolute property from the #banner div. If the #banner div needs to be absolutely positioned for some reason, you can center it by giving it a width and appropriateleft attribute instead.
Just remove the position absolute and it will align to the center.
#banner {
/*position:absolute;*/
height: 100px;
width: auto;
display: inline-block;
margin:0 auto;
border-color: red;
border-width: 3px;
border-style: solid;
}
you can use coordonates and margin: auto; to center your boxe if tou use absolute . but you need to reset display .
#banner {
position: absolute;
height: 100px;
width: auto;
display: table;/* shrinks on content */
left:0;
right:0;
margin: 0 auto;/* will center in between coordonates if boxe smaller */
border-color: red;
border-width: 3px;
border-style: solid;
}
run code snippet bellow:
#header1 {
position: absolute;
width: 100%;
height: 100px;
text-align: center;
margin: 0px;
padding-top: 2px;
padding-right: 2px;
padding-left: 2px;
padding-bottom: 2px;
color: white;
font-size: 18px;
background-image: url(content/structure/fmabannerbehind.jpg);
background-position: center;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
font-style: italic;
background:linear-gradient(to right,gray 50%, lightgray 50%);
}
#logo {
margin-left: 0px;
height: 100px;
width: 200px;
float: left;
border-color: red;
border-width: 3px;
border-style: solid;
}
#logo img {
height: 100px;
width: auto;
}
#banner {
position: absolute;
height: 100px;
width: auto;
display: table;
margin: 0 auto;
left:0;
right:0;
border-color: red;
border-width: 3px;
border-style: solid;
}
#banner img {
height: 100px;
width: auto;
}
#menu1 {
margin-right: 0px;
height: 100px;
width: auto;
float: right;
border-color: red;
border-width: 3px;
border-style: solid;
}
<div id="header1">
<div id="logo">
<a href="http://www.fmarchived.com">
<img src="/content/structure/logo3.jpg" alt="logo">
</a>
</div>
<div id="banner">
<a href="/">
<img src="/content/structure/fmabanneronly.jpg" alt="banner">
</a>
</div>
<div id="menu1">
<div class="child2menu">
<ul>
<li>About Us
</li>
<li>Facebook
</li>
<li>Twitter
</li>
<li>Youtube
</li>
</ul>
</div>
</div>
</div>
I'm making a website and i have been struggling to make two or more <div>'s next to each other.
Here is my code:
/*---MAKE PAGE---*/
body {
background: lightblue;
}
.navbar {
background: lightgreen;
height: auto;
width: 1840px;
float: left;
margin: 20px;
padding-left: 10px;
}
.navbar_objects {
text-decoration: none;
float: left;
}
.navobj {
text-decoration: none;
color: #3399FF;
float: left;
margin: 20px;
}
.navobj:hover {
color: white;
}
#title_of_page {
color: darkblue;
margin: 20px;
padding-left: 880px;
}
.title {
padding-top: 1px;
height: 75px;
width: 1850px;
background: lightgreen;
margin: 20px;
}
#title_recent {
color: darkblue;
margin: 20px;
padding-left: 300px;
padding-bottom: 20px;
}
.main {
height: 2000px;
width: 1810px;
background: lightgreen;
padding: 20px;
padding-left: 200px;
margin: 20px;
}
/*---END---*/
/*----------------START DESCRIPTIONS----------------*/
/*---START FIFA DESCRIPTION---*/
#image_div_recent_fifa16 {
margin: 0px;
height: 235px;
width: 250px;
float: left;
}
#text_div_recent_fifa16 {
float: right;
font-size: 20px;
width: auto;
height: auto;
}
/*---END---*/
/*---START NBA CODE---*/
#image_div_recent_nba {
margin: 0px;
height: 235px;
width: 250px;
float: left;
}
#text_div_recent_nba {
float: right;
font-size: 20px;
width: auto;
height: auto;
}
/*---END---*/
/*----------------CODE FOR POSTS----------------*/
/*---START FIFA POST CODE---*/
#post_fifa {
width: 250px;
height: 450px;
padding: 20px;
margin: 10px;
}
#post_fifa:hover {
border: solid black 1px;
}
/*---END---*/
/*---START NBA POST CODE---*/
#post_nba {
width: 250px;
float: up;
height: 450px;
margin: 10px;
padding: 20px;
}
#post_nba:hover {
border: solid black 1px;
}
<html>
<head>
<title>GameGo - Home</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="navbar">
<li class="navbar_objects">
<a class="navobj" href="index.html">Home</a>
<a class="navobj" href="games.html">Games</a>
<a class="navobj" href="reviews.html">Reviews</a>
<a class="navobj" href="contactus.html">Contact Us</a>
</li>
</div>
<br>
<br>
<br>
<br>
<br>
<div class="title">
<h1 id="title_of_page">Home</h1>
</div>
<div class="main">
<h2 id="title_recent">Recent</h2>
<br>
<div class="posts">
<div id="post_fifa">
<div class="image_div_recent_fifa16">
<img src="\\ISB-AD2012\Secondary Students\Grade 9\Paul\ICT\Grade 9\9.3 Web Design\fifa16logo.png" class="img_text_recent">
</div>
<div id="text_div_recent_fifa16">
<p class="class_text_recent">FIFA 16 - Fifa 16 is a football game available on most gaming platforms(Xbox one, PS4, PC, PS3, Xbox 360, Wii U). It is a very good game to play with friends, family or other. You can play 4 player co op on same console.
</p>
</div>
</div>
<div id="post_nba">
<div class="image_div_recent_nba">
<img src="\\ISB-AD2012\Secondary Students\Grade 9\Paul\ICT\Grade 9\9.3 Web Design\fifa16logo.png" class="img_text_recent">
</div>
<div id="text_div_recent_nba">
<p class="class_text_recent">FIFA 16 - Fifa 16 is a football game available on most gaming platforms(Xbox one, PS4, PC, PS3, Xbox 360, Wii U). It is a very good game to play with friends, family or other. You can play 4 player co op on same console.
</p>
</div>
</div>
<br>
<br>
</div>
</div>
</body>
</html>
I would like to put post_fifa next to post_nba.
Try adding display: inline-block to your elements:
#post_nba, #post_fifa {
display: inline-block;
}
https://jsfiddle.net/L8w1owr4/
One more solution, float your content divs:
#post_fifa,
#post_nba {
float: left;
}
and, please, correct your navbar, now code is invalid! You can make:
<ul class="navbar_objects">
<li><a class="navobj" href="index.html">Home</a></li>
<li><a class="navobj" href="games.html">Games</a></li>
<li><a class="navobj" href="reviews.html">Reviews</a></li>
<li><a class="navobj" href="contactus.html">Contact Us</a></li>
</ul>
with css classes:
.navbar_objects {
list-style-type: none;
display: inline-block;
}
li {
display: inline;
}
.navobj {
text-decoration: none;
color: #3399FF;
margin: 20px;
}
jsfiddle-link
I am making my own website for the branch that I'm in, I have stumbled upon a problem that I can't resolve.
I have made this code with HTML/CSS and what I want is that my advertisement div can be placed inside of my container div.
CSS:
#body {
font-family: verdana;
background-color: #4C4C4C;
}
#container {
background-color: #FFFFFF;
height: 900px;
width: 1250px;
margin-left: auto;
margin-right: auto;
margin-top: 15px;
position: relative;
}
#header {
background-image: url("company_banner.jpg");
background-repeat: no-repeat;
background-position: right top;
vertical-align: middle;
width: 1250px;
height: 225px;
position: relative;
}
#streep {
background-color: #FC001E;
margin-top: 0px;
width: 1250px;
height: 1px;
position: relative;
}
#nav {
margin-top: 0px;
margin-left: 0px;
width: 180px;
height: 220px;
position: absolute;
}
#advertisement{
background-image: url("advertisement.jpg");
background-position: top;
width: 200px;
height: 180px;
margin-top: opx;
position: relative
}
#content {
margin-top: 0px;
margin-left: 225px;
width: 1025px;
height: 625px;
position: relative;
}
#footer {
background-color: #FC001E;
margin-bottom: 0px;
width: 1250px;
height: 50px;
position: relative;
}
h1 {
position: absolute;
top: 65px;
left: 25px;
}
ul#menu {
padding: 10px;
list-style-type: none;
margin-top: 0px;
border-radius: 4px 4px 4px 4px;
}
ul#menu li {
padding: 10px;
}
ul#menu li a {
background-color: black;
color: white;
padding: 10px 20px;
border-radius: : 4px 4px 4px 4px;
text-decoration: none;
}
ul#menu li a:hover {
background-color: #FC001E;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
<title>Nijhuis PC</title>
</head>
<body id=body>
<div id=container>
<div id=header>
<h1>
company name
</h1>
</div>
<div id=streep></div>
<div id=nav>
<ul id=menu>
<li><a href=index.html>Home</a>
</li>
<br>
<li><a href=services.html>services</a>
</li>
<br>
<li><a href=whoweare.html>who we are</a>
</li>
<br>
<li><a href=contact.html>Contact</a>
</li>
<br>
</ul>
</div>
<div id=content>
welcom to the company's main website
<br>
<br>
</div>
<div id=advertisement></div>
<div id=footer></div>
</div>
</body>
</html>
I want my advertisement div under the navigation div.
Can you guys help me?
One alternative is to put it in the #nav after the UL.
I have 3 li's that I am trying to line up horizontally and then position a span inside each of the li's.
The spans get positioned correctly in Chrome but are well outside the boundary of the li's in Firefox.
http://jsfiddle.net/brendan_rice/mPnCh/1/
Can anyone help please?
<div id="blank-slate-steps">
<ul>
<li class="first">
<h3><em>Step 1</em>Create Something</h3>
<p>Once you have created Something Else you can Create Final Thing</p>
<span></span>
</li>
<li class="second">
<h3><em>Step 2</em>Create Something Else</h3>
<p>Once you have created Something Else you can Create Final Thing</p>
<span></span>
</li>
<li class="third">
<h3><em>Step 3</em>Create Final Thing</h3>
<p>Once you have created Something Else you can Create Final Thing</p>
<span></span>
</li>
</ul>
</div>
CSS
body{
padding-top: 300px;
}
#blank-slate-steps {
background-color: #E8E8E8;
bottom: 0;
font-family: OpenSansCondensedBold,sans-serif;
text-align: center;
width: 100%;
}
#blank-slate-steps li {
display: table-cell;
max-width: 300px;
padding: 40px;
position: relative;
width: 300px;
}
#blank-slate-steps h3 {
font-size: 1.6em;
margin-bottom: 0.6em;
}
#blank-slate-steps h3 em {
color: #878787;
float: left;
font-size: 0.8em;
font-style: normal;
margin-bottom: 4px;
text-transform: uppercase;
width: 100%;
}
#blank-slate-steps li.second span {
background: red url("../images/sprite/icons-grey-38.png") no-repeat scroll 0 -56px transparent;
height: 37px;
width: 36px;
}
#blank-slate-steps span {
background-color: red;
display: block;
height: 20px;
left: -10px;
position: absolute;
top: 50px;
width: 20px;
}
use position relative for blank-slate-steps div.
#blank-slate-steps {
background-color: #E8E8E8;
bottom: 0;
font-family: OpenSansCondensedBold,sans-serif;
text-align: center;
width: 100%;
position: relative;
}
Ok, I've made it work, you can do it like this : fiddle
Explanation: What I did was, I used position: relative; for #blank-slate-steps and than used position: relative; again for div and wrapped the <li> content inside it
HTML
<div id="blank-slate-steps">
<ul>
<li class="first">
<div style="position: relative;">
<h3><em>Step 1</em>Create Something</h3>
<p>Once you have created Something Else you can Create Final Thing</p>
<span></span>
</div>
</li>
<li class="second">
<div style="position: relative;">
<h3><em>Step 2</em>Create Something Else</h3>
<p>Once you have created Something Else you can Create Final Thing</p>
<span></span>
</div>
</li>
<li class="third">
<div style="position: relative;">
<h3><em>Step 3</em>Create Final Thing</h3>
<p>Once you have created Something Else you can Create Final Thing</p>
<span></span>
</div>
</li>
</ul>
</div>
CSS
body{
padding-top: 300px;
}
#blank-slate-steps {
background-color: #E8E8E8;
bottom: 0;
font-family: OpenSansCondensedBold,sans-serif;
text-align: center;
width: 100%;
position: relative;
}
#blank-slate-steps li {
display: table-cell;
max-width: 300px;
padding: 40px;
width: 300px;
}
#blank-slate-steps h3 {
font-size: 1.6em;
margin-bottom: 0.6em;
}
#blank-slate-steps h3 em {
color: #878787;
float: left;
font-size: 0.8em;
font-style: normal;
margin-bottom: 4px;
text-transform: uppercase;
width: 100%;
}
#blank-slate-steps li.second span {
background: red url("../images/sprite/icons-grey-38.png") no-repeat scroll 0 -56px transparent;
height: 37px;
width: 36px;
}
#blank-slate-steps span {
background-color: red;
display: block;
height: 20px;
left: -10px;
position: absolute;
top: 50px;
width: 20px;
}
Try to put your span in first like that:
<li class="second">
<span></span>
<h3><em>Step 2</em>Create Something Else</h3>
<p>Once you have created Something Else you can Create Final Thing</p>
</li>
and put the span in position:relative and float:left