I am trying to find a CSS tutorial that would enable me to create a 4x3 grid of features like on this site http://www.ewedding.com/features.php
If anybody can suggest one it would be great! All the tutorials that I have found seem to style the entire page rather that a particular part of the page.
Thanks in advance
Decbrad
the page you link uses an UL as outer element and an LI as inner element so you have this:
<ul>
<li>Feature1.1</li>
<li>Feature1.2</li>
<li>Feature1.3</li>
</ul>
<ul>
<li>Feature2.1</li>
<li>Feature2.2</li>
<li>Feature2.3</li>
</ul>
<ul>
<li>Feature3.1</li>
<li>Feature3.2</li>
<li>Feature3.3</li>
</ul>
use a CSS definition like this:
ul{
float:left;
width: //specify the width
display:block;
}
li{
list-style: none;
display:block;
}
etc.
That said, I think a CSS table layout is better for this:
http://www.onenaught.com/posts/201/use-css-displaytable-for-layout
Related
I'm attempting to create a inline list that display an image before each list item. Currently the image appears above the list item and not on the same line.
My aim is to get the image to appear to the left of the item, on the same line so it acts like a bullet/space between each item.
This is what my current attempt looks like ...
Markup:
<ul class="list-inline">
<li class="list-inline-item"><h4>Item One</h4></li>
<li class="list-inline-item"><h4>Item Two</h4></li>
<li class="list-inline-item"><h4>Item Three</h4></li>
</ul>
Css:
ul li::before {
content: url("~#/assets/asset-1.png");
display:inline-block
}
As you can see I'm currently using bootstrap 4 and it's classes to achieve the inline list.
You are missing the h4 definition in the css as Temani Afif stated above.
CSS:
ul li h4::before {
content: url("~#/assets/asset-1.png");
display:inline-block
}
Alternatively, if you're interested - FlexBox makes this really easy and fun to do!
This site is really well put together and a great FlexBox reference:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I was wondering on what should I do to make the list align vertically to the image, as shown below:
Thanks!
EDIT:
Here's the HTML + CSS if anyone's interested:
<header>
<img src="URL" />
<ul>
<li>ListItem 01</li>
<li>ListItem 02</li>
<li>ListItem 03</li>
</ul>
</header>
CSS:
li {display: inline;}
There are a lot of solutions to achieve what you ask. This is just one possible solution, add this to your css:
header>img, header>ul>li {
float: left
}
Take a look to this example, there are some more styles than the ones provided above, but I hope it will help you understand.
I'd just format it as a table. But is your preference handling it with CSS?
Also, this is a good resource for things like this: http://www.unheap.com/media/images/bttrlazyloading/
You only need apply the next css to your li of ul
li
{
display:inline;
}
Check this for more information.
I am trying to create custom bullet listing but it doesn't display well to what I expected.
The problem is it is too close as shown in the link HERE
Suggestion will be appreciated.
Thanks
You can play with :after and :before selectors.
My suggestion it would be to go with something like this:
ul{list-style:none;}
li{padding-left:15px; position:relative;}
li:before{content:" "; position:absolute; left:0; height:10px; width:10px; background:url(path/img);}
You should probably try to specify a line-height for the <li>'s.
Like:
<ul class="custom-list">
<li>some item</li>
<li>some other item</li>
</ul>
And the css:
.custom-list li {
line-height: 20px;
}
Check jsfiddle here change the line-height and click run to see the effect...
You might also need to tweak the position of your custom bullet images, but as I said on my comment, you should provide some code example or better yet a jsfiddle to be able to help you any further...
Story short I have widgets sidebar. I style it like this:
.widgets ul {padding: 10px}
Now one of the ULs inside widgets I want to avoid padding from it, but keeping all other ULs use default padding of 10px.
So i tried to give class to children UL which I want no padding on like this
.tabs {padding:0}
I tried ul.tabs, and .widgets ul.tabs nothing seems to take effect. It still receives padding 10px. And I can't afford to do custom padding for every UL inside the widgets.
Can you please tell me what I am missing ?
The html is pretty basic.
<ul class="widgets">
<li><h2>Widget title 1</h2>
<ul>
....my widget content
</ul>
</li>
<li><h2>Custom widget 1</h2>
<ul class="tabs">
...this one I want to have padding:0..
</ul>
</li>
</ul>
Thats the html basic framework. I set padding:10px to any ul in PARENT widgets ul but I want specific custom widget to have its own custom styles, I can't do it :( in this case ul class=tabs
The "C" in CSS stands for "cascading". Learn about the cascade and you will see that your second rule is less specific than the first, so the first wins.
In general, the rule with more class selectors wins, and #ids trump most stuff.
To answer your question, adding specificity will do it.
.widgets ul.tabs {padding:0}
(assuming the .tabs is indeed on the ul like you said.)
A more specific CSS selector should override a less specific one. So your experiment with using .widgets ul.tabs should work. Is it possible that when you tested that, your browser had cached an earlier version, or some such?
Here's my sample HTML page. First I tried it the way you had it; it didn't work (as it shouldn't). Then I changed it to what is here, and it worked (in Firefox).
<html>
<style>
.widgets ul {padding: 10px}
.widgets ul.tabs {padding:0}
</style>
<ul class="widgets">
<li><h2>Widget title 1</h2>
<ul>
....my widget content
</ul>
</li>
<li><h2>Custom widget 1</h2>
<ul class="tabs">
...this one I want to have padding:0..
</ul>
</li>
</ul>
</html>
example of what dman is talking about, with your code:
http://jsfiddle.net/SebastianPataneMasuelli/8WRam/
( i think you might have missed the 's' in .widgets )
<style>
ul{margin:0px;padding:0px;}
ul li{margin:0px 5px 5px 0px;padding:0px;list-style-type:none;float:left;}
</style>
<ul class="clearfix">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
The first li contains more content than the rest.
So, I have the following problem:
problem http://img830.imageshack.us/img830/240/problemc.png
But how do I move the next row down, so it looks like that:
want this http://img440.imageshack.us/img440/9750/solutionm.png
I tried using display:inline-block; instead of float:left; for the lis, which works, but I'd still rather use float:left; over inline-block.
Any ideas on how to do this?
Solution for IE:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
The best solution is to use a little-known display style called table-cell.
I've had to do this a few times. Here's how you do it:
/* -*- CSS -*- */
ul li .wrapper
{
display:table-cell;
width:100px; /*replace here*/
min-height:100px;/* " " */
}
ul li
{
float:left;
display:inline-block;
}
ul
{
display:table;
}
...
<!-- HTML -->
<ul>
<li><div class="wrapper">my-content</div></li>
<li><div class="wrapper">my-content</div></li>
<li><div class="wrapper">my-content</div></li>
<li><div class="wrapper">my-content</div></li>
</ul>
How this works:
When the parser sees that there's a UL object, it treats it like a table instead of a list. This gives you the distinct advantage that you're beginning to /act/ like you're working with tables (but you're not!)
The rule then runs against the wrapper class -- this creates a "Table cell". We don't want to put it in the li because OTHERWISE the li will act as the table cell. This is kinda bad. the work around is that your li is actually aligned left. There's some argument whether or not is a good idea to do it this way -- this is the "Most Effective" because it forces the box model to comply. Its fugly, I know.
the REASON its bad for the li to be treated like a table-cell is that it won't wrap. The reason it wont wrap is that table-cells aren't supposed to wrap.
There is ONE other solution that might work, however I haven't tested it.
/* -*- CSS -*- */
ul li { display: inline-block; float:left; min-height:200px;width:200px; }
Its not as ugly, but it should work by making the box model force the alignment as well.
First of all: Are you sure you're using the right markup? A list generally doesn't end up to look like that.
Second. Do you know how many items you will have on a row? In your image they seem to have the same width. If you know that you can add clear:both; to the forth li (and other you may need) and force it down. This would be the only way to do it with left floating lis.
You can't do this using only float:left; the blocks just fall into place where they fit as your first example shows. If you intend for your content to always display in three columns, you could programmatically clear the float on the first item in each row.