I have a simple layout like this:
<html>
<body>
<div>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</body>
But I can't figure out how to center this menu horizontally and dynamically. The CSS is in here http://codepen.io/syarifphmy/pen/egvsk. I'm thinking it has something to do with the width of the < ul >. But if I state it in a fixed size say for example 500px, then it won't be dynamic. I want it to fit according to the lists.
Use display: table;
ul{
display: table;
list-style: none;
padding:0;
margin:0 auto;
}
Working example: http://codepen.io/anon/pen/zpxyD
Also, unrelated: I would recommend giving your anchors display: block, so they use the entire li space. Right now you have to find the text inside the li to actually click the link.
You can use text-align to center (non-floated) inline-block children:
ul{
text-align: center;
}
li{
display: inline-block;
float: none; /* default value */
}
*{
margin:0;
}
li:first-child{
border-radius:5px 0 0 5px;
}
li:last-child{
border-radius:0 5px 5px 0;
}
ul{
text-align: center;
list-style: none;
padding:0;
}
a{
color:white;
text-decoration:none;
font-size:5vmin;
}
li{
display:inline-block;
background-color: #98bf21;
padding:5px 20px;
}
li:hover{
background-color: #7A991A;
}
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
I can't see the codepen snippit here, so i made my own fiddle. Not sure if you wanted horiz or vertical items, so i made both.
div#one { width: 100%; overflow: hidden; }
div#one ul { list-style: none; position: relative; float: left; display: block; left: 50%; }
div#one ul li { position: relative; float: left; display: block; right: 50%; margin-right: 20px; }
div#two { width: 100%; overflow: hidden; }
div#two ul { list-style: none; position: relative; float: left; display: block; left: 50%; }
div#two ul li { position: relative; display: block; right: 50%; text-align: center; }
This fires on the markup:
<div id="one">
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div id="two">
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>A REALLY LONG TITLE</li>
</ul>
</div>
demo: http://jsfiddle.net/x40h8Ldh/1/
Be sure you are using a STRICT DTD as some of these concepts will not work cross-browser with just <html> declared.
Related
I'm trying to create a drop-down menu but my text-align command wouldn't seem to work (same applies with font-size and other text-related codes). I tried putting my text-align codes in nav ul li and nothing seem to happen. I've also tried putting it on the main .drop-down menu on CSS but it still has no changes. Can anyone help me out here? I couldn't figure out the reasoning behind this.
My HTML and CSS codes are:
nav{
flex:1;
text-align: right;
}
nav ul li{
list-style: none;
display: inline-block;
margin-left: 60px;
position: relative;
}
nav ul li a{
text-decoration: none;
color: #fff;
font-size: 13px;
transition: all 0.5s;
}
nav ul li a:hover{
color: #E6C7F3;
}
.dropdown-menu{
display: none;
}
nav ul li:hover .dropdown-menu {
display: block;
position: absolute;
left: -35;
top: 100%;
width: 100px;
background-color:black;
opacity: .8;
border-radius: 10px;
}
.dropdown-menu ul{
display: block;
padding-top: 10px;
}
.dropdown-menu ul li{
width: 0px;
left: -58;
bottom: 5;
padding: 10px;
padding-right: 40px;
text-align: center;
}
<div class="navbar">
<img src="image/durra.png" class="logo">
<nav>
<ul>
<li>HOME</li>
<li>ABOUT US</li>
<li>SHOP
<div class="dropdown-menu">
<ul>
<li>Bestsellers</li>
<li>Accessories</li>
<li>Jewelry</li>
<li>Miscellaneous</li>
</ul>
</div>
</li>
<li>FEEDBACK</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
text-align works with a element having width. But you have used width: 0px . So it's pretty obvious you cannot use alignment there.
Hi First you have to add padding to ul under dropdown-menu. and then set width of li item to 100%. Please refer below code.
.dropdown-menu ul {
display: block;
padding-top: 10px;
padding: 10px 0 0;
}
.dropdown-menu ul li {
width: 100%;
left: -58;
bottom: 5;
padding: 10px 0;
/* padding-right: 40px; */
text-align: center;
}
I am having a problem when using the css property margin-top on <li> elements.
I am trying to have my list align to the top of the page but my li element isn't moving to the top as it should.
Below is my HTML code:
<body>
<div class="main_header">
<h1>Title</h1>
<ul>
<li>About Me</li>
<li>Order</li>
<li>Designs</li>
<li>Contact</li>
</ul>
</div>
</body>
This is my CSS code:
.main_header li a {
margin-top: -20px;
display: inline-block;
}
If your looking for a inline navigation style ul change the css to:
.main_header li {
margin-top: -20px;
display: inline-block;
}
If your looking to move the whole list up try:
ul {
margin-top:-10px;
}
If your looking to move just the li elements closer to each other try:
.main_header li {
display: block;
}
Note - if your looking to have a inline navigation, use the <nav> html element instead to reduce styling, as it automatically places the links inline
Replace
.main_header li a{
margin-top: 20px;
display: inline-block;
}
by
.main_header li {
margin-top: 20px;
display: inline-block;
}
Output
Check it out.
From what I can gather - you're wanting to do something like this...
HTML
<div class="main_header">
<h1>Title</h1>
<ul>
<li>About Me</li>
<li>Order</li>
<li>Designs</li>
<li>Contact</li>
</ul>
</div>
CSS
.main_header {
width: 500px;
margin: 0 auto;
}
.main_header ul {
list-style: none;
margin: 0;
padding: 0;
}
.main_header li:first-child {
border-left: 1px solid #ccc;
}
.main_header li {
display: inline-block;
margin: 0;
padding:10px;
border-right: 1px solid #ccc;
}
Codepen
http://codepen.io/anon/pen/zKxGPY
I have 5 menu items, that I'm having difficulty positioning in line with the background.
The menu text seems to bunch together in the middle, rather than listening to the "width" property to space them out in the correct places.
JSFIDDLE:
http://jsfiddle.net/nmHSD/
HTML:
<div id="menu">
<div class="table">
<ul>
<li>Home
</li>
<li>What we do</li>
<li>Our clients</li>
<li>Testimonials</li>
<li>Contact us</li>
</ul>
</div>
</div>
CSS:
#menu {
top:13px;
left:0px;
position:relative;
height:60px;
width:523px;
background-image:url('http://www.kitoit.com/new/img/menu-buttons.png');
}
.table {
display: table;
/* Allow the centering to work */
margin: 0 auto;
}
#menu ul {
width: 696px;
list-style: none;
padding-top: 20px;
}
#menu ul li {
display: inline;
}
You mean more like this? I changed somethings in your css..
I used float:left; on the <li> instead of inline and because you have 5 list-items i gave them a width:20%;.
Your new css: (less css but the outcome is what you want.)
#menu {
top:13px;
left:0px;
height:60px;
width:523px;
background-image:url('http://www.kitoit.com/new/img/menu-buttons.png');
}
#menu ul {
width:523px;
list-style: none;
padding-top: 30px;
padding-left:0;
}
#menu ul li {
float:left;
width: 20%;
text-align:center;
}
DEMO
i think following code can help for you:
replace code:
#menu ul {
list-style: none;
float: left;
padding: 20px 0 0 0;
}
and also
#menu ul li {
float: left;
width: 104px;
text-align: center;
}
You need to use display: inline-block; on <li> elements in order to be able to use the width, something like that like that:
#menu ul li {
display: inline-block;
width: 150px;
}
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;
The following is my HTML and CSS. The I'm expecting a nav bar with background color 4d4030 but not background is rendered. Anyone have nay ideas? Thanks!!
<div id="nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Clients</li>
</ul>
</div>
#nav {
background-color: #4d4030;
}
#nav ul{
padding: 0;
float: left;
}
#nav ul li{
display: inline;
}
#nav ul li a{
float: left; text-decoration: none;
color: #FFFFFF;
padding-left: 25px;
padding-right: 25px;
font-size: 18px;
display: block;
border-right: 1px #FFFFFF;
}
this will solve your issue
#nav {
background-color: #4d4030;
overflow:hidden;
}
demo http://jsfiddle.net/gaby/Gb22V/
That's because you float the only child for the nav element which is the ul element. This makes the height of the nav element equal to 0. Clear your float by adding an overflow: hidden declaration (or using any other method to clear floats) to nav and it will work.
#nav {
background-color: #4d4030;
overflow: hidden;
}
See fiddle.
HTML
<div id="nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Clients</li>
</ul>
<div class="clear"></div>
</div>
CSS
.clear
{
clear: both;
}