I have built this header using custom CSS and bootstrap class names. I have tried z-index, float: initial properties already. Thanks in advance
.branding-preview {
height: 75px;
margin-left: 15px;
margin-right: 15px;
background-color: #0071bb;
}
.branding-logo {
float: left;
height: 50px;
font-size: 18px;
padding: 15px 15px;
}
.branding-logo img {
width: 300px;
height: 50px;
}
.branding-powered-by-logo {
float: right;
height: 50px;
color: white;
font-size: 15px;
padding: 2px 10px;
}
.preview-menu {
margin: 30px 0 0 0;
}
.preview-menu > li > a {
margin: 0 3px;
color: white;
text-transform: uppercase;
border-bottom: solid 1px transparent;
background-color: transparent !important;
}
<div class="branding-preview">
<div class="branding-logo">
<img id="branding-logo" src="/path/to/logo">
</div>
<div class="branding-powered-by-logo">
<span>Powered By</span>
<img id="branding-powered-by-logo" src="/path/to/logo" height="30">
</div>
<ul class="navbar-nav navbar-right nav preview-menu">
<li><a>Start</a></li>
<li><a>Plan</a></li>
<li><a>Manage</a></li>
<li><a>Learn</a></li>
<li><a>Admin</a></li>
</ul>
</div>
This is the result that I am getting with the current code,
actual result:
This is what I'm hoping it will look like, expected result:
Isn't simple without all the css rules, but the concept is: Create a wrapper floated to right and inside create 2 lines, one for the branding-powered-by-logo and display:block the second line is depend from actual CSS but probably works without modify anything.
If you can post the real page we can help you with more precision.
Hope this help you.
.branding-preview {
display:block;
height: 75px;
margin-left: 15px;
margin-right: 15px;
background-color: #0071bb;
}
.branding-logo {
float: left;
height: 50px;
font-size: 18px;
padding: 15px 15px;
}
.branding-logo img {
width: 300px;
height: 50px;
}
.branding-powered-by-logo {
/* ADDED */
display:block;
text-align:right;
height: 50px;
color: white;
font-size: 15px;
padding: 2px 10px;
}
.preview-menu {
margin: 0px 0 0 0;
}
.preview-menu > li > a {
margin: 0 3px;
color: white;
text-transform: uppercase;
border-bottom: solid 1px transparent;
background-color: transparent !important;
}
/* ADDED */
.wrapper-logo-navbar {
float: right;
}
.preview-menu > li {
display: inline-block;
}
<div class="branding-preview">
<div class="branding-logo">
<img id="branding-logo" src="/path/to/logo">
</div>
<div class="wrapper-logo-navbar">
<div class="branding-powered-by-logo">
<span>Powered By</span>
<img id="branding-powered-by-logo" src="https://cdn.pixabay.com/photo/2012/05/02/19/27/head-46086_960_720.png" height="30">
</div>
<ul class="navbar-nav navbar-right nav preview-menu">
<li><a>Start</a></li>
<li><a>Plan</a></li>
<li><a>Manage</a></li>
<!-- removed some elements for the rendering on StackOverflow -->
</ul>
</div>
</div>
I think you just need add
position:absolute; right:0px;
to your .preview-menu class.
Related
I was hoping for some help with a problem involving some divs.
I am doing a Udemy course to recreate the BBC website and I've got to a point where I have some divs with content but there is a gap between them.
body {
margin: 0;
padding: 0;
font-family: Helvetica, Arial;}
#topbar {
width: 1050px;
margin: 0 auto;
height: 40px;}
#bbclogo {
margin-top: 8px;
float:left;
margin-right: 10px;
}
.topbar-section {
float:left;
border-left: 1px solid #CCCCCC;
height: 100%;
}
#signinimage {
margin: 10px 15px;
height: 20px;
float: left;
}
#signin-text {
font-weight: bold;
font-size: 14px;
position: relative;
top: 12px;
padding-right: 65px;
}
#signin-div {
float:left;
}
#wiggly-line {
height: 40px;
float: left;
}
#bello-image {
height: 26px;
margin: 7px 15px 7px 12px;
float: left;
}
.topbar-menu {
font-weight: bold;
font-size: 14px;
padding: 13px 13px 0 13px;
height: 27px;
}
#more-arrow {
height: 4px;
margin-left: 25px;
}
#searchbox {
background-color: #E4E4E4;
border: none;
font-weight: bold;
font-size: 15px;
padding: 5px;
margin: 8px 0 8px 8px;
float: left;
}
#magnifying-glass {
margin-top: 8px;
height: 27px;
}
.clear {
clear: both;
}
#menu-bar-container {
background-color: #BB1919;
width: 100%;
height: 60px;
}
#menu-bar {
width: 1050px;
margin: 0 auto;
}
h1 {
margin: 0;
padding: 0;
color: white;
font-size: 40px;
font-weight: normal;
padding-top: 10px;
float: left;
}
#local-news {
float: right;
border: 1px solid #BB4545;
width: 175px;
margin: 15px 10px;
padding: 5px 5px 4px 5px;
}
#local-news a {
color: white;
text-decoration: none;
font-size: 20px;
position: relative;
top: -2px;
}
#local-news:hover {
text-decoration: underline;
}
#local-news img {
height: 20px;
padding-left: 10px;
}
#menu-bar-container-2 {
width: 100%;
background-color: #A91717;
display: block;
}
#menu-bar-2 {
width: 1050px;
margin: 0 auto;
height: 35px;
display: block;
}
#menu-bar-2 a {
color: white;
text-decoration: none;
padding: 0 16px;
border-right: 1px solid #BB4545;
font-size: 12px;
position: relative;
top: 9px;
float: left;
}
<div id="topbar">
<!--white top bar-->
<img id="bbclogo" src="Images\bbclogo.png"/>
<!--left border div with classes-->
<div id="signin-div" class="topbar-section"></div>
<!--Signin image-->
<div id="signin-div">
<img id="signinimage" src="Images\signinimage.png"/>
<span id="signin-text">Sign in</span>
</div>
<!--Bell div-->
<div id="bell-div">
<img id="wiggly-line" src="Images/pointed_line.png"/>
<img id="bello-image" src="Images/bell.png"/>
</div>
<!--Menubar links-->
<div class="topbar-section topbar-menu">News</div>
<div class="topbar-section topbar-menu">Sport</div>
<div class="topbar-section topbar-menu">Weather</div>
<div class="topbar-section topbar-menu">iPlayer</div>
<div class="topbar-section topbar-menu">TV</div>
<div class="topbar-section topbar-menu">Radio</div>
<div class="topbar-section topbar-menu">More
<img id="more-arrow" src="Images/arrow.png"/>
</div>
<!--Search bar-->
<div class="topbar-section">
<input id="searchbox" type="text" placeholder="Search">
<input type="image" id="magnifying-glass" src="Images/glass.png"/>
</div>
</div>
<!--To clear previous floats-->
<div class="clear"></div>
<!--Menu bar-->
<div id="menu-bar-container">
<div id="menu-bar">
<h1>NEWS</h1>
<div id="local-news">
Find local news
<img src="Images/pointer.png">
</div>
</div>
</div>
<!--Menu bar 2-->
<div id="menu-bar-container-2">
<div id="menu-bar-2">
Home
UK
World
Business
Politics
Tech
Science
Health
Education
Entertainent & Arts
Video & Audio
More
</div>
</div>
I've tried playing around with various things (changing display, floating, trying to clear previous divs...) but I can't seem to figure out the problem. I was hoping for some advice about what I am doing wrong.
I read somewhere that whitespace between divs can sometimes be an issue. Could this be the problem?
(strangely, when I created the code snippet above, the gap was not showing in the results window but when I try it in Chrome, IE or Firefox, the problem occurs)
Many thanks in advance
thanks for the advice on my problem.
As mentioned in my last comment, it was the height of the div which was creating the gap (it wasn't tall enough). I think this was due to another element's padding pushing the lower div down, so when I increased the height it brought everything into alignment.
I'm still learning a lot about web development and I am grateful for the responses. I'm sure I'll be learning a lot more along the way. Many thanks!
I'm wondering why the elements in my nav bar appear to have blank space above them? I've checked the margin and padding and there doesn't seem to be an issue, but there is a large space above my #logo and #searchbox which is messing up my layout, how can I get rid of the space above the elements?
Thanks a lot!
Here's my Code:
li {
display: inline-block;
}
ul {
display: inline-block;
margin: 0px;
padding: 0px;
}
#main_nav, logo {
display: inline-block;
padding: 0px;
margin: 0px;
}
nav li a:link {
font-weight: bold;
display: inline-block;
text-decoration: none;
font-family: times;
font-size: 24px;
list-style: none;
padding: 5px;
border: 2px solid black;
border-radius: 5px;
color: black;
}
nav li a:visited {
color: rgba(0,0,0,0.7);
}
nav li a:hover {
background-color: rgba(0,0,0,0.6);
color: white;
}
nav li a:active {
color: black;
border-color: black;
}
nav {
width: 1000px;
height: 130px;
background-color: rgba(255,255,255,0.7);
padding: 10px;
margin: 0px auto;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
input[type=search] {
font-size: 16px;
}
#searchbox {
position: absolute;
right: 0px;
top: 0px;
}
#searchbox_div {
position: relative;
display: inline-block;
padding: 0;
width: 100%;
}
#logo {
display: inline-block;
width: 200px;
font-family: arial;
margin: 0px;
padding: 0px;
font-size: 26px;
}
#logo_jeff, #logo_arries, #logo_website {
margin: 0px;
}
#logo_jeff {
letter-spacing: 35.5px;
}
#logo_arries {
letter-spacing: 11px;
}
#logo_website {
letter-spacing: 4px;
}
#main_content {
width: 1000px;
min-height: 600px;
display: block;
background-color: rgba(255,255,255,0.7);
margin: 0 auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
position: relative; top: 0px;
padding: 10px;
}
#here_you_can_learn {
font-size: 47px;
color: gray;
margin: 0 auto;
margin-bottom: 10px;
text-align: center;
}
#welcome {
text-align: center;
color: rgb(0, 0, 110);
font-size: 100px;
margin: 0;
padding: 10px 10px 20px 10px;
}
#down_arrow {
height: 50px;
margin: auto;
display: block;
padding: 10px;
}
#most_frequent {
width: 600px;
vertical-align: top;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#m_f_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#m_f_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#recent_activity {
width: 375px;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#r_a_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_body {
font-size: 15px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more_link:visited {
color: black;
}
#r_a_show_more_link:hover {
color: gray;
background-color: rgba(0,0,0,0.9);
}
#r_a_show_more_link:active {
color: black;
}
body {
background-image: url("../pictures/jeff_skiing.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 500px;
margin: 0px;
padding: 0px;
}
aside {
position: absolute;
right: 0px;
background-color: rgba(255,255,255,0.9);
width: 170px;
height: 600px;
margin: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding: 10px;
}
<!DOCTYPE html>
<head>
<title>Home | Jeff's Website</title>
<link href="styles/main_navigation.css" type="text/css" rel="stylesheet" />
<link href="styles/body.css" type="text/css" rel="stylesheet" />
<link href="styles/main_content.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!--Main Nav-->
<header>
<nav>
<div id="searchbox_div">
<form action="" id="searchbox">
<input id="search_input" type="search" name="searchmysite" placeholder="Search my Site!">
<input type="submit" value="Search!">
</form>
</div>
<div id="logo">
<h1 id="logo_jeff">JEFF</h1>
<h1 id="logo_arries">ARRIES</h1>
<h1 id="logo_website">WEBSITE</h1>
</div>
<div id="main_nav">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Trips</li>
<li>Politics</li>
<li>Pictures</li>
<li>Videos</li>
<li>Computer</li>
<li>Misc</li>
</ul>
</div>
</nav>
</header>
<!--Welcome to jeff's website-->
<div>
<h2 id="welcome">Welcome to my Website!</h1>
<a href="#here_you_can_learn">
<img src="pictures/down_arrow.png" id="down_arrow"/>
</a>
</div>
<!--right side nav-->
<aside>
<p>this is aside</p>
</aside>
<!--Main Content-->
<div id="main_content">
<h2 id="here_you_can_learn">Here you can learn about me and my adventures!</h2>
<!--Most Frequently visited pages: on left side of page-->
<div id="most_frequent">
<p id="m_f_heading">Most frequently visted pages!</p>
<p id="m_f_show_more">Show More</p>
</div>
<!--Recent Activity: on the right side of page-->
<div id="recent_activity">
<p id="r_a_heading">Recent Activity</p>
<p id="r_a_body">test</p>
<p id="r_a_show_more">Show More</p>
</div>
</div>
</body>
Your <nav> element has a padding of 10px.
EDIT: The absolutely positioned search form seems to be causing the problem. I made the following changes and the space went away:
#searchbox_div {
position: relative;
display: block;
padding: 0;
width: 100%;
}
#searchbox {
position: relative;
float: right;
}
#logo {
display: inline-block;
width: 200px;
font-family: arial;
margin: 0px;
padding: 0px;
font-size: 26px;
float: left;
}
#main_nav{
display: inline-block;
padding: 0px;
margin: 0px;
margin-top: 4em;
margin-left: 1em;
}
I noticed that you`re not using a css reset. A CSS Reset (or “Reset CSS”) is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline.
In case you didn’t know, every browser has its own default ‘user agent’ stylesheet, that it uses to make unstyled websites appear more legible. For example, most browsers by default make links blue and visited links purple, give tables a certain amount of border and padding, apply variable font-sizes to H1, H2, H3 etc. and a certain amount of padding to almost everything. Ever wondered why Submit buttons look different in every browser?
Obviously this creates a certain amount of headaches for CSS authors, who can’t work out how to make their websites look the same in every browser.
Using a CSS Reset, CSS authors can force every browser to have all its styles reset to null, thus avoiding cross-browser differences as much as possible.
Also, sometimes if I have a problem with blank spaces, I run the html all together so there are no blank spaces between the tags. To make it look neat, I insert carriage returns in the middle of the html tag.
By default, most browsers have an 8px or so margin that is built in or "Added" to the page style. The super easy way to eliminate this is through CSS. Simply use:
html,body{
margin:0;
}
You can also add:
padding:0;
If it's still giving you problems!
You appear to need to reset/normalize your css as that
html,body{
margin:0;
padding:0;
}
The <nav> element is configured to have 10 pixels of padding on all sides.
I want to have a navigation bar with a logo inside it but as I add the logo the line doesn't look fine!
The problem is when I add the pic its like the picture and the text doesnt stay in the same line! not that the line breaks but the text slides down a little while it shouldn't.
body {
background-color: #C8F1BA;
margin: 0px;
}
div#gnb_bg {
margin: 0px;
padding-top: 0px;
padding-bottom: 0px;
border-right: 10px solid black;
}
a.gnb {
background-color: #99FF33;
text-decoration: none;
font-size: 26px;
border-right: 1px solid #448811;
padding-right: 2.5%;
padding-left: 2.5%;
padding-top: 14px;
padding-bottom: 14px;
margin: 0px;
}
img#gnb_logo {
height: 30px;
margin: 10px;
}
nav#gnb {
text-align: center;
background-color: #99FF33;
height: 50px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<nav id="gnb" role="navigation" aria-label="Global Navigation">
<div id="gnb_bg">
<a class="gnb" href="../feedbacks/feedbacks.html">feedbacks</a>
<img id="gnb_logo" src="../images/logo.gif" />
</div>
</nav>
</body>
For starters we need to sort out your html.
Then look at your css your <a> if you're using padding etc you need to make it a block level element.
remove the height 50px from your nav that's not something you want to be giving height to. Instead use your padding of <a> to get the desired height it helps with responsive.
But because we want it to sit beside your image use inline-block
also do not use CSS to define an tag's height and width you should use the tags attributes so that rendering happens smoothly.
Also you need to use alt on images.
your image also needs the following css rule's:
img#gnb_logo {
vertical-align:middle;
margin:0 10px;
}
So that it sits the way you want it beside your link.
Also if that is your site's logo it should not be inside <nav>
If it's an icon relative to the link then instead of using <img> use background-image
body {
background-color: #C8F1BA;
margin: 0px;
}
ul,
li {
list-style: none;
}
div#gnb_bg {
margin: 0px;
padding-top: 0px;
padding-bottom: 0px;
border-right: 10px solid black;
}
a.gnb {
background-color: #99FF33;
text-decoration: none;
font-size: 26px;
border-right: 1px solid #448811;
padding-right: 2.5%;
padding-left: 2.5%;
padding-top: 14px;
padding-bottom: 14px;
margin: 0px;
display: inline-block;
}
img#gnb_logo {
vertical-align:middle;
margin:0 10px;
}
nav#gnb {
text-align: center;
background-color: #99FF33;
}
<header>
<nav id="gnb" role="navigation" aria-label="Global Navigation">
<ul id="gnb_bg">
<li>
<a class="gnb" href="../feedbacks/feedbacks.html">feedbacks</a>
<img id="gnb_logo" src="../images/logo.gif" height="30" alt="GNB Logo" />
</li>
</ul>
</nav>
</header>
If you add vertical-align: middle to both the a.gnb and img#gnb_logo, that will probably fix your problem.
Pay attention to the top/bottom padding on your link so that it does overflow the 50px height that you assigned to the parent container.
body {
background-color: #C8F1BA;
margin: 0px;
}
div#gnb_bg {
margin: 0px;
padding-top: 0px;
padding-bottom: 0px;
border-right: 10px solid black;
}
a.gnb {
background-color: #99FF33;
text-decoration: none;
font-size: 26px;
border-right: 1px solid #448811;
padding-right: 2.5%;
padding-left: 2.5%;
padding-top: 10px;
padding-bottom: 10px;
margin: 0px;
vertical-align: middle;
}
img#gnb_logo {
height: 30px;
margin: 10px;
vertical-align: middle;
}
nav#gnb {
text-align: center;
background-color: #99FF33;
height: 50px;
}
<nav id="gnb" role="navigation" aria-label="Global Navigation">
<div id="gnb_bg">
<a class="gnb" href="../feedbacks/feedbacks.html">feedbacks</a>
<img id="gnb_logo" src="http://placehold.it/100x50" />
</div>
</nav>
First your a.gnb class should have a display-block if you want to render padding on an inline tag like a "a" tag. And your line-height must be of 22px if you want to make it fit in a 50px height container (14px + 14px padding top and bottom + 22px line-height equal 50px)
Second, to make your image alignment just add vertical-align: middle to the img#gnb_logo rule:
body {
background-color: #C8F1BA;
margin: 0px;
padding: 0px;
}
div#gnb_bg{
margin:0px;
padding-top:0px;
padding-bottom:0px;
border-right:10px solid black;
}
a.gnb{
background-color: #99FF33;
text-decoration: none;
font-size:26px;
border-right:1px solid #448811;
padding-right:2.5%;
padding-left:2.5%;
padding-top:14px;
padding-bottom:14px;
margin:0px;
line-height: 22px;
display: inline-block;
}
img#gnb_logo{
height:30px;
margin:10px;
vertical-align: middle;
}
nav#gnb{
text-align:center;
background-color: #99FF33;
height: 50px;
}
You need to remove the margin.
img#gnb_logo{
height:30px;
margin:0px;
}
Check out the live demo.
body {
background-color: #C8F1BA;
margin: 0px;
}
#gnb{
padding:10px;
}
div#gnb_bg{
margin:0px;
padding-top:0px;
padding-bottom:0px;
border-right:10px solid black;
}
a.gnb{
background-color: #99FF33;
text-decoration: none;
font-size:26px;
border-right:1px solid #448811;
padding-right:2.5%;
padding-left:2.5%;
padding-top:14px;
padding-bottom:14px;
margin:0px;
}
img#gnb_logo{
height:30px;
}
nav#gnb{
text-align:center;
background-color: #99FF33;
height: 50px;
}
<nav id="gnb" role="navigation" aria-label="Global Navigation">
<div id="gnb_bg">
<a class="gnb" href="../feedbacks/feedbacks.html">feedbacks</a>
<img id="gnb_logo" src="http://placehold.it/100x50"/>
</div>
</nav>
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #C8F1BA;
margin: 0px;
}
a.gnb {
text-decoration: none;
font-size: 26px;
border-right: 1px solid black;
vertical-align: middle;
padding-right: 1%;
padding-left: .2%;
padding-top: 5px;
padding-bottom: 5px;
}
img#gnb_logo {
height: 30px;
vertical-align: middle;
margin:5px 0px;
}
nav#gnb {
text-align: center;
background-color: #99FF33;
height: 40px;
}
</style>
</head>
<body>
<nav id="gnb" role="navigation" aria-label="Global Navigation">
<div id="gnb_bg">
<img id="gnb_logo" src="http://placehold.it/100x50" />
<a class="gnb" href="../feedbacks/feedbacks.html">Website</a>
</div>
</nav>
</body>
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">
I've a div (.user-band), inside it there is one div (.user-block) floated to left and one UL (.user-stats) floated to right.
Now the issue is when I'm giving width/min-width in percentage to child 'li' items of 'ul' (.user-stats). The 'li' items are not appearing in a row within 'ul', but if i'm giving the same width in pixel (i.e. 250px) they are appearing in a row.
Can anyone please let me know whats going wrong here.
Here is the HTML:
<div class="clearfix user-band">
<div class="clearfix user-block">
<div class="user-pic">
<div class="pic-box">
<img src="images/user-pic.jpg" alt="">
</div> <!--pic-box-->
</div> <!--user-pic-->
<div class="user-info">
<p class="user-id">Martin</p>
<p class="user-location"><span class="fa fa-map-marker ic-location"></span> Los Angeles</p>
</div> <!--user-info-->
</div> <!--user-block-->
<ul class="user-stats">
<li class="stats-title">
Completed Deals
<span class="stats-value">15</span>
</li>
<li class="stats-title">
Pending Deals
<span class="stats-value">7</span>
</li>
<li class="stats-title no-click">
Total Commission
<span class="stats-value">$500</span>
</li>
</ul>
</div> <!--user-band-->
Here is the CSS:
.user-band { border: 1px solid #e26513; background: #F0701B; padding: 10px; }
.user-block { float: left; }
.user-pic, .user-info { float: left; }
.user-info { margin-left: 10px; }
.user-pic { padding: 2px; border-radius: 2px; background: #ffffff; }
.pic-box { overflow: hidden; text-align: center; width: 80px; height: 80px; }
.pic-box > img { max-width: 100%; min-height: 100%; }
.user-id { font-weight: 700; font-size: 18px; color: #ffffff; }
.user-location { color: #ffffff; }
.user-stats { float: right; margin: -10px -10px -10px 0; list-style-type: none; padding-left: 0; }
.user-stats { float: right; margin: -10px -10px -10px 0; list-style-type: none; padding-left: 0; }
.user-stats > li { display: inline-block; min-width: 250px; padding: 24px 10px; text-align: center; font-size: 14px; color: #ffffff; border-left: 1px solid #e26513; margin-left: -4px; cursor: pointer; }
.user-stats > li:hover { box-shadow: 0 0 200px #e26513 inset; }
.stats-value { font-weight: 700; display: block; font-size: 25px; }
.user-stats > li.no-click { cursor: auto; }
.user-stats > li.no-click:hover { box-shadow: none; }
.ic-location { font-size: 20px; }
You need to set a width on the UL - because it is floated.
http://codepen.io/elliz/pen/IeDCd/
15 Apr - Pen updated
See updated pen, what that what you mean?
Note - made code a little more semantic but not perfect.