I'm using an ordered list in order to get numbering, which works perfectly fine when the list is vertical. However, once I make it horizontal, the numbering disappears.
The display attribute in the li CSS seems to be the culprit.
CSS and HTML:
#QuickSteps {
width:723px;
height:75px;
border:solid 2px #b9c7d9;
background-color:#e5ecf2;
}
#QuickSteps h2{
padding-top:2px;
padding-left:7px;
}
#QuickSteps ol{
color:#003366;
}
#QuickSteps li {
display:inline;
}
#QuickSteps li.selected{
font-weight:bold;
}
<div id="QuickSteps">
<h2>5 Quick Steps</h2>
<ol>
<li class="selected">Account Info ></li>
<li>About Me ></li>
<li>Preferences ></li>
<li>Habits ></li>
<li>Your Avatar</li>
</ol>
</div>
Instead of displaying them inline, you could float them
#QuickSteps li {
float:left;
margin-left:50px;
}
Good luck...
Related
I am trying to make the horizontal navigation menu take up all available width from parent element.
I have tried using the display:table and display:table-cell but that did not work.
Other methods such as using overflow and width:auto doesn't work either.
The list is created by Joomla through a menu module.
html
<div id="DivN">
<jdoc:include type="modules" name="position-1" />
</div>
html (When viewing on browser)
<div id="DivN">
<ul class="nav menu nav-pills">
<li class="item-101 current active">
Home
</li>
<li class="item-113">
School Info
</li>
<li class="item-114">
Achievements
</li>
<li class="item-115">
News & Events
</li>
<li class="item-116">
Parents & Carers
</li>
<li class="item-117">
Community
</li>
<li class="item-118">
Contact Us
</li>
</ul>
</div>
css
#DivN{
width:100%;
height:42px;
border-top:1px solid black;
border-bottom:1px solid black;
text-decoration:none;
background-color:black;
text-align:center;
font-size:13px;
font-weight:700;
}
#DivN ul{
list-style:none;
width:100%;
}
#DivN ul li{
display:inline-block;
/*float:left;*/
line-height:22px;
height:32px;
list-style-type:none;
margin:4px;
overflow:hidden;
width:auto;
}
I have already tried numerous ways for the past few days...
Yet none of what is found on the internet works.
I do not know what the classes added by Joomla do, nor do I know where they are.
The navigation bar looks like this: https://www.dropbox.com/s/5sw94euzbsgwvrc/Capture.PNG
When mouse is over a button: https://www.dropbox.com/s/lv73war905ii0rh/2.PNG
How can I get it so the list will take up all available space while they are the same size?
If equal width among the items is important to you, you can float the items to the left and give them a set equal width (this works when you know how many items you have. Alternatively, you can use js to determine the width if you have a variable number of menu items):
#DivN{
width:100%;
height:42px;
border-top:1px solid black;
border-bottom:1px solid black;
text-decoration:none;
background-color:black;
text-align:center;
font-size:13px;
font-weight:700;
}
#DivN ul{
list-style:none;
width:100%;
height: 100%;
padding: 0;
margin: 0;
}
#DivN ul li{
float:left;
line-height:37px;
height:100%;
list-style-type:none;
margin:0;
overflow:hidden;
width: 14.28571428571429%;
cursor: pointer;
}
#DivN ul li:hover{
background-color: gray;
}
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
#DivN ul:before,
#DivN ul:after {
content: " "; /* 1 */
display: table; /* 2 */
}
#DivN ul:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
#DivN ul {
*zoom: 1;
}
Here is a fiddle: http://jsfiddle.net/kZb9C/
Updated to make the cf (clearfix) target your element: http://jsfiddle.net/4LUQe/16/
If you want to use the display: table approach, just remember to use display: table-cell on the <li> elements. Also, use vertical-align: middle if you want to vertically center them. (Note that table and table-cell CSS properties do not work in IE7 and below).
Here's a fiddle with the second approach (table): http://jsfiddle.net/kZb9C/1/
I think You should try to use
display: table
once again (for the nav element) and display: table-row for the ul, and display: table-cell for the li.
If You have any problems, please write, but this method SHOULD work.
Don't be afraid of display: table, it isn't an old table element, but really a great trick to make good layout with validate and semantic HTML. Hope it helps
UPDATE
The same working solution: CSS dynamic horizontal navigation menu to fill up specific width (table behavior)
<style>
div { border:1px solid red; width:400px; height:400px; }
ul { width:100%; height:50px; list-style: none; margin:0; padding:0; text-align: center; }
li { background-color:green; color:White; width:1%; position:relative; display:table-cell; border:solid 1px white; }
</style>
<div>
<ul>
<li>CELL 1</li>
<li>CELL 2</li>
<li>CELL 3</li>
<li>CELL 4</li>
</ul>
</div>
So I've got some simple code here:
<div id="nav">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
CSS-
ul
{
list-style-type:none;
width:700px;
height:44px;
padding:0;
}
li
{
float:left;
margin:0;
padding:0;
width:80px;
height:auto;
}
a
{
height:40px;
text-decoration:none;
border:2px solid black;
background:blue;
}
-#nav
{
width:786px;
height:66px;
border:2px solid black;
background:#C4BD97;
margin:5px;
}
This code should force my a tags to align themselves horizontally and give them a definite height/width. They align perfectly, but their height and width WILL NOT change no matter what I do. Never ran into this problem before, is my HTML broken? Thanks.
display: inline elements do not respect height. Change them to display: inline-block (or perhaps block) or use line-height to alter the height.
http://jsfiddle.net/kHkyh/
Try setting the height and/or width on the anchor tags in the li. That is, push out the li using the anchor tags. You can do this in a decently uniform way using padding to make sure the entire area of the anchor is clickable. Also, this approach works back to I believe ie6(not sure about ie5, have not tested it). Following is roughly what I'm talking about:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body, #menu, #menu li
{
position: relative;
display: block;
padding:0px;
margin: 0px;
}
#menu
{
list-style-type:none;
width:100%;
}
#menu a
{
position:relative;
display:block;
float:left;
width:25%;
padding:10px 0px 10px 0px;
text-align:center;
}
</style>
</head>
<body>
<ul id="menu">
<li>One item</li>
<li>Another item</li>
<li>hola</li>
<li>Hi</li>
</ul>
</body>
</html>
This is my simple code of menu
<ul id="admin-ul">
<li id="admin-li" class="no1">Dodaj informacije za sdf dsf dsfdddd</li>
<li id="admin-li" class="no2">Pregledaj</li>
<li id="admin-li" class="no3">Veterinari</li>
<li id="admin-li" class="no4">Logout</li>
</ul>
and CSS
ul#admin-ul
{
list-style-type:none;
margin:0;
padding:0;
}
li#admin-li
{
display:inline-block;
width:24%;
height:270px;
}
ul li a
{
display:block;
height:270px;
line-height:270px;
text-align:center;
}
I would like to know how to wrap my text because it is showing like this
Simply use vertical-align: top on your <li>s. Please note that all ids must be unique so this is invalid HTML:
<li id="admin-li" class="no1"></li>
<li id="admin-li" class="no1"></li>
You can style all <li>s more easily using the child selector like this:
ul#admin-ul > li {
/* other li rules */
vertical-algin: top;
}
You can than update your list to this:
<ul id="admin-ul">
<li class="no1"></li>
<li class="no1"></li>
</ul>
Final demo: http://jsfiddle.net/eXKdG/
Update
As I didn't notice the vertical centering of the text within the block level <a>-tag: tesdki is right in simply using display: table-cell; on the <a>-tags.
Try this out:
ul#admin-ul
{
list-style-type:none;
margin:1em 0 0 0;
padding:0;
}
li#admin-li
{
display:table;
width:24%;
position:relative;
float:left;
overflow:hidden;
height:270px;
margin: 0 3px;
}
ul li a
{
display:table-cell;
vertical-align:middle;
height:270px;
text-align:center;
}
Derived from here: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
This doesn't work in IE7 standard mode, but pretty much everything else is good.
I currently have the following code. I am trying to get the second, third, and fourth "li" elements to vertically-align in the middle of the nav bar. The first "li" is an image, and the second-fourth are all text.
Here is a screenshot of it currently.
http://i49.tinypic.com/bfesl3.png
I have tried using "vertical-align:middle" and padding. Note that the second, third and fourth "li" elements appear vertically-aligned in the middle if viewed in Firefox but not in other browsers.
Here is the code I have.
<ul class = "nav">
<li><img src="img/randomtitle.png" style="padding-left:8px;padding-top:8px;"/></li>
<li>about me</li>
<li>films</li>
<li>contact me</li>
<span class="navlinkimages">
<li><img src="social/social_vimeo.png" height = "30px" style = "margin-right:-14px;"/></li>
<li><img src="social/social_youtube.png" height = "30px" style = "margin-right:-14px;"/></li>
<li><img src="social/social_facebook.png" height="30px" style = "margin-right:-14px;"/></li>
<li><img src="social/social_twitter.png" height = "30px" style = "margin-right:-14px;" /></li>
</span>
</ul>`
CSS Code:
.nav {
list-style-type:none;
padding-left:0;
margin-left:0;
font-family:DinC;
padding-bottom:5px;
background-color: #000000;
border-radius:5px;
height:35px;
}
.navlinkimages {
float:right;
padding-top:5px;
}
.nav li {
display:inline;
vertical-align:middle;
}
ul.nav a:hover {
color:#FA4B2A;
}
.nav li img {
vertical-align:middle;
}
ul.nav a{
text-decoration:none;
margin-right:27px;
color:#FFFFFF;
}
Is there a way to make it vertically-aligned on all browsers?
Thanks!
Try this:
.nav li {
display:inline;
vertical-align:middle;
line-height:35px;
}
Give each of those li a's a class middle:
<li>
<a class="middle" href="aboutme.html" style="REDACTED">about me</a>
</li>
Define middle like:
.middle {
line-height: 35px; /** or same as ul height */
}
Inline elements are always vertically centered within their line-height.
DEMO
I know this IE problem comes up time and time again but I have spent all morning searching for answers and none seem to help me.
My horizontal navigation menu seems to render perfectly in all browsers except for IE7. I am thinking the problem could possibly be to do with my lists having no widths (but I do not want widths, I want it to be automatic depending on the length of the text), either that or the li's seem to be sitting within each other and keep applying the 14px padding-top. I do not know why they are sitting inside each other though as my li's all have closing tags and a float:left;
Here is my code..
<div id="navig">
<ul>
<li class="navig-left"></li>
<li class="home"><b>Home</b></li>
<li><a class="tabs" href="about.html">About Us</a></li>
<li><a class="tabs" href="services.html">Services</a></li>
<li><a class="tabs" href="personal-injury-panel.html">Personal Injury Panel</a></li>
<li><a class="tabs" href="client-testimonials.html">Client Testimonials</a></li>
<li><a class="tabs" href="contact.html">Contact Us</a></li>
<li><a class="tabs" href="careers.html">Careers</a></li>
<li><a class="tabs" href="affiliates.html">Affiliates</a></li>
<li class="navig-right"></li>
</ul>
</div>
<div class="clr"></div>
#navig { width:960px; height:46px; background:url(images/navig_bkgrnd.png); }
#navig ul { list-style-type:none; height:46px; width:960px; }
#navig ul li.active { float:left; height:32px; text-align:center; display:block; padding:14px 21.3px 0; background:url(images/navig_hover.gif) repeat-x; color:#000000; font-weight:200; font-size:14px; font-style:normal; }
#navig ul li.home { float:left; height:32px; text-align:center; display:block; padding:14px 21.3px 0; color:#ffffff; font-weight:200; font-size:14px; }
#navig ul li a.tabs { float:left; height:32px; text-align:center; display:block; padding:14px 21.3px 0; text-decoration:none; color:#FFFFFF; font-weight:200; font-size:14px; font-style:normal; }
#navig ul li a:hover { display:block; text-decoration:none; height:32px; font-family:Arial, Helvetica, sans-serif; color:#000000; font-weight:200; font-size:14px; font-style:normal; background:url(images/navig_hover.gif) repeat-x; }
.navig-left { float:left; width:23px; height:46px; background:url(images/navig_left.png); }
.navig-right { float:left; width:23px; height:46px; background:url(images/navig_right.png); }
Try adding the following CSS rule so that all li items float (since you're using a float approach):
#navig ul li {float:left;}
Looking at your stylesheet, you don't actually apply float:left to all of the list items in the menu, only li.activeand li.home. Other browsers seem to deal with it but IE doesn't like it.
jsFiddle (note I had to modify some colors to get it working since you are using white text over background images we don't have access to - causing white on white for testing purposes.)
I tested this fiddle in IE 7/8/9, FF and Chrome. Works consistently now.
You can force IE7 to render as ie8 adding this in head of your page.
<meta http-equiv="X-UA-Compatible" content="EDGE" />