You can see the image in the middle.
Any idea how to move it down to match please?
My code is included as jsfiddle. There is some space bellow the image also and I couldn't erase it. Is there some way that would move it?
HTML
<div id="menu">
<ul>
<li><span>Link 1</span>
</li>
<li><span>Link 2</span>
</li>
<li class='widthAuto'><img src='https://www.google.co.in/images/icons/product/chrome-48.png' height='80' height="175px" alt="Domu"/>
</li>
<li><span>Link 4</span>
</li>
<li><span>Link 5</span>
</li>
</ul>
</div>
CSS
body {
width: auto;
background-image: url(blue4.jpg);
background-size: cover;
margin: 2px 0 0 0;
}
#menu {
height:210px;
line-height:36px;
margin:0 auto;
text-align:center;
width:800px;
padding:0;
}
#menu ul {
display: inline;
-webkit-padding-start: 0px;
-webkit-margin-before: 2x;
-webkit-margin-after: 0px;
margin:0;
font-size: 0;
}
#menu ul li {
text-algin:center;
display:inline;
font-family:Arial, sans-serif;
font-size:40px;
padding:0 0 10px 0;
margin:0;
text-decoration:none;
background-image:url(../Pics/Buttons/Menu/Menu.gif);
}
#menu a {
text-decoration:none;
color:#000000;
margin:10px 0;
padding:0;
min-width:100px !important;
display:inline-block;
}
#menu a:hover {
font-weight:bolder;
}
span {
width:100%;
font-size:30px;
border-left: 1px solid black;
border-right: 1px solid black;
}
.widthAuto {
width:auto;
}
Try this:
#menu a{
/* other css properties */
height: 80px; /* equal to image height */
line-height: 80px; /* equal to this element height, to get in middle */
vertical-align: middle; /* To keep all the elements in middle of the parent container */
}
Working Fiddle
Try adding the following class
#menu img{
position:relative;
top:20px;
}
Also think about using float: left on the li elements and not display:inline. At least use display:inline-block if you really want to go with display. By setting the display of block elements to inline it really messes the whole picture.
Related
I have been working on centering a menu on a webpage I've been working on. I have tried all the popular answers of display:inline-block, centering the text, margin: 0 auto; however, all attempts have failed. Is there something that I am doing wrong, or putting the css rules under the wrong elements?
Just wanting a horizontal center alignment. i have also used a css reset.
I have included a JS Fiddle at my latest failed attempt. Thank you.
JS Fiddle
<div id="menu">
<ul>
<li>
Apples
</li>
<li>
Oranges
</li>
</ul>
</div>
#menu{
width: 100%;
height: 300px;
}
#menu ul{
width: 100%;
height:100%;
}
#menu li{
display:block;
width:150px;
height:150px;
border-radius:75px;
font-size:20px;
line-height:150px;
text-align:center;
background:#000;
float: left;
}
#menu a{
display:block;
margin: 0 auto;
}
JSfiddle Demo
CSS
#menu {
width: 100%;
height: 300px;
text-align: center;
}
#menu ul {
display: inline-block;
margin:0;
padding:0;
}
#menu li {
width:150px;
height:150px;
border-radius:75px;
font-size:20px;
line-height:150px;
background:#000;
display: inline-block;
}
#menu a {
display:block;
margin: 0 auto;
}
NOTE- Inline block means that spacing is affected by whitespace in the HTML. There are various methods for dealing with this detailed in other SO questions & answers.
Here's a solution, which doesn't depend on your menu size.
Please note <ul> have a default left padding you need to remove (unless you're using a CSS reset).
#menu{
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
}
#menu ul{
width: 100%;
padding: 0;
}
#menu li{
display:block;
width:150px;
height:150px;
border-radius:75px;
font-size:20px;
line-height:150px;
text-align:center;
background:#000;
float: left;
}
#menu a{
display:block;
margin: 0 auto;
}
<div id="menu">
<ul>
<li>Apples
</li>
<li>Oranges
</li>
</ul>
</div>
In #menu li remove float:left; and add margin:auto;.
In order to keep both items in a single line, use display: inline-block; on the #menu li and center the parent ul element with an auto width and margin.
I have a menu with 5 items. The idea is that there is a border between each.
The issue is that some of the menu items need to be double lined, but when this happens, the borders are all over the place.
I've been looking at the code for an hour almost and not sure how to correct this.
I could just have them single lined, but that goes against the design.
JSFIDDLE:
http://jsfiddle.net/69CSf/
CSS:
body {
background-color:black;
}
#menu {
width:500px;
top:100px;
-border:solid 1px #ffff00;
height:40px;
vertical-align:middle;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
font-family:'Open Sans', sans-serif;
font-size: 12px;
text-transform: uppercase;
color:#FFF;
width:100%;
height:40px;
}
li {
display: inline-block;
width:19%;
height:40px;
text-align:center;
padding-top:9px;
vertical-align:center;
}
li~li {
border-left: 3px solid #FFFFFF
}
li>a:hover {
color:#FFF;
}
li>a {
color:rgb(200, 200, 200);
text-decoration:none;
}
HTML:
<div id="menu">
<ul>
<li>Philosophy
</li>
<li>Your Trainer
</li>
<li>Word of Mouth
</li>
<li>Blog
</li>
<li>Contact
</li>
</ul>
</div>
Change display value from inline-block to table-cell and change vertical-align value to middle (vertical-align:center does not exist at all).
Example
you have this vertical-align:center;, change it to vertical-align:middle; for LI element
As like the title, here is my case.
The header part is ok for me, i manage to center it, but the menu part, i just cant figure it.
This is the HTML Part:
<div id="container">
<div id="topcontain">
<div id="header">
<div id="logo">
Logo Here
</div>
<div id="title">
<h1> THE TITLE HERE</h1>
</div>
</div>
</div>
<div id="menu">
<div id="menu_button">
HOME
</div>
<div id="menu_button">
PRODUCTS
</div>
<div id="menu_button">
GALLERY
</div>
<div id="menu_button">
INFO
</div>
<div id="menu_button">
ABOUT US
</div>
</div>
</div>
Here is the CSS part:
#charset "utf-8";
html, body {
margin: 0px;
padding: 0px;
border: 0px;
font-family:Verdana, Geneva, sans-serif;
background-color:#000;
}
#container {
width: auto;
margin: 0 auto;
padding: 0;
}
#container #topcontain {
margin:20px 0px 20px 0px;
height:120px;
border-bottom:#F90 solid 3px;
}
#container #topcontain #header {
height:120px;
background:-moz-linear-gradient(#ffe2a3, #ffc341); /* FF3.6+ */
background:-webkit-linear-gradient(#ffe2a3, #ffc341); /* Chrome,Safari4+ */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffe2a3,endColorstr=#ffffc341); /* IE */
}
#container #topcontain #header #logo {
width:150px;
height:117px;
margin:auto;
float:left;
}
#container #topcontain #header #title {
width:auto;
position:relative;
margin: 0px 50px 0px 0px;
height:117px;
float:right;
color: #900;
font-size:20px;
font-family:Tahoma, Geneva, sans-serif;
}
#container #menu {
float:left;
width: 100%;
padding:0 auto;
background:#ffc341;
position:relative;
overflow:hidden;
}
#container #menu #menu_button{
margin:0;
width: 150px;
position:relative;
display:block;
text-decoration:none;
text-align:center;
background:#ffc341;
float:left;
font-size:18px;
color: #000;
border-right: #F90 thin solid;
}
#container #menu #menu_button a:link, #container #menu #menu_button a:visited{
text-decoration:none;
color:inherit;
}
#container #menu #menu_button:hover{
background-color: #F30;
color:#fff;
text-decoration: overline;
}
Looking forward to your reply, thanks.
it is semantically better not to use div for menu (instead use followed by
it's wrong to repeat many times an id (instead use classes, or combine css selectors - for your html #menu-button is the same as #menu div).
Here the html + css corrected with the centered menu
<html>
<head>
<style>
#charset "utf-8";
html, body {
margin: 0px;
padding: 0px;
border: 0px;
font-family:Verdana, Geneva, sans-serif;
background-color:#000;
}
#container {
width: auto;
margin: 0 auto;
padding: 0;
}
#container #topcontain {
margin:20px 0px 20px 0px;
height:120px;
border-bottom:#F90 solid 3px;
}
#container #topcontain #header {
height:120px;
background:-moz-linear-gradient(#ffe2a3, #ffc341); /* FF3.6+ */
background:-webkit-linear-gradient(#ffe2a3, #ffc341); /* Chrome,Safari4+ */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffe2a3,endColorstr=#ffffc341); /* IE */
}
#container #topcontain #header #logo {
width:150px;
height:117px;
margin:auto;
float:left;
}
#container #topcontain #header #title {
width:auto;
position:relative;
margin: 0px 50px 0px 0px;
height:117px;
float:right;
color: #900;
font-size:20px;
font-family:Tahoma, Geneva, sans-serif;
}
#container #menu {
width: 100%;
padding:0 auto;
background:#ffc341;
position:relative;
overflow:hidden;
}
#container #menu li{
margin:0;
width: 150px;
position:relative;
display:block;
text-decoration:none;
text-align:center;
background:#ffc341;
float:left;
font-size:18px;
color: #000;
border-right: #F90 thin solid;
}
#container #menu li a:link, #container #menu li a:visited{
text-decoration:none;
color:inherit;
}
#container #menu li:hover{
background-color: #F30;
color:#fff;
text-decoration: overline;
}
/*centered menu */
nav ul{
margin: 10px auto;
width: 755px;
}
</style>
</head>
<body
<div id="container">
<div id="topcontain">
<div id="header">
<div id="logo">
Logo Here
</div>
<div id="title">
<h1> THE TITLE HERE</h1>
</div>
</div>
</div>
<nav id="menu">
<ul>
<li>
HOME
</li>
<li>
PRODUCTS
</li>
<li>
GALLERY
</li>
<li>
INFO
</li>
<li>
ABOUT US
</li>
</ul>
</nav>
</div>
</body>
</html>
The centering is obtained giving a specific width to the ul (it could have also been a div or whatever) and giving it an "auto" margin for right and left.
well floating something will mean its taken out of the flow (somewhat) and just, as the title suggests, floating left.
try and remove it:
float:left;
So:
#container #menu {
background: none repeat scroll 0 0 #FFC341;
float: left;
overflow: hidden;
position: relative;
text-align: center;
width: 100%;
}
#container #menu #menu_button {
background: none repeat scroll 0 0 #FFC341;
border-right: thin solid #FF9900;
color: #000000;
display: inline-block;
float: left;
font-size: 18px;
margin: 0;
position: relative;
text-align: center;
text-decoration: none;
width: 150px;
}
Since the width for #menu is set as 100%, it takes up the whole width of the parent element, i.e #container, whose width is auto, i.e the width of the window.
So, you need to set the width of #menu and align it to the center, by getting rid of the float and the following changes :
#container #menu {
width: 755px; /* 151px x 5 elements */
margin:0 auto; /* Instead of padding */
position:relative;
overflow:hidden;
}
and for the yellow background, just wrap your #menu around with a #menuWrapper div, and also as Italy specified, id should be unique on a page. Use class instead.
HTML :
<div id="menuWrapper">
<div id="menu">
<div class="menu_button">
HOME
</div>
<div class="menu_button">
PRODUCTS
</div>
<div class="menu_button">
GALLERY
</div>
<div class="menu_button">
INFO
</div>
<div class="menu_button">
ABOUT US
</div>
</div>
</div>
CSS :
#menuWrapper {
background:#ffc341;
}
Also, it's better to use ul-li elements for the menu items instead of div
Full HTML + CSS : JSFiddle
You may try to modify the container menu in the css part
#container #menu
{
margin:auto;
width:85%;
padding:0 auto;
background:#ffc341;
position:relative;
overflow:hidden;
}
Try this and comment here for any issues..
I am trying to center then float:right my top fixed navbar with the content area of my page. Currently the navbar is floated right but is not centered with my content area.
Click to view my subject site.
CSS
#topribbon{
width: 100%;
height: 30px;
background-color: #AA1119 ;
margin: -11px 0px 1em 0px;
position: fixed;
z-index: 9999;
}
#topribbon ul{
padding-top:5px;
text-align:right;
float:right;
position:relative;
margin:0 auto;
width:980px;
}
#topribbon ul li{
float:right;
color:white;
padding:0 10px 0 10px;
list-style:none;
display:block;
line-height:20px;
text-align:center;
cursor:pointer;
width:auto;
}
#topribbon ul li:hover{
color:#5C8FA5;
HTML
<div id="topribbon"> <ul>
<li>Free Ground Shipping on all orders over $99!</li>
<li>Why Us?</li>
<li>Account</li>
<li>Cart</li>
<li>+1-800-555-5555</li>
</ul>
</div>
My first guess is the width of ul element doesn't work.
Try this instead
<div id="topribbon">
<div class="ribbonwrapper" style="width:980px;margin:0 auto;">
<ul>
<li>Free Ground Shipping on all orders over $99!</li>
<li>Why Us?</li>
<li>Account</li>
<li>Cart</li>
<li>+1-800-555-5555</li>
</ul>
</div>
</div>
Put the style of .ribbonwrapper into CSS to make the code tidy :) then you can remove irrelevant width & margin property of #topribbon ul
I'm not sure I'm entirely clear on what you're trying to do, but if what you want is to float:right the UL and then have all the LI's within it centered, you could do this:
#topribbon ul { float:right; text-align: center; }
#topribbon ul li { display: inline-block; }
Be sure to remove the float:right; from the li style block.
If you mean something else by "centered with my content area" can you explain more?
Try with float:none; on the #topribbon ul
Pretty confused what you mean exactly myself... Maybe this is what you want? jsFiddle
#topribbon {
width: 100%;
background-color: #AA1119;
margin: -11px 0px 1em 0px;
position: fixed;
z-index: 9999;
overflow:hidden;
}
#topribbon ul {
padding:10px 0 8px;
position:relative;
margin:0 auto;
width:980px;
background:red;
overflow:hidden;
}
#topribbon ul li {
color:white;
list-style:none;
display:inline-block;
line-height:20px;
cursor:pointer;
width:auto;
padding:0 10px 0 10px;
float:right;
}
#topribbon ul li:hover {
color:#5C8FA5;
}
like others have said use the ul below. I am just as stumped as you however, I am new so if my code is wrong then please feel free to tell me. Thanks
#topribbon ul { float:right; text-align: center; }
#topribbon ul li { display: inline-block; }
jsFiddle
The left red div will not go all the way down. I want it to go all of the way down, regardless of how tall the main ("li") div is.
css
.li_wrap {
padding:7px;
float:left;
}
.song-list li{
position: relative;
display: block;
padding:0;
margin-bottom:10px;
background: black;
color: yellow;
z-index:7;
text-decoration: none;
}
.rank_pos {
background:red;
margin:0;
padding:3px;
height:100%;
float:left;
}
body {font-size:12px; font-family:Verdana, serif;}
html
<ul class="song-list">
<li id="1">
<div class="rank_pos">1st</div>
<div class="li_wrap">Testing</div>
<div style="clear:both;"></div>
</li>
<li id="2">
<div class="rank_pos">2nd</div>
<div class="li_wrap">Testing</div>
<div style="clear:both;"></div>
</li>
</ul>
Or maybe there's a better way of doing it.
Clean up a little bit - http://jsfiddle.net/gDByS/2/
HTML
<li>
<span>3rd</span>
<div>Testing<br />Testing<br />Testing<br />Testing<br />Testing</div>
</li>
CSS
.song-list li{
position: relative;
display: block;
padding:0;
margin-bottom:10px;
background: black;
color: yellow;
z-index:7;
text-decoration: none;
overflow: hidden;
line-height: 22px;
}
ul li span{
background:red;
margin:0;
padding: 0 5px;
height:100%;
display: block;
position: absolute;
}
ul li div {
margin-left: 40px;
}
This page might guide you in the right direction:
http://www.tutwow.com/htmlcss/quick-tip-css-100-height/
You could use jQuery for that: http://jsfiddle.net/SF24t/
Or there is a trick that helps in some cases: If you want, for example, to have both "boxes" separated by a border that goes all the way to the bottom, you can have that border painted in background image with repeat-y