I am getting a little confused by this.
Currently have a table, with two columns.
On the left we have a description, and on the right a fact.
The left hand side is usually one line, but might wrap over onto two.
The right hand side is often 3, 4 or more lines.
How can I arrange this using CSS instead of tables.
Obviously the two sides have to line up for each row of information.
desc1 fact 1
desc2 fact 2
more to fact 2
desc3 fact 3
etc.
Like this?
HTML
<ul class="sublist">
<li>Item 1</li>
<li>Description 1</li>
</ul>
<ul class="sublist">
<li>Item 2</li>
<li>Description 2 / Description 2 / Description 2 / Description 2</li>
</ul>
<ul class="sublist">
<li>Item 3</li>
<li>Description 3</li>
</ul>
CSS
ul.sublist > li {
display: inline-block;
max-width: 150px;
vertical-align: top;
}
Demo
Related
I'd like to position these three list items so that they both float to the right of the page and item 1 sits directly above items 2 and 3.
This is the html bit:
<div class="header-text">
<div class="header-contact">
<ul class="header-contact-list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
</div>
Currently, they all float to the right as I've added float: right to list elements (interestingly, item 1 is the farthest right, then item 2, then 3), however, they are still on the same line. What am I missing? I cannot cheat my way out of this with padding-right as I will need to change its colors as well.
Not sure if I understand your question, but if you want to align the list to the right with item 1 on one row and item 2 and 3 on the next row, this is how you could do it.
Add display: inline-block; to items 2 and 3:
.header-contact-list li:not(:first-of-type) {
display: inline-block;
}
and add float: right; to .header-contact
I'm trying to show a horizontally center-aligned Foundation 6 dropdown. I'm attempting to use a dropdown as a tooltip, because it better fits my needs and allows for rich HTML to be inserted into it, where the tooltip does not.
Foundation 6 dropdowns can be positioned by adding classes .top .right .bottom .left. These classes are parsed by the Foundation core Javascript and then the element is given dynamically calculated top: and left: attributes.
Because of this, adding any left, or transform: translate properties to the element are voided by the fact that Foundation takes this into account when dynamically calculating the positioning attributes.
Any ideas short of writing a different class into the javascript?
Use text-center.
<ul class="dropdown menu" data-dropdown-menu>
<li>
Item 1
<ul class="menu text-center">
<li>Item 1A</li>
<li>Item 1b</li>
<li>Item 1c</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
I'm building a footer navigation with four columns:
<ul>
<li>Top Level 1
<ul>
<li>sub 1a</li>
<li>sub 1b</li>
<li>sub 1c</li>
<li>sub 1d</li>
</ul>
</li>
<li>Top Level 2
<ul>
<li>sub 2a</li>
<li>sub 2b</li>
<li>sub 2c</li>
<li>sub 2d</li>
</ul>
</li>
.... (repreat 2 more times)....
</ul>
I'm having trouble getting the top level item and the sub items left aligned so they are all flush and aligned left. I've got them into 4 columns ok, but they look like this:
Top Level 1 Top Level 2
sub 1a sub 2a
sub 1b sub 2b
sub 1c sub 2c
sub 1d sub 2d
If needs be, I can post the CSS that I have now.
You can use flex for do that, well you can use float as well, but I like use flex, very easy. For add a new column you don´t need to do anything.
Here you have a full example to play:
http://codepen.io/luarmr/pen/waqxmY
the important things are:
1- apply a different style to the first ul and li to the others for that I add a class in the first ul. After I can use a child selector ´>´
2.- Flex require in this case add an element with display: flex. The internal element can be allocated in differents ways, we don't use any special here. This element is the first ul as well.
3.- the magic is, in the first li elements I add the property flex. This property in this context permits auto calc the width in this elements. If you put '1' this mind a single unit, if you put '2' this mind double...
ul.wrapper{
display:flex;
}
ul.wrapper>li{
flex:1;
}
add the prefixed (browser compatibility) and a few decoration.
try resetting padding-left
ul, li{list-style:none; padding-left:0}
div{-webkit-column-count: 2;column-count: 2;}
<div>
<li>Top Level 1
<ul>
<li>sub 1a</li>
<li>sub 1b</li>
<li>sub 1c</li>
<li>sub 1d</li>
</ul>
</li>
<li>Top Level 2
<ul>
<li>sub 2a</li>
<li>sub 2b</li>
<li>sub 2c</li>
<li>sub 2d</li>
</ul>
</li>
</div>
I'm developing an internal web app for my organization, written in PHP. Unfortunately, HTML and CSS are not among my specialties, so I have to teach myself a lot of the presentation side as I go.
I want to implement a basic scrolling box with some content in it. For the most part I've gotten it working. However I can't use the keyboard with IE (9, 10, 11) to scroll inside an HTML5 semantic element (section, article, nav, etc). A regular div works fine. Firefox and Chrome have no problems regardless of the element.
To be clear, the scroll bar is visible, active, and functions properly when directly manipulated (i.e. clicked or dragged). The mouse scroll-wheel also scrolls just fine. Only the keyboard arrows seems to be an issue. I could just shrug and abandon the HTML5 semantic tags entirely (having no functional use for them beyond readability), but I'd rather figure out what's wrong.
Is there something I'm doing incorrectly, or have I hit an IE bug that requires a workaround? I've tried searching/experimenting for hours and can't seem to find a solution.
CSS
.scrollable {
height: 75px;
width: 150px;
border: solid black 1px;
overflow-x: hidden;
overflow-y: auto;
}
HTML
<section class="scrollable">
IE <em>can not</em> keyboard scroll this.<br />
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</section>
<div class="scrollable">
IE <em>can</em> keyboard scroll this.<br />
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
Looks like IE has forgotten to made these new elements focusable, when they're having scrollbar(s). You can fix the issue by adding a tabindex to section tag, works at least for IE10.
A live demo at jsFiddle.
I have some nested <ul>s and I want them to be the same height: the height of the tallest one. I cannot specify the height of any <ul> since it depends on the amount of <li>s in it.
I figure I could solve this pretty easy using some js, but I am curious if this could be fixed using CSS.
I created a simple fiddle to demo: http://jsfiddle.net/vnFLK/2/
<nav>
<ul>
<li>Li 1
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
<li>Li 2
<ul class="green">
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
</ul>
</li>
</ul>
</nav>
The <ul> with green borders is supposed to determine the height of the root <ul> and then I want the sibling <ul> to get the same height. The green <ul> is pushed 200% to the right just to be clearer.
This is a simplified representation of a navigation where a <ul> is a submenu that is going to be pulled over the parent one. Therefore they need to be the same height to prevent the parent menu being shown.
/Erik
Absolutely-positioned elements are no longer part of the document flow - they act as a new context. Therefore the parent element has no idea what size the child element is and cannot adjust its own size to match it.
There is no CSS solution for this. You need to use JavaScript.