I do understand. Tables must be used only for tabular data, not for layout in any case.
I used to write code with lots of tables, but several years ago i've found ways to replace them with more appropriate structures in every situation. Except one.
<ul>
<li>We're up</li>
<li>all night</li>
<li>to get</li>
<li>lucky</li>
<li class="last_one"><input type="search" placeholder="I'm search"></li>
</ul>
Here's the fiddle:
http://jsfiddle.net/4enMp/4/
I'm trying to make a menu here. My requirements:
The menu must fill all the page horizontally [menu width: 100%]
All the menu cells (except for the last one) should have random widths, depending on the widths of their contents [width of menu item = width of item's content]. It means it should not be hardcoded.
The last menu item (with search input) should stretch to fill all the remaining space. [last menu item fills all the space left].
The whole thing must support IE7+. It's silly. I know. But it is something I can do nothing about. Thankfully I don't have to bother with IE6.
As I've illustrated in JS Fiddle, it's pretty easy to do that with tables (though I don't claim it's 100% right, it's consistent across browsers).
I have not managed to meet these 4 requirements with unordered lists (see Fiddle above). I would greatly appreciate any thoughts of how to reach it with HTML and CSS only.
Thanks a lot for your help!
Edit: here's my desired menu design:
Your current problem seems to be with the the last li being width: 100%, which will make the li be the size of the ul, thus being pushed off the "screen".
An easy fix would be to make that li have a position:absolute;.
Live example
Edit: I'd mostly agree with Kate though. You should probably make the search separate from the ul and just float it right.
I don't understand why you need to have your input field in the same element as your menu. They serve pretty different functions. I would probably approach this by breaking the input field out of the unordered list, and just floating it right. It uses a little more HTML but totally works.
http://jsfiddle.net/4enMp/5/
ul {
display: table;
}
li {
display:table-cell;
line-height:30px;
}
Related
I am tearing my hair out on this one and it seems I am probably not searching the right terms and the google results I get seems to be general layout type of questions.
I have some data that I wish to represent in a web page. There are some 20~30 fields of different data. If I were to do it with what I know, I would so something like this(total of 3 columns and 30 rows each field is different data):
<table>
<tr><td>Field1:</td><td><input id="dataforField1"></input></td><td>Field2:/td><td><input id="dataforfield2"></td></tr>
<tr><td>Field3:</td><td><input id="dataforField3"></input></td><td>Field4:/td><td><input id="dataforfield4"></td></tr>
</table>
However I have been reading lately that div is much preferred when presenting non-tabular data. So I attempted to do this:
<div style="float:left;">
<ul>
<li>Field1</li>
<li>Field2</li>
<li>Field3</li>
</ul>
</div>
<div style="float:left;">
<ul>
<li><input id="tag1...</li>
<li><input id="tag2...</li>
<li><input id="tag3...</li>
</ul>
</div>
but my field labels are not lining up with my data input elements. Field1 seems to match input1 horizontally. But when I get to field10, it is off by a lot. I tried it without ul and li and use br after each, but I can't seem to get them to line up.
Question:
How do I get them to match if I don't do table?
I need clarification on the word "tabular". If my data were a table, it would only ever going to have 1 row. When is it okay to use table?
What do people use to line things up when they are trying to implement similar things?
Edit:
I want Field1 to line up horizontally with input tag1 and so on.
Edit2:
Added a picture to show how things are not lining up. it would be the same without li.
I would generally suggest adopting a grid system for this purpose. There are many great ones. My favorite one for web development is Bootstrap's grid. Bootstrap as a framework is amazing as well.
I will also add a quote of my comment regarding this:
... It is really recommended to only use a table when you are actually
willing to show a real table with information in it. The old way of
presenting forms in tables to achieve alignment is just a no-no these
days. Grid systems do it better and they are more responsive.
However.
The disalignment was caused by loss of relativity between the text (labels) and the input fields. As the list goes longer, the proportions are losing. This is because the height of the text is not the same as the height of the input field.
CSS:
li {
height: 40px;
}
This makes sure all <li> elements will have the same height. Of course it's recommended to apply the style to a class and not directly to an element, but this is just for the sake of the solution.
CodePen: http://codepen.io/arielweinberger/pen/jqveoX
I haven't managed to re-produce what you said you are experiencing.
For labels and inputs you should use, you guessed it: labels and inputs. Put each pair under the same parent, make them inline-blocks with a fixed width and you're good to go. No need for external tools, this is as basic as it gets.
label {
margin-right: 10px;
width: 120px;
display: inline-block;
}
<div style="float:left;">
<ul>
<li><label>Field1</label><input/></li>
<li><label>Field2</label><input/></li>
<li><label>Field3</label><input/></li>
<li><label>Field4</label><input/></li>
<li><label>Field5</label><input/></li>
<li><label>Long Field Name</label><input/></li>
<li><label>Field6</label><input/></li>
<li><label>Field7</label><input/></li>
</ul>
</div>
I'm having an issue where a drop down menu's children are expanding and repositioning to come outside of the parent's bounds. The concerned element is the menu item "BEHANDLINGAR"'s drop down list in IE9+.
Be warned that I am very much a junior developer; this might be apparent from my code. I don't want to discourage general advice, as I do need it, but please focus on the problem at hand first and foremost.
The site is: www.skinwellnessofsweden.com/hudvard.html
The issue is because of the ul style. The style applied the all the ul elements in general. You have to apply it for only the specific child list like the following.
ul.clearfix {
padding-left: calc(50% - 480px);
}
Hope this will fix the issue.
I think this has been asked a million times, but with different definitions of the problem. And it's probably either easy to fix or a long lasting wish from web designers and still unanswered. note: I did do a search on css float on stack, but although some look like my problem, so far I haven't found a similar one.
What I'm trying to do will become clear if you see the attachment. I want them in rows of 3 neatly stacked under each other, where the height of each <li> item is different. In other words: the heighest <li> element in a row is leading, and the next row of items should wrap under this one. Right now the items on the new row bump into the content of a longer list item at the beginning, preventing the first item of the new row to fully float to the left.
Please note that I don't want to solve this with php or js, I think a pure css solution must be out there... Because with php, I could of course add a class like "new-row" to it and apply a clear: both to it and it will wrap. If I want to do the same thing in CSS then I can't without using poorly supported :nth-of-type stuff. Besides, the content block is variable in width, so sometimes there are 3 on a row and sometimes maybe only 2 or up to 6.
Who can help?
Use "display:inline-block" for LI, not "float:left"
I'm happy to be proven wrong, but I think you have to use tables for this, or a display: table-* construct. (I personally would go with tables - this is somewhat tabular data.)
Only table rendering can resize a whole row according to its tallest member's height.
It's the only way I can see to do this without JS or PHP.
use jQuery.
Pretty sure this is impossible using just CSS. Unless you're going to use absolute positioning and forget floats all together.
I hope I am wrong though! :)
(Would love to be able to do this w/ css)
In this fiddle, you can see that the horizontal rule does not go all the way across (under the number). I want it to. I have tried using list-style-position:inside;, however this means that I cannot force the number to appear in the correct position (because of the floated left image). Is there an elegant way to do this using CSS, or do I have to resort to generating the numbering myself and then styling appropriately?
You seem to be well aware of the list-style-position property, so you should know why the horizontal rule will not span all the way under the bullet/number. The list has a padding on the left, pushing the list elements to the right. Their contents won't go out of their space :).
Here's how I got over the issue: http://jsfiddle.net/J4b6Y/14/
[EDIT]
Fix for webkit browsers: http://jsfiddle.net/J4b6Y/16/
[EDIT2]
Works in all browsers AND has valid HTML o_O http://jsfiddle.net/J4b6Y/37/
[EDIT3]
OK, here's another one... http://jsfiddle.net/J4b6Y/39/
UPDATE 4
Seems like Update 3 worked well on webkit but not FF... so it's time to use real CSS power.
http://jsfiddle.net/J4b6Y/122/
UPDATE 3
Now what about this
http://jsfiddle.net/J4b6Y/105/
UPDATE 2
http://jsfiddle.net/J4b6Y/48/
UPDATE
Try this if it works for you
http://jsfiddle.net/J4b6Y/33/
I would suggest that you remove the hr tag and the floating image properties.
If you cannot set the image with css background, you can do the following:
HTML
<li>
<img src="" alt="test"/>
<p>Test</p>
</li>
CSS
li{
border-bottom:1px solid black;
list-style-position:inside;
}
li p{
display:inline-block;
}
Also, if you can remove the p tag, you will save few bites.
From the other answers to the question, it would seem that whilst there are ways of accomplishing this with CSS, there isn't an elegant way. As such, my prefered solution is to generate the numbering in the HTML and style appropriately. This can be trivial to do if the page is generated as a result of server side scripting.
I shall keep an eye out for more elegant ways of solving this with CSS and update this question if I find any.
See the picture above. Each navigation tab needs to have 2 pixels separation on either side and line up exactly with the header image on the edges.
Now they would like to introduce a 5th navigation tab (and possibly a 6th). Is it possible to code this in a way where you could stick a 5th or 6th tab in there and everything would resize appropriately with lists or tables or some other solution? Still keeping the 2 pixels separation and lining up with the edges exactly? I wasn't sure if it was possible or you would just have to define the widths each time for each tab based on the math involved to line it all up correctly flush with the edges.
I think the best way is to emulate table behavior with CSS. So you can use a list, and still get table behavior.
ul {
display:table;
}
li {
display:table-cell;
}
Here is a demo displaying this with CSS and proper markup. Here's a demo of how it looks with an actual table. I'm not certain on IE<8 support for this CSS, so it may be something to be aware of.
UPDATE: Confirmed: This is not supported on IE6 or 7 natively. You may be stuck with tables or hard-coded widths if you want to support those browsers. There may be a javascript fix to support these display values but I'm not aware of it.
EDIT: I realized my demos were sloppy, so I made another that actually addresses your point about the margins, it uses the :first-child selector to remove the margin from the first link, giving the evenly distributed appearance. http://jsfiddle.net/wesley_murch/pe6wd/3/
It may not be easy. One of the requirements in most implementations of css horizontal menu type displays is setting a fixed width for each element. If you try and do percentages, things start to come apart. However, any thing is possible.
Have you tried looking at LESS or SASS so you can do simple math in CSS?