I tried something with divs in html, and normally it isn't a problem. However I encountered a problem and I don't find my mistake.
The menu div is supposed to be in the center of the header div and there should be no margin at the top.
here is the example with the error: http://jsfiddle.net/j83eb/
here is the html:
<div id="header">
<div id="menu">
<ul>
<li><a class="nav-element" href="#">News</a></li>
<li><a class="nav-element" href="#">Turnier</a></li>
<li><a class="nav-element" href="#">Ergebnisse</a></li>
<li><a class="nav-element" href="#">Impressionen</a></li>
<li><a class="nav-element" href="#">Anmeldung</a></li>
<li><a class="nav-element" href="#">Impressum</a></li>
</ul>
</div>
</div>
and the css:
#header {
padding: 0;
margin:0;
background: #003399;
width: 100%;
height: 50px;
display: block;
position: fixed;
top: 0;
left: 0;
}
#menu a {
display: block;
width: 150px;
height: 50px;
}
#menu {
padding:0;
margin-right:auto;
margin-left:auto;
line-height:50px;
width: 950px;
height: 50px;
}
#menu ul li {
display: block;
width: 150px;
height: 50px;
float: left;
text-align: center;
text-transform: uppercase;
font-family: Arial;
font-size: 16px;
font-weight: normal;
list-style: none;
margin:0;
paddin:0;
line-height:50px;
}
.nav-element:link {
color: #FFF;
text-decoration: none;
}
.nav-element:visited {
color: #FFF;
text-decoration: none;
background: #81b4e3;
}
.nav-element:hover {
text-decoration: none;
color: #FFF;
text-decoration: none;
background: #1a589d;
}
.nav-element:active {
color: #FFF;
text-decoration: none;
background: #C00;
}
Thanks!
Below will fix it (remove margin/padding from ul)
#menu ul {
margin:0;
padding:0;
}
And the Fiddle
As said above, you'll want to clear the default margins on the <ul> element. (No need to clear the padding, there is none). I also removed the height and line-height from everything since that isn't necessary and will likely just cause problems in the future.
Also, make sure to look through your CSS before sending it out for help. There were a number of properties with typos as well as duplicate properties.
http://jsfiddle.net/j83eb/3/
Related
I would like to put an element of my nav bar on two lines.
But when I just add a <br /> inside, it breaks everything.
Here is what I want :
Here is what I have :
Here is my html code:
div class="nav-top-home-page">
<nav>
<div>
<div>
<a><img class="logo" src="./assets/img/logo.png" height="200px"></a></div>
<ul>
<li><a>BLOG</a></li>
<li><a>CONTACT</a></li>
<li><a (click)="openLoginModal()"><img src="./assets/img/LOCK.png"/>ME CONNECTER</a></li>
<li><a id="subscribe" routerLink='./register'>M'INSCRIRE</a></li>
<li id="nav-gestionnaire"><a>Vous êtes <br/> GESTIONNAIRE ?</a></li>
</ul>
</div>
</nav>
</div>
Here is my css code :
.nav-top-home-page{
height:600px;
position: relative;
z-index: 5;
background-color: #6f8ab1;
text-align: center;
}
.nav-top-home-page::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(assets/img/home/slide1.png) white center top no-repeat;
background-size: cover;
}
.nav-top-home-page nav div{
padding-top: 10px;
margin-left: 20px;
margin-right: 20px;
}
.nav-top-home-page nav .logo{
float:left;
}
.nav-top-home-page nav ul{
padding: 0px;
margin: 0px;
float: right;
}
.nav-top-home-page nav li{
display: inline;
}
.nav-top-home-page nav li a{
color: white;
font-size: 1em;
line-height: 70px;
padding: 5px 15px;
cursor: pointer;
font-family: Raleway, arial;
}
.nav-top-home-page nav li {
cursor: pointer;
}
#nav-gestionnaire{
display: inline;
}
I tried changing the width, or adding whitespace: nowrap and many other things, but nothing worked.
Can someone help me pls ? :/
Remove line-height property and add display:inline-block on anchor tags
.nav-top-home-page nav li a{
font-size: 1em;
padding: 5px 15px;
cursor: pointer;
font-family: Raleway, arial;
display:inline-block;
}
Try with this, Use display:table-cell
Here is code
Wrap them inside divs as such
<div>Vous êtes</div> <div>GESTIONNAIRE</div>
Try using max-width property and display:inline-block; and remove line-height on anchor tag
CSS
.nav-top-home-page nav li {
cursor: pointer;
display: inline-block;
}
.nav-top-home-page nav li a {
color: white;
font-size: 1em;
padding: 5px 15px;
cursor: pointer;
font-family: Raleway, arial;
color: #212121;
max-width: 180px;
display: inline-block;
}
I am trying to center the navigation bar in the middle of the div body. I want the navigation bar to go from one side of the div to the other but have the list in the ul to be center in the middle of the div if that makes sense. I can't seem to figure it out even after trying online examples. Thanks
body {
margin: 0px;
padding: 0px;
background-color: #505050 ;
}
#body {
width: 75%;
margin: 0 auto;
position: center;
background-color: #C0C0C0;
height: 100%;
}
.nav {
}
.nav ul {
background-color: #CCCCCC;
width: 100%;
padding: 0;
text-align: center;
}
.nav li {
list-style: none;
font-family: Arial Black;
padding: 0px;
height:40px;
width: 120px;
line-height: 40px;
border: none;
float: left;
font-size: 1.3em;
background-color: #CCCCCC;
display:inline;
}
.nav a {
display: block;
color: black;
text-decoration: none;
width: 60px;
}
<div id="body">
<h2>Hello World!</h2>
<div class="nav">
<ul>
<li><a href="#">Home<a></li>
<li><a href="#">About<a></li>
<li><a href="#">News<a></li>
<li><a href="#">Contact<a></li>
</ul>
</div>
</div>
i attach fix here http://jsfiddle.net/o4716uo9/
use inline-block for li
background property should be setted in ul element, not li, in your case. Delete the float in nav li. Also, the a element it isn't closed correctly. Main changes:
.nav ul {
background-color: #cccccc;
text-align: center;
}
.nav ul li {
display: inline-block;
min-width: 120px;
[...]
}
I'll recommend you to take a look at the bootstrap framework. It could be interesting for you.
There are a couple things you can change to correct the issue:
1) Your <a> elements have a width of 60px. You can remove this.
2) You .nav li has a width of 120px. I would change this to 25% (If there are only going to be four navigational items).
http://jsfiddle.net/xLnz90ek/
Is that any closer to the desired effect.
Is this what you’re trying to do?
* { margin:0; padding:0 }
html {
background-color: #505050;
font-size: 4vw;
}
header {
width: 75%;
margin: 0 auto;
background-color: #C0C0C0;
}
nav {
background-color: #CCCCCC;
display: flex;
padding: 0.2rem 0;
}
nav a {
flex: 1 0 auto;
font-family: Arial Black;
font-size: 1rem;
background-color: #CCCCCC;
color: black;
text-decoration: none;
text-align: center;
margin: 0 0.3rem;
}
<header>
<h2>Hello World!</h2>
<nav>
Home
About
News
Contact
</nav>
</header>
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.
It seemingly attempts to centre, but in actuality is a few pixels off. It's really annoying.
Picture: http://i.imgur.com/X4jhf.png
My code:
HTML:
<body>
<div class="menu-bar">
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
<div class="greeting"></div>
</body>
CSS:
.menu-bar {
font-family: 'Lucida Grande';
}
.menu-bar ul {
text-align: center;
list-style-type: none;
}
.menu-bar li {
display: inline;
}
.greeting {
background: url('../media/pic.jpg');
border: 1px solid black;
margin-top: 75px;
margin-left: auto;
margin-right: auto;
width: 500px;
height: 375px;
}
Very frustrating. >_<
Margin and Padding both needs to be set to 0 unless you are using a css reset to avoid browser inconsistencies.
.menu-bar ul {
text-align: center;
list-style-type: none;
margin:0;
padding:0;
}
DEMO.
UL has a default left margin which you haven't dealt with. Just add margin: 0;