#nav
{
border-style:solid;
width:500px;
height:20px;
margin-top:200px;
margin-left:auto;
margin-right:auto;
}
#nav ul
{
list-style-type:none;
width:100%;
display:block;
margin-left:auto;
margin-right:auto;
}
#nav li
{
display:inline;
}
#nav a
{
float:left;
display:block;
border-style:solid;
padding-left:5px;
padding-right:5px;
margin-top:-19px;
}
I just can't get it to center inside the div with the id "nav". Any help on what I am doing wrong? I am sort of new in this field, so any advice on how to make good css layouts would be appreciated!
I think this should do the trick:
#nav {
text-align: center;
}
#nav ul {
margin: 0 auto;
text-align: left;
}
Related
I want to put the logo in-between the navigation menus but I can't figure out how to do it in the theme that I have because I'm having trouble finding it in the backend. I'm sure it's just a matter of reordering something or adding a margin and a space for the photo... Under the header section of the CSS this is the code:
#header { padding:0 20px;margin-bottom:8px;}
#logo { float:left; }
#logo { text-transform:capitalize; padding:35px 0; }
#logo img { max-width:100%; }
#navigation { float:right; margin-right:20px; }
#navigation ul { list-style:none; position:relative; }
#navigation ul li { float:left; padding-left:30px; font-size:12px; display:block; position:relative; font-weight:bold; }
#navigation ul li a { color:#888; padding-bottom:10px; padding-top:35px; display:block; }
#navigation ul li ul { position:absolute; border:1px solid #e9e9e9; display:none; left:15px; padding-bottom:15px; z-index:9999; }
#navigation ul li ul li { min-width:150px; margin-left:15px; margin-right:15px; padding:15px 0 10px 0; border-bottom:1px solid #f6f6f6; font-weight:normal; font-size:10px; }
#navigation ul li ul li:last-child { border:0; padding-bottom:0; }
#navigation ul li ul li a { border:0; display:block; padding:0; }
#navigation li:hover ul { display:block; }
#navigation select { display:none; -webkit-appearance: none; border-radius: 0; }
#navigation ul li#magic-line { position: absolute; left: 0; width: 100px; height: 4px; padding-left:0; display:none; }
I suppose u are using wordpress theme ? If so, each li has its own classes. So you should create one "empty" menu, and add it as background of that link, you can make link to be home page. Text you can hide with text-indent:-9999px;
If u have exact link, i can be more helpful, check how i pulled it out here: http://itsgoran.com/cider
Update:
code should be like this:
li#menu-item-15 {
background-image: url(http://www.new.sheisbiddy.com/wp-content/uploads/2015/11/SHEISBIDDYmainlogoandslogan1.png);
width: 470px;
height: 130px;
background-repeat: no-repeat;
text-indent: -9999px;
}
but i suggest firstly to create smaller logo image, then use that image for this, and ofcourse add smaller width and height which would be width/height of that smaller image.
Just trying to figure out why this div won't center. If I can get this working, I'll be set.
JSFiddle
body{
margin:0;
overflow: hidden;
}
ul{
list-style-type:none;
overflow:hidden;
padding:0px;
margin: 0 auto;
width:60%;
text-align:center;
}
ul li{
text-transform:uppercase;
float:left;
}
ul li a{
display: block;
width: 120px;
text-decoration:none;
background-color:#98bf21;
text-align:center;
margin:0px;
padding:10px;
font-weight:Bold;
color:#fff;
font-family:Arial;
letter-spacing: 1px;
}
ul li a:hover{
background-color:#7A991A;
}
#container{
width:100%;
}
<div id = "container">
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
Every time I try to display it in the browser, it looks like this:
Also how do I stretch the navigation bar to 100%? Like from the very left of the page to the right?
You want to center a div without specified width. For that, first remove ul{width:60%;}, then add text-align:center to the Parent and display:inline-block to the Child :
#container{
text-align:center;
}
ul{
display:inline-block;
}
body{
margin:0;
overflow: hidden;
}
ul{
list-style-type:none;
overflow:hidden;
padding:0px;
margin: 0 auto;
text-align:center;
display:inline-block;
}
ul li{
text-transform:uppercase;
float:left;
}
ul li a{
display: block;
width: 120px;
text-decoration:none;
background-color:#98bf21;
text-align:center;
margin:0px;
padding:10px;
font-weight:Bold;
color:#fff;
font-family:Arial;
letter-spacing: 1px;
}
ul li a:hover{
background-color:#7A991A;
}
#container{
width:100%;
text-align:center;
}
<body>
<div id = "container">
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</body>
1、delete margin: 0 auto;width:60%;from ul and add display: table;margin: 0 auto;like this：
ul{
display:inline-block;
list-style-type:none;
overflow:hidden;
padding:0px;
/* margin: 0 auto;
width:60%; */
display: table;
margin: 0 auto;
}
2、delete margin: 0 auto;width:60%;from ul and add ‘text-align: center’ in #container，‘display: inline-block’ in ul like this:
#container{
width:100%;
text-align: center;
}
ul{
display:inline-block;
list-style-type:none;
overflow:hidden;
padding:0px;
display: inline-block;
}
3、
#container{
width:100%;
position: relative;
}
ul{
display:inline-block;
list-style-type:none;
overflow:hidden;
padding:0px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
4、
#container{
width:100%;
display: flex;
justify-content: center;
}
ul{
display:inline-block;
list-style-type:none;
overflow:hidden;
padding:0px;
}
5、
#container{
width:100%;
display: flex;
}
ul{
display:inline-block;
list-style-type:none;
overflow:hidden;
padding:0px;
margin: 0 auto;
}
may help you。
choose the best one for you project。
Is this what you are looking for?
All I did was moving the background color to the #container, removed the 60% width, and make the LI elements display: inline-block
ul li{
text-transform:uppercase;
display: inline-block;
}
https://jsfiddle.net/391sz22s/1/
Here is one way of doing it.
Set display: table to the ul element, which will give you a shrink-to-fit block level element that will then center using margin: 0 auto.
Set display: table-cell on the li elements.
The advantage of this approach is that the links will remain on a single line no matter how small you make the page width, which may be the desired effect for some designs.
You could set the with of the ul to 100%, but then your link elements would increase in width, which may not be what you want.
ul {
list-style-type:none;
overflow:hidden;
padding:0px;
margin: 0 auto;
width: auto;
display: table;
}
ul li {
text-transform:uppercase;
display: table-cell;
}
ul li a {
display: block;
width: 120px;
text-decoration:none;
background-color:#98bf21;
text-align:center;
margin:0px;
padding:10px;
font-weight:Bold;
color:#fff;
font-family:Arial;
letter-spacing: 1px;
}
ul li a:hover {
background-color:#7A991A;
}
#container {
width:100%;
}
<div id="container">
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
I have a drop down menu bar. But it is always behind my content no matter how high I set the z-index of the bar or if I set the z-index of my content to -1. Can anybody help?
I did set the z-index to 500 where I do the hover of my navigation top menu but no change. Could it be because of the reset code I use in the beginning of my CSS code?
Here is my CSS Code:
/*navigation.xhtml; author: Mica */
#navigation {
float:left;
width:100%;
height:18px;
margin:15px 0 25px;
}
#navigation ul {
list-style-type:none;
list-style-image:none;
padding:0px;
float:left;
width: 100%;
}
#navigation li.topmenu {
float:left;
width:170px;
}
.topmenu a {
float:left;
width:100%;
text-align:center;
}
.topmenu ul {
float:left;
display:none;
width:100%;
}
.topmenu a, .submenu a, .topmenu:hover .submenu a {
padding:3px 0;
border:1px solid #C27000;
color:#FFFFFF;
font-weight:bold;
text-decoration:none;
background-color:#FF8C00;
margin:0;
font-weight:bold;
}
.submenu a{
width:100%;
clear:both;
postition:absolute;
}
#navigation a:hover, .topmenu.on a, .topmenu:hover a {
background-color:#FFA500;
}
.topmenu:hover ul {
display:block;
z-index:500;
}
#logo a:hover {
opacity:0.8;
}
/*content in basicTemplate.xhtml; author: Mica */
#content {
float:left;
min-height:200px;
margin:0 7px;
}
HAHAAA found it!
z-index only works when a position is declared first: so I need to set in this block a position:
.topmenu:hover ul {
display:block;
z-index:500;
}
Like here:
.topmenu:hover ul {
display:block;
position:relative;
z-index:500;
}
how do i make the center like the links are all off to the left i want them to be center top of the web page... any help?? i have done this before but i dont rember how
CSS:
body {
background: #B0FFF5
}
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left; /*supposed to be there */
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#ffffff;
background-color:#3B5998;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#ffffff;
color:#3B5998;
}
HTML:
<body>
<ul>
<li>Home</li>
<li>Fb Fame</li>
<li>Donate</li>
<li>Facebook</li>
</ul>
</body>
If you want the buttons to line up, no matter what the window size is, set a fixed width and margin: 0 auto:
ul
{
width: 512px;
margin:0 auto;
}
Here is a demo.
Alternatively remove the whitespace between the list items (or use another technique), set their display to inline-block and give the container a text-align: center:
ul
{
margin:0;
text-align: center;
}
li
{
display: inline-block;
}
Here is a demo.
ul
{
list-style-type:none;
margin:0;
padding:0;
width: 400px;
margin: 0 auto;
}
Hope this helps.
ul
{
width:600px;
list-style-type: none;
margin-left:auto;
margin-right:auto;
padding:0;
}
i remberd how to do it sorry folks
hey guys i'm trying to create a navigation system similar to the one you can find on starbucks.com. Here is the link to my sample: http://dl.dropbox.com/u/73992/js_tests/test.htm I am accomplishing the effect with navigation sample on the bottom but as you can see there are positioning problems. You can find the CSS in the source code. I figured this is the best way to test it. Thank you in advance for any help I can get it.
as per the suggestion here's the css
*
{
margin:0;
padding:0;
}
#nav
{
position:relative;
margin-top:3em;
margin-left:3em;
}
#nav ul
{
list-style-type:none;
}
#nav ul li
{
position:relative;
margin-top:10px;
}
#nav ul li ul li
{
margin-top:0px;
}
#nav ul li h1
{
font-size:15px;
font-weight:bold;
text-align:center;
color:#000000;
background-color:#F7FF88;
border:solid 5px black;
width:100px;
height:30px;
border-bottom:none;
z-index:20;
}
.content
{
position:relative;
width:300px;
background-color:#F7FF88;
border:solid 5px black;
}
.content form
{
display:block;
margin:10px 10px 10px 10px;
}
.content p
{
text-align:left;
display:block;
margin:10px 10px 10px 10px;
}
.gallery
{
margin:10px 10px 10px 10px;
background-color:#ffffff;
border:solid 1px black;
}
.gallery img
{
display:inline-block;
margin:10px 5px 10px 0px;
float:left;
}
/*
This next section is identical but represents what happens w/ the absolute positioning.
*/
.content2
{
position:absolute;
width:300px;
background-color:#F7FF88;
border:solid 5px black;
top:30px;
z-index:-5;
}
.content2 form
{
display:block;
margin:10px 10px 10px 10px;
}
.content2 p
{
text-align:left;
display:block;
margin:10px 10px 10px 10px;
}
.clear
{
clear:both;
}
if this helps this is what I am trying to accomplish
Give this a try. Change the position from absolute to relative, and remove the 30px top margin. You should be able to get the same effect as the 3 examples above yours.
.content2
{
position: relative;
width:300px;
background-color:#F7FF88;
border:solid 5px black;
z-index:-5;
}
[EDIT]
First off, remove the "border-bottom:none;" so your h1 will still have bottom borders for that tabbed effect.
#nav ul li h1
{
font-size:15px;
font-weight:bold;
text-align:center;
color:#000000;
background-color:#F7FF88;
border:solid 5px black;
width:100px;
height:30px;
z-index:20;
}
Give your h1 a class, let's say "tabbed"
<li><h1 class="tabbed">Ex. 1</h1>
And probably use some negatives for your CSS.
h1.tabbed {
position:absolute;
top:-28px;
}
Give this one a try.
Put display:inline; on li
And float:left; on ul
I think it's your big problem, if I had understand well your problem.
float : left can solve your positioning problem. You have to add just two lines in your css
#nav ul li {
float: left;
margin: 0 15px;
position: relative;
}