I have two problems with my menu bar. What I want to achieve is to center the links on the header (including the logo picture) and have exactly the same height for the header as the menu. When I add the links it creates a margin on top and on bottom (so the header will extend) and I have no idea why. The margin size depends on the font size and if I want to remove it I have to add a -something px margin and have to try pixel by pixel what the number should be. I'm pretty sure there's an easier solution to that... My other problem is that I can't center the whole menu bar within the header unless I specify a specific width. Obviously I don't know how wide my menu bar will be (and even if I measure it somehow, what if I change the links later?) I'm fairly new to HTML and CSS so I've probably made a bunch of mistakes, I just keep changing the codes until I get what I want but since I'm trying to learn it better I'm aiming for more understanding than random coding so feel free to correct anything. Here's the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My website</title>
<link rel="stylesheet" type="text/css" href="images/style.css" />
<link href='http://fonts.googleapis.com/css?family=Belleza' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="menu">
<ul>
<li><img src="images/ncs.png" /></li>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li id="right">English</li>
</ul>
</div>
</div>
</body>
</html>
And the CSS:
#charset "utf-8";
body {
background-color: #efe8df;
}
#header {
width: 100%;
height: auto;
background-color: #afafaf;
position: absolute;
top:0px;
left:0px;
right:0px;
}
#menu {
margin: auto;
padding: 0px;
list-style: none;
font-family:'Belleza', sans-serif;
color: white;
font-size: 22px;
/*width: 1000px;*/
height: auto;
position: relative;
}
#menu li {
list-style: none;
width: auto;
height: auto;
text-align: center;
vertical-align: middle;
display: table-cell;
border-right: 1px solid #ebeaea;
}
#menu li a {
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 30px;
border-bottom: 3px solid transparent;
}
#menu li a:visited {
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 30px;
border-bottom: 3px solid transparent;
}
#menu li a:hover {
color: #46b5c2;
text-decoration: none;
background-color: #ebeaea;
display: block;
padding: 30px;
border-bottom: 3px solid #46b5c2;
}
#menu li a:active {
color: #46b5c2;
text-decoration: none;
background-color: #ebeaea;
display: block;
padding: 30px;
border-bottom: 3px solid #46b5c2;
}
#menu #right {
border-right: 0px;
font-family: Georgia;
font-size: 14px;
}
Thanks in advance!
Header is extending because for ul and li all browser have there margin and padding standards.
You should use reset.css and normalize.css to remove default css property of some common elements.
so if you want just for list use
ul,li{margin:0; padding:0} or how much you want.
To center align you can give following css properties
to header
display: table
to menu
display : table-cell;
text-align:center
to ul
display:inline-block
to li
float:left
Check fiddle
http://jsfiddle.net/gJFy8/1/
try adding this in your css, change the width to whatever you want according to your need
#menu {
width: 900px;
add width to the #menu div
menu {
margin: auto;
padding: 0px;
list-style: none;
font-family: 'Belleza', sans-serif;
color: white;
font-size: 22px;
width: 1000px;
height: auto;
position: relative;
width: 960px; //or whatever
}
Related
I wrote a website design that has a drop-down menu and a page that has a link to my facebook page. Every time you move your mouse over the drop-down menu, however, the h2 tag moves to the right. How do I get this to not happen?
Also, how can I center the "a" tag that contains the link to my FB page to be centered underneath the h2 tag? Here is the code:
<!doctype html>
<html>
<head>
<meta charset = "UTF-8">
<title>practice</title>
<link rel="stylesheet" type="text/css" href="practice.css">
<style type="text/css">
h1{
color: black;
}
body {
background-color: lightgrey;
}
#top_nav li:hover ul{
display: block;
position: relative;
}
#top_nav {
display: block;
position: relative;
background-color: grey;
border: 1px solid black;
font: bold 16px Sans-serif;
height: 40px;
width: 1000px;
margin: 0px auto;
}
#top_nav ul{
margin: 0px;
padding: 5px;
}
#top_nav li {
position: relative;
float: left;
list-style-type: none;
}
#top_nav ul:after{
content: ".";
display: block;
height: 0px;
clear:both;
visibility: hidden;
border-bottom: 1px solid black;
}
#top_nav li a {
text-decoration: none;
display: block;
color: white;
border-right: 1px solid black;
padding: 5px 25px;
}
#top_nav ul ul {
position: absolute;
display: none;
left: 0px;
background-color: grey;
}
#top_nav ul ul li {
border: 1px solid black;
width: 99%;
}
#top_nav ul ul li a {
border-right: none;
}
a {
text-decoration: none;
text-align: center;
}
</style>
</head>
<body>
<h1 style="text-align: center">This is practice</h1>
<div id = "top_nav">
<ul>
<li>contact us </li>
<li>about us
<ul>
<li>our history</li>
</ul>
</li>
</ul>
</div>
<p></p>
<h2 style="text-align: center">Facebook Page</h2>
my profile
</body>
</html>
I have also uploaded the website at: html.freeoda.com in case you want to see the code working in real time. Just navigate to the "contact" page.
Thanks!
If you want to just fix it change:
#top_nav li:hover ul{
display: block;
position: relative;
}
To:
#top_nav li:hover ul{
display: block;
position: absolute;
}
Basically what you were doing by changing it to relative was placing it back in the DOM to effect other elements, by using absolute positioning it doesnt interact with other elements the same way.
But like i said in my comment there is no reason to reinvent the wheel. Twitters bootstrap has a very nice working solution: http://getbootstrap.com/components/#dropdowns
As for centering the a tag you have a couple of options, the one i recommend would be just to make it a block element and center the text:
my profile
Add an id to make it easily selectable then add:
#fb-profile-link{
display: block;
text-align:center;
}
By default the a tags have a display of inline by changing it to block the element will automatically take up the width of its container. In this case the body of the document. Then using the text-align property we just center the text in that.
I am trying to get these list items to center in the list, but I can't seem to figure out the problem. Here's the code:
HTML
<!DOCTYPE html>
<html>
<head>
<link href="my.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="centerDiv">
<ul class="centerUL">
<li>Amazon 1</li>
<li>Amazon 2</li>
<li>Amazon 3</li>
</ul>
</div>
</body>
</html>
CSS
#centerDiv {
width: 330px;
text-align: center;
border: 1px solid red;
}
.centerUL {
width: 70%;
margin: 2px auto;
line-height: 1.4;
border: 1px solid green;
}
li {
display: inline;
text-align: center;
border: 1px solid orange;
}
If you aren't using a CSS Reset, you should. http://www.cssreset.com/
CSS Resets will normalise your elements so you know how they will act; what to expect from them.
By default, uls and ols will have a left-padding on them, for the bullets :)
http://jsfiddle.net/MXGz5/
.centerUL {
width: 70%;
margin: 2px auto;
padding: 0; /* this new line */
line-height: 1.4;
border: 1px solid green;
}
... ixes the issue.
The best solution is to use text-align:center; for the ul element and set display:inline-block; for the li elements.
ul{
text-align:center;
}
ul li{
display:inline-block;
}
DEMO
I already found some threads with the same problem that I have, but they didn't help me. When ever I zoom in on 25%, my last navigation-button breaks on the next line.
This is my code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="menu">
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
</ul>
</nav>
</div>
</body>
</html>
body
{
background-color: #000000;
margin: 0;
}
li
{
float: left;
background-color: #FFFFFF;
list-style: none;
background-color: #00514C;
font-weight: bold;
font-family: "Calibri";
width: 160.8px;
text-align: center;
display: inline;
line-height: 30px;
border-right: 2px solid #FFFFFF;
}
li a
{
color: #FFFFFF;
text-decoration: none;
display: block;
line-height:
}
li:hover
{
background-color: #C0C0C0;
}
li:last-child
{
border-right: none;
}
ul
{
position: relative;
margin-left: -40px;
}
#menu
{
position: relative;
width: 975px;
height: 30px;
margin: 0 auto;
}
Can anybody help me?
Thanks a lot!
It looks like it is a rounding/ratio problem when you zoom in and out. ( 25% )
When you zoom in or out, you will encounter issues because of
rounding and text rendering. It is a good idea to make sure the
layout can survive a bit of stretching without breaking down.
Relative positioning is affected by issues mentioned in #1, and
therefore unreliable.
Look into using something to remove the properties that the various
browsers will apply. You could use a reset to give you something
more workable or try to normalize the values to make them more even
between browsers.
By Changing lines below in your CSS file (li, ul) will solve the problem in Firefox, Chrome, etc.
Change width: 135px and Add margin: 2px
li
{
float: left;
background-color: #FFFFFF;
list-style: none;
background-color: #00514C;
font-weight: bold;
font-family: "Calibri";
width: 135px;
margin: 2px;
text-align: center;
display: inline-block;
line-height: 30px;
border-right: 2px solid #FFFFFF;
}
Smaller in Chrome (ul width set to 822px in css)
ul
{
width: 822;
margin-left: -40px;
position: relative;
}
Try using divs with display: table and display: table-cell.
<div id="menu">
<nav>
<div class="box">
<div>Link 1</div>
<div>Link 2</div>
<div>Link 3</div>
<div>Link 4</div>
<div>Link 5</div>
<div>Link 6</div>
</div>
</nav>
</div>
body
{
background-color: #000000;
margin: 0;
}
.box div
{
display: table-cell;
background-color: #FFFFFF;
background-color: #00514C;
font-weight: bold;
font-family: "Calibri";
text-align: center;
line-height: 30px;
border-right: 2px solid #FFFFFF;
}
a
{
color: #FFFFFF;
text-decoration: none;
display: block;
line-height:
}
.box div:hover
{
background-color: #C0C0C0;
}
.box div:last-child
{
border-right: none;
}
.box
{
display: table;
width: 100%;
}
#menu
{
position: relative;
width: 975px;
height: 30px;
margin: 0 auto;
}
jsfiddle
I want to put a title (a larger font than other text in navbar) on the left hand side of my navbar, so far i have achieved getting it on the left side but the text is being half cut, like half the text is outside the navbar and half of it is inside it. How can i get the text to stay fully inside the navbar?
CSS
<style>
#navbar ul {
margin:0 auto;
padding: 10px;
list-style-type: none;
text-align: center;
background:#1c1c1c;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
font-family: calibri;
font-size: large;
text-decoration: underline;
font-weight: 200;
border: 0.5px solid #242424;
border-radius: 2px;
padding:.3em 1em;
color: #ffffff;
background-color:transparent;
}
#navbar ul li a:hover {
color: #000;
background-color: #ffffff;
border-radius: 5px;
color:#1c1c1c;
}
#navbar {
position: fixed;
margin-top: 0;
top: 0;
left: 0;
width: 100%;
z-index:0;
}
#navbar {
overflow: hidden;
}
#navbar h1 {
float: left;
}
</style>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>ClickonDeal.com.au-Electronics</title>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
</head>
<div id="navbar">
<h1>Click</h1>
<ul>
<li>Stuff</li>
<li>more stuff</li>
<li>stuff</li>
<li>stuff</li>
<li>stuff</li>
</form>
</ul>
</div>
</div>
</html>
You have a couple of errant closing tags that are throwing errors, but that's not what's causing you trouble.
Likely issue is that H1 in most browsers will have default margins that are pushing it out of whack.
I'd investigate adding a css reset (start at http://necolas.github.io/normalize.css/) but in the mean time, you can fix this by setting margins to 0 on your h1:
#navbar h1 {
float: left;
margin: 0;
}
Here's a simple jsfiddle showing that change: http://jsfiddle.net/adnrw/BjCBf/1/ (h1 color changed to white so we can see it)
Add the below CSS to your code:
#navbar h1 {
float: left;
margin:0;
}
Check this JSFiddle
i tried to ask same question on this post but the result i get shows the menu in vertical
how do i display it horizontal. if i set the display property block then it sets menu vertically? please share code if possible i asked same question her you will get code
Please Share CSS and HTML code that will give me expected result;
I would do something like this...
li#home {
padding: 40px 0 0 0;
background: url(images/home.png) no-repeat center top;
}
You may also possibly need margin-bottom: -10px to move it down from its siblings.
This is the code I would use. I'm not going to assume your knowledge of HTML/CSS, so here goes:
HTML:
<ul id="navigation">
<li class="home">Home</li>
<li class="car">Car</li>
<li class="mobile">Mobile</li>
<li class="old">OldThings</li>
</ul>
CSS:
#navigation {
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
float: left;
}
#navigation li a {
display: block;
padding: 50px 20px 20px;
}
You will also need to add your image (seen over the 'Home' item) - which I would suggest as a background image, on the "a" tag.
If you do want the "Home" link to be on a different level as the others, you can simply change the "home"'s class to be something like this:
#navigation li.home a {
display: block;
padding: 60px 20px 10px;
}
Just adjust the padding on the "a" style, to match where you want each element (as I have guessed :) ). You'll also have to add colours, and hover states.
Good luck!
you need this ...
display: block;
inline lays out all the elements horizontally. block lays out the elements one above the other. i don't think you will be able to layout that one LI element with the display: block because you have an element and a (or something along those lines in the same LI element.
you would be better off to set the width property for that one LI element to be small enough that it automatically lays out the word on the next line instead of being auto width.
Just use clear:right;flow:left; to your image see example
here is demo:
http://3dserg.be/test/hormenu.html
here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="nl" xml:lang="nl">
<head>
<style type="text/css">
#navcontainer
{
margin: 0;
padding: 0;
height: 22px;
font: 11px Verdana, sans-serif;
width: 100%;
border-bottom: 1px solid #bbb;
list-style-type: none;
background: #fff;
}
#navlist li
{
float: left;
margin: 0;
padding: 0;
width: auto;
display: block;
}
#navlist li a, #navlist li a:link
{
background: #fff;
color: #555;
text-decoration: none;
padding: 3px 5px 3px 5px;
display: block;
}
#navlist li a:hover
{
color: #039;
border-bottom: 3px solid #bbb;
cursor: pointer;
background: #eee;
}
#navlist li a#current, #navlist li a#current:link
{
color: #000;
cursor: default;
font-weight: bold;
border-bottom: 3px solid #999;
}
#navlist li a#current:hover
{
border-bottom: 3px solid #f90;
background: #eee;
}
#navlist li img
{
clear:right;
flow:left;
}
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><img src="http://www.nieuwe-brug.nl/img/home_icon.png" alt="" />Item one</li>
<li><img src="http://www.nieuwe-brug.nl/img/home_icon.png" alt="" />Item two</li>
<li><img src="http://www.nieuwe-brug.nl/img/home_icon.png" alt="" />Item three</li>
<li><img src="http://www.nieuwe-brug.nl/img/home_icon.png" alt="" />Item four</li>
<li><img src="http://www.nieuwe-brug.nl/img/home_icon.png" alt="" />Item five</li>
</ul>
</div>
</body>
</html>