I have a simple horizontal list menu that was working fine when I had a global (*) setting of padding: 0. For other reasons, I needed to take out that padding as a global setting, but I can't figure out how to make it apply to the list.
Now, each entry in the list has a blank block of maybe half an inch to the left of the first entry. If I can get rid of that, I'll be set. Here is a fiddle (http://jsfiddle.net/eha77way/), and I'll paste the code.
Thank you!
CSS
* {
border:0;
margin:0;
}
/* navigation */
#navigation, #episodenav, #pivotnav {
border-top:3px solid #FFF;
border-right:1px solid #FFF;
margin:0 auto;
list-style:none;
}
#pivotnav {
background:#F0F0F0;
border-top:3px solid #FFF;
border-right:1px solid #FFF;
margin:0 auto;
width:755px;
height:25px;
list-style:none;
}
#navigation {
background:#E0E0E0;
width:755px;
height:40px;
}
#episodenav {
width:756px;
background:#F0F0F0;
height:25px;
}
#pivotnav {
width:755px;
background:#F0F0F0;
height:25px;
}
#navigation li, #episodenav li, #pivotnav li {
border-left:1px solid #FFF;
float:left;
list-style:none;
}
#navigation li, #pivotnav li {
width:150px;
}
#episodenav li {
width:41px;
}
#navigation a, #episodenav a, #pivotnav a {
color:#000;
display:block;
text-align:center;
}
#navigation a {
line-height:40px;
}
#episodenav a, #pivotnav a {
line-height:25px;
}
/* content */
#content {
height:auto;
margin:50px auto;
position: relative;
padding:30px;
width:751px;
background: white;
-moz-box-shadow: 0 0 20px black;
-webkit-box-shadow: 0 0 20px black;
box-shadow: 0 0 20px black;
font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
}
#content h1 {
border-bottom:1px dashed #999;
font-size:2em;
padding:25px 5px;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
}
#content h2 {
font-size:1.6em;
padding:25px 5px;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
}
#content h3 {
font-size:1.1em;
padding:20px 5px;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
}
#content p {
padding: 10px 5px;
line-height: 21px;
}
#content textarea {
border: 1px solid #cccccc;
}
#list {
margin-left: 50px;
}
HTML
<body>
<div id="content">
<div id="navigation">
<ul>
<li><i>Ulysses</i> by Episode</a></li>
<li>Pivot Points</a></li>
<li>Projects</a></li>
<li>Collections</a></li>
<li>About Ashplant</a></li>
</ul>
</div>
<h2>TEST</h2>
</div>
</body>
</html>
Is this what you mean?
#navigation ul{
padding: 0;
}
The padding is in the ul element, not the lis. This is a default of the browser, that is much needed when bullets are visible.
You can add a css rule-set such as:
#navigation ul {
padding: 0;
}
at least on my jsbin, this does the trick.
Maybe you want to remove padding-left without {padding-left:0px}?
Please use it
ul > li {position: relative; left: -20px;}
Related
Whenever I hover over the #email all the social icons move to the left for a portion. Ideas were to use positition: fixed or float. I want to do that the icons stay intact but the #email still hovers.
HERE is the code - http://codepen.io/anon/pen/jyubq
#header ul li {
width:48px;
height:48px;
margin-left:15px;
margin-top: 5px;
display:inline-block;
background-color:#000000;
padding:0;
text-align: center;
}
#google{
width:48px;
height:48px;
border-radius: 50%/50%;
background-image:url('images/googleplus.png');
display:block;
}
#facebook{
width:48px;
height:48px;
border-radius: 50%/50%;
background-image:url('http://bradsknutson.com/wp-content/themes/bradsknutson/images/facebook-48circle.png');
display:block;
}
#twitter{
width:48px;
height:48px;
border-radius: 50%/50%;
background-image:url('http://www.gmailnotifier.se/img/icon_twitter.png');
display:block;
}
#header ul li#google{
background-color:#d34836;
transition:background-color;
transition-duration:0.17s;
}
#header ul li#google:hover{
background-color:#c23725;
}
#header ul li#facebook{
background-color:#3b5998;
transition:background-color;
transition-duration:0.17s;
}
#header ul li#facebook:hover{
background-color:#2a4887;
}
#header ul li#twitter{
background-color:#2447B2;
transition:background-color;
transition-duration:0.17s;
}
#header ul li#twitter:hover{
background-color:#1F3D99;
}
#email {
float: right;
margin-right: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #ffffff;
}
#email:hover {
font-weight: bold;
}
Your font becomes greater . And padding calculates from greater font (bold), not the regular.
I can advise you this. When you hovering,text-shadow: 0px 0px 2px #000; appears instead of font-weight:bold;.
I think Animus's answer is better but if you want to use font-weight:bold then you have to absolute position it http://codepen.io/anon/pen/jqyzs
#email{
position:absolute;
right:0;
margin-right: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #ffffff;
}
I cannot put my menu in the center of the page, i've inserted all "margin: 0 auto;" i can and all "text-align: center", and the div is separated from everything, is not a child of something else..
here's the css code:
.more{
margin: 0 auto;
position:relative;
clear:both;
font-size: 13px;
padding: 20px 0px;
text-transform: uppercase;
width: 40%;
height: 20%;
}
.more ul{
display:block;
text-align:center;
}
.more ul li{
display: block;
padding: 10px 3px;
float:left;
}
.more ul li.selected a,
.more ul li.selected a:hover{
background:#0099c5;
color:#fff;
text-shadow:none;
font-weight:bold;
}
.more ul li a{
color:#555;
float:left;
background:#fff;
width: 100%;
padding: 8px 10px;
-moz-box-shadow:1px 1px 2px #aaa;
-webkit-box-shadow:1px 1px 2px #aaa;
box-shadow:1px 1px 2px #aaa;
}
.more ul li a:hover{
background:#000;
color:#fff;
}
And here's the HTML code:
<div class="more">
<ul>
<li class="selected">Homepage Blog</li>
<li>Cerca</li>
<li>Archivio</li>
<li>Tags</li>
</ul>
</div>
How-to make the div permanently in the center of my page? I've tried lot, lot, lot of possible moves.
Thank you.
p.s. I've also tried to put a <div align=center> ...my menu (class=more) list ...</div>
Remember that you can't use margin:0 auto on floatted element.
Keys for margin 0 auto are:
1) element must have display:block
2) no float, absolute or fixed position
.more{
float:left;
clear:both;
font-size: 13px;
padding: 20px 0px;
text-transform: uppercase;
width: 100%;
height: 20%;
}
.more ul{
display:block;
text-align:center;
margin:0 auto;
}
.more ul li{
display: inline-block;
padding: 10px 3px;
}
.more ul li.selected a,
.more ul li.selected a:hover{
background:#0099c5;
color:#fff;
text-shadow:none;
font-weight:bold;
}
.more ul li a{
color:#555;
background:#fff;
width: 100%;
padding: 8px 10px;
-moz-box-shadow:1px 1px 2px #aaa;
-webkit-box-shadow:1px 1px 2px #aaa;
box-shadow:1px 1px 2px #aaa;
}
.more ul li a:hover{
background:#000;
color:#fff;
}
Hi guys I'm very new to webdesign and the more I learn the more I realize that IE is a bit of a jerk when it comes to how it renders. In firefox and chrome everything works right but in IE my header is doubled in height. I'm not sure why. I've made everything divs and did all my positioning in css. here is my css.
website: http://www.discerningear.com
html { font-family:Arial, Helvetica, sans-serif; color:#333; }
body { background:#a99a6f; margin:0 auto; text-align:center;}
img { border-style: none; }
#slide{ max-width:100%; -moz-box-shadow: 0px 0px 12px #fff; -webkit-box-shadow: 0px 0px 12px #fff; box-shadow: 0px 0px 12px #fff; }
#container { -moz-box-shadow: 0px 0px 12px #000; -webkit-box-shadow: 0px 0px 12px #000; box-shadow: 0px 0px 12px #000; text-align: left; width:800px; height:1500px; margin:0 auto; background:#d4d4d4; background-image:url("/includes/images/container.jpg"); background-repeat:no-repeat;}
#header { width:100%; height:160px; padding:0 0 0 0; background-image:url('/includes/images/wave-header-background.jpg');}
#logo { float:left; height:80px; margin:5px; }
.logoImage{ content:url("/includes/images/DiscerningEar_Logo.png"); height:100%; }
#top_info { float:right; width:450px; height:40px; padding:0 0 0 0 ; margin:20px; }
#top_info ul { margin:0; padding:0; list-style-type:none;}
#top_info ul li { margin:0; padding:0px; float:left; }
#top_info ul li a { display: -moz-inline-stack; display: inline-block; width: 100px; height: 35px; background: url("http://dabuttonfactory.com/b.png?t=&f=Calibri-Bold&ts=18&tc=ffffff00&tshs=1&tshc=22222200&it=png&c=5&bgt=gradient&bgc=8c7f5e&ebgc=000000&bs=2&bc=a9996f&shs=2&shc=4d4d4d&sho=se&w=100&h=35") no-repeat; line-height: 35px; vertical-align: text-middle; text-align: center; color: #ffffff; font-family: Calibri; font-size: 14px; font-weight: bold; font-style: normal; text-shadow: #222222 1px 1px 0; }
#top_info ul li a > span { display: -moz-inline-block; }
#navbar {padding:20px 0 180px 0; height:60px; clear:both; }
#navbar ul { margin:0; padding:0; list-style-type:none;}
#navbar ul li { margin:0; padding:0px; float:left; }
#navbar ul li a { font-size:12px; float:left; padding:0 0 0 20px; display:block;}
#banner { background-image:url('/includes/images/banner-background.jpg'); margin-top:-12px; width:100%; height:180px; clear:both; padding:0 0 0 0; text-align:center;}
#left_col { float:left; width:30%; height:600px; border:1px solid #333; color:#fff; padding:20px; }
#right_col { float:right; width:58%; height:600px; border:1px solid #333; color:#fff; padding:20px; }
#footer { padding:20px; clear:both; }
I dont know what would cause this but any help would be awesome. I'm continuing to look around for solutions but as of right now i guess i just don't know the best way to fix this.
Most likely because of the IE double margin bug. It occurs in IE6 when a floated element has a margin applied as well (in your case, most likely the #logo).
The fix is to add:
display: inline; to that element's CSS.
I have some navigation links at the top of the page that I am having trouble placing in the centre of the screen. Can anybody suggest where I'm going wrong in the CSS?
Image:
http://i.imgur.com/SUTWr.png
Here's the CSS:
#nav {
list-style-type:none;
text-align:center
}
ul li {
display:inline-block;
border-radius:10px;
background:#EEE;
margin:5px;
}
li a {
float:left;
padding:30px;
text-decoration:none;
color:black;
text-shadow: 1px 1px #DDD;
border-radius:10px;
box-shadow:3px 3px black;
}
li a:hover {
background:#CCC;
color:#333;
}
li a:active {
background:#555;
color:white;
text-shadow: 1px 1px #000;
}
Thanks
Hi actually i have updated your css now i hope this work will for you :-
DEMO
CSS
#nav {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: none repeat scroll 0 0 #B8B8B8;
height: 400px;
list-style-type: none;
margin: auto;
padding: 40px 0;
width: 400px;
}
ul li {
display:inline;
}
li a {
text-decoration:none;
color:black;
text-shadow: 1px 1px #DDD;
border-radius:10px;
background:#EEE;
margin:5px;
padding:30px;
box-shadow:3px 3px black;
}
li a:hover {
background:#CCC;
color:#333;
}
li a:active {
background:#555;
color:white;
text-shadow: 1px 1px #000;
}
Here's a quick demo of how to center a UL: http://jsfiddle.net/73Mum/1/
<div class="wrap">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ul>
</div>
.wrap {
text-align:center;
background:#999;
padding:100px 0;
}
ul {
width:500px;
margin:0 auto;
}
ul li {
display:inline-block;
padding:10px;
background:#ccc;
}
Try wrapping these <ul>-tags with a <div style="margin-left: auto; margin-right: auto">.
This way you center all <ul>-tags at once.
If "1,2,3,4,5" in your picture are the ul-elements and #nav is the id of your surrounding div, you can just add margin-left: auto; margin-right: auto to #nav in your stylesheet.
I've got the following inside a div. I'd like to center the menu elements. Currently they appear like so...
| Home | Blog | About | Contact |
I'd like it to center so something like...
| Home | Blog | About | Contact |
Here's my CSS, what would I need to change?
ul#menu
{
margin:0;
padding:0;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
background:transparent url(images/nav_bg.png) repeat-x top left;
font-family:Arial, Helvetica, sans-serif;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}
ul#menu li
{
display:block;
float:left;
margin:0;
padding:0;
}
ul#menu li a
{
display:block;
float:left;
color:#999999;
text-decoration:none;
font-weight:bold;
padding:8px 20px 0 20px;
}
ul#menu li a:hover
{
color:#FFFFFF;
height:22px;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;
}
ul#menu li a.current
{
display:inline;
height:22px;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;
float:left;
margin:0;
}
To center your menu, give your menu a width and use:
maring:0 auto;
The final result is something like this:
<!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>
<title>Untitled Page</title>
<style>
.menu
{
width:270px;
margin:0 auto;
}
ul#menu
{
margin: 0;
padding: 0;
list-style-type: none;
width: auto;
position: relative;
display: block;
height: 30px;
font-size: 12px;
font-weight: bold;
background: transparent url(images/nav_bg.png) repeat-x top left;
font-family: Arial, Helvetica, sans-serif;
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
}
ul#menu li
{
display: block;
float: left;
margin: 0;
padding: 0;
width:60px;
text-align:center;
}
ul#menu li.divider
{
width:5px;
}
ul#menu li a
{
display: block;
float: left;
color: #999999;
text-decoration: none;
font-weight: bold;
padding: 8px 20px 0 20px;
}
ul#menu li a:hover
{
color: #FFFFFF;
height: 22px;
background: transparent url(images/nav_bg.png) 0px -30px no-repeat;
}
ul#menu li a.current
{
display: inline;
height: 22px;
background: transparent url(images/nav_bg.png) 0px -30px no-repeat;
float: left;
margin: 0;
}
</style>
</head>
<body>
<div class="menu">
<ul id="menu">
<li class="divider">|</li>
<li>Home</li>
<li class="divider">|</li>
<li>Blog </li>
<li class="divider">|</li>
<li>About </li>
<li class="divider">|</li>
<li>Contact</li>
<li class="divider">|</li>
</ul>
</div>
</body>
</html>
Update:
If you didn't want to use pipes in the divider, you could always use:
ul#menu li.divider
{
width:2px;
background-color:Black;
}
instead which will give a similar look and make screen readers not blow up at you.
I think you're looking for something like this: http://jsfiddle.net/sp45g/
div { // Container around the UL
text-align: center;
background-color: blue;
}
ul { // Inline block to shrink-wrap to contents
display: inline-block;
background-color: red;
}
li { // Inline to display in a row
display: inline;
}
I cleaned it up a little bit...
ul#menu{
margin:0;
padding:0;
list-style-type:none;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}
ul#menu li{
display:block;
float:left;
margin:0;
padding:0;
}
ul#menu li a{
color:#999999;
text-decoration:none;
padding:8px 20px 0 20px;
height:22px;
background:transparent url(images/nav_bg.png) repeat-x top left;
}
ul#menu li a:hover, ul#menu li a.current{
color:#FFFFFF;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;
}
add a wrapper around the ul:
<div id="wrapper">
<ul id="menu">
<li><a>link</a></li> |
<li><a>link</a></li> |
...
</ul>
</div>
and add folling:
#wrapper{
width:100%;
}
ul#menu{
margin:0 auto;
}
I didn't test it, so maybe u have to change some values...