I have the following code for my nav bar and can't seem to center it on the website. What am I doing wrong? Removing float: left does nothing for positioning.
Thanks.
css
ul#list-nav {
list-style: none;
margin: 20px auto;
padding: 0px;
width: 800px;
}
ul#list-nav li {
display: inline;
}
ul#list-nav li a {
text-decoration: none;
padding: 5px 0;
width: 100px;
float: left;
background: #485e49;
color: #eee;
text-align: center;
border-left: 1px solid #fff;
}
ul#list-nav li a:hover {
background: #a2b3a1;
color: #000
}
html
</head>
<body>
<div id="as">
<ul id="list-nav">
<li>Home</li>
<li>About Us</li>
</ul>
</div>
</body>
It is already centered, it's just that you are using explicit width for your menu so consider decreasing your menu width
Demo
CSS
ul#list-nav {
list-style:none;
margin:20px auto;
padding:0px;
width:800px;
border: 1px solid #ff0000;
overflow: hidden;
}
Currently I've made it 205px
CSS
ul#list-nav {
list-style:none;
margin:20px auto;
padding:0px;
width:205px;
border: 1px solid #ff0000;
overflow: hidden;
}
Fixed demo
You will need to add display: block;
You need to wrap your nav bar in a wrapper div and then set the margin of that div to auto like so:
<style>
#wrapper {
margin: auto;
}
</style>
<div id="wrapper">
<!-- (your nav bar code here) -->
</div>
I believe following should do the trick;
<div id="as" align="center">
Related
I'm wanting my ul to be in the center of my div however this will work. The code keeps going to the left of the webpage even though I have tried to center it. I have tried a couple of different solutions and to no avail. Here is my code:
HTML:
<div id="nav">
<ul class="links">
<!--PHP code will return menu set in <li> and <a> tags-->
<?php include "setMenu.php";?>
</ul>
</div>
CSS:
#nav {
border: 1px black solid;
}
#nav ul{
display: block-inline;
margin: 0px auto;
}
#nav li {
float: left;
padding: 5px 5%;
margin-right: 5px;
background-image: url("../images/button_background.jpg");
color: white;
border-radius: 3px;
position: center;
border: 1px black solid;
}
#nav li:hover{
color: black;
background-image: url("../images/button_background_hover.jpg");
}
Try this:
#nav ul{
width: 40%;
margin: 0 auto;
}
or
#nav ul{
display: table;
margin: 0 auto;
}
http://jsfiddle.net/4tnwjrag/2/
Example:
#nav {
border: 1px black solid;
background:green;
}
#nav ul{
display: table;
margin: 0 auto;
margin: 0px auto;
background:blue;
margin:0 auto;
padding:0;
}
#nav li {
padding: 5px 5%;
display:table-cell;
width:120px;
margin-right: 5px;
background-image: url("../images/button_background.jpg");
color: white;
list-style:none;
border-radius: 3px;
position: center;
border: 1px black solid;
}
#nav li:hover{
color: black;
background-image: url("../images/button_background_hover.jpg");
}
<div id="nav">
<ul class="links">
<!--PHP code will return menu set in <li> and <a> tags-->
<li>zz</li>
<li>zz</li>
<li>zz</li>
</ul>
</div>
display: block-inline; should be display: inline-block;.
There's no block-inline value for display. Here is a list of available values for that CSS property.
Use text-align center on your div and set padding to 0 on the ul like this:
#nav {
border: 1px black solid;
text-align:center;
}
#nav ul{
display: block-inline;
margin: 0px auto;
padding:0;
}
Here's a link to a similar question: How to horizontally align ul to center of div?
I chose to go with solution #2 and applied it to your elements, where
#nav {
text-align: center;
}
#nav ul {
display: inline-block;
}
and here is a jsfiddle of the solution applied to your particular case: http://jsfiddle.net/7qd5bkse/
I had to make a few tweeks to make it look like yours, but I hope this helps and should be a good start.
Here's another solution
#nav {
border: 1px black solid;
text-align: center
}
#nav ul {
display: inline-block;
list-style-type: none;
}
#nav li a {
text-decoration: none;
display: block;
color: white
}
#nav li {
float: left;
padding: 5px;
margin-right: 5px;
background-color: grey;
border-radius: 3px;
border: 1px black solid;
width: 100px;
text-align: center
}
#nav li:hover {
background-color: white;
}
#nav li a:hover {
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="nav">
<ul class="links">
<li>Menu One
</li>
<li>Menu Two
</li>
<li>Menu Three
</li>
</ul>
</div>
</body>
</html>
i've been trying for 2 hours to align the navigation bar nicely under the header image, but it just won't do it.The first 4 list items align in a row, but the last one goes under them, + the nav bar is not centered like i want it to be. I have searched for answers everywhere, and nothing works. Help will be greatly appreciated.
p.s. i am new to css and html so be gentle.
<html>
<head>
<style>
body {
background-image: url("http://i.imgur.com/SwKXk23.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
body {
margin: 0;
}
.header {
width: 100%;
height: auto;
background-color: none;
padding-top: 24px;
}
.headerContent {
width: 1024px;
height: auto;
margin: 0 auto;
}
.headerContent a img {
width: 659px;
height: 144px;
margin: 0px auto;
display: block;
}
.nav {
width:750px;
margin:0 auto;
list-style:none;
}
.nav li {
float:left;
}
.nav a {
display:block;
text-align:center;
width:150px; /* fixed width */
text-decoration:none;
}
.nav ul li{
height: 40 px;
background: #A14F53;
}
.nav ul li{
list-style-type: none;
width: 150px;
float: left;
}
.nav ul li a{
text-decoration: none;
color: black;
line-height: 40px;
display: block;
border-right: 1px solid #CCC;
text-align:center;
}
.nav ul li a:hover{
background-color:#F9C1B5;
}
.headerBreak{
width: 100%;
height: o%;
border bottom: 2px solid #128e75;
}
</style>
</head>
<body>
<div class="background">
<div class="header">
<div class="headerContent">
<a href="#">
<img style="border:0;width:900px;height:250px;" alt=""
title="" src="http://i.imgur.com/5NhCbxu.png">
</a>
</div>
<div class="nav">
<ul id="nav">
<li>Pagina principala</li>
<li>Despre noi</li>
<li>Clientii nostri</li>
<li>Produse</li>
<li>Contacte</li>
</ul>
</div>
</div>
<div class="headerBreak"></div>
</div>
</body>
</html>
You haven't given the nav bar enough width. Change the .nav rule:
.nav {
width:750px; <------- adjust this
margin:0 auto;
list-style:none;
}
I changed your width to 800px instead of 750px and now the menu fits on one line and is centred.
Here's a fiddle: https://jsfiddle.net/macg14fs/
Your .nav is too narrow for the content so it has wrapped. Press F12 on your browser to discover the interactive debug tools. After that, invest some time in learning about bootstrap.
With a Fiddle it would be much easier to know whats the problem, but try this:
#nav {
width: 100%;
}
#nav > li {
display: inline-block;
margin: 5px 5px 5px 5px;
text-align: center;
}
I am trying to develop a website which contains dropdown menu and in the next division below menu there is a slider division but when mouse is hover on menu the submenu displays and the slider division is shifts down.
So can anyone suggest how I can accomplish the task
The code is as follows
<html>
<head>
<style type="text/css">
#header{
height: 90px;
}
#navigation{
height: 30px;
background-color: #0099FF;
border: 1px solid #0099FF;
border-radius: 10px;
z-index:1000;
}
ul {
list-style: none;
padding: 0px;
margin: 0px;
}
ul li {
display: block;
position: relative;
float: left;
padding-right: 40px;
}
li ul {
display: none;
}
ul li a {
display: block;
padding: 5px 10px 5px 10px;
text-decoration: none;
color: #FFFFFF;
font:Verdana, Arial, Helvetica, sans-serif;
font-size: 20px;
}
ul li a:hover {
background: #00CCFF;
}
li:hover ul {
display: block;
z-index: 1000;
}
li:hover li {
float: none;
}
li:hover a {
background: #00CCFF;
}
li:hover li a:hover {
background: #D2F5FF;
}
#drop-nav li ul li {
border-top: 0px;
}
#clearmenu{
clear: left;
}
#sliderandnews{
height: 300px;
}
#slidermain{
height: 300px;
width: 65%;
float: left;
}
#news{
height: 300px;
width: 33%;
border: 2px solid #F0FFFF;
border-radius: 20px;
float: right;
background-color: #F0FFFF;
}
.clear{
height: 40px;
}
</style>
</head>
<body>
<div id="header">
</div>
<div id="navigation">
<ul id="drop-nav">
<li>Home</li>
<li>About Us</li>
<li>Academic Programs
<ul>
<li>BBA</li>
<li>BCA</li>
<li>BE</li>
</ul>
</li>
<li>Faculties</li>
<li>Admission</li>
<li>Downloads</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="clear"></div>
<div id="sliderandnews">
<div id="slidermain">
This section is changes its position on mousehover
</div>
<div id="news">
</div>
</div>
</body>
</html>
The problem is that your elements are relative positioned. So, when the submenu appears, all elements below are shifted down. You can add absolute positioning to navigation bar, and determine its displacement from top using the top property in CSS. This allows you to eliminate #header (which has only the role to give a top margin).
#navigation{
position:absolute;
top:90px;
}
Similarly you can do with the #sliderandnews block. Since you've given an absolute positioning to navigation menu, navigation is removed from HTML elements flow inside the page. To compensate this, you have to add a proper top margin to this element.
#sliderandnews{
height: 300px;
margin-top:190px;
}
And here's the final fiddle.
In the #nav ul li, i cant seem to fix the position of the text without changing the size of the block. Whenever I try to use padding, the size of the block changes. How can I move the text without changing the size of the block? Here is the code.
<!DOCTYPE html>
<html>
<head>
<style>
body
{
padding: 0;
background-color: #FFC0CB;
}
#container
{
margin: 0 auto;
width:100%;
height: 1500px;
padding: 0px;
}
#header
{
overflow: auto;
background-color: red;
margin: 0px;
}
#headTable
{
float:right;
}
#logo
{
background-color: green;
margin: 5px 0px 5px 70px;
float: left;
width:150px;
height:100px;
}
#headTable ul
{
list-style-type: none;
margin: 0;
}
#headTable ul li
{
font-size: 35px;
padding-top: 20px;
color: black;
float: left;
margin: 20px 50px;
}
#headTable ul li:hover
{
background-color: blue;
color:red;
}
#nav
{
clear: both;
width:100%;
height: 95px;
background-color: purple;
}
#nav ul
{
overflow: auto;/*
background-color: yellow;*/
margin: 0px;
padding: 0px;
}
#nav ul li
{
background-color: black;
color:white;
font-size: 30px;
list-style-type: none;
text-decoration: underline;
margin: 20px;
padding: 10px 10px 10px 20px;
float: left;
/*text-indent: 0px;
*/}
#page
{
float: left;
margin: 10px;
height:700px;
width:700px;
background-color: #FFC0CB;
}
#page p
{
padding:100px 0px 0px 50px;
font-size: 20px;
color: navy;
}
#content
{
height: 1000px;
width: 1334px;
position: absolute;
margin:0px;
background-color: #00B2EE;
}
#top
{
float: right;
position: relative;
margin: 10px;
background-color: #7A67EE;
width:500px;
height:300px;
}
#low
{
position: relative;
clear: both;
float: right;
margin:-300px 10px 10px 10px;
background-color: #7A67EE;
width:500px;
height:300px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<img src="plane.jpg" width="150" height="100">
</div>
<div id="headTable">
<ul>
<li>Google</li>
<li>Google</li>
<li>Google</li>
</ul>
</div>
</div>
<div id="nav">
<ul>
<li>Menu</li>
<li>Blog</li>
<li>Ins</li>
<li>BBC</li>
<li>Contact</li>
<li>Wow</li>
<li>Doge</li>
<li>Such fun</li>
</ul>
</div>
<div id="content">
<div id="page">
<p>This is a paragraph that should
stay intact inside the id of Page.
</p>
</div>
<div id="top">
<p>THis is a paragraph that should
stay intact inside the id of top.
</p>
</div>
<div id="low">
<p>This is a paragraph that should
stay intact inside the id of bottom.
</p>
</div>
</div>
</div>
</body>
</html>
You need to set the width for an li element, and wrap the nav text in span tags. Then you can move them left or right and the width of the nav li will not change.
<li><span>Menu</span></li>
<li><span>Blog</span></li>
<li><span>Ins</span></li>
<li><span>BBC</span></li>
<li><span>Contact</span></li>
<li><span>Wow</span></li>
<li><span>Doge</span></li>
<li><span>Such fun</span></li>
#nav ul li{width:70px;background-color: black;color:white;font-size: 30px;list-style-type: none;text-decoration: underline;margin: 20px;padding: 10px 10px 10px 20px;float: left;}
#nav ul li span{margin-left:70px;}
See a working solution here: http://jsfiddle.net/mtruty/73uav/
Here is my CSS:
<style>
ul, ol, dl { padding: 0;
margin: 0;
}
#navWrapper {
background:#3C6;
height: 90px;
float: left;
position: relative;
width: 600px;
}
#nav {
margin: 0 0 0 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
position: absolute;
bottom: 0;
}
#nav li {
float: left;
list-style-type: none;
}
#nav li a, #nav a:visited {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li a:hover, #nav a:active, #nav a:focus {
color: #c00;
background-color: #fff; }
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
#wrapper {
width: 965px;
background: #FFFFFF;
margin: 0 auto;
}
a img {
border: none;
float: left;
}
</style>
Here is my HTML:
<div id="wrapper">
<div class="header"><img src="" alt="Insert Logo Here" name="Insert_logo" width="300px" height="90px" id="Insert_logo"/>
<div id="navWrapper">
<div id="nav">
<ul class="nav">
<li>Link one</li>
<li>Link two</li>
<li>Link three</li>
<li>Link four</li>
</ul>
<!-- end #nav --></div>
<!-- end #navWrapper --></div>
<!-- end .header --></div>
<div class="clearfloat"></div>
</div>
I am trying to create a navigation bar that sits on the bottom of its wrapper. The only way I can think to do this is using absolute positioning and setting the bottom to 0. But the problem is I have to set a width the div inside of the wrapper, which is what my code reflects now. I want the width to be dynamic and change with the width of the navigation bar while it still sits on the bottom of the wrapper, aligned to the bottom of the header image. How can I do this?
You can set #nav to 100% width, and the four items to 25% width each.
fiddle
If you mean something else, leave a comment.
Here are the exact changes I made.
#nav {
width: 100%; /* Add: */
}
#nav li {
width: 25%; /* Add: */
}
Based on the fiddle you provided, the left float on the navWrapper is causing problems. Removing it hides the logo, which is floated left. To fix this, put a clearfix before the navWrapper, and after the logo image.
updated fiddle