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.
Related
I have some sort of space in between my li tags I don't where it's coming from? How can i remove this?
Also, I'd like to change the color of the font to white on hover of the li
JSFIDDLE http://jsfiddle.net/omarel/tfyxL66c/
CSS
.nav_container {
text-align: center;
width:100%;
}
.nav_container ul {
/* margin-top:15px; */
margin-left:30px;
}
.nav_container ul li {
display: inline-block;
text-align: center;
padding-left:40px;
padding-right:40px;
margin:0px;
height:80px;
cursor:pointer;
}
.nav_container ul li:hover {
background-color:#08298A;
}
.nav_container a:hover {
color:#fff;
}
header {
width:100%;
margin: auto;
box-shadow:0 0 8px rgba(0,0,0,0.1);
min-width:410px;
}
.navlogo {
z-index:99;
}
.navlogo img {
width:100px;
margin:10px 10px 10px 10px;
}
.floatleft {
float:left;
}
.floatright {
float:right;
}
.centerdiv {
margin:0 auto;
}
#media only screen and (min-width:700px) {
header {
max-width:1250px;
}
.container {
max-width:1250px;
}
.box2 {
width:32%;
height:300px;
float:left;
}
.box2left {
width:65%;
height:600px;
float:left;
}
}
div {
border:solid 1px #E6E6E6;
position:relative;
}
ul li {
border:solid 1px #E6E6E6;
}
HTML
<div class="navlogo floatleft">
<img src="images/logo.png" />
</div>
<div class="floatleft">
<div class="nav_container">
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
</div>
<div class="floatright">
<div class="nav_container">
<ul>
<li>Profile</li>
<li>Sign out</li>
</ul>
</div>
</div>
</header>
<div style="clear:both;"></div>
Answering your second question first as the answer is shorter: use the :hover pseudo class.
EXAMPLE
li:hover a{color:#fff;}
More information on pseudo classes
To answer your first question, then; setting an element's display property to inline or inline-block will cause the white space surrounding it to be treated just like the space surrounding any other inline element.
You can workaround it in a number of ways
Remove all line breaks from within your list:
<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>
Use comments to hide the line breaks from the browser:
<ul><!--
--><li>Item 1</li><!--
--><li>Item 2</li><!--
--><li>Item 3</li><!--
--></ul>
Use CSS to set the font-size of the parent element to 0 and then "reset" it for the child elements:
html{font-size:20px;}
ul{font-size:0;}
li{font-size:1rem;}
Alternatively, if you're not 100% set on using display:inline-block, you can use floats or flexbox instead.
To change the color of the links to white, use this css:
.nav_container ul li:hover a {
color:white;
}
However, only the text will be clickable, the li element won't be clickable. Another way to do the same thing is to apply all width/height/background styling to the link, instead of the li.
As Shaggy mentioned, to eliminate extra spacing when using inline-block you should remove all spaces in your html between your menu li items.
As for changing the link color on hover you should add the following to your css code:
.nav_container li:hover a {
color:#FFF;
}
I use this code below to show up right column on my wordpress blog. (List structure is generated by wp_list_categories.)
<div class="rcolumn">
<li class="categories">Categories
<ul>
<li class="cat-item1">
Cat1
</li>
</ul>
<ul>
<li class="cat-item2">
Cat2
</li>
</ul>
</li>
</div>
The thing is, that the contents of this column ignore div and are actually outside of it. Whole li categories goes outside of rcolumn.
.lcolumn {
display:inline;
float:left;
}
.rcolumn {
float:left;
display:inline;
padding:0 5px;
}
.categories {
margin-top:10px;
border:1px solid #aaa;
list-style:none;
}
What am I missing?
.rcolumn {
float:left;
display:inline;
padding:0 5px;
overflow: hidden; <-- try this?
}
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>
My HTML:
<div id="content">
<ul>
<li>first list---ipsum ipsum ipsum<li>list inside list....ipsumipsumipsumipsum</li></li>
<li class="last">last list content--ipsumipsumipsumipsum</li>
</ul>
</div>
My CSS:
#content{
padding:30px 0 25px 0;
}
#content ul{
display:inline;
margin:0;
padding:0;
list-style:none;
}
#content li{
display:block;
float:left;
width:500px;
margin:0 45px 0 0;
}
#content li.last{
width:290px;
float:right;
}
The output I get is list with 'last' class comes parallel to the list inside the first list. My intention is to get it parallel with the first list.
Demo
Use a negative margin on .last.
http://jsfiddle.net/calder12/eXFYY/
Like that? You're floating the last list element right, what did you expect to happen exactly?
#content li.last{
width:290px;
float:left;
}
And yeah looking closer at the HTML that is messed up, you shouldn't have list elements inside list elements. You can however have another list inside a list element like this:
<ul>
<li>Something
<ul>
<li>Something else</li>
</ul>
</li>
</ul>
If you change your CSS to this, it does what you want.
#content ul{
display:inline;
margin:0;
padding:0;
list-style:none;
position relative;
}
#content li{
float:left;
width:500px;
margin:0 45px 0 0;
}
#content li.last{
width:290px;
position:absolute;
top:0;
right:0;
clear:both;
}
put these code into #content li.last style
position:absolute;
top:30px;
margin-left:300px;
Your code works fine just change html like this as #ZoltanToth said and reduce li width
<div id="content">
<ul>
<li>first list---ipsum ipsum ipsum
<ul>
<li>list inside list....ipsumipsumipsumipsum</li>
</ul>
</li>
<li class="last">last list content--ipsumipsumipsumipsum</li>
</ul>
</div>
http://jsfiddle.net/xBEQc/1/