Hello everyone I make some navbar just for practice, and what I want is to set the logo straight to the left but I does not know how to do that. Also navbar should be responsive.
Here is the code:
body {
font-family: Helvetica;
padding: 0;
margin: 0;
background-color: #f4f4f4;
font-size: 10px;
}
/* Global */
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
/* Header **/
header {
background: #28292b;
color: #ffffff;
min-height: 50px;
}
header a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
margin-top: 5px;
}
header #branding h1 {
display: inline-block;
vertical-align: middle;
}
header nav {
display: flex;
justify-content: center;
margin-top: 20px;
}
header .highlight,
header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
<header>
<div class="container">
<div id="branding">
<h1>LOGO</h1>
</div>
<nav>
<ul>
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
<li>FOUR</li>
<li>FIVE</li>
</ul>
</nav>
</div>
</header>
When I resize to mobile phone width hamburger icon will appear and logo should be no more floated on the left. It should be on center.
I hope someone can help me. Thanks :)
What I know so far is that a parent with nothing but floated children has no height.
In the header for example, I have the left logo floated and the text has an absolute position. The only thing keeping the header from collapsing is the right logo.
header {
position: relative;
font-family: "Felix Titling Regular", Times, serif;
border-bottom: 2px double white;
font-size: 0;
}
header a {
display: inline-block;
}
header>a:first-child {
position: relative;
padding-left: 3%;
}
header>a:last-child {
float: right;
padding-right: 3%;
}
#center-wrapper {
position: absolute;
left: 50%;
top: 25%;
font-size: 16px;
}
header h1 {
font-size: 300%;
display: inline-block;
position: relative;
text-transform: capitalize;
right: 50%;
}
<header>
<img src="media/logo-small.png" alt="Godfather Logo" title="Godfather Small Logo" />
<div id="center-wrapper">
<h1> loyal capos to the don </h1>
</div>
<img src="media/logo-small.png" alt="Godfather Logo" title="Godfather Small Logo" />
</header>
However, I don't understand why my first parent 'ul' in the 'nav' still has height even though all the li elements are floated.
nav {
position: relative;
border-top: 2px double #660000;
text-align: center;
font-size: 0;
background-color: #660000;
}
nav>ul {
display: inline-block;
font-size: 16px;
width: 100%;
}
ul {
list-style-type: none;
}
nav>ul>li {
min-width: 20%;
float: left;
}
nav ul ul,
nav ul ul ul {
position: absolute;
display: none;
width: 100%;
}
nav>ul>li:hover>ul {
display: block;
}
nav>ul>li>ul>li:hover>ul {
left: 100%;
top: 0%;
display: block;
}
ul>li {
position: relative;
padding: .4em 0;
background-color: white;
}
li>a {
color: #660000;
text-decoration: none;
text-transform: capitalize;
font-size: 150%;
font-family: "Felix Titling Regular", Times, serif;
background-color: white;
}
<nav>
<ul>
<li>wiki</li>
<li>media
<ul>
<li>images</li>
<li>videos
<ul>
<li>best scenes</li>
<li>bloopers</li>
</ul>
</li>
</ul>
</li>
<li>home</li>
<li>facts</li>
<li>about
<ul>
<li>feedback</li>
<li>contact us</li>
</ul>
</li>
</ul>
</nav>
Here's my code on fiddle (https://jsfiddle.net/vwb6g740/1/)
This is true for block elements and inline elements, but not for inline-block elements.
What I know so far is that a parent with nothing but floated children has no height.
You have display:inline-block; set on that parent element.
I can't explain why, but I can reproduce that behavior.
p {
display: inline-block;
background: blue;
}
div {
background: red;
}
span {
background: green;
}
i {
float: left;
}
<div><i>test</i></div>
<span><i>test</i></span>
<p><i>test</i></p>
As far as I can tell my CSS is fine, but it just keeps appearing below the header. Any ideas? Sorry for the newb question.
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/* Global */
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
/* Header **/
header {
background: #35424a;
color: #ffffff;
padding-top: 30px;
min-height: 70px;
border-bottom: #e8491d 3px solid;
}
header a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight, header .current a {
color: #e8491d;
font-weight: bold;
}
<header>
<div class "container">
<div id "branding">
<h1><span>Acme</span> Web Design</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
</ul>
</nav>
</div>
</header>
So did I go wrong in the HTML or the CSS, or both? I just can't for the life of me figure out why it's not going in the header, and it's literally driving me crazy.
This is because your header h1 element is display:block it will take the full width of its parent try adding this to your css code:
header h1
{
display:inline-block;
float:left
}
I am trying to make a basic site with HTML & CSS, with a navigation bar, but I have a problem with it [below]:
body
{
background-color: #666;
}
.font_title
{
font-family: "Segoe UI";
font-weight: bold;
font-size: 60px;
text-align: center;
}
#title
{
width: 800px;
}
#container
{
position: relative;
margin: auto;
width: 800px;
height: 995px;
background-color: #CCCCCC;
}
#navigation_holder
{
position: relative;
margin: auto;
width: 800px;
}
.navigation_button
{
font-family: "Segoe UI";
text-align: center;
font-size: 26px;
width: 200px;
height: 40px;
background-color: #09C;
}
.navigation_button:hover
{
background-color: #09F;
}
<div id="container"> <!-- The main container -->
<div class="font_title", id="title"> Our Site</div>
<div id="navigation_holder">
<div id="navigation_button_1", class="navigation_button"> Home </div>
<div id="navigation_button_2", class="navigation_button"> About </div>
<div id="navigation_button_3", class="navigation_button"> Services </div>
<div id="navigation_button_4", class="navigation_button"> Contact </div>
</div>
<!-- More DIVs in the container -->
</div>
The problem is - all my navigation buttons are stacked up ontop of each other, not on a row. What am I doing wrong?
Instead of making them divs, use anchor tags inside lists. Here's the image and the complete working code for you:
<html>
<head>
<style>
body
{
background-color: #666;
}
.font_title
{
font-family: "Segoe UI";
font-weight: bold;
font-size: 60px;
text-align: center;
}
#title
{
width: 800px;
}
#container
{
position: relative;
margin: auto;
width: 800px;
height: 995px;
background-color: #CCCCCC;
}
#navigation_holder
{
position: relative;
margin: auto;
width: 800px;
}
.navigation_button
{
font-family: "Segoe UI";
text-align: center;
font-size: 26px;
width: 200px;
height: 40px;
background-color: #09C;
}
.navigation_button:hover
{
background-color: #09F;
}
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:200px;
font-family: "Segoe UI";
text-align: center;
font-size: 26px;
width: 200px;
height: 40px;
background-color: #09C;
}
a:hover,a:active
{
background-color: #09F;
}
</style>
</head>
<body>
<div id="container"> <!-- The main container -->
<div class="font_title", id="title"> Our Site</div>
<div id="navigation_holder">
<ul>
<li id="navigation_button_1" > Home </li>
<li id="navigation_button_2" > About </li>
<li id="navigation_button_3" > Services </li>
<li id="navigation_button_4" > Contact </li>
</ul>
</div>
<!-- More DIVs in the container -->
</div>
</body>
</html>
The problem is that divs are block elements, thus they naturally position themselves on top of each other. You can use several methods to get them to behave. Applying a display: inline-block to your .navigation_button class is what I would prefer in most cases. In this case, however, a float: left will work just as well.
The two methods have their benefits and drawbacks, but floats can become problematic because they essentially become unrecognizable to non-floated elements (in the same way position: absolute does).
As an aside, if I were you, I'd pull the height off your container, change #navigation_holder to a <nav>, and perhaps even pull the ids (and possibly even the classes!) off of your individual navigation elements. Heck, you could even take out the inner divs entirely, and replace them with a ul whose li were display: inline (it would be more semantic).
You could then reference them like this:
.navigation_holder ul li {
display: inline;
padding-left: 40px; /* or whatever */
}
And if you need to target only the first or last:
.navigation_holder ul li:first-of-type {
// styles
}
.navigation_holder ul li:last-of-type {
// styles
}
To pop the default styles off the ul:
.navigation_holder ul {
list-style-type: none;
}
A reply to your question, and a question to your question...
What are you looking for?
Here are 3 examples:
1 Providing you wanted a normal left hand horizontal inline-list you would do:
HTML
<div id="navigation_holder">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
CSS
#navigation_left ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#navigation_left ul li { display: inline; }
#navigation_left ul li a
{
font-family:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
text-decoration: none;
padding: .2em 1em;
color: #DDD;
background-color: #0099CF;
border-radius: 4px;
}
#navigation_left ul li a:hover
{
color: #FFF;
background-color: #00BEF9;
}
2 Providing you want to center your li elements.
HTML
<div id="navigation_center">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
CSS
#navigation_center ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navigation_center ul li { display: inline; }
#navigation_center ul li a
{
font-family:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
text-decoration: none;
padding: .2em 1em;
color: #DDD;
background-color: #0099CF;
border-radius: 4px;
}
#navigation_center ul li a:hover
{
color: #FFF;
background-color: #00BEF9;
}
3 Providing you want to center your li elements with a solid background.
HTML
<div id="navigation_center_full">
<ul class="full">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
CSS
#navigation_center_full ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
padding: .2em 1em;
color: #DDD;
background-color: #0099CF;
}
#navigation_center_full ul li { display: inline; }
#navigation_center_full ul li a
{
font-family:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
text-decoration: none;
padding: .2em 1em;
color: #DDD;
background-color: #0099CF;
border-radius: 4px;
}
#navigation_center_full ul li a:hover
{
color: #FFF;
background-color: #00BEF9;
}
Pretty sure this should help you.
Why you dont use <ul> and <li> tags? I think is better. Then in CSS you must use:
display: inline
One example in: http://www.w3schools.com/css/tryit.asp?filename=trycss_float5
I've never seen anything stupid like that, or may be it's 2:30 am and I am hallucinating. I've made simple anchor links within the header and I am completely unable to click on them. They are just plain text and are completely non-clickable.
I'll be thankful if you can give me a hint as what/where I am not obeying the HTML/CSS daemon.
HTML
<header>
<div class="confine">
<div class="complete-head-content">
<div class="left-width-less logo-width">
<img src="./imgs/twit-logo.png" />
</div>
<div class="right-width-less">
<div class="top-header-content">
<h1 class="pres-title">Defining Twisted Strategy</h1>
</div>
<div class="lower-header-content">
<div id="navcontainer">
<ul>
<li>Meet the Hobos</li>
<li>Why me?</li>
<li>Our Work in Oblivion</li>
<li>Our Perspective</li>
<li>Our Approach</li>
</ul>
</div>
</div>
</div>
<div class="c"> </div>
</div>
</div>
</header>
<div id="contend">
... ... ...
CSS
a {
color: #EA2E49;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #EA2E49;
cursor: pointer;
}
header {
height: 50px;
position: absolute;
top: 0;
left: 0;
width: 100%;
display: block;
z-index: 1;
}
.complete-head-content {
width: 100%;
background-color: #a0c654;
height: 130px;
}
.left-width-less {
float: left;
background-color: #fff;
width: 15%;
text-align: center;
height: 130px;
vertical-align: middle;
}
.left-width-less img {
width : 76px;
height: 100px;
margin-top: 10px;
}
.right-width-less {
float: right;
width: 85%;
}
.top-header-content {
width: 100%;
height: 70px;
background: #437b3c url("../imgs/presentation-title-bg.jpg") no-repeat right;
}
.lower-header-content {
width: 100%;
height: 70px;
}
.logo {
cursor: pointer;
}
/* Navigation */
#navcontainer {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
text-transform: uppercase;
margin-top: 19px;
}
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: left;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1.7em;
color: #fff;
}
#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}
EDIT
Thanks to Nikhil, the had a Z-index:1 which when removed fixed the bug.
Thanks.
Unless you left something out. it is working for me with and without css.
Tested in IE 8
How did you include the CSS btw?
The <div id="contend"> right next to tag had a z-index:1. This made every link in <header> tag non-clickable.
The solution was to remove the z-index property.
Hope it helps someone.