This one is probably a cinch for someone who knows CSS better than I do.
I am trying to create a CSS layout that has a number of elements I'd like to arrange like tiles. Each tile will be the same width (though different height), so will naturally arrange themselves into columns, as shown in here:
http://jsfiddle.net/SVzWh/
I'd like to know how to make every element in the same row be the same height. I do not know what that height will be, as the content of the tiles is (somewhat) dynamic. Ideally, the tiles would flow as shown in the fiddle so that there would be more columns on a wider screen, fewer on a narrower one. There could potentially be dozens of tiles.
Here is the code shown in the fiddle:
A spot of HTML:
<ul>
<li class="e">Element 1</li>
<li class="e">Element 2 Taller item</li>
<li class="e">Element 3</li>
<li class="e">Element 4</li>
<li class="e">Element 5</li>
<li class="e">Element 6</li>
<li class="e">Element 7</li>
<li class="e">Element 8</li>
</ul>
And a wee bit of CSS:
.e {
display: inline-block;
border: 1px solid black;
margin: 5px;
padding: 3px;
width: 120px;
}
Look into JQuery masonry, it's a JQuery plugin that does what you are looking for.
Thinking about your problem, I thought that jQuery would certainly be the way to go. I did a little bit of searching, and found the following:
http://css-tricks.com/equal-height-blocks-in-rows/
From a cursory look, it does seem like it will help you achieve your goal.
I ended up using a slightly modified version of this JS script:
https://www.assembla.com/code/raysafedemo/subversion/nodes/WebSite/Scripts/jQuery.equalHeights.js?rev=107
written by Scott Jehl, Todd Parker, and Maggie Costello Wachs
Related
Complete HTML/CSS newbie here. This question came to me when I was editing HTML and tried to change a specific list to display as inline but did not want to affect every other list on the page.
I created a class to separate the list in question, the HTML/CSS is below:
li.shortcut {
display: inline;
margin-right: 10px;
}
<p>To navigate faster click on these shortcuts.</p>
<ul>
<li class="shortcut">Shortcut 1</li>
<li class="shortcut">Shortcut 2</li>
<li class="shortcut">Shortcut 3</li>
<li class="shortcut">Shortcut 4</li>
<li class="shortcut">Shortcut 5</li>
</ul>
Is there a more efficient way to achieve the same thing? I am following a book but it is slowly becoming outdated so I am wondering what would be the current standard way of writing this if it already isn't.
When you want specific changes to children, think id or class on the parent.
ul.menu li { display:inline; ... }
and
<ul class=menu><li>...</li>...</ul>
try use CSS :nth-child() Selector like this
li.shortcut:nth-child(2) {
display: inline;
margin-right: 10px;
background-color:green;
}
<p>To navigate faster click on these shortcuts.</p>
<ul>
<li class="shortcut">Shortcut 1</li>
<li class="shortcut">Shortcut 2</li>
<li class="shortcut">Shortcut 3</li>
<li class="shortcut">Shortcut 4</li>
<li class="shortcut">Shortcut 5</li>
</ul>
or use another way you want source
I know this should be a stupidly easy topic, but I'm confused and I spent way longer than I should trying to understand this example that my professor gave us.
From what I understand, the rules are supposed to be that you go first for inline css, then document css, then external css, and then priority. The priority was from what I thought 100*IDs+10*Class+1*Element reference.
Here is the code that's really confusing me below:
<div id="id1">
<ul>
<li class="c1" id="id2">Item 1</li>
<li class="c2 c3">Item 2</li>
<li class="c3">Sublist:
<ul>
<li class="c1">Subitem 1</li>
<li class="c2">Subitem 2</li>
<li class="c2" id=”id3”>Subitem 3</li>
</ul></li>
<li>Item 4</li>
</ul>
<div id="id4">
<ul>
<li id="id5">One thing</li>
<li id="id6" class="c2">And another thing</li>
<li id="id7" class="c1">A third thing.</li>
</ul>
</div>
</div>
<style>
div > li
{
color: yellow;
}
.c2
{
color: red;
}
ul li+li+li
{
color: green;
}
#id1, #id4
{
color: orange;
}
#id7
{
color: blue;
}
</style>
In the above code though, item 2 is red, sublist(+subitem1) are green, etc. How is that possible? Why isn't everything coming out orange? Shouldn't the #id1 style be applied to everything automatically since it is the only one with an ID specifier(and everything is a child of div with id="id1"?
The priority formula you wrote is ok if you have two rules to same element.
In css child element inherits from parents the colors, like in your example.
If new rules, despite having a lower specificity number, is applied to child, this override the inheritance.
Anyway read this: https://css-tricks.com/specifics-on-css-specificity/
An element's style overrides it's inheritance.In cases when a style was not defined we will prefer inherited value over default.
There is misunderstanding.
It did orange at first place to all tags .but later as some of the tags are defined different according to css, then it changes to specified color that you mentioned in css.
For CSS types:
http://webdesign.about.com/od/css/qt/aatypesofcss.htm
edited.
I have a list:
<ul>
<li>Number 1</li>
<li>Number 2</li>
<li>Number 3</li>
...
</ul>
All the <li> are floating. I need the height of the <ul> box. If I remember correctly this is not valid:
<ul>
<li>Number 1</li>
<li>Number 2</li>
<li>Number 3</li>
...
<hr class="clear" />
</ul>
.clear {
clear: both;
}
How can I do this? The number of items in the list can be different so I can't use fixed height.
Good options to contain the floats:
Add overflow: hidden to the ul.
Use clearfix.
This isn't a direct answer to your question, but as an alternative could you consider using display:inline-block? These days I just use that instead of float where possible, as essentially most of the time it can achieve the same sort of objective without the total hassle of making containers properly contain inner floating elements and having to clear them all the time.
test it:
ul { overflow: hidden; }
li { float:right; display:block; }
add class to your elements, don't do this for all elements.
Here, i am presenting, one of the easiest way to handle this kind of situations.
Float left always have some reaction and not good to use if we have some alternative of it.
The Alternative is :
li { display:inline-block; }
No need to add extra code like float:left and overflow:hidden :)
I'm designing a navigation bar as shown in image below (a) with the following code:
<ul>
<li class="unselected">Step 1</li>
<li class="selected">Step 2</li>
<li class="unselected">Step 3</li>
<li class="unselected">Step 4</li>
<li class="unselected">Step 5</li>
</ul>
I want to have one background image for unselected steps (d) and one for the selected step (c). For simplicity let's assume Step 1 and Step 5 use the same background as well.
I want to adjust the button background in HTML only with a class name.
The question is how can I achieve the result with CSS? I just want to know how background of two neighbor elements can overlap each other?
Edit: the steps are links. the background is a transparent PNG file preferably only containing the blue or gray shape and its border.
Answer: http://jsfiddle.net/morrison/99LhB/
Notes:
Click-boxes will be messed up on diagonals. I just realized that this will always be the case. I'd decrease the width of the arrow if I were you to help avoid this issue. I would also add a hover state which would help clarify which one you are hovering on. If they aren't hyperlinks, this doesn't matter: feel free to remove those css rules.
HTML simplicity makes for CSS complexity in this case. There are less classes to worry about, but now we rely on CSS selectors. I would personally choose this way over the other, but that's a personal choice.
There's only one image. Uses a CSS sprite to accomplish this. It also speeds up the webpage a little.
Shows how it looks for all 5 steps.
You can do this. what you want to do is use a negative margin.
.someclass {
margin-left: -5px;
}
That should overlap the each of the elements (if applied to all li objects).
They can't overlap only the background, but html element might be stacked. However I'd recommend such a solution only if you have no other.
In your visual example, I guess that must be something like that :
Html :
<ul>
<li class="before_selected">Step 1</li>
<li class="selected">Step 2</li>
<li class="after_selected">Step 3</li>
<li class="unselected">Step 4</li>
<li class="unselected">Step 5</li>
</ul>
CSS :
.unselected {
background-image: url('all_grey.jpg');
}
.before_selected {
background-image: url('left_grey_right_blue.jpg');
}
.after_selected {
background-image: url('left_blue_right_grey.jpg');
}
.selected {
background-image: url('all_blue.jpg');
}
Can anybody give a reference or is it possible to create a menu entirely depending on
CSS and not a single bit of javascript?
The Requirement is a dropdown menu, which can have many children ( submenu ).
Will anything if created like this will be cross browser compatible?
Any help on this topic will be appreciated!.
EDIT
Thanks for all your inputs one more doubt
Can this be implemented rather than using ul li
say div span combination as that may help me achieving a menu which won't change my current html structure!
The trick is the :hover pseudo-class.
<ul class="menu">
<li>
Menu Item 1
<ul class="submenu">
<li>Submenu 1</li>
<li>Submenu 2</li>
</ul>
</li>
<li>
Menu Item 2
<ul class="submenu">
<li>Submenu 3</li>
<li>Submenu 4</li>
</ul>
</li>
</ul>
Ok? So your entire submenu has to go inside the <li> of the main menu item it corresponds to. Then for the CSS:
.submenu { display: none; }
.menu>li:hover>.submenu { display: block; }
Do a bit of styling, and job done.
Edit: For another layer of menus, it's really simple. Use this CSS:
.menu li>ul { display: none; }
.menu li:hover>ul { display: block; }
Note that I've replaced .menu>li:hover with .menu li:hover. That tells the browser to find all li elements below the main menu (not just immediate descendants) and show their submenu when hovering. I've also got rid of using the submenu class because it's not really needed if you're basing the CSS on descendants. This will let you add as many levels as you want.
Check this site : http://www.cssplay.co.uk/menus/ which have a lot of different menus with CSS only. A reference.
Check this out: http://www.cssplay.co.uk/menus/final_drop.html
See if this helps http://www.howtocreate.co.uk/tutorials/testMenu.html
http://www.texaswebdevelopers.com/blog/template_permalink.asp?id=129
It is certainly possible to do drop-down menus in CSS only, and many sites are now using it.
What you won't get (yet) with CSS are any animated roll-outs, etc - the menu will just toggle between visible and hidden. If you want animated roll-outs, jQuery may be a better option. That said, CSS animation does exist. It is only implemented in one or two browsers, but you could add it to your stylesheet anyway; it won't break browsers that don't support it; they just won't get the animation.
Cross-browser compatibility for CSS menus is relatively easy, as long as you ignore IE6. IE7/8 can be made to work without too much fuss, but IE6 is badly broken for virtually all CSS-only menu techniques. If at all possible, try to avoid having to support IE6. Its an old browser, and really needs to be left to die in peace.
Others have already provided links to some good examples, so I won't repeat them here.
I have just finished developing a CSS Menu for mobile devices, using absolutely ZERO Javascript. Basically, by applying the tabindex="-1" attribute to anything you want, you allow that element to react to the :focus CSS property without actually being part of the tab order (so you can't reach that element by tabbing through). Applying this to the currently accepted solution:
<ul class="menu">
<li tabindex="-1">
Menu Item 1
<ul class="submenu">
<li>Submenu 1</li>
<li>Submenu 2</li>
</ul>
</li>
<li tabindex="-1">
Menu Item 2
<ul class="submenu">
<li>Submenu 3</li>
<li>Submenu 4</li>
</ul>
</li>
</ul>
I removed the <a> tags (because now our drop-menus are CLICKABLE, we insert the tabindex on whatever we want to click on and the CSS gets changed to this:
.menu > li:not(:focus) > .submenu { display: none; }
Check out this Codepen for my Mobile Menu:
NO javascript
Responsive
Stylable
HTML Hamburger menu symbol!