I'm trying to create an unordered list spanning over multiple rows that is always centered and where I can set which child breaks into a second row, for example -
link | link | link | link
link | link | link | link | link
(where I set the list to clear for a second row on the fifth child element)
Going for an inline display solution to center the elements, I couldn't find a way of clearing them so I switched back to having a float based list. While this easily handles clearing, I find it difficult to center multiple rows -
.container {
width: 100%;
overflow: hidden;
}
ul {
list-style: none;
position: relative;
float: left;
display: block;
left: 50%;
}
li {
position: relative;
float: left;
display: block;
right: 50%;
}
li:nth-child(5) {
clear: left;
}
With this style, the list loses center alignment as soon as a second row is made.
Ideas?
Solved using inline approach and nth-child / after pseudo attributes - http://jsfiddle.net/2LULR/
To center multiple floats rows you have to center them manually. So I think the best solution is using display: inline and center them by setting the parent element to have a text-align: center.
And to clear or make a new row, I would do something like this:
li:nth-child(5):after {
content: "";
display: block;
}
Related
I have a page with 2 divs, inside a single container div.
I would like to use the left hand side div as a menu, containing various links or text, and to scroll up and down (vertically) by itself.
The second div, shows some content. Usually a table of data, but it could be text too. This div must be able to scroll both horizontally and vertically according to content.
I have some javascript that populates the content for both, but for simplicities sake, I will only show my css and html:
-------------------
| | |
| 1 | 2 |
| | |
| | |
-------------------
The issue I have is in IE (I am running IE9), the second div drops off the view, and goes into a second row, instead of being aligned within the the container div. This layout and css works fine in chrome and firefox.
Any ideas on how to make this consistent within IE9?
IE9 does not support flexbox, so IE9 is doing what it should, according to its own limited knowledge: it's treating #browser-view as a block-level element without a width set, so it's dropping it to the second row.
You'll need to specify a fixed width on #browser-view like you did with #browser-list and also need to affect its display from its normal block default (you could float these divs, make them display: table-cell, etc. etc.).
Well, after a bit more research and some testing, I have decided to move away from flexbox in my CSS just so that I can support IE9.
Here is an updated cross-browser testbed, that appears to do what I want and works on all browsers so far.
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
position: relative;
z-index: 1;
}
.Container:after
{
content: '';
clear: both;
display: block;
}
.Container
{
position: absolute;
width: 100%;
height: 100%;
}
.Container > div
{
height: 100%;
}
.browser-view
{
background-color: purple;
overflow: auto;
}
.browser-list
{
background-color: orange;
float: left;
overflow: auto;
width: 250px;
}
I am trying to setup a form such that:
All inputs will be horizontally aligned, even when they have no label.
Inputs will be vertically aligned within their row for when the label wraps.
The inputs will stretch to fill the remaining space (or squished)
The submit button will fill an entire row.
I have achieved the first and fourth requirements but I am having trouble with making the inputs fill the row and be vertically aligned.
Here's my progress so far:
http://jsbin.com/kozozabo/3/edit?html,css,output
The LESS:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
#narrow-form {
width: 300px;
overflow: hidden;
padding-right: 0.5em;
}
#wide-form {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin-left: 300px;
}
.row {
#label-width: 100px;
width: 100%;
overflow: hidden;
label {
width: #label-width;
float: left;
display: inline-block;
}
.no-label {
margin-left: #label-width;
}
input, select {
/* Trying to make these aligned to the right of
* their respective labels filling any remaining
* width.
*/
display: inline-block;
}
button {
width: 100%;
}
}
I tried giving the inputs absolute positioning with a left margin of the same width of the label but that didn't work.
Okay I have come up with a solution that I am happy with. It does involve some table abuse unfortunately.
I have only tested this in Chromium.
http://jsbin.com/kozozabo/5/edit?output
I set the form to display: table, each .row to display: table-row and the labels, inputs, selects and buttons to display: table-cell.
This made everything line up and fill all available space.
I then added two new classes intended to be affixes to the .row class, this is where the real table abuse begins.
.no-label - With the intent of "skipping" the first psuedo-cell. To accomplish this I defined it as such:
.no-label:before {
content: "";
display: table-cell;
}
Essentially inserting a hidden cell, forcing the subsequent inputs to be in the second column.
.full-width - With the intent of making it's contents the full width of the "table". To accomplish this I defined it as such:
.full-width {
display: table-caption;
caption-side: bottom;
}
A table caption spans the entire width of the table. I know I am only going to do this to the button so I forced it to be at the bottom with caption-side.
It would have been better to just define the DOM as a table but I didn't want to reprogram the javascript that was setting up this form. I always wouldn't get to of played with css, all be it in a menacing manner.
I am trying to make a website responsive; I am almost done with it, except that when I make the window smaller, the nav links overlap the logo on the left. Look at it here
How do i make the nav bar move to under the logo when i re-size the window?
Thanks for any help
I had a play with your code and the first thing I spotted was the two #nav id's.
You should only have one unique id per page.
However, your main issue is the position fixed of the navigation items.
This is causing the nav to always just march on over the logo.
Position fixed ignores the document flow and places it wherever you put it.
You need to get the navigation back into the document flow
Change your nav items to relative and meddle with the top positioning.
You should place these in a new media query relating to your break points
You will also need to remove all those positioning styles.
That should get you half way there.
I would help more but I've just been given a rum and coke so best to stop now.
Steve
Either move the logo down, or create some space above it and put the links in said space.
You have to change many of the position attributes along with the float properties - I played around with the CSS on the site, and this is what I changed:
#topBar {
height: 300px;
}
.BODYcontainer {
margin-top: 300px;
}
.container .columns {
float: none;
}
.container .columns.logoBox {
left: 0;
position: relative;
display: block;
float: none;
margin-bottom: 50px;
}
#nav {
position: relative;
float: none;
top: 0;
left: 0;
right: 0;
text-align: center;
display: block;
}
#companyNav {
float: none;
position: relative;
top: 0;
}
I have a div that contains two ul. I'd like to position the first ul on he right and the second ul on the center.
I cannot use absolute positioning since it makes me other problems in nested elements and in mobile view.
This is what I've done:
<div class="w">
<ul class="right"><li>a very very very long text</li></ul>
<ul class="center"><li>center</li></ul>
</div>
.w {
text-align: center;
display: inline-block;
width: 100%;
}
ul {
list-style-type:none;
margin: 0;
padding: 0;
}
li {
float: left;
}
.right {
float: right;
}
.center {
display: inline-block;
}
you can see jsfiddle here: http://jsfiddle.net/mF7XR/
The problem is that the centered ul is aligned to the middle between the left and the start of the right ul (see the example). Therefore it is not correctly centered. How can I center correct the second ul?
I am not sure whether you are good to go with javascript. Anyway, I did some work on it. Please have a look.
javascript
//Added Id to ul.center as "center"
function resize(){
var width = document.body.offsetWidth;
var center = document.getElementById('center');
center.style.marginLeft = (width/2) - (center.offsetWidth/2);
}
//Call the above function on "resize" and "load" events.
CSS
.center {
display: inline-block;
float:left;
}
Working Bin
Define the Width of centered elements then only you could get what you want. You could also define the margin as follows...
margin: 0 {number greater than right floated element}px 0 {number greater than left floated element here you have only two elements so place here 0}px;
How about position:relative? Then you can position it anywhere without it causing problems in nested elements and mobile view.
http://jsfiddle.net/mF7XR/4/
This solution uses no absolute positioning. Tested on Win/Chrome.
Change the .center to
.center {
display: inline-block;
position: relative;
width: 100%;
top: -20px; /* move up */
}
and add this rule
.center li {
float: none;
}
jsfiddle
Update
If your content is not known, then you need JS (or jQuery) to set the offset relative position.
Initially I thought about using a different markup, but your restriction on absolute positioning pretty much kills this idea.
jsfiddle
It would be interesting to know why you cannot use absolute position. Maybe the root of your problem lies there.
I have a list of items in an unordered list inside a div with overflow hidden. The items in the list are represented by boxes with text content and a border round them. It can be a long list of useful, but not essential information, that can be hidden if used on a smaller device.
If some items in the list overflow I would like to set the entire item that overflows as hidden, not just part of it.
currently the list can look like this when clipped:
---------
| A |
| |
---------
---------
| B |
Since B overflows only half of it is displayed. I would like only A to be displayed if this occurs.
The items do not have to be in an unordered list, can be in whatever. Is it any way to do this with only html and css?
I am able to do it in jQuery, but I just wonder if there is a css way to do it.
It is possible with the "Flex" property. See: http://jsfiddle.net/dsmzz4ks/
In the fiddle, make the window display width smaller. You will see whatever list items that don't fit are removed completely until the window gets bigger again.
It is a bit hokey in that it is adding the bullet using the li:before clause but it works nonetheless.
CSS:
.box {
width: 30%;
float: left;
margin: 8px 16px 8px 0;
position: relative;
border: 1px solid black;
padding: 15px;
}
ul {
height: 90px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
overflow: hidden;
padding-left: 15px;
justify-content: space-around;
margin: 0;
}
li {
display: block;
width: 100%;
padding-left: 10px;
position: relative;
}
li:before {
content: '\2022';
position: absolute;
left: -5px;
}
The key properties here is that display: flex uses flex box on the parent. flex-direction: column makes sure that the order of elements is vertical, while flex-wrap: wrap wraps any overflowing element to another column. This can be shortened to:
display: flex;
flex-flow: column wrap;
If all children elements are behaving in such a way that they are covering the entire width of their parent, then that means any overflowing elements are wrapped into another column, effectively being hidden from view and avoiding any clipping.