I'am trying to make a navigation bar horizontal but at the moment its vertical. Any help would be great. The problem is that its vertical. I have made the list in html and then used my other file in css to edit it.
HTML:
<html>
<head>
<link rel="stylesheet" href="Style/style.css" type="text/css"/>
</head>
<body>
<div class="horizontal">
<ul>
<li>Home</li>
<li>News</li>
<li>Articles</li>
</ul>
</div>
</body>
<html>
CSS:
div.horizontal
{
width:100%;
height:63px;
}
div.horizontal ul
{
list-style-type:none;
margin:0;
padding:0;
}
div.horizontal li
{
float:left;
}
div.horizontal a
{
display:block;
width:86px;
}
div.horizontal a:link,div.horizontal a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
div.horizontal a:hover,div.horizontal a:active
{
background-color:#7A991A;
}
Personally, I always set up my horizontal nav bars with CSS like this (using your current CSS as starting point):
div.horizontal li {
width:86px;
height:inherit;
display:inline-block;
/* Fix bug in IE7 and below */
zoom:1;
*display:inline;
}
div.horizontal li a {
display:block;
width:100%;
height:100%;
}
The inline-block on the li will let it sit horizontally, and declaring its width/height creates the appropriate container for the a. The a then inherits the height/width from the li container. The lack of float:left also eliminates the need to clear anything.
Edit: updated to show the workaround for IE7 and below not respecting inline-block;
Try:
div.horizontal a
{
display:block;
width:86px;
float: left;
}
Use
display:inline-block;
You can't use the current method for Horizontal ,As blocks position themselves vertically in the flow.
But this attribute overrides the flow and makes it see itself as a inline/block hybrid.
Related
I made a menu and used width: 100% to make sure it comes across the entire page but there were white spaces on the right and left side (looks more like width:95%?) So I then tried using position:absolute top:0 left:0 which solved the problem and made the menu look like width 100%,
Unfortunately, this operation caused my h2 header element to disappear and I cannot find a way to properly place it now?
JSBin code of my html and css code
#mainMenu {
font-family:Arial, Times, sans-serif;
list-style-type:none;
padding:0;
}
#mainMenu a {
text-decoration:none;
margin:5px;
padding:2px;
color:SeaGreen;
font-weight:bold;
}
#mainMenu a:hover {
color:Teal;
}
#menu {
text-align:center;
width:100%;
height:50px;
background-color:paleGoldenRod;
position:absolute;
left:0;
top:0;
}
li {
display:inline;
}
footer {
background-color:SlateGray;
height:150px;
width:100%;
position:absolute;
bottom:0;
left:0;
}
<!DOCTYPE html>
<html>
<head>
<title>Miko</title>
<link href="#" rel="stylesheet" type="text/css">
</head>
<body>
<div id="menu">
<ul id="mainMenu">
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT ME</li>
</ul>
</div>
<h2>About The Page</h2>
<p>To Be Added</p>
<footer>
<p>Web Design</p>
</footer>
</body>
</html>
How come position:absolute makes my h2 disappear?
To avoid the default margins in general, you can add margin: 0; to html and body.
To place your absolutely positioned menu behind the h2element, you can apply z-index: -1, which moves it behind its parent element.
In my snippet below I also changed the text-centering to right alignment and added a padding-right on the ul. You can play around with those values so they fit your needs.
html, body {
margin: 0;
}
#mainMenu {
font-family:Arial, Times, sans-serif;
list-style-type:none;
padding-right: 30px;
}
#mainMenu a {
text-decoration:none;
margin:5px;
padding:2px;
color:SeaGreen;
font-weight:bold;
}
#mainMenu a:hover {
color:Teal;
}
#menu {
text-align:right;
width:100%;
height:50px;
background-color:paleGoldenRod;
position: absolute;
z-index: -1;
}
li {
display:inline;
}
footer {
background-color:SlateGray;
height:150px;
width:100%;
position:absolute;
bottom:0;
left:0;
}
<!DOCTYPE html>
<html>
<head>
<title>Miko</title>
<link href="#" rel="stylesheet" type="text/css">
</head>
<body>
<div id="menu">
<ul id="mainMenu">
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT ME</li>
</ul>
</div>
<h2>About The Page</h2>
<p>To Be Added</p>
<footer>
<p>Web Design</p>
</footer>
</body>
</html>
Add padding-top: 50px (the menu height) to body.
body {
padding-top: 50px;
}
#mainMenu {
font-family:Arial, Times, sans-serif;
list-style-type:none;
padding:0;
}
#mainMenu a {
text-decoration:none;
margin:5px;
padding:2px;
color:SeaGreen;
font-weight:bold;
}
#mainMenu a:hover {
color:Teal;
}
#menu {
text-align:center;
width:100%;
height:50px;
background-color:paleGoldenRod;
position:absolute;
left:0;
top:0;
}
li {
display:inline;
}
footer {
background-color:SlateGray;
height:150px;
width:100%;
position:absolute;
bottom:0;
left:0;
}
<!DOCTYPE html>
<html>
<head>
<title>Miko</title>
<link href="#" rel="stylesheet" type="text/css">
</head>
<body>
<div id="menu">
<ul id="mainMenu">
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT ME</li>
</ul>
</div>
<h2>About The Page</h2>
<p>To Be Added</p>
<footer>
<p>Web Design</p>
</footer>
</body>
</html>
JSBin
Position in css is tricky thing, everyone uses absolute positioning for placement of element.but before using it. you need to know about what the position is all about. when we use position:absolute then element act like it is floating on top of all element.while using absolute positioning element goes out from html normal flow.
you have used position absolute for both menu links and footer, So these elemment are floating on top of other elements.enter code here
use position absolute and fixed when you want to stick element to specific position.
#mainMenu {
font-family:Arial, Times, sans-serif;
list-style-type:none;
padding:0;
}
#mainMenu a {
text-decoration:none;
margin:5px;
padding:2px;
color:SeaGreen;
font-weight:bold;
}
#mainMenu a:hover {
color:Teal;
}
#menu {
text-align:center;
width:100%;
height:50px;
background-color:paleGoldenRod;
}
li {
display:inline;
}
footer {
background-color:SlateGray;
height:150px;
width:100%;
position:absolute;
bottom:0;
left:0;
}
if you still want to use position absolute for menu, so you need to use proper margin for h2 tag.so that h2 tag will not be hidden beside menu links.
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
How do I get the navigation bar to appear next to the logo instead of breaking to the next line under it?
I've tried several changes but it keeps going onto the next line. I'm trying to avoid using floats because I was told they are not good to use. I want it to look like the navigation bar on this website in this end:
http://www.freecsstemplates.org/
I would like to understand how it is being done on that website.
I am just very confused as to how the process is to work.
CSS:
#header
{
background-image:url('menubg.png');
background-repeat:repeat-x;
}
#logo
{
display:inline-block;
}
#menu ul
{
display:inline-block;
list-style-type:none;
padding: 0px;
margin:0px;
}
#menu li
{
display:inline-block;
margin:0px;
padding:0px;
}
#menu a:link,a:visited
{
display:inline-block;
text-transform:lowercase;
width:auto;
font-weight:bold;
padding-left:47.5px;
padding-right:47.5px;
padding-top:9px;
padding-bottom:9px;
text-decoration:none;
color:#57fafc;
text-align:center;
background-color:#62d2d3;
}
#menu a:hover,a:active
{
background-color:#7ce5e6;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mainstyle.css">
<title>Blah</title></head>
<body>
<div id="header">
<div id="logo"><img src="logo.png" /></div>
<div id="menu">
<ul>
<li>Home</li><li>Contact</li><li>About</li><li>Products</li><li>Design-a-Tee</li><li>Reviews/Testimonials</li>
</ul>
</div>
</div>
</body>
</html>
add this css
#logo {
float:left;
}
#menu {
float:right;
}
#header {
clear: both;
overflow: auto;
}
Question
I am trying to put every li at the bottom of the ul, making the bottom of every element (not the text, the actual block element of the ui, whether that's the image or the whole li of text) touching. This should be a simple problem with vertical-align:bottom and display:table-cell being the fix, but for some reason I haven't been able to get it to work. What is the best way to accomplish this?
Its likely there's a question that already answered this, but I've spent a lot of time searching. If there's one that applies, please just point me to it.
Example
Fiddle With It:
http://jsfiddle.net/rxg9m/
HTML
<head runat="server">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="StyleSheet.css" />
</head>
<body>
<div id="outer">
<div id="inner">
<nav>
<ul>
<li>Home
</li>
<li>Product
</li>
<li><img src="logo.png" alt="Javid Logo"/>
</li>
<li>Contact
</li>
<li>Info
</li>
</ul>
</nav>
</div>
</div>
</body>
CSS
* {
font-family:Calibri;
}
#outer {
text-align:center;
}
#inner {
display:inline-block;
}
nav ul {
margin:0px;
padding:0px;
bottom:0;
list-style:none;
}
nav li {
float:left;
display:table-cell;
vertical-align:bottom;
margin:0px;
padding:0px;
}
nav li a {
padding:16px 8px 16px 8px;
margin:0px;
width:120px;
display:block;
background-color:lightblue;
text-decoration:none;
text-emphasis:none;
color:black;
border:0px none black;
border-bottom:1px solid black;
}
nav li a.left {
text-align:left;
}
nav li a.right {
text-align:right;
}
#logo {
padding:0px;
width:auto;
height:auto;
line-height:0px;
border:0px none black;
}
Fiddle Here: http://jsfiddle.net/SinisterSystems/rxg9m/2/
nav li a {
padding:32px 8px 0px 8px;
You are setting a padding on the bottom. You should counteract that and double your padding on top and set your padding-bottom to 0.
Because you had padding applied, it WAS on the bottom technically. The only problem is it also expanded all the way to the top.
Edit: http://jsfiddle.net/SinisterSystems/rxg9m/4/
Aligning WITHIN the ul is very tricky, and your best bet would be to just align the ul inside of a wrapper of sorts. That way, you can use position:relative; on the wrapper and absolutely position your ul to the bottom. And yeah, style from there.
Basic Example:
<div class="wrapper">
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
</div>
* {
margin:0;
padding:0;
}
.wrapper {
height:200px;
background:#CCC;
position:relative;
}
ul {
position:absolute;
bottom:0;
width:100%;
}
ul li {
list-style:none;
float:left;
display:inline-block;
min-width:25%;
text-align:center;
}
http://jsfiddle.net/rxg9m/1/
Your issue was with this
nav li a {
padding:16px 8px 16px 8px;
change it to
nav li a {
padding:16px 8px 0px 8px;
also, if you want the height to be the same, you can just do 32px instead of 16px for the first padding value, like Nicholas did in his answer.
Simply remove the float:left from nav li. Everything else is in order.
Fiddle
http://jsfiddle.net/mXTG6/
i'm having this really frustrating problem where a thin silver of the color that i'm applying as the a:hover,a:active is appearing outside of where it should. i have an image in absolute positioning right above the menu that is exhibiting this....i could just move the image up one but i want to solve it the correct way....here is my css
.logo
{
width:200px;
height:108px;
position:absolute;
left:5px;
top:10px;
}
#menu
{
position:relative;
top:110px;
padding-top:0px;
clear:both;
}
ul
{
list-style-type:none;
overflow:hidden;
padding:0px;
width:900px;
}
a
{
text-decoration:none;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
font-weight:bold;
text-align:center;
background-color:#ffffff;
padding:3px;
width:120px;
height:auto;
color:#000000;
float:left;
}
a:hover,a:active
{
background-color:#804000;
color:#ffffff;
}
here is my corresponding html:
Sorry, your browser doesn’t support JavaScript!
U4U Test Page
<div class="header">
<img class="logo" src="linktofilehere" alt="U4U Logo" />
</div>
<div id="menu">
<ul>
<li><a href="/" >Home</a></li>
<li>About Us</li>
<li>Programs</li>
<li>US Movement</li>
<li>Sponsorship</li>
<li>Donate</li>
</ul>
</div>
</body>
</html>
i've searched through the help knowledge and couldn't find anything related really....i'm sure it is something simple....any help would be appreciate, i think it might have to do with positioning or not defining the hover area correctly but i'm not sure....i just started learning html and css last week so please be kind!
You will need to create a new style for the 'a' of your image. If you don't, it will use the standard 'a' stylings of your CSS.
Like this :
a.imglink:hover
{
background:none;
}
I'd add a style to remove the background color from linked images - that way you won't run into issues with transparent PNGs etc:
.imglink:hover {
background-color:transparent;
}
I just specifically targetted links inside the list for the background color on hover..
CSS:
#menu > ul > li > a:hover,a:active
{
background-color:#804000;
color:#ffffff;
}
http://jsfiddle.net/cSSU7/
Did this solve your problem?
/* remove the background */
.imglink:hover { background: none; }
/* if you run into specificity issues, be more selective! :) */
a.imglink:hover { background: none; }
/* or remove the padding from just the first a */
a:first-of-type{ padding: 0; }
/* or remove the background from the first link */
a:first-of-type{ background: none; }
DEMO