I hired someone to implement the design of a website. He is using bootstrap 3 (which I've used before in some projects) and it surprised me that he is avoiding the use of .row class in every the grid and subgrid built (he is using clearfix to make the rows). He's code looks something like this...
<div class="container">
<div class="col-md-7">
<ul>
<li><a>item 1</a></li>
<li><a>item 2</a></li>
<li><a>item 3</a></li>
</ul>
</div>
<div class="col-md-5 pull-right">
<ul class="nav nav-tabs">
<li><i class="fa fa-users" aria-hidden="true"></i>Menu item 1</li>
<li class="shop">Item 2</li>
</ul>
</div>
<div class="clearfix"></div>
</div>
From what I've read, .row class is used to
"create horizontal groups of columns." source
"row nullifies the padding set by the container element by using a negative margin value of -15px on both the left and right sides." source
What is the impact of not using this class inside the grid structure? should I make sure he uses .row class?
thanks
From the bootstrap docs
Rows must be placed within a .container (fixed-width) or
.container-fluid (full-width) for proper alignment and padding.
You are also correct in that .row clears the gutters from the container which has a padding of 15px left and right.
.container {
padding-right: 15px;
padding-left: 15px;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
Therefore, I personally would err on the side of caution and follow the requirements set out by bootstrap. In the future, the framework could change and a strong reliance could be created upon the row class and since that is missing from your code, it would require reworking it to update versions... or optionally, you could choose to implement responsive selectors such as .col-xs- which could over or underlap the 12 column grid format.
Related
I'm trying to develop a menu where dynamically some text must have the property vertical-align:super.
It's happening that this item containing "super" text is not vertical aligned with other item.
Here the CSS code:
<style>
#menu{width:300px;height:100px;background:#ABD4E6;}
#menu ul{list-style:none;}
#menu li{float:left;background:#054664;padding:20px;}
</style>
<div id="menu">
<ul>
<li>Home</li>
<li>App<span style="vertical-align: super;">*</span></li>
<li>Contacts</li>
</ul>
</div>
How can I solved the issue?
Many thanks in advance
Elements with float: left behave in such way that they won't position themselves verticaly, no matter what vertical-align would you set to them. All li elements should not have float: left so they would preserve some specific line-height. Then you can position them together with the span, relatively to the line-height. One of the possibilities is to change the #menu li styles to this:
#menu li {
display: inline-block;
vertical-align: top;
background:#054664;
padding:20px;
}
You will also have to remember to change the HTML markup a bit. There must be no white-spaces between each opening and enclosing li tags, like this:
<ul>
<li>
Home
</li><li><!-- HERE: no space -->
App<span style="vertical-align: super;">*</span>
</li><li><!-- HERE: no space also -->
Contacts
</li>
</ul>
Here's an example: http://jsfiddle.net/eLft6/
I've another issues. The text in now vertically aligned but the position changed if I use span with super property or not.
Vertical alignment of this code:
<div id="menu">
<ul>
<li>Home</li>
<li>App<span style="vertical-align: super;">*</span></li>
<li>Test</li>
</ul>
is different from that one:
<div id="menu">
<ul>
<li>Home</li>
<li>App</li>
<li>Test</li>
</ul>
I've tried to modify the line-height using span for all li item, also setting it with different value in case of super usage or not but it doesn't work!
Here is my css rule together with the markup:
<div style = "height:100%;">
<div style = "width:220px; margin-left: 200px;font-size:16px; height:auto;">
<div class='navbar-inner'>
<div class='container'>
<ul class="nav nav-list">
<div>
<li <?php if($page == 'upload_track'){ echo "class = \"active\""; }?>>Upload a new Track</li>
<li>View all blog post</li>
<li>View all tracks uploaded</li>
</div>
</ul>
</div>
</div>
</div>
<div style = "width:220px; margin-left: 200px;font-size:16px; height:auto;">
as of now I am making them an inline style so that it would be easy for me to change them. since switching texteditors is kind of a hassle for me.
How would I make that div take up all the available height? like the very bottom of the page. as of now it looks something like this
what I wanted to see is that the black div takes up all the available height in the page
Yes it can be done. Check out this example JSFiddle.
Basically I changed your HTML to this:
<div id="navbar">
<div class='navbar-inner'>
<div class='container'>
<ul class="nav nav-list">
<div>
<li>Upload a new Track</li>
<li>View all blog post</li>
<li>View all tracks uploaded</li>
</div>
</ul>
</div>
</div>
</div>
Essentially all I did was remove the outermost div (the one with only the style="height: 100%" on it) and gave the next div an id.
The CSS is as follows:
html, body { height: 100%; }
#navbar {
/* this was moved from being an inline style in the div: */
width:220px; margin-left: 200px;font-size:16px;
height: 100%;
}
Basically, in order for the navbar strip to use up 100% of the height, you need to make sure that the html and body actually take up 100% of the available height. (That is, 100% on #navbar is 100% of the height of the parent element; if the parent element isn't the height of the browser, then it doesn't work.)
Given mark-up similar to:
<h1 id="Menu1Title">Menu1</h1>
<nav id="Menu1">
<a>Item1-1</a>
<a>Item1-2</a>
<a>Item1-3</a>
</nav>
<h1 id="Menu2Title">Menu2</h1>
<nav id="Menu2">
<a>Item2-1</a>
<a>Item2-2</a>
<a>Item2-3</a>
</nav>
<h1 id="Menu3Title">Menu3</h1>
<nav id="Menu3">
<a>Item3-1</a>
<a>Item3-2</a>
<a>Item3-3</a>
</nav>
How can this presentation be achieved using CSS only?
Menu1 Menu2 Menu3
Item1-1
Item1-2
Item1-3
Item2-1
Item2-2
Item2-3
Item3-1
Item3-2
Item3-3
ULs can also be used as long as they are three separate elements and not sub-lists of one another. I'd prefer not to use absolute positioning as there is other content below this that should flow around the mark-up above. I also have no need for old IE hacks; only supporting IE9 and modern browsers.
Is this even possible? Thanks!
Edit... The above formatting question is to style for mobile. Non-mobile is displayed as below which is why I was hoping for a CSS-only solution that didn't require mark-up changes.
Menu1
Item1-1
Item1-2
Item1-3
Menu2
Item2-1
Item2-2
Item2-3
Menu3
Item3-1
Item3-2
Item3-3
OK, if you really cant change mark up or use jQuery to alter the mark up then below is a CSS only solution:
http://jsfiddle.net/wSLEb/
You could absolutely position the headers and give the first ul margin top. Then using :nth-of-type pseudo class selector you could target individual headers and give them more left positioning to push them across the page and away from one another.
It's not very flexible as you have to hard code the left positioning so take into account how the width of the headers are rendered on a mobile screen.
Mark up would be:
<h1 id="Menu1Title" class="header">Menu1</h1>
<nav id="Menu1">
<ul class="first">
<li><a>Item1-1</a></li>
<li><a>Item1-2</a></li>
<li><a>Item1-3</a></li>
</ul>
</nav>
<h1 id="Menu2Title" class="header">Menu2</h1>
<nav id="Menu2">
<ul>
<li><a>Item2-1</a></li>
<li><a>Item2-2</a></li>
<li><a>Item2-3</a></li>
</ul>
</nav>
<h1 id="Menu3Title" class="header">Menu3</h1>
<nav id="Menu3">
<ul>
<li><a>Item3-1</a></li>
<li><a>Item3-2</a></li>
<li><a>Item3-3</a></li>
</ul>
</nav>
and CSS would be:
.header {
position: absolute;
top: 0;
left:0;
}
.header:nth-of-type(2) {
left:50px;
}
.header:nth-of-type(3) {
left:100px;
}
ul {
list-style: none;
margin:0;
padding:0;
}
ul.first {
margin-top: 20px;
}
You can read more about pseudo class selectors on Chris Coyier's site here: http://css-tricks.com/pseudo-class-selectors/
Good luck
To start your lists should be in uls.
if you can't use absolute positioning then you need to change your mark up to achieve that kind of styling. The headers should appear after one another in the html. If you can't change your mark up at the source then you will have to use jQuery to reorder the mark up on page load.
in your jQuery I would target all of the headers and then remove all of them except for the first and then insert these removed headers after the first one, and then place a clearing div after the last header.
See this or the code below: http://jsfiddle.net/wSLEb/
Your mark up would become like so:
<h1 id="Menu1Title" class="header">Menu1</h1>
<h1 id="Menu2Title" class="header">Menu2</h1>
<h1 id="Menu3Title" class="header">Menu3</h1>
<div class="clear"></div> <!--clearing div added to move first ul under the headers-->
<nav id="Menu1">
<ul>
<li><a>Item1-1</a></li>
<li><a>Item1-2</a></li>
<li><a>Item1-3</a></li>
</ul>
</nav>
<nav id="Menu2">
<ul>
<li><a>Item2-1</a></li>
<li><a>Item2-2</a></li>
<li><a>Item2-3</a></li>
</ul>
</nav>
<nav id="Menu3">
<ul>
<li><a>Item3-1</a></li>
<li><a>Item3-2</a></li>
<li><a>Item3-3</a></li>
</ul>
</nav>
The styling would then be like so:
.header {
float: left;
margin-right: 10px;
}
ul {
list-style: none;
margin:0;
padding:0;
}
.clear {
clear: both;
}
<div id="container">
<div class="category-group">
<h4>title</h4>
<ul>
<li>item</li>
<li>item</li>
</ul>
</div>
<div class="category-group">
<h4>title</h4>
<ul>
<li>item</li>
<li>item</li>
</ul>
</div>
</div>
<style>
.category-group {
display: inline-block;
vertical-align: top;
}
</style>
I want all category-groups to be arranged one after another and fit together in the container. In this case, second category-group would go right under the first category-group, then there would be third on the right of the first and the second and so on.
If I try to give category-group display: inline, all category-groups are then lined in one long column that would break out of the container.
I have faced this problem as well. I ended up using jQuery Masonry to get my div's to stack nicely within a fixed width container.
To my knowledge, there isn't a pure CSS fix that will achieve this effect.
I'll ask the basic question first and then go into excruciating detail as to why I'm asking. I have a bunch of similar floated block elements inside a <div> and I've set overflow:auto on the <div> so that its height expands to properly contain all of the elements inside it.
Is there any way, using CSS and HTML only, to set only the first floated element to the full height of the div?
Just to be clear: I want to grow the contained element to the height of the container, not the other way around.
I tried adding
height: 100%
to the first floated element's CSS, but that has no effect.
On to the excruciating detail. And if a better overall approach comes to mind, which would eliminate this particular problem, I'm all ears.
I'm simulating a table with a bunch of floated <ul> elements inside a <div>. Each list is a column in the "table" and the first list is the row-label column. So, to render the following:
col A col B
row 1 foo baz
row 2 bar bat
I use this markup:
<div>
<ul class='row-label'>
<li> </li> *
<li>row 1</li>
<li>row 2</li>
</ul>
<ul class='data-col'>
<li class='data-header'>col A</li>
<li>foo</li>
<li>bar</li>
</ul>
<ul class='data-col'>
<li class='data-header'>col B</li>
<li>baz</li>
<li>bat</li>
</ul>
</div>
* there's supposed to be a non-breaking space in the first item of the 'row-label' list but I can't get SO to show
Attentive readers may be wondering "Huh? Why not use a real table?" Two answers:
My fake-table approach is much more appropriate, semantically, for my data. The data is more closely related within each "column" than within each "row", but HTML tables assume the opposite. So I would need more complex PHP on the backend to convert the data into HTML tables, and the result wouldn't make as much sense. The "table" here really is more of a visual/presentation effect than anything.
I wanted to leave open the ability to manipulate individual columns in JavaScript (show them and hide them in response to user action, with transition effects). From what I could tell when I was researching it, there's no straightforward way to do this in a standard HTML table -- precisely because the row, not the column, is the basic unit of the HTML table. Please shoot me a counter-example if I'm wrong.
The CSS, simplified, looks like this:
div {
overflow: auto;
}
div ul {
float: left;
list-style-type: none;
padding: 0;
margin: 0 0.5em;
}
A problem arises when a row has more columns than will fit in the width of the browser window. The columns wrap to the next line and I get this sloppy result:
col A col B col C
row 1 foo baz bar
col D col E
zab oof
Ultimately I have a better solution in mind but the simplest immediate fix is to give the row-label column enough height to push those wrapped columns into line. If I do something like this:
ul.row-label {
height: [lots of ems]
}
Then I get this result:
col A col B col C
row 1 foo baz bar
col D col E
zab oof
But since there can be more of these simulated tables below the first one, and since there can be any number of rows in each "table", I can't rely on an absolute height.
Make sure you set display: block on your the LI elements inside of your UL. You should also give your UL display: block, overflow: hidden and height: 100% as well. By default list items are inline-block, which will ignore your height settings.
Here is a proof of concept:
<html>
<head>
<style type="text/css">
* { border: solid 1px black; }
div { overflow: auto; }
div ul
{
display: block;
height: 100%;
overflow: hidden;
float: left;
}
div ul li { display: block; }
</style>
</head>
<body>
<div>
<ul class='row-label'>
<li> </li>
<li>row 1</li>
<li>row 2</li>
</ul>
<ul class='data-col'>
<li class='data-header'>col A</li>
<li>foo</li>
<li>bar</li>
</ul>
<ul class='data-col'>
<li class='data-header'>col B</li>
<li>baz</li>
<li>bat</li>
</ul>
</div>
</body>
</html>
Rendered example http://img526.imageshack.us/img526/9444/tablewithlists.png
Firstly, and as you pointed out, your REALLY SHOULD be using tables for tabular data. You can perform exactly the same manipulations on the elements in a table as you can anywhere else.
I dont know why you would want to do such a crazy thing, but your best bet is to just put the .data-col elements in a separate div, add a left margin, and position them to the left:
EDIT: code added for my sanity
ul, li {
display: block;
margin: 0px;
padding: 0px;
}
ul {
float: left;
margin: 0px 5px;
}
li {
height: 20px;
}
.data-cols {
left: 0px;
margin-left: 50px;
overflow: hidden;
}
<div>
<ul class='row-label'>
<li> </li>
<li>row 1</li>
<li>row 2</li>
</ul>
<div class="data-cols">
<ul class='data-col'>
<li class='data-header'>col A</li>
<li>foo</li>
<li>bar</li>
</ul>
<ul class='data-col'>
<li class='data-header'>col B</li>
<li>baz</li>
<li>bat</li>
</ul>
</div>
</div>
May be this would help with ideas? I just found this css framework myself:
http://www.blueprintcss.org/