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?
}
Related
i am trying to create a menu bar with list items.i applied css for the list items.i want all of them to lie on a single line i mean when zoom in to 500% and zoom out to 25% all the list items should be in same line.but in my implementation they are going out of the line.i'm a beginner please help me
css:
.menu
{
margin-top:5px;
margin-bottom:5px;
background-color:#4c4c4c;
color:white;
position:relative;
display:inline-block;
text-align:center;
padding:0px 85px 0px 85px;
border:2px solid #4c4c4c;
}
#menuitem1
{
border-top-left-radius:5px;
border-bottom-left-radius:5px;
text-align:center;
margin:auto;
}
#menuitem4
{
border-top-right-radius:5px;
border-bottom-right-radius:5px;
}
<html>
<body >
<div id="page">
<div id="bar">
<ul>
<li class="menu" id="menuitem1" >Home</li>
<li class="menu">contact us</li>
<li class="menu">pay</li>
<li class="menu" id="menuitem4" >plans</li>
</ul>
</div>
</div>
</body>
</html>
jsfiddle
Set the width of the .menu in percentage so the li's are responsive.
JSFIddle
HTML
<body >
<div id="page">
<div id="bar">
<ul>
<li class="menu" id="menuitem1" >
Home
</li>
<li class="menu">
contact us
</li>
<li class="menu">
pay
</li>
<li class="menu" id="menuitem4" >
plans
</li>
</ul>
</div>
</div>
</body>
CSS
.menu
{
margin-top:5px;
margin-bottom:5px;
background-color:#4c4c4c;
color:white;
position:relative;
display:inline-block;
text-align:center;
padding:0px 0px 0px 0px;
border:2px solid #4c4c4c;
width:20%;
}
#menuitem1
{
border-top-left-radius:5px;
border-bottom-left-radius:5px;
text-align:center;
margin:auto;
}
#menuitem4
{
border-top-right-radius:5px;
border-bottom-right-radius:5px;
}
You can try using percentage width values for width of your li elements.
.some-class {
width: 25%
}
I've made some changes on jsfiddle just to show it is possible with this kind of implementation.
If you are concerned about mobile devices. Take a look at meta tags with device-width.
You can add:
ul {
white-space: nowrap;
}
to prevent wrapping -> jsfiddle
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'm trying to create a mega drop down menu just like the one from the following link : http://i48.tinypic.com/2ln97ip.png
I have created this fiddle but the things aren't going well because of positioning and border of second ul is not ok :(
http://jsfiddle.net/H8FVE/16/
<ul id="firstUl">
<li><a>mainSimple</a></li>
<li>
<a>MainMenu</a>
<ul id="secondUl">
<li>
<a>SecondLevel1</a>
<ul id="lastLevel">
<li>
<a>LastLevelX</a>
</li>
<li>
<a>LastLevelY</a>
</li>
</ul>
</li>
<li>
<a>SecondLevel2</a>
<ul id="lastLevel">
<li>
<a>LastLevel</a>
</li>
<li>
<a>LastLevel</a>
</li>
<li>
<a>LastLevel</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
#firstUl{height:42px; position:relative; background:#ccc;}
#firstUl li{ float:left; border:1px solid #fff; padding:10px; border:1px solid red;}
#secondUl{display:none; background:#fafafa; }
#secondUl li{
float:left;
display:block;
border:1px solid #eaeaea;
}
#lastLevel{
display:none;
}
#firstUl li:hover> #secondUl{
border:1px solid red;
display:block;
position:absolute;
top:100%;
}
#firstUl li #secondUl li:hover> #lastLevel{
display:block;
position:absolute;
top:100%;
left:0;
}
#firstUl li #secondUl li #lastLevel li{
float:none;
}
Can someone help me with this pls.
Try setting the #secondUl li to position:relative so that the child's (UL) position depends on it:
#secondUl li {
...
position: relative;
}
Ive been trying to make the original dropdown into multi level for a site im working on. All of my attempts have failed (. For some reason i can only do "margin-right" to align the elements, and this causes some problems. I think it has something to do with the position attribute.
Here is my HTML:
<ol id="nav">
<li>Home</li>
<li class="dropdown_alignedLeft">
Products
<ul><li class="dropdown_alignedRight">
iPoP
<ul style="margin-right:-400px; top:0px;-webkit-border-top-right-radius: 5px;border-top-right-radius: 5px;-moz-border-radius-topright: 5px;"><li>iPoP - Network Solutions for Vessels</li></ul><li class="dropdown_alignedRight">
Cameras
<ul style="margin-right:-400px; top:0px;-webkit-border-top-right-radius: 5px;border-top-right-radius: 5px;-moz-border-radius-topright: 5px;"><li>iCam 501 Ultra - Intrinsically Safe Digital Camera with Flash</li></ul><li class="dropdown_alignedRight">
BNWAS
<ul style="margin-right:-400px; top:0px;-webkit-border-top-right-radius: 5px;border-top-right-radius: 5px;-moz-border-radius-topright: 5px;"><li>BNWAS - Bridge Navigation Watch Alarm System</li></ul><li class="dropdown_alignedRight">
Lighting
<ul style="margin-right:-400px; top:0px;-webkit-border-top-right-radius: 5px;border-top-right-radius: 5px;-moz-border-radius-topright: 5px;"><li>Peli 2690 - Intrinsically Safe LED Head Lamp</li></ul><li class="dropdown_alignedRight">
Communication
<ul style="margin-right:-400px; top:0px;-webkit-border-top-right-radius: 5px;border-top-right-radius: 5px;-moz-border-radius-topright: 5px;"><li>Ex-Handy 06 - Intrinsically Safe Cell Phone</li></ul>
</ul>
<li class="dropdown_alignedLeft">
Customers
<ul>
<li>Maritime</li>
<li>Non-Maritime</li>
<li class="dropdown_lastItem">Regulatory Organizations</li>
</ul>
<li>Product Enquiry</li>
<li>Contact Us</li>
<li class="dropdown_alignedLeft">
Company
<ul>
<!-- <li>About Us</li> -->
<li>News</li>
<li class="dropdown_lastItem">Press Releases</li>
</ul>
</ol>
And my CSS:
#nav {
float:right;
margin:15px 0 0;
}
#nav li {
float:left;
}
#nav li a {
display:block;
font-family:"PT Sans","Helvetica Neue",Arial,sans-serif;
font-size:16px;
text-decoration:none;
color:#2B95C8;
padding:10px 20px 20px;
}
.dropdown_alignedLeft,.dropdown_alignedRight {
position:relative;
}
#nav .dropdown_alignedLeft>a,#nav .dropdown_alignedRight>a {
background:url(../images/dropdown_arrow_blue.png) no-repeat top right;
padding:10px 30px 20px 20px;
}
#nav .dropdown_alignedLeft:hover>a,#nav .dropdown_alignedRight:hover>a {
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomright:0;
-moz-border-radius-bottomleft:0;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-right-radius:0;
-webkit-border-bottom-left-radius:0;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-right-radius:0;
border-bottom-left-radius:0;
color:#FFF;
background:#2378A1 url(../images/dropdown_arrow_blue.png) no-repeat bottom right;
}
.dropdown_alignedLeft ul,.dropdown_alignedRight ul {
display:none;
}
#nav .dropdown_alignedLeft:hover>ul,#nav .dropdown_alignedRight:hover>ul {
display:block;
z-index:100;
position:absolute;
top:50px;
-moz-border-radius-topleft:0;
-moz-border-radius-topright:0;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
-webkit-border-top-left-radius:0;
-webkit-border-top-right-radius:0;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
border-top-left-radius:0;
border-top-right-radius:0;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
background:#2378A1;
padding:0 0 6px;
}
#nav .dropdown_alignedRight:hover>ul {
top:50px;
right:0;
text-align:right;
}
#nav li ul li {
float:none;
border-bottom:1px dashed #2B95C8;
margin:0 20px;
}
#nav li ul li.dropdown_innerTitle {
border:none;
font-family:"Helvetica Neue",Arial,sans-serif;
font-size:15px;
white-space:nowrap;
color:#C8DDE7;
margin:10px 20px 0;
padding:10px 0;
}
#nav li ul li.dropdown_lastItem {
border:none;
}
#nav li ul li a {
font-family:"Helvetica Neue",Arial,sans-serif;
font-size:13px;
color:#FFF;
white-space:nowrap;
padding:10px 0 9px;
}
#nav>li:hover>a,#nav li .current_page {
color:#2378A1;
background:url(../images/current_page_arrow_blue.png) no-repeat center bottom;
}
#nav li ul li a:hover {
color: #C8DDE7;
}
For a live version of the menu, please go here:
JSFiddle - Live Menu
You weren't closing a lot of your li tags and your submenu was just sort off flying off its container. Cleaned up your code and made too many modifications to list here:
http://jsfiddle.net/MmHSd/4/
http://purecssmenu.com/ Might help you out. Try downloading a list and taking a look at it. Deleting all the extra tags you have and take everything back to a basic list like this:
<ul>
<li>Element 1</li>
<li>Element 2</li>
<ul>
<li>
Element 2 Child 1
</li>
<li>
Element 2 Child 2
</li>
</ul>
and working back up to something a bit more complicated might help too.
Hey,
Is there a way to get browsers to ignore line breaks in the source?
<div id="navbar">
<div id="navbar-container">
<ul>
<li>HOME</li>
<li>TUTORIALS</li>
<li>BLOG</li>
<li>FORUMS</li>
<li>LINKS</li>
<li> </li>
</ul>
</div>
</div>
#navbar {
background:#FFF;
width:940px;
margin:auto;
border-radius: 10px 10px;
-webkit-box-shadow: 5px 5px 10px #888;
}
#navbar-container {
margin:auto;
}
#navbar-container ul {
list-style:none;
text-align:center;
display:block;
width:auto;
padding:0;
margin:0;
}
#navbar-container li{
list-style:none;
border-left:3px solid black;
display:inline-block;
font-family:"Arial", sans-serif;
font-size:2em;
padding:0 7px 0 10px;
margin:0;
white-space:nowrap;
}
#navbar-container li:hover{
color:#FFF;
background:#000;
border-left:3px solid black;
display:inline-block;
font-family:"Arial", sans-serif;
font-size:2em;
margin:0;
padding:0 7px 0 10px;
}
It's placing a small space between each LI, I've set it up so then line up horizontally,
i could just remove the line breaks in the source, but id prefer not to.
You can float them (either left or right), or you can comment-out the spaces:
<ul>
<li>...</li><!--
--><li>...</li>
</ul>
Or simply leave the tags open 'til the next line.
<ul>
<li>...</li
><li>...</li
><li>...</li>
</ul>
IE seems to do that as a hold-over from the days when list items did not have closing tags. A common way around that is to put the closing > on the next line, i.e.
<ul>
<li>HOME</li
><li>TUTORIALS</li
><li>BLOG</li
>etc...
All browsers should totally ignore whitespace. Is there a particular browser giving you trouble?
Try:
li { margin: 0; padding: 0 }
I was wondering the same thing and what worked for me was:
li { display: table-cell; }
All breaks are ignored and now my menu buttons are right next to each other.
You can see a live example here on my music site: http://www.yanike.tk
I used a CSS Sprite on my UL LI for my navigation menu (home, media,...).