Table-like layout with two inline-block elements side by side? - html

I am building a web page that displays user information. It looks like this:
As shown in the colored legend, the form contains a label and an ordered list. CSS has been used to give both display: inline and make the list appear as a comma-separated list of group names. Here's the relevant HTML fragment:
<label>Group membership</label>
<ol>
<li>domain users</li>
<li>denied rodc password replication group</li>
</ol>
The problem
The form's width as a whole is unknown (it's fluid). The label has a fixed width in order to support right-aligned text, but the ordered list is free to consume the rest of the available space horizontally.
However, this is what happens when the list of groups becomes large:
The list needs more space than is available horizontally, so it moves down and appears detached from the label and the label/display element alignment goes out the window. This looks really bad.
What I want to achieve
The list should expand downwards as necessary, but it should remain anchored next to the label (as would happen in a table-based layout where the two cells would have vertical-align: top).
Is there a CSS technique that will allow this easily? What would be the least invasive method to achieve the goal? There are tons of forms styled in the same manner throughout the app, so radically changing the CSS could easily impact some other form and for this reason would be impractical.
Surgically targeting the HTML for the list is possible, so feel free to recommend an alternative if that would help.
Here is a fiddle of a mockup with all the relevant styles that you can use as reference.

Instead of using inline-block, float that particular label to the left, and make the list block with a margin-left – see http://jsfiddle.net/8tx24/1/
(I made the LI inline as well, because as inline-block the long value in the second LI might make it break into a new line, which looks kinda weird. But if you want that behavior, you can keep your inline-block.)

Related

Align UI elements vertically in (Materialize) CSS

I want to create a UI with "lots of controls", that are somewhat densely packed together vertically. I'm currently using Materialize which by default makes horizontally stacked forms look quite nice, but vertically stacking different types of UI elements looks terrible by default. An example:
In this example I would like the buttons to be aligned with the box of the dropdown menu, or for the label above the dropdown to float above the invisible upper line that the buttons are aligned to. But my question is not about this specific case, I show this to illustrate a problem I'm generally having with Materialize in this type of UI.
It would be possible to specify an exact number of pixels to every element class's margin that would force things to be aligned. But then it seems I'm kind of fighting against the defaults every step of the way.
My question: How to make good looking vertically aligned UI elements?
(It doesn't have to use Materialize if some other CSS framework solves this much better.)

horizontal align images html

First off, i'm not really a good coder. I'm an IT but more of an infra guy but i do understand concepts about coding and maybe a bit of a good grasp about it. I am working with my website and it's under construction using wordpress. In my homepage, i plan to do it simple as it is and decided to use the page builder and use text or HTML (or any language) to maximize it. I hope some one can help me. I would really appreciate it.
Here it is:
homepage
Those images have onmouseover style and was able to do it.. the thing is i can't arrange it horizontally. :( and unable include arrow so they can move left or right to see each images :(.
I know i can also do the same on the icon part the moment someone help me about the concept i wanted.
Your question is pretty ambiguous as to the specific context of the solution.
However, in general the reason why things don't align horizontally when rendered on screen in a browser, is that most elements (including the popular <div>) have a default styling of display: block; which makes it take up the full width of its parent item if the parent itself has the same styling (cascading of this is a different discussion).
The general solution to this is to define the widths of the elements. And they will be placed on the same line to the extent that the widths of the elements allow for more than one to appear on the same line.
One way to solve this is to have elements widths defined in some way. This could be by applying a class with a width: 25%; for example. This would allow for 4 elements with the same width to fit on the line.
Alternately you can also set the display property value of the elements you want on the same line to inline-block. This will make those elements take the width of it's content (unless the content has no width specified). This will cause the elements to flow along the horizontal line like text would (it will re-flow on the resizing of it's parent element), until there are no more contiguous items containing the inline-block display property.
Since your description also showed carousel style navigation for these rows of items, it may be that these are not the full solutions you are looking for.
If you are using the Bootstrap framework, there is a built-in carousel feature which you could use to contain these horizontally aligned elements on separate "pages" of the carousel. Making this solution fully responsive is another challenge altogether.

Unordered list within div tag does not display outside the enclosing div

