I'm usually pretty good at solving this, but my usual methods aren't working here. Friend of mine asked me to try to fix the CSS here (http://www.latheaterfestival.com/) and the menu ul just isn't centering. Tried 100% width, margin: 0 auto; text-align: center....nothing will budge. Here's the menu HTML (condensed a bit):
<div class="nav-container"><ul class='wsite-menu-default'><li id='active'><a href='/index.html'>Home</a></li><li id='pg440106722136607103'><a href='/about.html'>About</a></li></ul></div>
and here's the CSS Weebly spews out:
#nav-wrap .nav-container { float:center; position:relative; left:-50%; text-align:left; margin-top:10px; z-index:2; }
#nav-wrap .nav-container ul{ list-style:none; position:relative; left:50%; z-index:2; }
#nav-wrap .nav-container li{float:center;position:relative;}
#nav-wrap .nav-container a{ text-decoration:none; font:600 12px 'Josefin Sans', sans-serif; text-transform:uppercase; margin:10px 15px; float:left; color:#666; letter-spacing:2px; padding:1px 2px; text-align:center; white-space:nowrap; }
#nav-wrap .nav-container a:hover{border-bottom:1px dashed #666;}
#nav-wrap .nav-container li#active a {border-bottom:1px solid #888;}
#nav-wrap .nav-container a:active{padding:2px 2px 0px;}
#nav-wrap {overflow:hidden}
Any ideas?
Do not use float and position relative, use display: inline-block. Here's the jsfiddle
#nav-wrap .nav-container
{
margin-top: 10px;
text-align: center;
z-index: 2;
}
#nav-wrap .nav-container ul
{
display: inline-block;
list-style: none;
padding: 0;
z-index: 2;
}
#nav-wrap .nav-container li
{
display: inline-block;
}
#nav-wrap .nav-container a
{
color: #666;
float: left;
font: 600 12px 'Josefin Sans', sans-serif;
letter-spacing: 2px;
margin: 10px 15px;
padding: 1px 2px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
}
#nav-wrap .nav-container a:hover
{
border-bottom: 1px dashed #666;
}
#nav-wrap .nav-container li#active a
{
border-bottom: 1px solid #888;
}
#nav-wrap .nav-container a:active
{
padding: 2px 2px 0px;
}
#nav-wrap
{
overflow: hidden;
}
Related
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;}
Here is the link: http://jessiskiptoncampbell.com/jessi-wp/
At the moment its aligned right, but i want it to be aligned in the center.
#header {
padding: 15px 0 45px 0;
margin-left: auto;
margin-right: auto;
}
{
margin-left: auto;
margin-right: auto;
}
#logobar1, #logobar2 {
display:block;
width:100%;
position:absolute;
center:0px;
z-index:1;
}
#logobar1 {
border-top:2px solid #231f20;
border-bottom:2px solid #231f20;
background-color:#f49cb1;
height:102px;
margin-top:197px;
}
#logobar2 {
background-color:rgba(255, 255, 255, 0.7);
height:80px;
margin-top:208px;
}
#logodiv, #logodiv a, #logo {
display:block;
margin:0 auto;
position:relative;
z-index:2;
}
.nav {
text-align: center;
width: auto;
margin: -45px auto 15px auto;
z-index:3;
position:relative;
font-family:'Montserrat Alternates', sans-serif;
}
.nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline-block;
list-style:none;
}
.nav ul li {
float: left;
margin-left: 8px;
font-size: 14px;
position: relative;
}
.nav ul li a {
display: block;
padding: 2px 20px;
color: #000;
text-decoration: none;
}
.nav ul li a:hover, .nav li.current_page_item a, .nav ul li.current-menu-item a {
color: #931b20;
}
just Give width:100%; for the .jr_logo class
Set up your header image width to this width: 1240px; and it should be centered
your maincontainer has a margin and its is setting everything off...
take your header out of your maincontainer...
its simple.just give your image an id or class..likeke
#myimg
{
float:left;
margin-left:-116px;
}
now it will perfectly become in center.
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;
}
this is what I have
http://jsfiddle.net/ftKw5/
/* CSS element classes */
#font-face {
font-family:'myriad-webfont';
src: url('webfont/myriad-webfont.ttf') format('truetype'), url('webfont/myriad-webfont.svg#myriad_webfont') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-family: myriad-webfont;
color: #000000;
background: url('img/silk_pat#2x.png');
letter-spacing: 2px;
}
h2 {
;
font-size: 3;
}
::-webkit-input-placeholder {
color:#222222;
opacity:0.1;
}
/* CSS element IDs */
#outer-wrapper {
width: 50em;
margin: 1em auto;
background-position:inherit;
border: 2px solid #dcdcdc;
border-radius: 1.5em;
position:relative;
background-color: #ffffff;
}
#surtitle {
border-bottom: 1px solid #dcdcdc;
text-align: center;
opacity: 0.3;
font-size:15px;
letter-spacing: 7px;
}
#topnavbar {
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
opacity: 0.5
}
/* Dropdown */
.nav {
padding-top:-10;
height:36px;
background:#aaa;
color:#fff;
text-shadow:1px 1px #888;
z-index:400
}
.menu a {
float:right;
color:#eee;
text-decoration:none;
width:120px;
height:28px;
padding-top:8px
}
.menu span {
float:right;
color:#eee;
text-decoration:none;
width:120px;
height:28px;
padding-top:8px
}
.menu a:hover {
color:#fff
}
.menu {
list-style:none;
font:10px;
text-align:center;
width:600px;
margin:0;
}
.menu li {
position:relative;
float: right;
width:120px;
z-index:400
}
.menu ul {
margin:0;
padding:0;
outline:0;
display:none;
position:absolute;
font:10px;
top:36px;
left:0;
background:#aaa;
display:none;
list-style:none
}
.menu ul li {
float:none;
border-top:1px solid #ccc;
width:120px
}
.menu ul li a, li.menuhover li a, li.menuhover li.menuhover li a {
float:none;
display:block;
background:none;
height:22px;
padding-top:5px
}
.menu ul li a:hover, li.menuhover li a:hover, li.menuhover li.menuhover li a:hover {
background:#999;
color:#fff
}
.menu ul li span, li.menuhover li span, li.menuhover li.menuhover li span {
float:none;
display:block;
background:none;
height:22px;
padding-top:5px
}
.menu ul ul {
left:120px;
top:0
}
.menu li.submenu {
}
.menu li.noborder {
border-top:none
}
li.menuhover a, li.menuhover li.menuhover a {
color:#fff;
background:#999
}
li.menuhover span, li.menuhover li.menuhover span {
color:#fff;
background:#999
}
For some reason, when I run it, it won't hug the top etc. I added the jsfiddle so that it's a little better to read and you can see the html to go with it.
If i am understanding your questio0n correct the below css will help you.
CSS:
body {
font-family: myriad-webfont;
color: #000000;
background: url('img/silk_pat#2x.png');
letter-spacing: 2px;
padding:0; // it will remove padding from body tag
margin:0; // it will remove margin from body tag
}
Answer of new requirement in comments (Menu shoul be center of top bar ):
.menu {
list-style: none outside none;
margin: 0 auto;
overflow: hidden;
padding: 0;
text-align: center;
width: 368px;
}
.menu li {
float: left;
width: 120px;
z-index: 400;
}
How do I center my navigation bar links using CSS while keeping the sides grey?
Blogs and History have a drop a down menu. Here is a screenshot:
(source: gyazo.com)
CSS:
.navbar ul {
list-style: none;
margin: 0;
padding: 0;
}
.navbar li {
float: left;
width: 100px;
background-color: #444444;
text-align: center;
border-right: 1px solid white;
position: relative;
height: 30px;
line-height: 30px;
}
.navbar li ul li {
float: none;
width: 150px;
text-align: left;
padding-left: 5px;
border-top: 1px solid white;
}
.navbar a {
text-decoration: none;
color: white;
}
.navbar li ul {
position: absolute;
top: 30px;
left: 0;
visibility: hidden;
}
.navbar li:hover ul {
visibility: visible;
}
.navbar li:hover {
background-color: maroon;
}
Edited my answer.. I've made your Container div clear the float, and set a defined width to navbar.
http://jsfiddle.net/jFdhM/
#container {
border-radius: 10px;
box-shadow: 3px 3px 4px;
padding: 8px;
background-color: #FFFFFF;
width: 748px;
margin: 0 auto;
}
#top {
width: 748px;
}
.navbar {
width: 505px;
margin:0 auto;
}
.navbar ul {list-style:none; padding:0; margin: 0 auto;text-align: center;}
.navbar li {float:left; width:100px; background-color:#444444; text-align:center;
border-right:1px solid white; position:relative;
height:30px; line-height:30px;}
.navbar li ul li {float:none; width:150px; text-align:left; padding-left:5px;
border-top:1px solid white;}
.navbar a {text-decoration:none; color:white;}
.navbar li ul {position:absolute; top:30px; left:0; visibility:hidden;}
.navbar li:hover ul {visibility:visible;}
.navbar li:hover {background-color:maroon;}
#maincontent {
clear: both;
padding: 10px;
font-family: "Microsoft Sans Serif";
font-size: medium;
}