I was trying to make a website and had an error; I cant make 2 backgrounds in a singular html page: I want to make it so that the header, footer and the body have separate backgrounds but the element repeats when it specifies in the CSS 'no-repeat. Here is the code:
* {
margin: 0 auto;
padding: 0;
background: url(image/stacks.jpg);
background-position: center;
background-repeat: no-repeat;
}
#web {
border: solid 3px;
width: 460px;
height: 40px;
margin: 0 auto;
background-color: black;
font-size: 33px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
background-image: url(https://th.bing.com/th?
id=OIF.X08wRmGQAg%2bBkQmjrlRbWQ&w=348&h=143&c=7&r=0&o=5&pid=1.7);
color: white;
}
#mar {
border: solid 3px;
width: 230px;
background-color: tomato;
font-size: 30px;
background-color: white;
color: white;
background-image: url(https://th.bing.com/th?
id=OIF.X08wRmGQAg%2bBkQmjrlRbWQ&w=348&h=143&c=7&r=0&o=5&pid=1.7);
margin: 0 auto;
}
#OK {
border: solid 3px;
width: 150px;
background-color: tomato;
font-size: 25px;
font-family: Arial, Helvetica, sans-serif;
background-color: white;
color: white;
background-color: green;
background-image: url(https://th.bing.com/th?
id=OIF.X08wRmGQAg%2bBkQmjrlRbWQ&w=348&h=143&c=7&r=0&o=5&pid=1.7);
}
#HI {
margin-left: 100px;
margin-top: 20px;
width: 100px;
color: red;
font-size: 23px;
background-image: url(https://th.bing.com/th?
id=OIF.X08wRmGQAg%2bBkQmjrlRbWQ&w=348&h=143&c=7&r=0&o=5&pid=1.7);
}
a {
text-decoration: none;
color: white;
background-image: url(https://th.bing.com/th?
id=OIF.X08wRmGQAg%2bBkQmjrlRbWQ&w=348&h=143&c=7&r=0&o=5&pid=1.7);
margin-right: 10px;
}
#hehe {
margin-right: 10px;
}
ul {
float: left;
}
li {
display: inline;
font-size: 30px;
color: white;
background-image: url(https://th.bing.com/th?
id=OIF.X08wRmGQAg%2bBkQmjrlRbWQ&w=348&h=143&c=7&r=0&o=5&pid=1.7);
}
<!DOCTYPE html>
<html>
<head>
<meta keywords="htmls,tech,learn" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>t3lem_تعليم</title>
</head>
<body>
<div id="hehe">
<ul>
<li> Home</li>
<li> الفيديوهات </li>
<li> اتصل بنا</li>
<li> عن الموقع</li>
</ul>
</div>
<div id="HI">
<a href="https://www.youtube.com/channel/UCi0k9ygpc-NXOL090pIUkuw/"> <img src="https://yt3.ggpht.com/4qs1rBAWeor-sAeiNr9fDSHw4dtpF6--drGr70O_xAhA5Zq9LVSZAPe-
vuiVIzRKIxwvlF5Evw=s600-c-k-c0x00ffffff-no-rj-rp-mo" width="80px"> </a>
العودة للقناة
</div>
<div id="wrapper">
<div id="web">
Welocme to T3leem_Website
</div>
<div id="mar">
أهلا بكم في موقع تعليم
</div>
<div id="OK">
الصفحة الرئيسية
</div>
</div>
</body>
</html>
I cant put 2 backgrounds and wanted to know why. I tried methods but nothing seems to work in HTML/CSS
I hope you can answer my question
and thanks
Read this to understand more about specificity .
And you can use one of the following things :
either add !important to background-repeat: no-repeat; in this way :
*{background-repeat: no-repeat !important;}
or you can add background-repeat: no-repeat; to individual element which are using background-image property
Related
I'm working on a Site for myself, but I have no clue how I get the Navigationbar centered in the site.
I thought that maybe someone else has an idea :) the whole navigation bar is slightly to the left & I don't know how to fix it.. Hope you guys out there can do this :) I'm a beginner # coding & I have so much more to learn ..
screenshot of the page
logo
thank you for your help :)
Html:
<!DOCTYPE html>
<html>
<head>
<title>Meine Seite!</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li>Sets</li>
<li>About</li>
<li class="logo">SueZ Logo</li>
<li>Gigs</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section class="features">
<figure>
<img src="" alt="trololololol">
<figcaption>Fresh Baked Techno</figcaption>
</figure>
<figure>
<img src="" alt="lalala">
<figcaption>?</figcaption>
</figure>
<figure>
<img src="" alt="Bla bli blub">
<figcaption>?</figcaption>
</figure>
</section>
<footer>Copyright © 2020 SueZ</footer>
</body>
</html>
CSS:
body {
background: rgb(58, 58, 58);
color: rgb(174, 62, 50);
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: black;
background-image: url("Fotos/background-warehouse.jpg");
background-size: 100%;
background-position: center;
height: 150px;
padding: 20px;
text-align: center;
}
header a {
color: rgb(174, 62, 50);
text-decoration: none;
text-transform: uppercase;
margin-top: 60px;
text
}
header .logo a {
background-image: url(Fotos/SueZ_Logo_Red_BG_Transparent.PNG);
background-size: 100px;
background-repeat: no-repeat;
display: inline-block;
height: 190px;
position: relative;
text-indent: -9999999px;
top: -40px;
width: 200px;;
margin-left: 20%;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav li {
display: inline-block;
margin-right: 20px;
}
.features {
background: white;
color: gray;
padding: 20px;
display: flex;
flex-direction: row;
}
.features figure {
margin: auto;
text-align: center;
text-transform: uppercase;
width: 200px;
}
.features figure img {
border: 1px solid white;
border-radius: 50%;
box-shadow: gray 0 0 10px;
width: 200px;
}
footer {
background: black;
color: gray;
font-size: 12px;
padding: 20px 20px;
text-align: center;
}
Here I made a snippet for the solution of your issue. check it. Hope it helps.
Updated CSS marked with /*----------*/
...............................................................................
A TIP for you
Don't use height.
body {
background: rgb(58, 58, 58);
color: rgb(174, 62, 50);
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
}
/*------------------------*/
header {
background-color: black;
background-image: url("Fotos/background-warehouse.jpg");
background-size: 100%;
background-position: center;
/*height: 150px;*/
padding: 40px;
text-align: center;
position:relative;
}
.logo{width:100px;position:absolute; left:0; right:0; margin: 0 auto; top:0; z-index:10;}
.logo img{width:100%;}
/*------------------------*/
header a {
color: rgb(174, 62, 50);
text-decoration: none;
text-transform: uppercase;
margin-top: 60px;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav li {
display: inline-block;
margin-right: 20px;
}
/*------------------------*/
nav li:last-child{margin-right:0}
nav li:nth-child(2){margin-right:120px}
/*------------------------*/
.features {
background: white;
color: gray;
padding: 20px;
display: flex;
flex-direction: row;
}
.features figure {
margin: auto;
text-align: center;
text-transform: uppercase;
width: 200px;
}
.features figure img {
border: 1px solid white;
border-radius: 50%;
box-shadow: gray 0 0 10px;
width: 200px;
}
footer {
background: black;
color: gray;
font-size: 12px;
padding: 20px 20px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Meine Seite!</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="logo">
<img src="https://i.stack.imgur.com/yfW19.png" alt="logo">
</div>
<nav>
<ul>
<li>Sets</li>
<li>About</li>
<li>Gigs</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section class="features">
<figure>
<img src="" alt="trololololol">
<figcaption>Fresh Baked Techno</figcaption>
</figure>
<figure>
<img src="" alt="lalala">
<figcaption>?</figcaption>
</figure>
<figure>
<img src="" alt="Bla bli blub">
<figcaption>?</figcaption>
</figure>
</section>
<footer>
Copyright © 2020 SueZ
</footer>
html/css newbie here.
I have done some courses on html/css and now I'm testing my knowledge by attempting to copy some websites I like. Right now I'm trying my best to make Khan Academy's front page (https://www.khanacademy.org), but I've been struggling with something.
I have an <ul> that represents the top navigation bar of the page, and now I'm trying to center their logo (<div id="ka"> that is inside the navbar as a list item) to the page but using text-align: center and margin-left: auto; & margin-right: auto doesn't seem to do anything.
Here's my code:
body {
margin: 0;
padding: 0;
background-image: url("https://cdn.kastatic.org/images/homepage/mountains-simple.svg");
background-repeat: no-repeat;
background-size: 157.75%;
background-position-x: 50.825%;
}
li {
display: inline-block;
}
.navbar {
overflow: hidden;
width: 100%;
height: 60px;
border-bottom-color: #68e2de;
border-bottom-width: 1px;
border-bottom-style: solid;
}
.navbar {
list-style: none;
}
.navbar-text {
color: white;
float: left;
font-weight: 400;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 17px;
padding: 13px 38px 0px 4px;
margin-left: -8px;
}
#ka {
display: inline-block;
}
#ka-logo {
float: left;
width: 24px;
margin-left: auto;
margin-right: auto;
}
#search-icon {
width: 32px;
margin-left: -44px;
margin-top: 8px;
}
#search-bar {
background-color: #47dcd6;
border-radius: 4px;
margin-left: 8px;
border: 1px solid #47dcd6;
padding: 12px 175px 14px 12px;
}
#expand-triangle {
font-size: 13px;
margin-left: 7px;
color: #85e8e3;
}
.bold-signika {
display: inline;
font-family: 'Signika', sans-serif;
font-size: 23px;
color: white;
font-weight: 600;
}
.signika {
display: inline;
font-family: 'Signika', sans-serif;
color: white;
font-size: 23px;
}
#sign {
float: right;
margin-right: 44px;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Signika:400,600" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<ul class="navbar">
<li class="navbar-text">Subjects<span id="expand-triangle">▼</span></li>
<li id="search-bar" class="navbar-text">Search</li>
<li><img id="search-icon" src="search.png"></li>
<li>
<div id="ka">
<img id="ka-logo" src="leaf-green.svg">
<div class="bold-signika">KHAN</div>
<div class="signika">ACADEMY</div>
</div>
</li>
<li id="sign" class="navbar-text">New user / Sign up</li>
</ul>
</body>
</html>
I have seem this question but what was suggested didn't work for me.
My question is: how do I center the logo div?
A side note: since I'm fairly new to html there could be a lot of bad practices in the code above. Tips on how to do the things I did more efficiently would be highly appreciated.
here a solution for your problem.
In CSS, flex is very usefull, take a look at:
Flex guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/
My CSS
I have used flexbox for centered verically divs and set the right div.
For the logo, I used a first div with the height and width of the taskbar (non-clickable) and a second with the logo centered (clickable) with position absolute.
Enjoy
body {
margin: 0;
padding: 0;
background-image: url("https://cdn.kastatic.org/images/homepage/mountains-simple.svg");
background-repeat: no-repeat;
background-size: 157.75%;
background-position-x: 50.825%;
}
li {
display: inline-block;
}
.navbar {
overflow: hidden;
width: 100%;
height: 60px;
border-bottom-color: #68e2de;
border-bottom-width: 1px;
border-bottom-style: solid;
display: flex;
align-items:center;
position:absolute;
}
.navbar {
list-style: none;
}
.navbar-text {
color: white;
float: left;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 17px;
/**padding: 0 38px 0px 4px;**/
}
.logo {
position:absolute;
height:100%;
top:0;
left:0;
width:100%;
display:flex;
justify-content:center;
align-items:center;
pointer-events:none;
}
.logo-container {
display:flex;
align-items:center;
pointer-events:all;
}
.logo-container .ka-logo {
width: 24px;
}
.left, .right {
display:flex;
align-items:center;
}
.left {
margin:0 10px;
}
.right {
justify-content:right;
margin:0 10px 0 auto;
}
#search-icon {
width: 32px;
margin-left: -44px;
margin-top: 8px;
}
#search-bar {
background-color: #47dcd6;
border-radius: 4px;
margin-left: 8px;
border: 1px solid #47dcd6;
padding: 12px 175px 14px 12px;
}
#expand-triangle {
font-size: 13px;
margin-left: 7px;
color: #85e8e3;
}
.bold-signika {
display: inline;
font-family: 'Signika', sans-serif;
font-size: 23px;
color: white;
font-weight: 600;
}
.signika {
display: inline;
font-family: 'Signika', sans-serif;
color: white;
font-size: 23px;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Signika:400,600" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="navbar">
<div class="left">
<li class="navbar-text">Subjects<span id="expand-triangle">▼</span></li>
<li id="search-bar" class="navbar-text">Search</li>
<li><img id="search-icon" src="search.png"></li>
</div>
<div class="logo">
<div class="logo-container">
<img class="ka-logo" src="leaf-green.svg">
<div class="bold-signika">KHAN</div>
<div class="signika">ACADEMY</div>
</div>
</div>
<div class="right">
<li class="navbar-text">New user / Sign up</li>
</div>
</div>
<!--<ul class="navbar">
<div class="left">
<li class="navbar-text">Subjects<span id="expand-triangle">▼</span></li>
<li id="search-bar" class="navbar-text">Search</li>
<li><img id="search-icon" src="search.png"></li>
</div>
<div class="center">
<li>
<div id="ka">
<img id="ka-logo" src="leaf-green.svg">
<div class="bold-signika">KHAN</div>
<div class="signika">ACADEMY</div>
</div>
</li>
</div>
<div class="right">
<li id="sign" class="navbar-text">New user / Sign up</li>
</div>
</ul>-->
</body>
</html>
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<title>
Oaki Softworks
</title>
<link href='style.css' rel='stylesheet' type='text/css'>
<link rel="icon" href="favicon.png">
</head>
<body>
<div id="navigation">
<div style="height:20px;width=15%;float:right;">
<img src="facebook_icon.png" class="social_media_icon">
<img src="instagram_icon.png" class="social_media_icon">
<img src="twitter_icon.png" class="social_media_icon">
<img src="youtube_icon.png" class="social_media_icon">
</div>
<div class="navigation_tile">Contact Us</div>
<div class="navigation_tile">Careers</div>
<div class="navigation_tile">Products</div>
<div class="navigation_tile">About Us</div>
</div>
<div id="content">
<div id="blurb">
<img src="Logo%20(inverted,%20transparent).png" style="width:90%;height:auto;align-self:center;">
<h2>Video games as art.</h2>
<p>Even before the conception of our company, we have always embraced video games as the newest, emerging art form. Video games engage an audience like no other medium: allowing them to digest the material at their own pace, to identify themselves within their avatar as they see fit, and to interact with the world around them. Oaki Software aims to underline these elements of art even further with our own game design.</p>
</div>
<div id="main_pic">
<img src="art.jpg">
</div>
</div>
<div id="footer">
<p>
Oaki Softworks™
<br>Fort Collins, CO 80521
<br>benkulka#oakisoftworks.com
</p>
</div>
</body>
</html>
Here is my CSS
body {
background-color: #021034;
padding: 0px;
margin: 0px;
}
#navigation {
position: fixed;
background-color: black;
height: 40px;
width: 100%;
color: white;
color: #adb7bd;
font-family: 'Lucida Sans', Arial, sans-serif;
font-size: 16px;
line-height: 26px;
}
div.navigation_tile {
height: 30px;
width: 15%;
align-content: center;
text-align: center;
float: right;
margin: 5px;
}
div.navigation_tile:hover {
background-color: #092466;
}
div.navigation_tile:active {
background-color: white;
color: black;
}
#content {
margin-top: 30px;
display: inline-block;
text-align: justify;
}
#blurb{
padding: 40px 0 0 25px;
width: 28%;
height: 250px;
}
#main_pic {
float: right;
width: 66%;
height: 250px;
border: 10px #092466 solid;
overflow: hidden;
}
h1{
color: #A5B7E3;
font-family: 'Lato', sans-serif;
font-size: 54px;
font-weight: 300;
line-height: 58px;
margin: 0 0 20px;
}
h2 {
color: #6681C4;
font-family: 'Lato', sans-serif;
font-size: 34px;
margin: 0 0 10px;
}
p{
text-indent: 20px;
color: white;
font-size: 12px;
font-weight: 100;
font-family: 'Lucida Sans', Arial, serif;
line-height: 20px;
}
img.social_media_icon{
height: 15px;
width: 15px;
padding: 5px;
}
#footer {
height: auto;
width: 100%;
background-color: black;
text-align: center;
padding: 5px;
}
I'm trying to get my #blurb div to line up with my #main_pic div within my parent #content div, but I'm having trouble doing so. Can someone point me in the right direction?
#blurb {
[...]
float: left;
}
#content {
[..]
overflow: hidden;
}
Also consider removing height: 250px; from #blurb ... hard to say is it required for some reason.
My html, css and bootstrap look fine when I view them on my MAC in chrome and safari. However, when I view it on the WAMP server (Windows XP pro) the Bootstrap does not seem to be implementing. The CSS seems like it still works fine.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/Users/Pat/Downloads/bootstrap-3.3.2-dist/css/bootstrap.css" rel="stylesheet" media="all">
<link rel="stylesheet" href="Website_Layout.css">
<title>Home</title>
</head>
<body>
<nav class="nav">
<div class="container-fluid">
<ul class="nav nav-pills nav-justified">
<li>Home</li>
<li>Projects</li>
<li>Team</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<div class="container-fluid">
<h1>Safron Technologies</h1>
<p>Social Media Application Specialists</p>
</div>
</div>
<div class="fuel">
<div class="container-fluid">
<h1>What Fuels Us?</h1>
<p>We love building apps that change the way media is processed and viewed. Our apps will change your everyday life.</p>
</div>
</div>
<div class="learn-more">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h2>Development</h2>
<p>We specialize in creating IOS Apps with the sole purpose of connecting people, products and ideas.</p>
</div>
<div class="col-md-6">
<h2>Innovation</h2>
<p>Safron Technologies is on the cutting edge of Social Media Application Development. We have the knowledge and experience to produce sucessful worldwide applications.</p>
</div>
</div>
</div>
</div>
<nav class="nav2">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<h1>Contact Us</h1>
<p>(610) 639-7475</p>
<p>safrontechnolo.g#gmail.com</p>
</div>
<div class="col-md-3">
<h2>Inside Safron</h2>
<ul>
<li>Projects</li>
<li>Team</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</nav>
</body>
</html>
CSS:
.nav {
width: 100%;
float: top;
position: fixed;
margin: 0px 0px 0px 0px;
padding: 0px;
background-color: black;
height: 60px;
z-index: 100;
}
.nav ul {
list-style: none;
width: 800px;
margin-left: 300px;
margin-right: 300px;
padding: 0px;
text-align: center;
}
.nav li a {
display: block;
padding: 20px 20px;
color: white;
font-size: 16px;
text-transform: uppercase;
}
.nav li a:hover {
color: #FF6600;
background-color: white;
height: 60px;
}
.jumbotron {
background-image: url("/Users/Pat/Documents/Safron_Mountain.jpeg");
height: 880px;
background-repeat: no-repeat;
background-size: cover;
margin-bottom: 0;
}
.jumbotron h1 {
font-size: 64px;
text-align: center;
color: #FF7F50;
text-shadow: -1.2px 0 black, 0 1.2px black, 1.2px 0 black, 0 -1.2px black;
font-weight: bold;
font-family: 'Shift',sans-serif;
padding-top: 15px;
padding-bottom: 20px;
}
.jumbotron p {
font-size: 26px;
font-weight: bold;
text-align: center;
}
.fuel {
height: 800px;
background-color: #FF7F50;
background-repeat: no-repeat;
background-size: cover;
margin-bottom: 0;
}
.fuel h1 {
text-align: center;
font-size: 68px;
padding-top: 200px;
padding-bottom: 50px;
color: white;
text-shadow: .3px .3px 0 #CCC, .6px .6px 0 #CCC, .9px .9px 0 #444, 1.2px 1.2px 0 #444, 1.5px 1.5px 0 #444, 1.8px 1.8px 0 #444;
}
.fuel p {
text-align: center;
font-size: 36px;
padding-left: 200px;
padding-right: 200px;
color: white;
}
.learn-more {
height: 800px;
margin-bottom: 0;
}
.learn-more h2 {
text-align: center;
color: black;
font-size: 60px;
padding-top: 225px;
}
.learn-more p {
text-align: center;
color: black;
font-size: 32px;
padding-left: 50px;
padding-right: 50px;
}
.nav2 {
height: 150px;
background-image: url("/Users/Pat/Downloads/footer_lodyas/footer_lodyas.png");
}
.nav2 h1 {
font-size: 18px;
padding-bottom: 0px;
font-weight: bold;
color: white;
}
.nav2 p {
color: white;
}
.nav2 ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav2 a {
color: white;
font-size: 14px;
}
.nav2 li a {
display: block;
padding: 5px 0px;
color: white;
}
.nav2 h2 {
font-size: 18px;
font-weight: bold;
color: white;
}
Thanks for all of the help.
/Users/Pat/Downloads/bootstrap-3.3.2-dist/css/ is a path in your Mac computer and not in your Windows computer.
So you can choose to just have the file in the same folder (and use the file's name instead, as you did for Website_Layout.css) or use a Bootstrap CDN.
I like using relative paths in development so that I can move the files without any problems.For example, I create css,js and images folders inside the project directory.From there the path to say css files will be css/css_file.css.
Also,as mentioned by others you can use a cdn like http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css.
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">