I have an unordered list held within a div tag.
I have a tree like structure of list elements containing additional lists e.g.
<ul>
<li>
<ul>
<li>
</li>
</ul>
<li>
</ul>
When i hover over a list element that contains a sublist the sublist displays as a popup within the containing div element. This list can be up to three layers deep which presents a problem. The width i have to display my containing div is limited (170px width/400px height)so i'd like the pop up list elements to extend beyond the containing div however I'm struggling to get this working.
Basically I'd like the vertical scroll bar to be present but the width scroll bar hidden. Overflow on the width should extend outside the containing div. I've tried variations on overflow-y/x but I can't seem to get a balance that does what I need. i also haven't been able to get the pop up elements to extend outside the containing dev.
jsfiddle below to provide an example. And an image of the issue below:
http://jsfiddle.net/sapatos/tvZUX/1/
The scroll effect is due to the following CSS code:
overflow-y: scroll;
If you take it out, the scroll will go away for the width.
The idea of putting a sub menu within a submenu, etc.. can be seen in this example.
You can also try this DEMO
I altered your code to reposition everything using margin-left. But to be honest, your code is extremely vast, I would suggest taking a portion of it and then working on it. My last thing I want to note is to not get too confused when you start going further into the sub menus.. it is definitely a complex thought process.
EDIT Here is the last example I can give you... I do want to caution you that this may not be exact in every browser and there may be some better way to positioning everything. Here it is:
DEMO
This does however become much harder when the contents inside of the li tags are different. An example of this is when you have only one line of text vs two lines of text, which will render the absolute positioning utterly useless. It may be easier to style these vertically than horizontally and there could be a better solution but that could entail using JavaScript or a derivative of that language.

HTML forms that expand fill all the available space

I'm rendering a form in a table with the labels in tags (left) and text inputs in tags (right of labels).
For the sake of flexibility, I'd like to write as little css as possible and have everything magically fall into place, such that:
the cells expand to accomodate the width of the longest label
the fields on the right expand to fill the whole width of the cell
I've been trying various combinations of width:100% and width:auto on these various elements but to no avail. Is doing this possible, or should I just give up and specify hard widths like width:Npx?
Not sure what your code looks like (if you post, answers are so much better...).
Anyway: cells will expand naturally to the width of the longest element if no width is specified, BUT you can't have the element expand to the width of the cell at the same time! That would make the calculation of the width impossible. So I'd recommend fixing the inner content somehow. Input fields look great when they are all the same length...
You have two options as far as I'm concerned. Either you implement a solution with tables that allows you to have fluid lengths for your labels, or you set them as fixed widths and use table-less markup. I personally see no compelling reason to choose one solution over the other, although some web developers will do almost anything to avoid using <table> elements in their markup.
That being said, this solution is quite easy if you are using tables: http://jsfiddle.net/Wexcode/VcSXU/
td:first-child {
white-space: nowrap; /* don't allow text to wrap to the next line */
}

Why do lists start outside of the containing element?

This has always bugged the hell out of me. Why are lists like this? If you set margin and padding to 0, you would expect it to align normally at the left where the text around it would be, but no. That's where the text within the list item tags begins, then it renders the bullets and/or numbers to the left of that, overlapping borders etc. Why have they not fixed this yet? Who in their right mind decided that to be the behavior for lists? You can't even specify an accurate padding or margin for the left to keep the numbers aligned with the normal text because it does not automatically move right when the number count reaches a higher level (e.g. 9 -> 10, it's now 2 digits and takes up more space at the left).
Anyways, a question: Is there any simple way (not using JavaScript, etc) to fix this issue, preferably in CSS? I'd like to make the numbers at the left still aligned to the right but still have the entire list aligned to the left with the text.
lists http://img338.imageshack.us/img338/8957/lists.jpg
I know you can achieve this using tables, but that's not really an ordered list, now is it?
Edit: Notice how the list-style-position property makes the tenth element push the text right, making it uneven. I want to move the dark blue box above right so that the left edge of the dark blue is aligned with the text around it, but I can't simply set a padding value because the amount it needs to move over changes depending on the number of items.
list-style-position http://img707.imageshack.us/img707/9277/liststyleposition.jpg
To get that effect use: list-style-position:inside;
http://www.w3schools.com/Css/pr_list-style-position.asp
Another (little old) article on the possibilities with lists: http://www.alistapart.com/articles/taminglists/
As the other poster mentioned, the default position is outside.
Styling lists is very hard to deal with cross-browser due to the inconsistency and bugs. I would recommend using either JS or a server-side script to generate a span element containing the number and style it accordingly ( using a loop and whatnot ).
Pretty sure it's impossible to style cross-browser taking IE's horrible list rendering bugs into account.