I have ONLY one <UL> and under that we have group of <LI>
<ul>
<li>1<li>
<li>2<li>
<li>3</li>
<li>4<li>
</ul>
now I wanted to show them as TABLE, please help me with CSS, how can we show as a TABLE for above UL/LI in below table format, 2 LI set in one TR (two TD) and so on....
Well, here's one possible solution:
ul {
width: 450px; /* change it to whatever you like */
position: relative;
/* these should be probably already set up by `reset.css` */
list-style-type: none;
margin: 0;
padding: 0;
}
ul:before, ul:after {
text-align: center;
display: block;
border: 1px solid black;
border-bottom: 0;
width: 48%;
}
ul:before {
content: 'col1';
border-right: 0;
}
ul:after {
content: 'col2';
position: absolute;
top: 0;
left: 48%;
margin-left: 1px;
}
li {
text-align: right;
width: 48%;
float: left;
border: 1px solid black;
margin-bottom: -1px;
}
li:nth-child(even) {
margin-left: -1px;
}
It works (JSFiddle; tested in Chrome, Firefox and Opera; nth-child(even) selector obviously fails in IE8, so you have to emulate it with class or other means; but otherwise it's still solid), but I admit I feel guilty about this. )
P.S. If you want to add padding to the "cell" contents, don't forget to change their widths as well, like here:
li {
width: 47%;
padding-right: 1%;
}
It's a really late answer, but I think this is a common topic. Here's a codepen I made.
Obviously it's just a starting point. It also has some example of how to add styles like bg or borders. If the 'cells' contain some arbitrary content, you'll have to adjust dimensions, for example. I use this kind of code for thumbnails galleries, for example, where you don't have to worry about borders or bgs and it's quite elementary code (the example is for a 2x3 table, see codepen):
ul{
list-style:none;
}
ul li{
float:left;
padding:10px;
border-bottom:1px solid #000;
border-right:1px solid #000;
}
ul li:nth-child(3n){
background-color:#888;
}
ul li:nth-child(3n+1){
clear:both;
border-left:1px solid #000;
background-color:#ccc;
}
ul li:nth-child(-n+3){
border-top:1px solid #000;
}
Hope it helps.
You cannot convert a single list (containing more than 2 items) into 2 columns via the display: table properties because you need some element to act as the table-row. Without an element acting as a table-row, all adjacent elements that are set to display: table-cell will be contained within an anonymous table-row element that cannot be modified or styled in any way.
Your only option is to either change the markup (to use tables or lists of lists) or use a different approach to your CSS: either floats/inline-block on the lis or using the columns property on the ul.
Related
Having the following code: http://codepen.io/anon/pen/wCcfA
HTML:
<ul id="menu-main-menu">
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Portfolio</a></li>
<li><a>Blog</a></li>
<li><a>Contact</a></li>
</ul>
CSS:
#menu-main-menu {
padding: 0;
height: 77px;
-webkit-column-count: 2;
-webkit-column-gap: 42px;
border: 1px solid blue;
width:250px;
}
#menu-main-menu li{
display: block;
list-style: none;
height: 24px;
border: 1px solid red;
}
How can I vertically align all the "li" elements at the very bottom of "menu-main-menu" rather than at the top?
How can I vertically align all the "li" elements at the very bottom of "menu-main-menu" rather than at the top?
I don’t think vertical-align can be applied here.
But there is an approach that should work: Using transform to first flip the whole menu around on the Y axis – and then again on the list items to flip them “back” to readable:
#menu-main-menu {
/* … */
-webkit-transform:scaleY(-1);
transform:scaleY(-1);
}
#menu-main-menu li{
/* … */
-webkit-transform:scaleY(-1);
transform:scaleY(-1);
}
http://codepen.io/anon/pen/Abrxl
Of course flipping the menu around changes the order of items – to correct that, their order in the HTML would have to be changed too: http://codepen.io/anon/pen/yxDsi Whether that’s a compromise your’re willing to make, is for you to decide.
I added the -webkit- prefixed version and the unprefixed one here, and also the -moz- versions of the column properties, yet in Firefox there seem to be some extra margins or something like that going on. That seems to come from applying the columns properties already though, and doesn’t seem to be a result of applying the transformation. Maybe you’ll find a solution to make that look smoother by yourself.
One solution is to use margin-top every 4n li elements like:
#menu-main-menu {
padding: 0;
height: 77px;
-webkit-column-count: 2;
-webkit-column-gap: 42px;
border: 1px solid blue;
width: 250px;
}
#menu-main-menu li {
display: block;
list-style: none;
height: 24px;
border: 1px solid red;
position: relative;
}
#menu-main-menu li:nth-child(4n) {
margin-top: 24px; /*add margin top*/
}
<ul id="menu-main-menu">
<li><a>Home</a>
</li>
<li><a>About</a>
</li>
<li><a>Portfolio</a>
</li>
<li><a>Blog</a>
</li>
<li><a>Contact</a>
</li>
</ul>
I want to put a little vertical line next to the right of each list item (except the last) but I'm wondering if there is a way to do it other than adding in a new div or something to accommodate the line. I tried just adding a border line for the list but it added one more than I needed.
html
<ul class="list">
<li><span id = "home">Home</span></li>
<li><span id = "about">About</span></li>
<li><span id = "portfolio">Portfolio</span></li>
<li><span id = "contact">Contact</span></li>
</ul>
CSS
.list li {
display: inline;
margin: 0px 25px 0px 0px;
white-space: nowrap;
font-family: Oswald;
color: white;
}
.list {
text-align: right;
padding-right: 2%;
}
#home {
height: 50px;
background-color: black;
}
Just add a right border to all the li elements and then remove it from the last one using the :last-child pseudo class. This will work for dynamic content.
Example Here
.list li {
display:inline-block;
border-right:2px solid;
padding:10px;
}
.list li:last-child {
border-right:none;
}
Alternatively, you could also just use the :not() pseudo class, and avoid applying the border to the last element to begin with.
Example Here
.list li:not(:last-child) {
border-right:2px solid;
}
Support for both of these methods can be found here - http://caniuse.com/#feat=css-sel3
If support is a concern, you could also alternatively just add a left border and remove it from the first child element. (:first-child has more browser support than :last-child/:not). I doubt you need to support older versions of IE though.
Example Here
.list li {
display:inline-block;
border-left:2px solid;
padding:10px;
}
.list li:first-child {
border-left:none;
}
You can achieve that by adding a border on every <li> item and just removing the border for the last element using the css last child selector: li:last-child selecting the last li element of its parent.
You can even combine that with the :not selector to achieve it with one css block.
JSFiddle Demo
I would probably set a border-right on the whole list and use jQuery to remove it on the last item.
This is a little trickier if you don't know the ID of the last item ahead of time, but if it's always going to be "Contact," you can say
$("#contact").attr('style','border-right:none');
You can add this:
li:before {
content: " | ";
}
li:first-child:before {
content: none;
}
Or:
li:not(:first-child):before {
content: " | ";
}
Here's a more universal and simpler solution that will work in older browsers without a hitch: http://jsfiddle.net/pw3vpvLv/.
HTML:
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
CSS:
ul > li {
display:inline-block;
padding: 5px 10px;
}
ul > li + li {
border-left: 1px solid;
}
So for my Tafe work, one requirment is to have an unordered list.
I have a menu, but it clashes with the list I'm attempting to make.
Here's the fiddle: http://jsfiddle.net/tHLY7/1/
If you remove:
li {
display: inline;
}
It shows the list how I want but ruins my menu.
Any idea?
You need to tell the display:inline to be on the nav only.
#Menubar ul li { display: inline; }
your styling li { display: inline } will apply to ALL <li> on the page, no matter where they are. I would suggest targeting only the <li> that are part of your menu. In your case,
#menu li { display: inline; }.
Or maybe,
#Menubar li { display: inline }.
(one word of note though, ID's and classes in HTML are by convention, all lowercase, so you should change <div id="Menubar"> to <div id="menubar">.
I've made some improvement overall: http://jsfiddle.net/oneeezy/tHLY7/4/
Here are a few tips
1.) You should never use "#ID" for styling purposes, just use #ID for javascript hooks, always use ".class" for styling and like someone else said, keep it lowercase.
2.) Always use a "reset.css" file. I've attached the best reset file I know that exists from HTML5 boilerplates website. You can take care of a lot of your "base" styles in that file. Use a stylesheet.css file after your reset.css file
3.) Like someone else said, if you have multiple elements on a page (in this case, ul's) then you must target that specific ul through a class name and tell it specifically what you want it to do.. otherwise it will take the style from the reset.css file.
4.) 2 very important styles have been added!
Clear Fix (I'm calling this ".row", This is the best way to make things drop to the next line (like hitting the "return" key in microsoft word)
Box sizing is you're best friend! It makes "padding" act correctly and doesn't add space to your elements that have it. I gave it the "*" to apply on everything.
/* Box sizing is you're best friend! It makes "padding" act correctly and doesn't add space to your elements that have it. */
*, *:after, *:before { margin:0; padding:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
/* Clear Fix - This is the best way to make things drop to the next line (like hitting the "return" key in microsoft word ) */
.row:before, .row:after { content: " "; display: table; }
.row:after { clear: both; }
.row { *zoom: 1; clear: both; }
/* This "wrapper" goes around everything and makes your content stay in the middle of the page */
.wrapper { width: 90%; margin: 0 auto; }
/* Navigation */
.menu { background: #000; width: 100%; float: left; display: block; }
.menu ul { color: #fff; float: right; }
.menu ul li { float: left; display: block; }
.menu ul li a { display: block; color: #fff; padding: .25em 1em; border-left: 1px solid #fff; }
.menu ul li a.active { background: #333333; display: block; color: #fff; padding: .25em 1em; border-left: 1px solid #fff; }
.menu ul li a:hover { background: #333333; color: #fff; }
/* Main Content */
.main { padding: .5em 0; }
.main h1 { margin: .5em 0; }
.main ul { }
.main ul li { list-style: inside; }
I hope this helps!
How to grow the li elements in the way, that all the four li elements consume the complete 900 pixels space and add a little gap between the elements. And why is there already a gap now - I have none defined?
<html><head><title></title></head>
<style type="text/css">
#box { width: 900px; border: solid 1px black; }
#menu {
display: block;
position: relative;
width: 900px;
margin: 0;
padding: 0;
text-align: center;
}
#menu li {
display: inline;
position: relative;
margin: 0;
padding: 0;
}
#menu li a, #menu li a:visited {
display: inline-block;
position: relative;
padding: 10px;
background-color: yellow;
text-decoration: none;
}
#menu li a:hover, #menu li a:active {
background-color: green;
text-decoration: none;
color: white;
}
</style>
<body>
<div id="box">
<ul id="menu">
<li>Mozilla Firefox & Thunderbird</li>
<li>OpenOffice</li>
<li>Microsoft Office Visio</li>
<li>Apache OpenOffice 3.0.0</li>
</ul>
</div>
</body>
</html>
Inline blocks behave weirdly in the fact that they render whitespace. The gap shown between items is the new line characters in your code. You can either remove the new line characters as I have shown in the code below (or at this fiddle http://jsfiddle.net/UyQEK/). If you want to keep the HTML clean, and not have to do this removal of whitespace, use float left on the elements instead of display: inline-block and do a clearfix on the parent to set the height.
<div id="box">
<ul id="menu">
<li>Mozilla Firefox & Thunderbird</li><li>OpenOffice</li><li>Microsoft Office Visio</li><li>Apache OpenOffice 3.0.0</li>
</ul>
</div>
EDIT
Made the classic mistake of forgetting to check to ensure I answered the whole question. I have updated the fiddle http://jsfiddle.net/UyQEK/1/ to show the actual answer to utilize the entire bar rather then just get rid of your spaces. The basis of the solution was floating the elements and giving them each a width of 25% and applying a clearfix to the ul element.
Hope that solves the whole thing this time.
I want to do this with CSS only. I have an unordered list and some hyperlinked list items and I want to limit the width and height of the links (list items) to width:300px and height:1.5em. So, no matter what the length of the links are, only up to 300px of the links will be showing and the rest will be hidden because of height limit and overflow:hidden. I want to show the rest of the link on mouse hover.
I can partially do this and hover over links shows the rest of the content BUT it also pushes down the content below it.
Is it possible, to show the rest of the content on mouseover WITHOUT pushing down the content below it?
Please see this fiddle 'http://jsfiddle.net/3VyaC/'
Looks a little clunky, but it's close to the effect you're shooting for. Only changed your CSS:
body {font-family: arial; font-size: 0.8em;}
.news-entry ul {
list-style-type: none;
padding: 0;
margin: 0 0 0 8px;
width: 300px;
}
.news-entry li {
border-top: 1px solid #dcdcdc;
width:300px;
height:1.5em;
overflow:hidden;
position:relative;
}
.news-entry li a.itemtitle {
display: block;
width: 100%;
padding: 4px 0 3px 0;
line-height: 1.5em;
text-decoration: none;
}
.news-entry li:hover {
color: #333;
background-color: #fafafa;
overflow:visible;
z-index:10;
}
.news-entry li:hover a{
position:absolute;
width:100%;
background-color:#fafafa;
border:1px solid #555;
}
Fiddle: http://jsfiddle.net/y3Vkt/
Might need to tweak the margins when the link changes to absolute position, there's a 1-2px glitch.
Hope this helps!
There would not be a way to do this. The only way you could actually do that is by setting position: absolute; but that would make the link sit on top of the next one. So to basically answer your question, there is not a way to do this with the width set as you have it.