One of my UL is not displaying correctly. It is both displaying things inline and also the bullets do not show.
I know that this issue is isolated strictly to my divs that are used with my tabbed interface. I'm also assuming this is due to the hierarchy above. (The .tabs li says to display things 'inline'.) If I delete that, obviously the tab interface is screwed. How can I keep my divs displaying horizontally, and have the lists inside of the div box display in a block?
Thanks!
CSS
.basics ul {font-family:terminal;
font-size:9px;
text-transform:uppercase;
color:gray;
padding:0px;
display:block;
}
li.basics { list-style-image: url('/bullet.png');
}
ul b {font-family: terminal;
font-size: 8px;
text-transform:uppercase;
color:#fff3a2;
font-weight:lighter;
}
div.tabs {
padding:15px;
width:760px;
background:#000;
color:#fff;
border-radius: 0em 4em 1em;
-moz-border-radius: 10px;
margin-left:3px;
height:200px;
overflow: auto;
}
ul.tabs {
padding:0;
margin:0;
margin-top:10px;
margin-left:3px;
}
.tabs li {
list-style:none;
display:inline;
}
and the html code:
<ul class='tabs'>
<li><a href='#tab1'>BASICS</a></li>
<li><a href='#tab2'>BIOGRAPHY</a></li>
<li><a href='#tab3'>RANDOM</a></li>
<li><a href='#tab4'>NPCs</a></li>
</ul>
<div id="tab1" class="tabs">
<ul class="basics">
<li><b>Full Name:</b>
<li><b>DOB:</b> 27 May 1985; 28 YRS </li>
<li><b>Birthplace:</b>Olinda, Brasil</li>
<li><b>Nationality:</b>Brazilian, French, & American</li>
</ul>
If I'm understanding your question correctly, you want the top to be horizontal, and the lower one to be vertical. I just changed your rule from .tabs li to ul.tabs li
http://jsfiddle.net/itsmikem/3RwMn/
Let me know if that's your issue.
Related
I would like to change my current menu to allow for one dropdown: Products. My test page can be found here This is my HTML:
<nav>
<ul class="menu">
<li class="current">Home</li>
<li>About Us</li>
<li class="subNav"><a class="selected">Products</a>
<ul>
<li>Designer Bags
</li>
<li>Cowhides
</li>
<li>Hand-carved Geese
</li>
<li>Antler Chandeliers
</li>
</ul>
<li>Gallery</li>
<li>Shows</li>
<li>Contact</li>
<li>Shop</li>
</ul>
</nav>
My original CSS:
.nav-buttons{text-align:center;padding-bottom:17px;}
#nav{overflow:hidden;display:inline-block}
#nav li{float:left;overflow:hidden;margin:0 10px}
#nav li a{display:block;background:url(../images/pags.png) no-repeat 0 0;
width:19px;height:19px;
line-height:0;font-size:0;
}
#nav li a:hover,#nav li.showPage a{background-position: 0 bottom}
nav{float:right;padding:12px 0 0 0}
.menu {
font-size:0;
line-height:0;
padding:0;
z-index:99;
position:relative;
margin-right:21px;
}
.menu > li {
position:relative;
float:left;
margin-left:11px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background:url(../images/point.png)
}
.menu li a{
color:#b3adad;
font-size:18px;
line-height:20px;
display:block;
position:relative;
text-decoration:none !important;
padding:7px 12px 9px;
font-family: 'Noto Sans', sans-serif;
}
.menu li.current,
.menu li:hover {
background:#9c6f51;
}
.menu li.current a,
.menu li:hover a{
color:#fff
}
And this bit of CSS I just added today:
nav a {
font-weight: 800;
padding: 5px 10px;
display: block;
}
nav > ul > li.subNav ul {
display: none;
position: absolute;
top: 100%;
left: 0;
white-space: nowrap;
background: #fff;
}
nav ul li.subNav:hover ul {
display: block;
}
It seems to want to work with the exception that I see no sub-menu unless I hover over it. I've come here for help because I'm afraid to mess with the original CSS and thus ruin my navigation throughout the rest of the site. Is there something I can add that will cause the menu to appear within just the "subNav" class, without affecting the rest of the menu or site navigation? (The original CSS came with this template and I do note that font-size:0 is used a few times. Since the menu worked well before I felt I needed to add a dropdown, I have been reluctant to change that, since I would only be experimenting without understanding.)
I've sorted it. I had to change the background color in the "subNav" class, in order for the site menu's overall font color to show up. It's there; I just couldn't see it.
I struggle with unordered list. Is there a way to make them horizontal? Please see the jsFiddle. The red boxes are suppose to be in front of each text and spaced accordingly. What am I missing, which I am sure a lot.
http://jsfiddle.net/5Lmymdwh/
#alertLegend li {
display: inline;
font-size:10px;
height:15px;
left:10px;
list-style-type:none;
margin:.5em .5em 0em -3.4em;
position:relative;
text-align:left;
}
.legendDiv {
background-color:#8B0000;
border:solid 1px #333;
float:left;
margin-right:2px;
width:15px;
}
.legendTxt {
font-size:12px;
color:#555;
padding-left:25px;
}
<ul id='alertLegend'>
<li><div class='legendDiv'> </div><span class='legendTxt'> Demo 1</span></li>
<li><div class='legendDiv'> </div><span class='legendTxt'> Demo 2</span></li>
<li><div class='legendDiv'> </div><span class='legendTxt'> Demo 3</span></li>
</ul>
-Thanks
I updated your JSFiddler HERE
You basically had a combination of mistakes. The code is simpler that you started with. The biggest problem you had was to give your red box a float:left This automaticaly pushes the element to the absolute left. The other problem you had was to create the divs inside. Your list item doesn't need a span tag. It is already wrapped by the <li> tags. The square however does need span tags to align it vertically and style it differently without affecting the rest of the <li> content.
Instead of using extra div for that custom bullet you could use :before : pseudo-element.
#alertLegend li {
display: inline-block;
font-size: 10px;
height: 15px;
font-size: 12px;
color: #555;
list-style-type: none;
}
#alertLegend li:not(:last-child) {
margin-right: 10px;
}
#alertLegend li:before {
content: '';
border: solid 1px #333;
background-color: #8B0000;
float: left;
height: 12px;
width: 15px;
}
<ul id='alertLegend'>
<li>Demo 1</li>
<li>Demo 2</li>
<li>Demo 3</li>
</ul>
Here is working css:
#alertLegend li {
display: inline-block;
list-style-type:none;
height:15px;
}
.legendDiv {
background-color:#8B0000;
border:solid 1px #333;
float:left;
margin-right:2px;
width:15px;
height: 15px;
}
.legendTxt {
font-size:12px;
color:#555;
}
Not too sure what you're exactly trying to achieve but you can simplify your HTML/CSS a lot further by using border-left or background.
See here: http://jsfiddle.net/pavkr/yrxbLvkf/2/
When I looked at the JS fiddle, I noticed that the text wasn't in the div's at all. I have since moved them, and altered the text color to be more legible inside the div's. Also if you want to format the text inside a div, you can make the edits there instead of a span class like you had (has been removed, albeit altered but to show simplicity).
#alertLegend li {
display: inline;
font-size:10px;
height:15px;
left:10px;
list-style-type:none;
margin:.5em .5em 0em -3.4em;
position:relative;
text-align:left;
}
.legendDiv {
background-color:#8B0000;
border:solid 1px #333;
float:left;
margin-right:2px;
width:30px;
color: white;
}
<ul id='alertLegend'>
<li>
<div class='legendDiv'>Demo1</div>
</li>
<li>
<div class='legendDiv'>Demo2</div>
</li>
<li>
<div class='legendDiv'>Demo3</div>
</li>
</ul>
I have had trouble centering the unordered list I am using for my navigation. I have looked at other advice and tried to fix it so now my code is a hot mess. I cannot figure out for the life of me what is going wrong. All the solutions I have tried still do not center the list in the window. adding the overflow:visable stretch it out but not 100% and it does not expand when the window grows.
#navbar {
position: fixed;
top:-17px;
margin-bottom: 10px;
font-family:Verdana, Geneva, sans-serif;
margin: 0;
padding: 0;
}
#navbar ul > li {
display: inline-block;
float: none;
color:white;
font-size: 14px;
margin-right: 35px;
margin-left: 35px;
padding: .2em 1em;
overflow:visible;
}
Is this what you are looking for?
http://jsfiddle.net/talymo/6FGbw/
#navbar {
position:fixed;
list-style:none;
margin:0;
padding:0;
width:100%;
text-align:center;
}
#navbar li{
padding:10px;
display:inline-block;
}
<ul id="navbar">
<li>Thing 1</li>
<li>Thing 2</li>
<li>Thing 3</li>
</ul>
what if you add this to your code:
text-align: center
One thing you can try is to put the list inside a div and add the style text-align:center; to the div.
Afterwards just remove the position:fixed; style from #navbar.
or you could wrap the list in <center> </center> tags.
Hope this helps :)
Try:
#navbar ul {
text-align: center;
}
JSFiddle: http://jsfiddle.net/zgwxP/
Assuming your navbar has some set width you can use text-align:center on your ul
jsFiddle
/* Give the navbar a width */
#navbar {
left:0;
right:0;
}
#navbar ul {
padding:0;
text-align:center;
}
I'm trying to center a ul within a div menu. I've looked at other menu's and tried every combination I can think of, yet I still can't get it.
Here's the code:
#cssmenu ul{
margin:0 auto;
padding:0;
list-style-type:none;
width:100%;
position:relative;
display:block;
height:38px;
font-size:14px;
background:#f9f8f8;
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
font-family:Arial,Helvetica,sans-serif;
}
#cssmenu li{
display:block;
float:left;
margin:0;
pading:0;
}
#cssmenu li a{
display:block;
float:left;
color:#333333;
text-decoration:none;
padding:12px 20px 0 20px;
height:24px;
height:38px;
}
#cssmenu li a:hover{
text-decoration:underline;
}
<div id="cssmenu">
<ul>
<li>Home</li>
<li>About</li>
<li>The Program</li>
<li>Blog</li>
<li>Support</li>
<li>Members Login</li>
</ul>
</div>
Any help would be greatly appreciated.
Thanks!
Mike
You have to remove the width: 100% from the ul first. You can't really center something that is the same size as the container :). After removing that, you could make the list inline-block, so it takes up the width of its children, and then using a simple text-align on the div.
#cssmenu {
text-align: center;
}
#cssmenu ul{
display: inline-block;
}
Of course you will have to move some of your styles from the list to the div, because the list is not full width anymore.
jsFiddle Demo
I've got a div that is set to 100% and inside that another div which is centred and set to 883px.
The navigation is a list but if I apply the float:right element to this element it reversed the order of the list. Sure I could change the order in the code but there must be a better way?
<div id="navigation"><!-- START NAVIGATION -->
<ul class="navigation">
<li>home</li>
<li><img src="images/navline.png" align="right">portfolio</li>
<li>blog</li>
<li>get in touch</li>
</ul>
</div>
<div id="border"></div><!-- END NAVIGATION -->
<div style="clear:both"></div>
And the CSS...
#navigation {
width:100%;
background-color:#383a3c;
height:43px;
}
#navigation ul {
width:883px;
margin:0px auto;
}
ul.navigation {
font-family:'ChunkFiveRegular', Arial, sans-serif;
font-size:18px;
}
#navigation li a {
display:block;
margin:13px 0px 0px 0px;
text-decoration:none;
color:#8cd8db;
float:right;
}
Can anyone help show me the error of my ways?
Floating to the right reverses the elements. This is the expected behavior.
If you want the menu aligned to the right, then you need to make ul element floating to the right but the li elements inside, must have a float left.
#navigation {
width:100%;
background-color:#383a3c;
height:43px;
}
#navigation ul {
width:883px;
margin:0px auto;
}
ul.navigation {
font-family:'ChunkFiveRegular', Arial, sans-serif;
font-size:18px;
float: right;
}
#navigation li {
float: left;
padding: 0px 10px;
}
#navigation li a {
display:block;
margin:13px 0px 0px 0px;
text-decoration:none;
color:#8cd8db;
}
In this case, the menu still doesn't appear aligned to the right because you specified width:883px; to the ul element. If you want it aligned to the right then simply remove this width.