I need a horizontal navigation bar with the words "HOME", "DRAWINGS", "STORE", and "CONTACT" evenly spread across the page. Right now my CSS looks like this:
<style type="text/css">
<!--
ul{
width:100%;
margin:0;
height:35px;
font-size:16px;
color:black;
font-family: Arial;
font-weight:bold;
text-align:center;
display:inline;
padding:0;
list-style-type:none;
}
-->
</style>
My HTML looks like this:
<body>
<div>
<ul>
<li>HOME</li>
<li>DRAWINGS</li>
<li>STORE</li>
<li>CONTACT</li>
</ul>
</div>
</body>
And here is what the web page looks like: http://i.imgur.com/st4m0RR.jpg
Obviously I would also like to get rid of the underline and I need the text to be in black. Not sure what I'm doing wrong. Thanks in advance for any help.
You could set the li elements to float:left..
Like
ul{
width:100%;
margin:0;
height:35px;
font-size:16px;
color:black;
font-family: Arial;
font-weight:bold;
text-align:center;
display:inline;
padding:0;
list-style-type:none;
}
ul li {
float:left;
margin-right:15px;
}
ul li:last-of-type {
margin-right:0px;
}
}
you have to put this in the:
a{
float:left;
color:#000;
text-decoration:none;
padding;5px;
}
edited:
to put it to the center you have to give the container a width, 315px for example here, but put it in % or em better....and add a padding to a
div {
width:315px;
margin: 0 auto;
}
Related
I am new to web development and I building my first website. I want to create a header that has an image in the center and the nav menu surrounding it.
Here is the code I'm working with:
HTML:
</head>
<body>
<div id ="header">
<div id="nav">
<ul>
<li>About</li>
<li>Philanthropy</li>
<li><img src="http://i.imgur.com/cosDXx1.png"/></li>
<li>Why Join?</li>
<li>Contact</li>
</ul>
</div>
</div>
</body
>
CSS:
body {
margin:0px;
padding:0px;
}
#header{
width:100%;
height:110px;
background-color:black;
}
#nav ul{
list-style-type:none;
font-family:"Slabo 13px",serif;
float:center;
}
#nav ul li{
padding:10px;
display:inline;
margin-left:60px;
margin-bottom:20px;
}
#nav ul li a{
text-decoration:none;
color:#006600;
}
#nav ul li a:hover{
color:#CC0000;
}
JSfiddle link:
http://jsfiddle.net/5g6sm01q/
On my screen it is in a line but when I shrink it (and in the jsfiddle example) it is not. Please any tips or help with this problem would appreciated.
Convert all the pixel values into % or atleast the padding and the left and right margins, and see the change..I've just edited your fiddle a little bit..
see this http://jsfiddle.net/5g6sm01q/2/
Chnge the css like this
body {
margin:0px;
padding:0px;
}
#header{
width:100%;
height:110px;
background-color:black;
}
#nav ul{
list-style-type:none;
font-family:"Slabo 13px",serif;
float:center;
}
#nav ul li{
padding:0.5%;
display:inline;
margin-left:2%;
margin-bottom:20px;
}
#nav ul li a{
text-decoration:none;
color:#006600;
}
#nav ul li a:hover{
color:#CC0000;
}
UPDATE
As #Krodmannix mentioned in his comment,there is a way in CSS to dictate how to format the page based on different screen sizes using media queries.It makes it very easy to adapt your site to mobile screens without any page redirection
http://jsfiddle.net/Fy5v8/
I haven't been able to solve this issue, or seen it before—it's subtle, but I of course want it to be perfect. I don't see any reason why it should be displaying strangely.
The bottom of the image and the navigation should be aligned, but are not. Here is the incorrect version in firefox:
http://jamimiles.com/firefox.png
Or visit it on your own browsers. Thanks so much for your help!
#header {
font-family: georgia, serif;
width:800px;
height:65px;
font-size:20px; font-size:2rem;
color:#3a3b59;
text-transform: uppercase;
text-align:left;
padding:0 0 30px 0;
margin-top:0;
border-bottom: none;
float:left;
position:relative;
}
#header ul li {
list-style-type:none;
line-height:20px; line-height:2rem;
float:right;
}
#header li {
padding-left:20px;
}
#header ul {
margin-top:52px;
padding:0;
float:right;
margin-bottom:0;
}
#header img {
padding:0;
border:none;
float:left;
}
That's the CSS. Here is the header band.
<div id="header">
<img src="images/namebanner3.png">
<ul>
<li>home</li>
<li>about</li>
<li>portfolio</li>
<li>resumé</li>
</ul>
</div>
Try tweaking the img px. You are currently set at 851px by 141px
<img height="#" width="#" style="-webkit-user-select: none"
src="http://jamimiles.com/firefox.png">
hi i am working on a site layout , because of my problem and for some other reasons like that it doesn't matter to me if i just can use the layout on my own as well cause i made it.
but the problem is that the pulldown menu isn't working as it is mend to be.
i share with you the code:
<html>
<head>
<style>
body{
background:linear-gradient(to bottom right,#013,#c0c);
color:#930;
}
#nav{
margin-left:auto;
margin-right:auto;
margin-top:40px;
maring-bottom:10px;
color:#930;
background-color:#cb6;
border:2px solid #930;
border-radius:13px;
-webkit-border-radius:13px;
-moz-border-radius:13px;
text-align:center;
float:center;
width:750px;
height:40px;
}
#main{
margin-left:auto;
margin-right:auto;
margin-top:auto;
maring-bottom:auto;
color:#930;
background-color:#cb6;
border:2px solid #930;
border-radius:13px;
-webkit-border-radius:13px;
-moz-border-radius:13px;
text-align:center;
float:center;
width:750px;
height:500px;
}
#nav ul{
list-style:none;
margin:0 auto;
}
#nav li{
position:relative;
float:left;
display:inline;
}
#nav a{
text-decoration:none;
color:#930;
padding:10px 25px;
height:20px;
display:inline-block;
}
#nav a:hover{
text-decoration:none;
color:#fff;
background-color:#930;
padding:10px 25px;
height:20px;
display:inline-block;
}
#pull li ul{
display:none;
color:#930;
text-align:center;
position:absolute;
}
#pull li:hover ul{
display:block;
color:#930;
text-align:center;
position:absolute;
}
#pull li ul a{
display:block;
min-width:80px;
width:auto;
height:25px;
color:#fff;
padding:0px 5px;
text-align:center;
border:2px solid #930;
background-color:#cb6;
}
#pull li ul a:hover{
display:block;
min-width:80px;
width:auto;
height:25px;
color:#fff;
padding:0px 5px;
text-align:center;
border:2px solid #fff;
background-color:#930;
}
</style>
</head>
<body>
<div id="nav">
<ul id="pull">
<li><b>home</b></li>  
<li><b>page 1 ▼</b>
<ul>
<li><b>page 2</b><li>
<li><b>page 3</b><li>
</ul>
</li>
</ul>
</div>
<br><br>
<div id="main">
de content komt nog
</div>
</body>
</html>
also the online lay-out is see-able for eyes at www.elderpact.tk
the menu bar and everything need to stay like they are
but the drop down menu has to lower the content box if it is opened.
now it goes right trough the content.
also i would like to display the drop down menu direct under the drop down menu opener
(page 1).
could someone please help me?
the risk with create you own dropdown is not work in all browsers. The best solution for this problem is use Bootstrap Twitter. Bootstrap DropDown
Here's a fiddle with the menu the way I think you want it: http://jsfiddle.net/TPLJ8/1/
You basically need to remove the margin and padding from the ul and li elements at the top of your CSS (resets), like this:
ul, li {margin:0; padding:0;}
This will help you start with a clean slate. I also cleaned up your CSS as you don't need to declare the same styling on hovers if that style stays the same.
Your HTML also needed some work. You were missing closing </li> tags and had a bunch of unnecessary <br /> tags.
I am trying to build a simple CSS only navigation bar for my site. This is it working fine in modern browsers:
And this is my CSS:
#nav{
width:496px;
height:45px;
float:right;
background-color:#bee199;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
margin-top:5px;
border:1px solid #a09f9f;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
#nav ul{
list-style:none;
text-align:center;
}
#nav ul .last{
padding-right:0px;
border-right:none;
}
#nav ul li.navsep{
width:1px;
height:44px;
background-color:#a09f9f;
padding:0;
margin-right:10px;
}
#nav ul li{
width:auto;
height:44px;
display: -moz-inline-stack;
display:inline-block;
padding-right:10px;
margin-bottom:-16px;
}
#nav ul li a{
font-family:Helvetica, Arial, sans-serif;
font-size:20px;
font-weight:400;
text-decoration:none;
color:#434342;
}
HTML:
<div id="nav">
<ul>
<li>Principles</li>
<li class="navsep"><span></span></li>
<li>Our services</li>
<li class="navsep"><span></span></li>
<li>Recent work</li>
<li class="navsep"><span></span></li>
<li class="last">Contact</li>
</ul>
</div>
One of my problems is using negative margins, I really don't want to be using them. But every time I try to use conventional methods the text will not center vertically and it looks like this:
This also happens on older browsers.
Thanks for your time! If you need more information just ask! :)
Omit the <li class="navsep"> and use borders instead.
use lineheight on the li elements.
Instead of using negative margin use line-height, in your case #nav ul li {height: 44px; line-height: 44px;} this will vertical center your text
i have made a toolbar using links placed inside listitems but the problem is that i cant get my toolbar to sit on a "div" placed below it. This is what i want to see.
but this is what am getting in firefoxNotice the space between my 'toolbar' and the div below it. Questionswhy is the code displaying properly in jsfiddle but displaying badly if i run it directly in fierfox?How can i solve the problem?
ps:
here is the html
<html><head>
<link rel='stylesheet' type='text/css' href='style.css'>
</head><body>
<div id='headercontainer'>
<h2>welcome to research club</h2>
<ul class='mainNavigation'>
<li><a class='currentPage' href='#'>Home</a></li>
<li><a href='#'>Meetups</a></li>
<li><a href='#'>Feedback</a></li>
<li><a href='#'>About</a></li>
</ul>
</div>
<div id='page'>
<p> this is a simple paragraph inside the page that is full of meaningless words but tries to populate a page . mama miya tolina galya mamba eno.</p>
</div><!--#page-->
</html>
Here is the css
div#headercontainer
{
position:relative;
}
div#page
{
margin:0px 50px 0px 50px;
padding:0 450px 0 30px;
position:relative;
background:#181C21;
clear:right;
color:white;
}
ul.mainNavigation
{
list-style:none;
margin:0px 50px 0px 0px;
position:absolute;
bottom:0; right:0;
padding:0;
}
ul.mainNavigation li
{
background:#192839;
color:white;
float:left;
height:1.6em;
padding:5px;
}
ul.mainNavigation li a
{
color:#bbbbbb;
display:block;
text-decoration:none;
height:1.6em;
font-size:0.9em;
}
ul.mainNavigation li a:hover
{
border-bottom:2px solid #0F67ff;
color:white;
}
ul.mainNavigation li a.currentPage
{
border-bottom:2px solid #176092;
}
I'm guessing that you haven't added a general selector to put all margins and paddings to 0, in this case you would need to add:
div#headercontainer {
position:relative;
padding:0px;
margin:0px;
}
or
*{
padding:0px;
margin:0px;
border:0px;
}
All browsers have some basic setups for non defined elements meaning I can set the I want all texts to be white instead of black and if you haven't set the color all the texts will be written in white.
Hoping this will help…
Use float and clear instead of position absolute.
Like this:
div#headercontainer{
float:left;
position:relative;
}
h2{
float:left;
}
ul.mainNavigation{
float:right;
}
#page{
clear:both;
float:left;
}
Hope this help... (This is my first answer on this website :S)