Is there any way to split so that between the lists I could get the space?
li{
display: table-row;
background: red;
}
demo
Here margin-bottom, padding-bottom not work. So how can I split the row?
question title is clearly describes that I need to split not just only the gap but should be separated.
Is this what you want?
ul {
border-spacing:5px;
}
li{
display: table-row;
background: red;
}
Any way I have solved my problem by using the pseudo class like this:
li{
display: table-row;
background: red;
}
li:after{
content: "";
padding-bottom: 15px;
display: block;
background: #fff;
}
demo
Related
I am applying dynamic classes "float-left", "float-right" and "float-center" to the Lists to position them properly where I want, but for centering as there is no float:center; I tried with margins, inline-block; text-align:center.. but nothing works.. please check this fiddle
ul.tabs .center {
margin:0 auto;
text-align:center;
overflow:hidden;
}
.float-center li{
display:inline-block;
}
http://jsfiddle.net/443E2/
Use the following code:
.float-center {
text-align: center;
}
.tabs.float-center li {
display: inline-block;
float; none;
margin-left: -4px; /* Fix for white spaces between li while using inline-block */
}
.tabs.float-center li:last-child {
border-right: 1px solid #999;
}
See the update jsfiddler
Check this fork - http://jsfiddle.net/GzS7X/
I changed this to centre the content of the <li>:
.tab_content {
padding: 20px;
font-size: 1.2em;
text-align:center;
}
Is there any possibility to summarize CSS Selectors?
This is my stylesheet:
form.image_form > div > label > img
{
display: block;
margin-left: auto;
margin-right: auto;
}
form.image_form > div
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 100%;
height: 156px;
display: table-cell;
vertical-align: middle;
}
form.image_form > div:hover
{
background: green;
}
form.image_form > input[type="radio"]
{
display: none;
}
form.image_form > input[type="radio"]:checked + div
{
background: red;
}
and something like this is what I'd like to archieve:
form.image-form
{
> div
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 100%;
height: 156px;
display: table-cell;
vertical-align: middle;
> label > img
{
display: block;
margin-left: auto;
margin-right: auto;
}
:hover
{
background: green;
}
}
> input[type="radio"]
{
display: none;
:checked + div
{
background: red;
}
}
}
So is there any possibility to combine/summarize/interlace this code?
(I apologize if it looks like I did no research, I indeed did but couldn't fine anything in w3c documentation. Maybe I didn't use the right search terms.)
With "pure" CSS this isn't possible. But there are little helpers like LESS or SASS which will help you achieving this.
Nested selectors are not allowed in the CSS3 specification. It's a shame, because it would help to organise CSS files.
You can use preprocessed CSS files instead like SASS.
You need to use CSS pre-processors like SASS and LESS to achive what you are looking for. It cannot be done with pure CSS.
This is part of a more complex dynamic template code so I'm trying to keep the structure as is but trying to style the text so that the cast members line up with the directors below.
Right now the cast gets wrapped to 3 lines but it does not keep its indenting. Anyone know how I could style it to hold its indented look.
http://jsfiddle.net/N2y88/
http://jsfiddle.net/N2y88/2/
try something like this
.support p span:first-child {
color: #81848A;
display: inline-block;
padding-right: 10px;
text-align: right;
width: 50px;
float:left;
}
.support p span:last-child {
display: inline-block;
float:left;
width:400px;
}
.support .cast, .support .director{
color:blue;
}
.support p {
color: #D0D0D0;
margin: inherit;
padding: 0.1em 0;
clear:both;
}
I'd like to create a horizontal navigation list of links, where the nav links are evenly spaced and take up the full width of the enclosing container <ul>. Nav links can be different widths. The first and last links should line up with the beginning and end of the <ul> respectively (meaning the links aren't centered), like this:
|left side..right side|
link1 link1 link3 link4
Unless I'm mistaken, I don't think there is a way to do this in CSS2. But is there a way to do it in CSS3? Otherwise I'll need to do it in Javascript.
If you insist on CSS3, you can do it with box-flex. Since this isn't fully implemented in all browsers, the properties still have the -moz and -webkit prefixes.
Here's the CSS to do it:
ul {
display: box;
}
li {
box-flex: 1;
}
But since not all browsers use it, you have to add -moz-box-flex, -webkit-box-flex, etc.
Here's a demo: http://jsfiddle.net/tBu4a/9/
That's straightforward to do with CSS2:
ul {
display: table;
width: 100%;
}
li {
display: table-cell;
}
a {
display: block;
}
Here's a working example. The problem isn't so much that CSS2 doesn't have a way to do it, it's that IE didn't fully support CSS2 until version 8.
--edit
OK, now I think I understand your requirements:
ul {
display: table;
width: 100%;
border: 0;
padding: 0;
background-color: blue;
}
li {
display: table-cell;
border: 0;
padding: 0;
text-align: center;
}
li:first-child {
text-align: left;
}
li:last-child {
text-align: right;
}
a {
display: block;
padding: 0.25em 0;
background-color: white;
text-decoration: none;
}
Here it is in action. I've zeroed out all the borders and padding as per your comments, you could add some back in but you would, of course, need to zero out the left border/padding of the first link and the right border/padding of the right link using either li:first-child or li:first-child a (and the opposite last-child ones).
What would be the best way to insert a small image after each list element? I tried it with a pseudo class but something is not right...
ul li a:after {
display: block;
width: 3px;
height: 5px;
background: url ('../images/small_triangle.png') transparent no-repeat;
}
Thanks for any help!
The easier way to do it is just:
ul li:after {
content: url('../images/small_triangle.png');
}
Try this:
ul li a:after {
display: block;
content: "";
width: 3px;
height: 5px;
background: transparent url('../images/small_triangle.png') no-repeat;
}
You need the content: ""; declaration to give your generated element content, even if that content is "nothing".
Also, I fixed the syntax/ordering of your background declaration.
For IE8 support, the "content" property cannot be empty.
To get around this I've done the following :
.ul li:after {
content:"icon";
text-indent:-999em;
display:block;
width:32px;
height:32px;
background:url(../img/icons/spritesheet.png) 0 -620px no-repeat;
margin:5% 0 0 45%;
}
Note : This works with image sprites too
I think your problem is that the :after psuedo-element requires the content: property set inside it. You need to tell it to insert something. You could even just have it insert the image directly:
ul li:after {
content: url('../images/small_triangle.png');
}
ul li + li:before
{
content:url(imgs/separator.gif);
}
My solution to do this:
li span.show::after{
content: url("/sites/default/files/new5.gif");
padding-left: 5px;
}