Working on a page for my website and I'm trying to set up a series of profiles side-by-side.
The idea is that the images of the profiles will be external links, but I would like each small block profile to be side by side.
I'm fairly uncertain of how to do this, ass I thought fixing the padding and adding inline to the blocks themselves would stack them side by side. Help?
.Head, .Welcome {
padding-left: 300px;
margin-right: 150px;
}
.body {
padding-left: 300px;
margin-right: 150px;
}
.img.center {
display: block;
margin: 0 auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #d9d9d9;
height: 100%;
position: fixed;
display: inline-block;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
#pagename {
text-align: center;
font-family: "Arial"
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
font-family: "Arial"
}
.active {
background-color: #990000;
color: white;
}
li a:hover {
background-color: #990000
color: white;
}
#titletext {
text-align: center;
font-family: "Arial";
font-size: 50;
}
/*GAR PROFILE*/
.Gar{
padding-left: 300px;
}
.gar-block1{
background-color: #990000;
color: white;
font-family: "Arial";
text-decoration: none;
text-align: center;
width: 250px;
padding: 20px;
}
.gar-block2{
background-color: #d9d9d9;
color: black;
font-family:"Arial";
text-decoration: none;
width: 250px;
height: 300px;
padding: 20px;
}
/*MAYU PROFILE*/
.Mayu{
padding-left: 750px;
display: in-line;
}
.mayu-block1{
background-color: #990000;
color: white;
font-family: "Arial";
text-decoration: none;
text-align: center;
width: 250px;
padding: 20px;
display: in-line;
}
.mayu-block2{
background-color: #d9d9d9;
color: black;
font-family:"Arial";
text-decoration: none;
width: 250px;
height: 300px;
padding: 20px;
display: in-line;
}
<!doctype html>
<html>
<!--HEAD INFORMATION-->
<head>
<link rel="stylesheet" type="text/css" href="CHARACTER_PAGE.css">
<title>FFXIV RP Database</title>
<style>
div.head {
background-color: #000000;
color: white;
text-decoration: none;
margin: 5px 0 5px 0;
padding: 20px;
}
</style>
</head>
<!--END: HEAD INFORMATION-->
<body>
<!--NAVIGATION BAR-->
<div class="Navigation">
<ul>
<li id="first"><img src="xiv logo.png" width="200px"></li>
<li>Home</li>
<li>Characters</li>
<li>Story</li>
<li>Stats</li>
<li>Contact<li>
</ul>
</div>
<!--END: NAVIGATION BAR-->
<!--HEADER-->
<div class="head">
<h1 id="titletext">FFXIV RP Database</h1>
</div>
<!--END: HEADER-->
<!--BELOW HEAD CONTENT-->
<div class="Characters">
<p>
<h2 id="pagename">Characters</h2>
<p>
</div>
<!--CHARACTER PROFILE: GAR-->
<div class="Gar">
<p>
<img id="garprofile" src="Gar.png" height="290px">
<div class="gar-block1"><h3>"Gar"</h3></div>
<div class="gar-block2">
<p><b>Age:</b> 30</p>
<p><b>Height:</b> 5'11"</p>
<p><b>Job:</b> Dark Knight</p>
<p><b>Role:</b> Tank</p>
<p><b>Family:</b> Unknown mother and father (estranged)</p>
<p><b>Significant Other:</b> Mayumi Mori</p>
</p>
<!--CHARACTER PROFILE: MAYU-->
<div class="Mayu">
<p>
<aside>
<img id="garprofile" src="Mayumi.png" height="290px">
<div class="mayu-block1"><h3>Mayumi Mori</h3></div>
<div class="mayu-block2">
<p><b>Age:</b> 23</p>
<p><b>Height:</b> 4'8"</p>
<p><b>Job:</b> Astrologian</p>
<p><b>Role:</b> Healer</p>
<p><b>Family:</b> Junko Mori (Dead) and Khaguran (Unknown)</p>
<p><b>Significant Other:</b> Gar</p>
</aside>
</p>
</body>
</html>
I'm not sure if i can understand you well here but did you mean that you want the profile to be centered?
If this is the case, i already made it for you.
Please also check your html code, there are lots of missing </> close tag
I also edit some of your codes, please check the codes below both HTML and CSS.
Since .Gar and .Mayu are same layout, i made the css layout of it in one class profile display both container inline-block
Hope it helps.
div.head {
background-color: #000000;
color: white;
text-decoration: none;
margin: 5px 0 5px 0;
padding: 20px;
}
.Head, .Welcome {
padding-left: 300px;
margin-right: 150px;
}
.body {
padding-left: 300px;
margin-right: 150px;
}
.img .center {
display: block;
margin: 0 auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #d9d9d9;
height: 100%;
position: fixed;
display: inline-block;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
#pagename {
text-align: center;
font-family: "Arial"
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
font-family: "Arial"
}
.active {
background-color: #990000;
color: white;
}
li a:hover {
background-color: #990000 color: white;
}
#titletext {
text-align: center;
font-family: "Arial";
font-size: 50;
}
/*GAR PROFILE*/
.profile {
margin-left: 300px;
display: inline-block;
margin-bottom: 100px;
}
.block1 {
background-color: #990000;
color: white;
font-family: "Arial";
text-decoration: none;
text-align: center;
width: 250px;
padding: 20px;
}
.block2 {
background-color: #d9d9d9;
color: black;
font-family: "Arial";
text-decoration: none;
width: 250px;
height: 300px;
padding: 20px;
}
<!--NAVIGATION BAR-->
<div class="Navigation">
<ul>
<li id="first"><img src="xiv logo.png" width="200px"></li>
<li>Home</li>
<li>Characters</li>
<li>Story</li>
<li>Stats</li>
<li>Contact</li>
</ul>
</div>
<!--END: NAVIGATION BAR-->
<!--HEADER-->
<div class="head">
<h1 id="titletext">FFXIV RP Database</h1>
</div>
<!--END: HEADER-->
<!--BELOW HEAD CONTENT-->
<div class="Characters">
<p>
<h2 id="pagename">Characters</h2>
</p>
</div>
<!--CHARACTER PROFILE: GAR-->
<div class="profile Gar">
<p>
<img id="garprofile" src="Gar.png" height="290px">
<div class="block1">
<h3>"Gar"</h3>
</div>
<div class="block2">
<p><b>Age:</b> 30</p>
<p><b>Height:</b> 5'11"</p>
<p><b>Job:</b> Dark Knight</p>
<p><b>Role:</b> Tank</p>
<p><b>Family:</b> Unknown mother and father (estranged)</p>
<p><b>Significant Other:</b> Mayumi Mori</p>
</div>
</p>
</div>
<!--CHARACTER PROFILE: MAYU-->
<div class="profile Mayu">
<p>
<aside>
<img id="garprofile" src="Mayumi.png" height="290px">
<div class="block1">
<h3>Mayumi Mori</h3>
</div>
<div class="block2">
<p><b>Age:</b> 23</p>
<p><b>Height:</b> 4'8"</p>
<p><b>Job:</b> Astrologian</p>
<p><b>Role:</b> Healer</p>
<p><b>Family:</b> Junko Mori (Dead) and Khaguran (Unknown)</p>
<p><b>Significant Other:</b> Gar</p>
</div>
</aside>
</p>
</div>
Use float:left; in your css style sheets.
#a{
float:left;
}
#b{
float:left;
}
this two divs whith id : a , b will be side by side but you need to use clear:both; in next div;Remember about closing tags .I hope it helps
Related
I'm making a website for school, but i have a problem with my css code. I want to place the section1 and the section2 underneath the header so that it looks like that :
WANTED
The problem is that it looks like that (the problem is this enormous gap on the left) :
REALITY
I know that the problem comes from the float on the header and nav bar but i don't know how to keep the header look and having the two boxes ("section1" and "section2", grouped as "content").
The CSS code :
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
body {
color: black;
background-color: white;
font-size: 16px;
text-align:justify;
text-justify:inter-word;
}
.header {
width: 100%;
height: 80px;
display: block;
background-color: #101010;
}
.header_nav {
width: 65%;
height: 100%;
display: block;
margin: 0 auto;
}
.logo {
height: 100%;
display: table;
float: left;
}
.logo h1 {
color: white;
height: 100%;
display: table-cell;
vertical-align: middle;
font-family: "Trebuchet MS";
font-size: 32px;
font-weight: 600;
}
.nav {
float: right;
height: 50%;
line-height: 70px;
}
.nav ul li {
display: inline-block;
vertical-align: middle;
line-height: normal
}
.nav-option {
height: 100%;
display: table;
float: left;
padding: 0px 20px;
display: table-cell;
vertical-align: middle;
height: 100%;
color: white;
font-family: "Trebuchet MS";
font-size: 20px;
font-weight: 50;
}
.nav-option:hover {
text-decoration: underline;
}
.content {
overflow: hidden;
}
.section1 {
background-color: red;
width: 40%;
height: 300px;
margin: 1%;
float: left;
border: inset #101010 6px ;
}
.section2 {
background-color: blue;
width: 40%;
height: 300px;
float: right;
margin: 1%;
border-left: solid #101010 10px;
}
.section2:hover {
transform: scale(1.05);
}
The HTML code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Histoire de l'Informatique</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header">
<div class="header_nav">
<div class="logo">
<img src="logo.png">
<h1> HISTOIRE DE L'INFORMATIQUE </h1>
</div>
<div class="nav">
<nav>
<ul>
<li>Données</li>
<li>Algorithmes</li>
<li>Langages</li>
<li>Machines</li>
</ul>
</nav>
</div>
</div>
</<div>
<div class= "content">
<section class="section1">
<h1>Données</h1>
<article>
</article>
</section>
<section class="section2">
<h1>Algorithmes</h1>
<article>
</article>
</section>
</div>
<script src="script.js"></script>
</body>
</html>
Thanks for your help !
Your example seems to work for me provided .container has a width: 100% on it.
But for what you want exactly, I would use the following:
.container {
display: flex;
align-items: center;
justify-content: space-evenly; // google all the different options for this
}
// Get rid of the `float` properties on the sections, you won't need them
Below, is your original code in a snippet, and with that width property it's working for me.
But I highly recommend switching to flex box over floats, as it will give you way more control and better results.
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
body {
color: black;
background-color: white;
font-size: 16px;
text-align:justify;
text-justify:inter-word;
}
.header {
width: 100%;
height: 80px;
display: block;
background-color: #101010;
}
.header_nav {
width: 65%;
height: 100%;
display: block;
margin: 0 auto;
}
.logo {
height: 100%;
display: table;
float: left;
}
.logo h1 {
color: white;
height: 100%;
display: table-cell;
vertical-align: middle;
font-family: "Trebuchet MS";
font-size: 32px;
font-weight: 600;
}
.nav {
float: right;
height: 50%;
line-height: 70px;
}
.nav ul li {
display: inline-block;
vertical-align: middle;
line-height: normal
}
.nav-option {
height: 100%;
display: table;
float: left;
padding: 0px 20px;
display: table-cell;
vertical-align: middle;
height: 100%;
color: white;
font-family: "Trebuchet MS";
font-size: 20px;
font-weight: 50;
}
.nav-option:hover {
text-decoration: underline;
}
.content {
width: 100%;
overflow: hidden;
}
.section1 {
background-color: red;
width: 40%;
height: 300px;
margin: 1%;
float: left;
border: inset #101010 6px ;
}
.section2 {
background-color: blue;
width: 40%;
height: 300px;
float: right;
margin: 1%;
border-left: solid #101010 10px;
}
.section2:hover {
transform: scale(1.05);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Histoire de l'Informatique</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header">
<div class="header_nav">
<div class="logo">
<img src="logo.png">
<h1> HISTOIRE DE L'INFORMATIQUE </h1>
</div>
<div class="nav">
<nav>
<ul>
<li>Données</li>
<li>Algorithmes</li>
<li>Langages</li>
<li>Machines</li>
</ul>
</nav>
</div>
</div>
</div>
<div class= "content">
<section class="section1">
<h1>Données</h1>
<article>
</article>
</section>
<section class="section2">
<h1>Algorithmes</h1>
<article>
</article>
</section>
</div>
<script src="script.js"></script>
</body>
</html>
When I run my code in the browser, I have this little line of white space at the bottom of the page. I’ve been trying different solutions but can’t seem to find one that works. Below is the home.html page. Maybe someone here can shed some light into the problem.
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="cooper, scooper, dog, pop, pick, up>
<meta name="author" content="primarysnail">
<meta name="viewport" content="width=device-width">
<meta name="description" content="connecting clients in need of dog pick pick up srvice with scoopers who will come to the client and scoop the poop">
<title>CoopersScoopers || Home</title>
<link rel="stylesheet" type="text/css" href="../CSS/style.css">
</head>
<body>
<header> <!-- company name top left; nav bar top right -->
<div class="container">
<div class="branding">
<h1><span>cooper</span>Scoopers</h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Contact Us</li>
<li>Find a Scooper</li>
</ul>
</nav>
</div>
</header>
<section class="showcase"> <!-- showcase section; button to find scooper (./find.html) -->
<div class="container">
<h1>Leave the</h1>
<br>
<h1>Poo to the</h1>
<br>
<h1>Professionals.</h1>
<button type="button">Connect With a Scooper Today</button>
</div>
</section>
<section class="info-bar"> <!-- info bar; shows scooper process in 3 sections -->
<div class="container">
<div class="box">
<img src="../images/poop.jpg">
<h3>Connect With a Local Scooper</h3>
</div>
<div class="box">
<img src="../images/location.jpg">
<h3>Mark Your Poo</h3>
</div>
<div class="box">
<img src="../images/calendar.jpg">
<h3>Schedule Future Scoops</h3>
</div>
</div>
</section>
<section class="testimonials">
<div class="container">
<h1>Come Experience the Joy of a Poop-Free Life.</h1>
</section>
</body>
<footer>
<p>Copyright © primarySnail//</p>
</footer>
</html>
Here is the linked style.css file:
body {
font-family: Tahoma, Verdana, Segoe;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #ffffff;
}
/* global */
.container {
margin: auto;
width: 80%;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
button {
height: 50px;
background-color: #ffff00;
opacity: 0.8;
border: none;
padding-right: 30px;
padding-left: 30px;
float: left;
margin-top: -20px;
float: right;
}
button a {
text-decoration: none;
color: #4b0082;
font-weight: bold;
font-size: 25px;
}
/* header */
header {
padding-top: 30px;
min-height: 70px;
border-bottom: 4px solid #f0e68c;
background-color: #ffffff;
color: #8a2be2;
font-size: 10px;
}
header a {
text-decoration: none;
}
nav a {
color: #8a2be2;
text-decoration: none;
text-transform: uppercase;
font-size: 10px;
}
header span {
font-size: 15px;
}
header li {
float: left;
display: inline;
padding: 0px 10px 0px 10px;
}
.branding {
float: left;
}
.branding h1 {
margin: 0;
padding: 0px 10px 0px 10px;
border: 4px solid #8a2be2;
}
header nav {
float: right;
margin-top: 10px;
}
header .current {
border: 1px solid #999;
background-color: #8a2be2;
border-collapse: collapse;
}
header .current a {
color: #ffffff;
font-weight: bold;
}
/* showcase */
.showcase {
background-color: #8a2be2;
color: #ffffff;
text-align: left;
min-height: 200px;
border-bottom: 4px solid #f0e68c;
}
.showcase h1 {
font-size: 55px;
margin-top: 0;
margin-bottom: 0;
padding: 0px;
display: inline-block;
}
/* info bar*/
.info-bar {
margin-top: 20px;
border-bottom: 4px solid #f0e68c;
}
.info-bar .box {
float: left;
width: 30%;
padding: 10px;
text-align: center;
}
.info-bar .box img {
width: 90px;
height: 90px;
}
/* testimonials */
.testimonials {
background-color: #8a2be2;
color: #ffffff;
}
.testimonials h1 {
text-align: center;
}
/* footer */
footer {
background-color: #f0e68c;
margin-top: 0px;
padding: 5px;
text-align: center;
color: black;
opacity: 0.6;
}
I cannot for the life of me figure out why that little line of white space is in there at the very bottom. screenshot
Yes, I have observed white space showing in the bottom. It is because the elements inside body tag is not occupying the full available body size.
elemets heights are as
body- 722
header- 104
.showcase- 251enter code here
.info-bar- 201
.testimonials- ~71
footer- ~62
the white space in the botom is remaining area of viewport. If you make the browser smaller the white space will go away.
To fix this proble you can use below css to the body.
body {
font-family: Tahoma, Verdana, Segoe;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #ffffff;
/* Add below lines*/
display: flex;
flex-direction: column;
align-items: stretch;
}
I am trying to make two columns one for a vertical navigation bar to the left and the content column should float right. I tried every method possible. The page did not look good at all. I do not know what I am missing. Any help will be greatly appreciated. Any suggestions? I have been trying for hours but have not been successful. I am still learning the process. I tried floating the Navigation bar left and the content right, but that did not work as desired.
body {
background-color: red;
color: black;
font-family: Verdana, Arial, sans-serif;
}
#wrapper {
background-color: #dce9f7;
margin-left: auto;
margin-right: auto;
width: 70%;
min-width: 700px;
box-shadow: 5px 5px 5px 5px #828282;
}
h1 {
background-color: #d9c7b4;
color: black;
text-align: center;
}
h2 {
background-color: white;
font-size: 1.2em;
padding-left: 10px;
padding-bottom: 5px;
}
#nav {
text-align: center;
}
#content {
padding: 25px;
}
.floatright {
float: right;
padding-bottom: 20px;
}
.floatleft {
float: left;
padding: 20px;
}
<div id="wrapper">
<h1>The Nothing Burger</h1>
<div id="nav">
Home
Menu
Location
</div>
<h2>Only the best food!</h2>
<div class="floatright">
<img src="plate.jpg" alt="Great Food" width="333" height="156">
</div>
<div id="content">
<ul>
<li>Fresh, Healthy Cuisine</li>
<li>Friendly Service</li>
<li>Open for Breakfast, Lunch and Dinner</li>
</ul>
</div>
<div>123 Elm Street<br/> Appleton, CA<br/> 1-888-555-5555
<br/><br/>
</div>
</div>
Add a wrapper div around the navbar element and the content element like shown below and add these styles
.wrapperDiv {
display: flex;
}
#nav {
width: 30%;
}
.content-wrapper {
width: 70%
}
#nav a {
display: block;
}
body {
background-color: red;
color: black;
font-family: Verdana, Arial, sans-serif;
}
#wrapper {
background-color: #dce9f7;
margin-left: auto;
margin-right: auto;
width: 70%;
min-width: 700px;
box-shadow: 5px 5px 5px 5px #828282;
}
h1 {
background-color: #d9c7b4;
color: black;
text-align: center;
}
h2 {
margin: 0;
background-color: white;
font-size: 1.2em;
padding-left: 10px;
padding-bottom: 5px;
}
#nav {
text-align: center;
}
#content {
padding: 25px;
}
.floatright {
float: right;
padding-bottom: 20px;
}
.floatleft {
float: left;
padding: 20px;
}
.wrapperDiv {
display: flex;
}
#nav {
width: 30%;
}
.content-wrapper {
width: 70%
}
#nav a {
display: block;
}
<body>
<div id="wrapper">
<h1>The Nothing Burger</h1>
<div class="wrapperDiv">
<div id="nav">
Home
Menu
Location
</div>
<div class="content-wrapper">
<h2>Only the best food!</h2>
<div class="floatright">
<img src="plate.jpg" alt="Great Food" width="333" height="156">
</div>
<div id="content">
<ul>
<li>Fresh, Healthy Cuisine</li>
<li>Friendly Service</li>
<li>Open for Breakfast, Lunch and Dinner</li>
</ul>
<div>123 Elm Street<br/> Appleton, CA<br/> 1-888-555-5555
<br/><br/>
</div>
</div>
</div>
</div>
HTML
<body>
<div class="header">
<div class="header-logo"><u>MMH</u></div>
<div class="header-inner">Miami Max Hydro</div>
<nav class="header-nav">
About
Contact
</nav>
</div>
<div class="homepage">
<div class="content">
<div class="images">
<div class="column">
<div class="profile-large">
<div class="column1">
<div class="profile-overlay">
<div class="column1">
<img src=data:image/jpeg;base64,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 />
<div class="column2">
<p>Cell2</p>
</div>
<div class="column3">
<p>Cell3</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
CSS:
body {
background-image: url(http://weknowyourdreamz.com/images/sea/sea-08.jpg);
background-size: cover;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
back
}
.header {
text-align: center;
padding: 10px;
background: #D2F0C6;
overflow: auto;
position: fixed;
top: 1px;
right: 1px;
left: 1px;
border: 6px solid #80bc80;
}
.header-inner {
Margin-top: 10px;
}
.images {
padding: 20px;
}
.header-inner a {
text-decoration: none;
color: #000000;
font-size: 24px;
font-weight: bold;
line-height: 20px;
}
.header-logo {
font-size: 32px;
Font-weight: bold;
line-height: 28px;
}
.header-logo a {
text-decoration: none;
color: #000000;
}
.header-nav a {
text-decoration: none;
color: #295f6f;
margin-right: 5px;
margin-left: 5px;
line-height: 25px;
font-weight: bold;
}
.header-nav {
margin-right: 5px;
margin-left: 5px;
}
..images {
padding: 20px 0;
}
.column {
width: 33%;
height: 33%;
font-weight: bold;
line-height: 30;
float: left;
text-align: center;
}
.profile-overlay {
float: left;
border: 6px solid #80bc80;
width: 255px;
height: 245px;
}
My Issue:
Basically, No matter what I do to get a border around my image, I get
Basically the top border extends behind the header.
I've tried margin-top with no success, it just keeps the picture in the same spot relative to the border while pushing the top of the border down.
line-height won't work either. Even line-height 1 will instantly make the picture match the top border but go away from the bottom and hide under the header.
I do have an idea in mind, doing line-height 1 then doing some command to move the whole border/picture down relative to the body, but I don't know any code that does that.
JSFiddle.
Remove border: 6px solid #80bc80; for .profile-overlay and add it to .column1 img.
.column1 img {
border: 6px solid #80bc80;
}
I have been trying to add three icons for like 6 hours and nothing works can someone please help :(
Want the icon to show up above "Performance", "Technology", and "Design".
In addition I wanted to add quote icons to the <p> tags inside the three div's.
Also wanted to change the color of the icons to match the hr tag with the same hue of red.
Here is my HTML
<html>
<header>
<title>NavBar</title>
<link type="text/css" rel="Stylesheet" href="NavBar Example.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</header>
<body>
<div id="menu wrapper" class="red">
<div class="left"></div>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Contact</li>
<li class="login"><a class="login" href="#">Log In</a></li>
</ul>
</div>
<div class="header">
<img class="head-image" src="banner2.jpg">
</div>
<div class="hr">
<hr />
</div>
<div class="content">
<div class="container">
<div class="icon1">
<i class="fa fa-rocket fa-5x"></i>
<h2>Performance</h2>
<hr class="ptd" />
<p>Best in class when it comes to raw power!</p>
</div>
<div class="icon2">
<i class="fa fa-power-off fa-5x"></i>
<h2>Technology</h2>
<hr class="ptd" />
<p>Oringinal Innovations pushing the boundaries of modern technology</p>
</div>
<div class="icon3">
<i class="fa fa-laptop fa-5x"></i></a>
<h2>Design</h2>
<hr class="ptd" />
<p>Designed with you in mind</p>
</div>
</div>
</div>
<div class="footer">
</div>
</body>
</html>
Here is my CSS
body {
background-image: url(black-Linen.png);
}
/* NavBar */
#menu {
font-family: Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
margin: 50px 0;
padding: 0;
list-style-type: none;
background-color: #800000;
font-size: 13px;
height: 40px;
border-bottom: 2px solid #5A0000;
}
#menu li {
float: left;
margin: 0;
}
#menu li a {
text-decoration: none;
display: block;
padding: 0 20px;
line-height: 40px;
color: #FFF;
}
#menu li a:hover {
background-color: #CC0000;
border-bottom: 2px solid #DDD;
color: #000;
}
#menu_wrapper ul {
margin-left: 12px;
}
#menu_wrapper {
padding: 0 16px 0 0;
background-color: #666666;
}
#menu_wrapper div {
float: left;
height: 44px;
width: 12px;
background-color: #666666;
}
.header {
height: 720px;
width: 1600px;
margin: 0 auto 0 auto;
padding: 10px 10px 20px 10px;
overflow: hidden;
}
.head-image {
height: 720px;
width: 1600px;
box-shadow: 5px 5px 3px #000;
}
div.hr {
height: 32px;
background: url(fire.png) no-repeat scroll center;
}
div.hr hr {
display: none;
}
.content {
width:1600px;
height: 250px;
margin: 25px auto 15px auto;
padding: 10px;
}
/*Performance*/
.icon1 {
border: 2px solid #FFF;
background-image: url(tactile_noise.png);
height: 240px;
width: 500px;
float: left;
margin-right: auto;
margin-left: auto;
}
.container i {
display: block;
margin: 10px auto 0 auto;
width: 32px;
color: #800000;
border-radius:50%;
}
/*Technology*/
.icon2 {
border: 2px solid #FFF;
background-image: url(tactile_noise.png);
height: 240px;
width: 500px;
float: left;
margin-right: 42px;
margin-left: 42px;
}
/*Design*/
.icon3 {
border: 2px solid #FFF;
background-image: url(tactile_noise.png);
height: 240px;
width: 500px;
float: left;
margin-right: auto;
margin-left: auto;
}
h2 {
text-align: center;
font-weight: bold;
font-family: roboto, sans-serif;
margin-top: 2px;
}
h2 a {
text-decoration: none;
color: #FFF;
}
h2 a:hover, a:active {
color: #9f1111;
}
.ptd {
width: 40%;
}
p {
text-align: center;
font-style: italic;
font-family: roboto, sans-serif;
color: #FFF;
}
I think it's actually working fine, I can see icons in my JS Fiddle.
Could the problem be your link to your CSS file? Should there be a space within the href?
<link type="text/css" rel="Stylesheet" href="NavBar Example.css">
http://jsfiddle.net/Delorian/1x6u553h/
Start by double checking your markup. You have two IDs "menu" + "wrapper" and one selector "#menu_wrapper". I think you should keep IDs just for actions and add classes to add style.
Your markup:
<div id="menu wrapper" class="red">
...
</div>
Correct markup:
<div id="menu" class="wrapper red">
...
</div>
You are missing the protocol http:// on your link to the bootstrap CDN.
Try to add it to the link and see if it works:
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">