I've searched the forum and tried a lot of the suggestions that were already made, but I can't seem to center my site navigation.
I'm using a website builder with access to the CSS, so my knowledge is somewhat limited. I would like to maintain the same width of the navigation across the page, but I would prefer for the actual navigation selections to be centered.
Does anyone have any suggestions (preferably simply suggestions since I don't really know what I'm doing). Here is my CSS:
.sf_navigation {
clear:both;
margin:0 auto;
width:auto;
min-height:38px;
height:auto!important;
height:38px;
font-family:Arial;
font-size:13px;
position:relative;
z-index:1000;
}
.sf_navigation ul {
margin:0;
padding:0;
list-style-type:none;
height:1%;
}
.sf_navigation ul li {
margin:0;
list-style-type:none;
display:inline;
float:left;
position:relative;
}
.sf_navigation ul li a {
display:block;
font-weight:700;
padding:12px 37px 0;
text-align:center;
text-decoration:none;
border-right:solid 0;
background-repeat:repeat-x;
height:25px;
width:auto!important;
white-space:nowrap;
width:1%;
}
.sf_navigation ul li a:hover {
text-decoration:underline;
background-repeat:repeat-x;
position:relative;
}
.sf_navigation:after,.sf_navigation ul:after {
content:".";
display:block;
visibility:hidden;
height:0;
clear:both;
}
.sf_navigation .widget_header {
display:none;
}
Add this to sf_navigation CSS
.sf_navigation {
display: table;
}
Related
I am unable to remove the underline in between the clickable buttons. It seems to continue as a block, but I can't remove display:block; as it makes only the text clickable.
#font-face {
font-family:"cfont";
src: url("font/Guerra_Santa.ttf");
}
body {
margin:0;
}
#menu {
background-color:black;
height:70px;
width:800px;
margin-right:auto;
margin-left:auto;
}
#menu ul {
list-style-type:none;
text-align:center;
}
#menu li {
font-family:cfont;
display:inline-block;
text-align:center;
line-height:70px;
height:70px;
width:200px;
background-color:#C28285;
}
#menu ul li a {
display:block;
text-decoration:none;
color:white;
}
Demo
Don't self close the anchor.
Change:
<li><a href="index.html"/>Home</li>
To:
<li>Home</li>
http://jsfiddle.net/wdwgmvtk/13/
I'm trying to center my sections within the 'content' div but can't seem to find a way to do so.
I also like to know why the 'content' div has no height even though there are elements within them.
Basically I want the three column section boxes to be in the center.
Any help will be much appreciated, thanks.
http://jsfiddle.net/VE72c/
body {
margin:0px;
padding:0px;
}
#container {
background-color:Silver;
width:1024px;
margin:auto;
padding-left:10px;
padding-right:10px;
padding-bottom:20px;
min-height:100%;
position:absolute;
left:0;
right:0;
}
#content {
font-family:Arial, Helvetica, sans-serif;
color:#664E44;
background-color:red;
}
section {
color:#24292E;
width:300px;
height:500px;
float:left;
margin-right:10px;
margin-bottom:10px;
background-color:#A8B1B1;
padding:4px;
}
You can use display:inline-block on the sections so that they expand the parents height (#content) an use text-align:center; to center them horizontaly.
See this
FIDDLE
CSS :
body {
margin:0px;
padding:0px;
}
#container {
background-color:Silver;
width:1024px;
margin:auto;
padding-left:10px;
padding-right:10px;
padding-bottom:20px;
min-height:100%;
position:absolute;
left:0;
right:0;
}
#content {
font-family:Arial, Helvetica, sans-serif;
color:#664E44;
background-color:red;
text-align:center;
}
section {
color:#24292E;
width:300px;
height:500px;
margin-bottom:10px;
margin-right:10px;
background-color:#A8B1B1;
padding:4px;
display:inline-block;
}
Add these, and remove float: left from your section CSS.
#content {
overflow: auto;
text-align: center;
margin: 0 auto;
}
section {
display: inline-block;
}
JSFIDDLE DEMO
I have tried to find an answer to my question, and while there are similar issues, nothing jumped out as me as a fix for my problem.
I am adding a Sub menu using CSS and for some reason the horizontal sub menu will only show up outside of the body. You can see an example of what happens here http://jsfiddle.net/sxP94/22/.
I need to get the sub menu to appear right under Portfolio on the menu. If anybody could help me figure out why this is happening, I would be ever so grateful.
Here is the code:
CSS
body {
margin:0;
padding:0;
width:100%;
color:#929292;
font:normal 12px/1.5em "Liberation sans", Arial, Helvetica, sans-serif;
}
html, .main {
padding:0;
margin:0;
}
.main {
background:#f8f8f8;
}
a {
color:#0087c7;
text-decoration:underline;
}
.header, .content, .menu_nav, .fbg, .footer, form, ol, ol li, ul, .content .mainbar, .content .sidebar {
margin:0;
padding:0;
}
.header {
}
.header_resize {
margin:0 auto;
padding:0;
width:960px;
}
h1 a, h1 a:hover {
color:#000;
text-decoration:none;
}
h1 span {
}
.menu_nav {
margin:0 auto;
padding:70px 0 0;
height:15px;
float:right;
}
.menu_nav ul {
list-style:none;
padding:0 0 0 1px;
height:15px;
float:left;
background:url(../images/menu_split.gif) no-repeat left center;
}
.menu_nav ul li:first-child {
margin:0;
}
.menu_nav ul li {
margin:0;
padding:0 20px;
float:left;
background:url(../images/menu_split.gif) no-repeat right center;
}
.menu_nav ul li a {
display:block;
margin:0;
padding:0;
font-size:15px;
line-height:18px;
font-weight:bold;
color:#c4c4c4;
text-decoration:none;
text-transform:uppercase;
}
.menu_nav ul li.active a, .menu_nav ul li a:hover {
text-decoration:none;
color:#000;
}
.menu_nav > ul > li > ul {
height:1000px;
left:-99999px;
overflow:visible;
position:absolute;
top:37px;
width:115px;
float: left;
}
.menu_nav > ul > li:hover ul {
left:0;
top:37px;
}
.menu_nav > ul > li > ul > li {
background:none #343434;
border:1px solid #4f4f4f;
float:none;
height:29px;
margin:-1px 0 0;
padding:0 12px;
position:relative;
width:auto;
z-index:1000;
}
.menu_nav ul li ul li a {
color:#ffffff!important;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
line-height:28px;
text-transform:none;
}
.menu_nav ul li ul li.active a, .menu_nav ul li ul li a:hover {
color:#fff!important;
}
HTML
<body>
<div class="main">
<div class="header">
<div class="header_resize">
<div class="menu_nav">
<ul>
<li class="active"><span>Home</span></li>
<li><span>About</span></li>
<li><span>Services</span></li>
<li><span>Portfolio</span>
<ul>
<li>Boudoir</li>
<li>Babies</li>
<li>Engagement</li>
<li>Wedding</li>
<li>Lifestyle</li>
<li>Family</li>
<li>Grads</li>
</ul>
</li>
<li><span>Blog</span></li>
<li><span>Contact</span></li>
</ul>
</div>
</div>
</div>
</div>
Anytime I change any of the left numbers, the sub menu stops showing up completely. Doesn't even show up on the outside of the body when I hover over the menu. So I can't figure out how to move it around because anything I try makes it disappear completely. Thank you for taking the time to read this and thank you in advance for any help you are able to offer.
Give position: relative to parent of the sub menu. The sub menu is given position:absolute and hence shows up outside.
.menu_nav ul li {
position: relative;
}
I have a wrapper that contains an unordered list of banner images, these are going to be a jQuery slider. However, instead of hiding the inactive images using overflow:hidden I want to have the images display inline and overflow the containing <div>, how do I go about doing this?
#slide-wrapper{
width:760px;
float:left;
position:relative;
ul{
margin:0;
padding:0;
position:absolute;
li{
list-style-type:none;
margin:0;
padding:0;
width:760px;
height:340px;
display:inline;
}
Hey now change your code according to this:
#slide-wrapper {
width:760px;
float:left;
position:relative;
}
ul {
margin:0;
left:0;
top:0;
overflow:hidden;
padding:0;
position:absolute;
}
li {
list-style-type:none;
margin:0;
padding:0;
width:760px;
height:340px;
float:left;
}
Edit: Didn't see your message about using LESS CSS, amended.
#slide-wrapper {
width:760px;
float:left;
position:relative;
overflow:hidden;
ul {
margin:0;
padding:0;
position:absolute;
top: 0;
left: 0;
li{
list-style-type:none;
margin:0;
padding:0;
width:760px;
height:340px;
float:left;
}
How can I force all items in a horizontal list (menu) to be the same width?
This is my CSS code so far:
a { text-decoration:none; }
#navlist ul { margin:0; padding:0; list-style-type:none; }
#navlist ul li { display:inline; }
#navlist li a {
padding:10px;
margin:2px;
background:grey;
color:white;
}
#navlist li a:hover {
color:white;
background:black;
}
EDIT:
It now works (thanks to #Gaby) by changing the first 3 lines into:
#navlist ul { margin:0; padding:0; list-style-type:none; }
#navlist ul li { float:left; text-align:center; }
#navlist ul li a { text-decoration:none; display:block; width:120px; }
float the elements and make them block instead of inline
#navlist ul { margin:0; padding:0; list-style-type:none; overflow:auto; }
#navlist ul li { display:block;width:100px;float:left; }
You might want to make the a to be block as well, to fill the li and make it all clickable..