How can I style a group of related divs to look like a table per the attached image? Thx!
<div class="collection"
<div class="group">
<div class="label">Label1</div>
<div class="value">Value1</div>
</div>
... repeats n times
</div>
Disclaimer: This particular html output is auto-generated and I don't have control over what is generated. I just have divs to work with and I want to style accordingly.
Sorry guys, but, what the float?
while you all tried to proscribe what you think the OP needs, the answer to the question actually is
.collection {display:table}
.group {display:table-row}
.label, .value {display:table-cell}
I believe
.label {
width: 200px;
float: left;
}
(apart from the other styling) will do the thing for you.
html
<div class="collection">
<div>
<div class="label">Label1</div>
<div class="value">Value1</div>
</div>
<div>
<div class="label">Label1</div>
<div class="value">Value1</div>
</div>
</div>
css
.label { float:left; width:200px; border-top:1px solid #ccc; }
.value { margin-left:200px; background:#fffced; border-top:1px solid #ccc; }
Code: http://jsfiddle.net/wWGG8/1/
I would just use a table. You can read about tables in HTML here The <tr> tag defines a table row. The <td> tag defines the table data. Each <td> tag is a new column.
<table>
<tr><td>This is the table data</td><td>This is more table data in the same row</td></tr>
<tr><td>Here is another row</td><td>This is more table data in the second row</td></tr>
</table>
True, you can just use a table. That would be semantically convenient.
Nonetheless, you can stick to your current HTML structure.
Just assign the divs with classes of label and value with a width and then float them to the left.
You might also need to specify a height for the div with class group.
Related
I have a site with a very active background (I'm talking 6 or so different z-indexes here 2 with animations). I wanted a in the foreground that had content but wanted a "window" through to the background in it. Some problems I had:
you can't "punch a hole" in a background, so...
I built a containing div, lets call it "srminfo"
Inside that I had a "top", "left", "window", "right" and "bottom"
the top, left, right, bottom all had opaque white backgrounds
while the srminfo and window divs had background:none;
No matter how hard I tried, the "right" div wouldn't fill the space between the "top" and "bottom" divs, I tried a lot of different things. The reason it had to be dynamic is that the text in the "left" div was dynamic based on the background colour, which was itself generated randomly with JavaScript.
How is display: table; and all the other related CSS code like tables? And how can it be used?
After days trying to find the answer, I finally found
display: table;
There was surprisingly very little information available online about how to actually getting it to work, even here, so on to the "How":
To use this fantastic piece of code, you need to think back to when tables were the only real way to structure HTML, namely the syntax. To get a table with 2 rows and 3 columns, you'd have to do the following:
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Similarly to get CSS to do it, you'd use the following:
HTML
<div id="table">
<div class="tr">
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
</div>
<div class="tr">
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
</div>
</div>
CSS
#table{
display: table;
}
.tr{
display: table-row;
}
.td{
display: table-cell; }
As you can see in the example below, the divs in the 3rd column have no content, yet are respecting the auto height set by the text in the first 2 columns. WIN!
#table {
display: table;
padding: 5px;
}
.tr {
display: table-row;
padding: 5px;
}
.td {
display: table-cell;
padding: 5px;
width: 150px;
border: #000000 solid 1px;
margin: 5px;
}
<div id="table">
<div class="tr">
<div class="td">Row 1,
<br />Column 1</div>
<div class="td">Row 1, Column 2</div>
<div class="td" style="background:#888888;"></div>
</div>
<div class="tr">
<div class="td">Row 2,
<br />Column 1</div>
<div class="td">Row 2, Column 2</div>
<div class="td" style="background:#888888;"></div>
</div>
</div>
It's worth noting that display: table; does not work in IE6 or 7 (thanks, FelipeAls), so depending on your needs with regards to browser compatibility, this may not be the answer that you are seeking.
It's even easier to use parent > child selector relationship so the inner div do not need to have their css classes to be defined explicitly:
.display-table {
display: table;
}
.display-table > div {
display: table-row;
}
.display-table > div > div {
display: table-cell;
padding: 5px;
}
<div class="display-table">
<div>
<div>0, 0</div>
<div>0, 1</div>
</div>
<div>
<div>1, 0</div>
<div>1, 1</div>
</div>
</div>
How (and why) to use display: table-cell (CSS)
I just wanted to mention, since I don't think any of the other answers did directly, that the answer to "why" is: there is no good reason, and you should probably never do this.
In my over a decade of experience in web development, I can't think of a single time I would have been better served to have a bunch of <div>s with display styles than to just have table elements.
The only hypothetical I could come up with is if you have tabular data stored in some sort of non-HTML-table format (eg. a CSV file). In a very specific version of this case it might be easier to just add <div> tags around everything and then add descendent-based styles, instead of adding actual table tags.
But that's an extremely contrived example, and in all real cases I know of simply using table tags would be better.
The display:table family of CSS properties is mostly there so that HTML tables can be defined in terms of them. Because they're so intimately linked to a specific tag structure, they don't see much use beyond that.
If you were going to use these properties in your page, you would need a tag structure that closely mimicked that of tables, even though you weren't actually using the <table> family of tags. A minimal version would be a single container element (display:table), with direct children that can all be represented as rows (display:table-row), which themselves have direct children that can all be represented as cells (display:table-cell). There are other properties that let you mimic other tags in the table family, but they require analogous structures in the HTML. Without this, it's going to be very hard (if not impossible) to make good use of these properties.
I don't have 10 years of web dev., but only a year or so and I have quickly came around a use case that does not work with table elements and work with and CSS table : forms.
Forms and tables do not go well together. A form is not allowed to be a child of a table element. So, to comment previous comment : divs and CSS table are useful at least when you want forms into table.
Jean-yves
Good day guys! I'm a newbie here and I'm just wondering how to use div id and div class. Let's say for example, I want to have many div boxes in my site with all the same styles in each box. Is this the right thing to do? Please enlighten me.
HTML:
<div id="body">
<div id="box1" class="style"></div>
<div id="box2" class="style"></div>
<div id="box3" class="style"></div>
//(and so on)//
</div>
CSS:
.style {
//(put elements here)//
}
There is not really a right thing to do as everything depends on the situation and circumstances.
Why would you think that this would be the "wrong" thing to do? This cuts down on the amount of code you have to write, so it is favorable, correct?
You can also use the IDs you have to override styles for the <div>s individually:
.style {
color: red;
}
#body1 {
color: blue;
}
Due to the fact that elements, IDs, and classes each have difference selector precedence, I advise against using anything except for classes and psuedo-classes no matter how attractive other prospects may seem. If you're disciplined about it, your CSS will be easier to update later on. The above example would work exactly the same if body1 were a class instead of an ID (I would suggest using IDs to identify unique elements for DOM manipulation, though).
I would also follow the W3C's advice when picking class names for elements and using them in your HTML:
...authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.
ID's are unique:
-Each element can have only one ID
-Each page can have only one element with that ID
Classes are NOT unique:
-You can use the same class on multiple elements.
-You can use multiple classes on the same element.
Yes that would work. Though the id's would not be needed if all you want to do is apply the same style to all 3.
http://www.w3schools.com/tags/att_global_id.asp
http://www.w3schools.com/tags/att_global_class.asp
Yes You can do that if you want to have same style applied to all divs than you can definitely use class to apply styling to divs. If your div is going to be different than others than you can can probably use id which will allow you to access that div through javascript also.
If it is only styling then id is not really required and you need not to give class name if it is same class for all child divs.
HTML
<div id="body">
<div></div>
<div></div>
<div></div>
</div>
CSS
#body div {
background:red;
width:100px;
height:100px;
display:inline-block
}
DEMO
You can use "class" in many div's but you can use "id" in only one place. Because ID should be unique in each page.
<div id="body">
<div class="mystyle"></div>
<div class="mystyle"></div>
<div class="mystyle"></div>
//(and so on)//
</div>
<style>
.mystyle{color:#000;}
<style>
You can use this
<div id="demo">
<div class="box test"></div>
<div class="box test"></div>
<div class="box test"></div>
</div>
CSS:
#demo
{
margin:0;
padding:0;
}
.box
{
Width:100px;
height:50px;
background:red;
}
.test
{
color:white;
}
you can apply two class.
For a web application I'm creating (in Umbraco, but don't think that really matters in this case) I need a page that can show an overview of different media types; audio, video and images.
No problem there, for images and videos (hosted on YouTube) I will show a thumbnail and for audio I will show a static image.
The rough layout of an item will be that the image is shown on top, and below that is some info like the title and a short description.
Now because of the difference in dimensions of the images (thumbnails can have a variable size, the audio static image will probably always be smaller than the thumbnails, etc.) one item (or column if you will) can be of less width than another.
What I would like to do is show three items per row, and when the row isn't completely filled I would like to fill it up with a colored box. But that box should not always be at the end, it could also be in between, or the beginning. It just is inserted 'randomly' when a space fill is needed.
Because a picture says more than 1000 words (wire-frame of what I'm trying to describe);
Now my question; is this at all possible? If yes, how?
I can't wrap my mind around it, it can't be done in pure HTML and CSS I think. Because you couldn't determine how big an item is and if a 'filler' is needed.
The rough HTML I have right now is something like this:
<table id="portfolio">
<tr>
<td>
<div class="portfolioItem">
<div class="portfolioItemImage">
<a rel="prettyPhoto" href="http://www.youtube.com/watch?v={video}"><img src="http://img.youtube.com/vi/{video}/1.jpg"/></a>
</div>
<br clear="both" />
<div class="portfolioItemDescription">
<h3>Title</h3>
<p>Description lorem ipsum etc.</p>
</div>
</div>
</td>
</tr>
</table>
Of course there is some more dynamic stuff in there to determine whether it is a video, audio or image, determine when to start a new row, etc. but that isn't relevant here.
Here is the CSS associated with it:
#portfolio {
width:100%;
}
#portfolio td {
width:33%;
}
#portfolio .portfolioItem {
border: 1px solid #000;
}
#portfolio .portfolioItem .portfolioItemImage {
margin:0px;
padding:0px;
}
Again; can this be done? And how?
Thank you!
I think that what you want is jQuery Masonry or the Wookmark jQuery Plugin.
I would create the grid using DIVs instead of TABLES, regardless I think this is what you are looking for?:
#portfolio td
{
min-width:33%;
}
EDIT:
Here is a rudimentary example of a grid created with DIV's:
http://jsfiddle.net/rdtnU/
<div class="con">
<div class="row">
<div class="cell">a</div>
<div class="cell">b</div>
<div class="cell is_last">c</div>
</div>
<div class="row">
<div class="cell">d</div>
<div class="cell">e</div>
<div class="cell is_last">f</div>
</div>
</div>
.con {}
.row { width:340px; margin:0 0 20px 0; overflow:hidden; }
.cell { width:100px; margin:0 20px 0 0; float:left; background:orange; }
.is_last { margin:0; }
I would use the div's as suggested but I would not limit myself to the row/columns as stated. I would use a more fluid layout even if it is for a specified width of a certain section.
The following will only work if you know the width of the div with the content, to allow the floating to occur (this could work if there is a min-width or if your code can determine the size of the image)
Here is the HTML
<div class="elements">
<div class="singleElement">
text and graphics here.
</div>
<div class="singleElement">
text and graphics here.
</div>
<div class="singleElement">
text and graphics here.
</div>
<div class="singleElement">
thisonewillpushthewidthoftheboxfartherthanthe150pxwidth
</div>
<div class="singleElement">
small text
</div>
</div>
Here is the CSS (I put some simple background colors so you can see what is going on with the width and how things are tucked in where space is available.
.elements { overflow: hidden; width: 500px; background: #FCC; }
.singleElement { padding: 5px; white-space:nowrap; float: left;
height: 200px; min-width: 100px; background: #CCC;margin: 0 10px 10px 0; }
Please note the details of the styles are just for demonstrating the example. They can be altered to fit your need.
EXAMPLE: Here is the example in jsFiddle.
My goal is an alignment as shown in the attached image (the fields on the left may have any width, but the ones on the right should begin at the same X coordinate).
Right now I am using a simple table code to achieve this:
<table><tr>
<td>Left1</td><td>Right 1</td></tr>
<tr><td>Left 2</td><td>Right 2</td></tr></table>
However, I've heard that using tables is generally bad. Is there a way I could achieve the same design using CSS? The website is being designed for mobile devices which might not support fancy CSS, so the code must be as simple as possible.
EDIT: since I still occasionally get a notification on this question from people who (presumably) are just starting out with HTML like I was when I made it, please refer to the accepted answer by B T as this is by far the best way to achieve this functionality. The question suggested as a "possible duplicate" (31 May 2016) does not currently offer the table-row/table-column CSS-based approach and requires you to do guess work.
I found a much easier way to do this by accident. Say you have the following:
<div class='top'>
<div>Something else</div>
<div class='a'>
<div>Some text 1</div>
<div>Some text 2</div>
</div>
<div class='a'>
<div>Some text 3</div>
<div>Some text 4</div>
</div>
</div>
You can align Some text 1 and Some text 2 using css table display styling like this:
.a {
display: table-row;
}
.a div {
display: table-cell;
}
The coolest thing is that as long as the 'top' div is NOT styled display: table, then other things like "Something else" can be ignored in terms of alignment. If the 'top' div IS styled display: table, then "Some text 1" will be aligned with "Something else" (ie it treats all its children like table rows, even if they have a different display style).
This works in Chrome, not sure if its supposed to behave this way, but I'm glad it works.
.a {
display: table-row;
}
.a div {
display: table-cell;
}
<div class='top'>
<div>Something else</div>
<div class='a'>
<div>Some text 1</div>
<div>Some text 2</div>
</div>
<div class='a'>
<div>Some text 3</div>
<div>Some text 4</div>
</div>
</div>
While it is possible to achieve the same with tables, it would be considered semantically incorrect to use a table for the purpose of layout. Especially since you can achieve the same using just a line or two of CSS.
Give your labels a fixed width (something larger than your longest label text).
<style>
label {
width: 100px;
display: inline-block;
}
</style>
<label>Name</label>
<input type="text" />
<br/>
<label>Email Address</label>
<input type="text" />
Example
Here, you could use this for getting the output required.
Using tables IMO is not bad practice, in fact they should be used where tabular data is required, or the format of data resembles a table.
However, designing a full page, or anything not to be displayed in a tabular format, using a table is discouraged, and is in fact very very wrong.
Here goes a sample using a non-table structure:
HTML :
<form>
<label for="name">Email: </label><input id="name" type="email" placeholder="#" />
<br/><br />
<label>Password: </label><input type="password" id="password" placeholder="*"/>
</form>
CSS:
label {
width: 80px;
display: block;
vertical-align: middle;
float:left;
clear:left;
}
input {
border-top-left-radius:5px;
border-bottom-right-radius: 10px;
background: #141414;
color: #fdd56c;
outline: none;
}
Here is an example
Yes, such alignment is possible. Using CSS classes, you can markup your HTML in such a way to achieve the same look of a table without the headache of using a table (or making the markup look ugly).
Using this CSS:
.label {
display: inline-block;
width: 100px;
}
.inputBox {
width: 200px;
}
and this HTML:
<span class="label">E-mail:</span><input type="email"></input><br>
<span class="label">Password:</span><input type="text"></input>
you'll get the layout you want.
To do this with IE7 support, change the CSS above to this:
.label {
display: block;
width: 100px;
float: left;
clear: left;
}
Then, add this line below the lines already shown:
<div style="clear: left"></div>
Example using IE7-compatible settings: http://jsfiddle.net/bbXXp/
True. I am learning it the hard way. I used table for alignment, and now, certain alignments are becoming bizzare in smaller screens (e.g. mobile phone, tablets etc). Hence, am switching over to div. Preferable use <div style="display:inline-block">...</div>, which will align automatically if the screen is smaller.
Hence, my advice is that Table should be used only for genuine tables, and not for aligning controls in a body.
For example, in the following snippet:
<tr>
<td align="center">123</td>
<td class="someclass">abc</td>
</tr>
I would like select all <tr> elements that have a <td> with the class="someclass".
I am wondering if this is possible in css, without using javascript. Thanks.
What your asking for isn't possible. CSS reads left to right, meaning that you can't specify the parent element based on a childs attributes. You can do this in javascript but like you said you didn't want to use that.
Example HTML:
<div class="box">
<div class="green">
Some text
</div>
</div>
<div class="box">
<div class="red">
Some Text
</div>
</div>
Example CSS:
.box {
color: blue;
}
.box .green {
color: green;
}
.box .red {
color: red;
}
As you can see, you can select the parent element by itself but not based on a child's attributes.
Technically, you should always work outwards in. If you need a specific style to be applied on the parent you should add an extra class.
Example HTML:
<div class="box green">
Some Text
</div>
Example CSS:
.box.green {
color: green;
}
You can see in the above CSS that you can "stack" the classes to select the proper element.
Hope this helps, if you have any questions just ask. I can post a javascript variation that would be able to select an element based on child element attributes if you open a new topic for that.
To select elements with a particular class:
.someclass{
color: red;
}
I would like select all elements that
has a with class attribute
"someclass".
If by selection you mean node selection that you can only use JavaScript.
jQuery:
$(".someclass").doStuff();
But if by selection you mean CSS selection then:
CSS:
<element class="someclass"> can be selected using .someclass in CSS.