So I have a menu, 4 menu points and I want to put them in a square 2x2. Is there a way to do that WITHOUT having a class for the first two and one for the other ones?
Thanks for any help :)
UPDATE:
I did mess around a little more and I'm using the flex box structure, I'm sorry for not posting this information:
ul {
-webkit-box-orient: horizontal;
}
ul li {
-webkit-box-flex: 1;
height: 44%;
margin: 3%;
}
Sure. For one, you can use floating and set the widths accordingly. See the example below, or http://jsfiddle.net/BUPX7/ for a live example.
HTML
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
CSS
ul {
width: 200px;
}
ul li {
width: 100px;
margin: 0;
padding: 0;
float: left;
}
There is a line break between div elements by default. You are apparently using some CSS to override that. You need to modify the CSS code accordingly, or select a different approach.
The simplest way, assuming ”menu points” are links, is to use
<div><a ...>link1</a> <a ...>link2</a></div>
<div><a ...>link3</a> <a ...>link4</a></div>
But if you are using some elaborated markup and wish to create the break in CSS alone, then you may need some elaborated selectors like :nth-child(3).
Related
I have a simple list, which I managed to get in a line and have background image for all items. However I want to have some of the list items(List item 3) to have a different background image. Is there a way to do this without using !important? My code is Below.
The CSS
.my-list li {
list-style: none;
display: inline;
background-image: url(../images/butn-bg.png);
}
.different-bg {
background-image: url(../images/butn-bg-1.png);
}
The HTML
<div class="my-list">
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li class="different-bg">List item 3</li>
<li>List item 4</li>
</ul>
</div>
Thanks
You just need to increase the specificity of your selector:
.my-list li {
list-style: none;
display: inline;
background-image: url(../images/butn-bg.png);
}
.my-list li.different-bg {
background-image: url(../images/butn-bg-1.png);
}
See Calculating a selector's specificity
Look my example: jsfiddle
Everything is working correctly.
Try to make more common styles, and write them as a complement changes.
Add this to your css:
.my-list .different-bg {
background-image: url(http://placekitten.com/g/200/300);
}
If you are interested, more details can be found here: get specific css styles
I have two sets of lists with headings which need to display side-by-side as in the following image:
Here's my html:
<h2>Pages</h2>
<ul class="one">
<li>About</li>
<li>Archives</li>
<li>About</li>
<li>Archives</li>
</ul>
<h2>Pages</h2>
<ul class="two">
<li>About</li>
<li>Archives</li>
<li>About</li>
<li>Archives</li>
</ul>
I can't make any changes to the html. I have to accomplish this using css only.
Please refer to the fiddle:
http://jsfiddle.net/Pxtvh/
If you could use html, I would surround each header and it's list with a
<div style="float:left">
This works, I've tried it but if you want to use entirely css, I suppose you could use the css code:
ul.two {
position:absolute;
top:0px;
left:100px;
}
This DOESN'T position the headers because they're both and they don't have individual classes so other than changing the html as above, I can't think of a solution. Also, you would have to update the "left" parameter if you want to change the width of the first list.
Like Waffle Face suggested, you can try explore using position: absolute and set left and top pixel, both for the second set of h2 and ul.
As has been noted, you cannot do this with CSS only.
Ideally, you would be able to wrap a DIV around the group of heading and list, but you've stated that you cannot edit the html.
That leaves one alternative: If you can use JavaScript, you can wrap DIVs around your header-list groupings dynamically to achieve the same effect.
Here is how you would do this with jQuery:
$('h2 + ul').each(function () {
$(this).prev().andSelf().wrapAll('<div class="grouped-list"/>');
});
Then in your css file you would float div.grouped-list left. See a working example.
I know it's not great because it uses position absolute, but here is my solution:
http://jsfiddle.net/Pxtvh/25/
h2:nth-of-type(2){
position: absolute;
left: 100px;
top: 0;
}
ul:nth-of-type(2){
position: absolute;
left: 100px;
top: 1em;
}
ul {
float: left;
list-style: none;
padding: 0;
margin: 0;
}
This will make the <ul>to float left then edit add HTML
<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
Then second one:
<ul>
<li>link 1 column2</li>
<li>link 2 column2</li>
<li>link 3 column2</li>
<li>link 4 column2</li>
</ul>
I have an ASP.NET application with contains a list of hyperlinks. After each hyperlink, there is a br tag that puts each hyperlink on their own line. I want to increase the spacing between each line. I don't want to add another br trag since that does not provide the control I am looking for. I have tried different CSS styling without any change. What CSS styling do I use to accomplish this?
For the hyperlinks you could use display:block; and margin-bottom:[some value] style/CSS properties, you wouldn't need to have your BR elements, and you would gain much more control.
You could add margin or padding to top of your BR tags eg.
br { margin:10px 0; }
If that isn't feasible, then make your hyperlinks block level and add margin or padding to top of them eg.
a { display:block; margin:10px 0; }
Using the latter method you don't require the BR tags anymore.
Remove the <br /> elements and instead give those anchor elements a display:block property.
Then use padding-top or padding-bottom or margin-top or margin-bottom to increase the space between.
i think what you are looking for is line-height:
http://www.w3.org/TR/WCAG20-TECHS/C21.html
even though this might be the better/'nicer' solution:
<ul id="mylinklist">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
and this style:
ul#mylinklist{
list-style-type: none;
margin: 0;
padding: 0;
}
ul#mylinklist li{
margin-bottom: 10px;
}
use margin-top or margin-bottom
a{
margin-bottom: 1em;
}
I'm building a navigation bar inside a ul. Most of the menu items have long titles so I really need to wrap them over a number of lines, as in the following code (I've inserted br/ where I'd like the returns)
<ul>
<li class="cell01on">Menu 1</li>
<li class="cell02">Menu2.1<br/>Menu2.2<br/>Menu2.3</li>
<li class="cell03">Menu 3</li>
</ul>
I'm trying to get the effect similar to using a table and vertically centring each row in it's cell. Is it possible to recreate the same in a ul?
thanks in advance
Giles
First of all if I read correctly that Menu 2.1 is a submenu then a cleaner could would be:
<ul class="menu">
<li class="active">Menu 1</li>
<li>Menu 2
<ul>
<li>Menu2.1</li>
<li>Menu2.2</li>
<li>Menu2.3</li>
</ul>
</li>
<li>Menu 3</li>
</ul>
Vertical alignment is generally hard to do in CSS outside tables, but have a look at:
http://www.student.oulu.fi/~laurirai/www/css/middle/
I tend to agree with Nux's answer, submenu's should be nested lists. As to your question about vertical centering: if you want things to behave like tables visually, you can simply use display: table;:
<style>
ul { list-style-type: none; padding: 0; display: table; }
li { display: table-cell; vertical-align: middle; }
</style>
u can add some styling like
li
{
white-space:pre-wrap;
width://set width here
text-align:center;
vertical-align:middle;
}
I need to show "x" number of cateogories in a menu (basically a hidden div that pop up when someone clicks on a nav menu called "Category"). No problem with the div, but I am struggling with arranging the categories in any form of order inside the div. I don't want it to be a single column list an stretch all the way down to the page, so I would like either a multi column list or something else. I hear multi column list have compatibility challenges and are difficult to deal with. What other options do I have?
Something similar to the category list at http://www.answerbag.com/
Thanks
I was writing up an answer, but this article does a better job:
http://www.alistapart.com/articles/multicolumnlists/
It covers a number of different options, including the floated method used at answerbag, and one or two that are semantically more sensible while still ordering by column instead of by row.
Not so much, no. Coding a multi column list is easy as long as you're careful about your widths and clearing floats:
HTML
<div id="list">
<ul>
<li>Cat 1</li>
<li>Cat 2</li>
<li>Cat 3</li>
</ul>
<ul>
<li>Cat 4</li>
<li>Cat 5</li>
<li>Cat 6</li>
</ul>
<div class="clear"></div>
</div>
CSS
#list {
width: 400px;
}
#list ul {
float: left;
width: 200px; /* This width should be #list width divided by number of columns */
margin: 0;
padding: 0;
list-style: none;
}
#list li {
margin: 0;
padding: 5px 0;
}
.clear {
clear: both;
}