I really need help converting this simple table structure to css div's. Is there a simple application or something. CSS divs are driving me insane.
<table width="100%" border="0">
<tr>
<td colspan="3" id="Header"></td>
</tr>
<tr>
<td width="20%" id="Nav2"></td>
<td width="40%" id="ContentMiddleLeft"></td>
<td width="40%" id="ContentMiddleRight"></td>
</tr>
<tr>
<td colspan="3" id="BottomContent"></td>
</tr>
</table>
Test this:
EDIT: http://jsfiddle.net/DCbgg/
<style type="text/css" media="screen">
.container {
width: 100%;
}
.left20 {
width: 20%;
float: left;
background: red;
}
.left40 {
width: 40%;
float: left;
background: green;
}
.clear {
clear: both;
}
</style>
<div class="container">
<div class="left20">
Left
</div>
<div class="left20">
Left
</div>
<div class="left40">
Left
</div>
<div class="clear"></div>
<div class="left20">
Left
</div>
<div class="left20">
Left
</div>
<div class="left40">
Left
</div>
</div>
<div class="clear"></div>
First Things First
There are some very important things to remember when changing from table to div layouts that generally apply to all new learning experiences.
Don't get frustrated just because something's not working. Just take a break, look at something else, remember that it's something new and it won't always work the first time. It may take a number of different approaches and attempts before it finally works. You'll get the hang of it eventually.
Especially in this case, remember that divs are vastly different from tables, especially when using them as a major structural part of a site. The thought process behind each is completely different and can take a lot of getting used to for it to click. Because of this:
Not all designs transfer from table to div. Some things are only really easily and properly accomplished with tables, and others with divs. While this is not one of those cases in particular, be open to having to make some design changes when changing your site structure.
That being said, we can now answer the question properly.
An Answer
This is how I would set up the structure using divs:
<div id="wrap">
<div id="header"></div>
<div id="content">
<div id="nav2"></div>
<div id="content_right"></div>
<div style="clear: both"></div>
</div>
<div id="footer"></div>
</div>
And this is what the css would be:
#wrap {
width: 100%;
}
#header {
width: 100%;
height: /* some height value */;
}
#content {
width: 100%;
height: /* some height value */;
}
#nav2 {
width: 20%;
float: left;
}
#content_right {
width: 40%;
float: right;
}
#footer {
width: 100%;
height: /* some height value */;
}
Notes
As I was saying above, the thought process behind tables and divs are quite a bit different. With tables, you're used to using percentages (%) to define widths. This works and is not necessarily a bad thing. It gets the job done and is easy to do.
But when you're using divs, a more common approach is to have fixed widths defined by pixels (px). This allows for a more constant design that won't stretch across the page, and gives you more design freedom, knowing that the page will always be the same width.
For more information on fixed-width design, I would recommend looking at the 960 grid system. It is extremely easy to follow and leads to clean, good-looking designs that are easy to structure and style.
Most importantly, enjoy the new-found freedom that divs bring. They aren't locked in to anything and can literal do anything, be anywhere, and look like anything on a page. There isn't really a limit to what they can do. I've heard them called the only required part of a webpage (You really can design and create an enter page with just divs, text included).
Have fun on your journey!
CSS3 Style (using "display:table;"):
Check http://jsfiddle.net/reKfe/ (jsFiddle made from http://query7.com/exploring-the-power-of-css3)
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
I spent a little while trying to figure out how to achieve the following effect without using a table but couldn't figure it out: http://jsfiddle.net/sKFzA/
CSS :
.header{width:100%;font:25px Arial,Helvetica,sans-serif;}
.titleCol{width:99%;}
.dateCol{vertical-align:bottom;white-space:nowrap;}
.dateText{font-size:12px;}
HTML :
<table class="header">
<tr>
<td class="titleCol">This is the blog title</td>
<td class="dateCol"> <span> </span><span class="dateText">1/23/2012</span>
</td>
</tr>
</table>
To explain it, I have a blog title and a blog date. The title could be long and wrap. At the end of the last line, wrapped or not, I want the blog date to be aligned to the right.
So I have two questions. Is there any reason not to use a table for this? If so, how would you achieve it without assuming static font sizes?
CSS has properties that allow any element to behave like specific components of a table.
http://cssdeck.com/labs/rjiesryc
<header>
<h1>This is the blog title</h1>
<time datetime="2012-01-23">1/23/2012</time>
</header>
CSS
header {
display: table;
width: 100%;
}
header h1, header time {
display: table-cell;
}
header time {
/*vertical-align: bottom;*/
}
With the help of cimmanon and the others, I've gathered that:
The only reason's not to use a table here is because layout is not technically a table's intended purpose and also by not using a table you can separate your layout (CSS) from your markup (HTML). However, if I were to use a table, I am not aware of of any negative effects.
There doesn't seem to be a good solution to this exact layout without the concept of table, but my table solution can be achieved without using an HTML table by applying styles to display other elements as the table. So I replaced my table elements with divs. The span with the space before the date allows the smaller sized date to stay aligned to the title's baseline without having to hard-code line height's or font sizes. So if the font sizes change, I don't have to worry about updating any other magic numbers hard-coded around them.
http://jsfiddle.net/K35gT/
HTML
<div class="header">
<div class="titleCol">This is the blog title</div>
<div class="dateCol">
<span> </span><span class="dateText">1/23/2012</span>
</div>
</div>
Styles:
.header{display:table;width:100%;font:25px Arial,Helvetica,sans-serif;}
.titleCol{display:table-cell;width:99%;}
.dateCol{display:table-cell;vertical-align:bottom;white-space:nowrap;}
.dateText{font-size:12px;}
You do not need tables at all, simply block elements with the right styles.
If it was my website, I would do this:
<header>
<h1>This is the blog title</h1>
<time datetime="2012-01-23">1/23/2012</time>
</header>
Combined with this CSS:
header {position:relative; width:100%; font:25px Arial,Helvetica,sans-serif;}
header > h1 {margin:0px;}
header > time {display:block; font-size:12px; text-align:right;}
You can decide if you want to use HTML5 elements, or general elements and if you want to hook in class names or not. Here's the jsFiddle for above: http://jsfiddle.net/sKFzA/13/
Something like this? I hope i got you right.
HTML:
<div id="titleRow">This is the blog title</div>
<div id="dateText"><span id="spandate">1/23/2012</span></div>
CSS:
#titleRow{width:80%; height: 25px; font:25px Arial,Helvetica,sans-serif;
float:left;text-align: left;}
#dateText{width:20%; height: 25px; font-size:12px;float:left; text-align: right; position: relative;}
#spandate { position: absolute; bottom: 0; right: 0;}
See here: http://jsfiddle.net/sKFzA/31/
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.
Ok, I leaned html & css back in 2001. I was used to do something like this (To create a website with a "vertical-column" layout):
<html>
<head>
<title>Vertical-column layout</title>
</head>
<body>
<table id="doc" >
<!-- header -->
<tr>
<td id="header" colspan="3"><!-- header code/php include --></td>
</tr>
<!-- / header -->
<!-- / content -->
<tr>
<td id="col1" name="menu"><!-- content code/php include --></td>
<td id="col2" name="content_left"><!-- content code/php include --></td>
<td id="col3" name="content_right"><!-- content code/php include --></td>
</tr>
<!-- / content -->
<!-- footer -->
<tr>
<td id="footer" colspan="3"><!-- header code/php include --></td>
</tr>
<!-- / footer -->
</table>
</body>
</html>
Easy, everything is automatically aligned the way I want, no css headache etc. Life was good back then. HOWEVER, not so long ago, I read that this approach should no longer be used. I was going to try a new way using a bunch of div's, but w3c & w3c's validation does not like you using block elements as inline elements...WTF!!!
So...my frustration lead me to ask you guys:
HOW? How to accomplish something like this in "modern way"...as easy as possible? Does html 5 has a better way?
WHY? Why is it that now we should not use this table approach to get a "vertical column layout" on a website?
HOW?
Option 1: Google 'CSS 3 column layout'. This is has been well covered over the past 6 years or so and there's gobs of tutorials out there.
Option 2: Google 'CSS Framework' and pick one to build your layout. 960.gs is a popular one.
WHY?
Ideally, you'd use tables for tabular data and css to layout the rest of the page. Why? Well, in theory, CSS gives you a lot more flexibility. The best example is probably when it comes to responsive web design. On an iPhone, I may want 2 columns. On my iPad, I may want 4 columns. That can all be done with CSS, but gets really complicated if you hard-wire the HTML using tables.
Below is a basic grid I cobbled together you can use with any size website. You'll need to clear the floats on the columns with either overflow hidden or a clearfix. If your project doesn't need to support IE7 you can use box-sizing border-box to add padding to your columns, otherwise add an extra element inside each column for padding.
Whilst I can appreciate that making columns was super easy with tables that was pretty much the only thing they were better for layout wise.
HTML:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<header></header>
<div class="content grid">
<div id="col1" class="col s1of3"></div>
<div id="col2" class="col s1of3"></div>
<div id="col3" class="col s1of3"></div>
</div>
<footer></footer>
</body>
</html>
CSS:
.grid {
}
.grid .col { float: left; }
.grid .col.s1of1 { width: 100%; }
.grid .col.s1of2 { width: 50%; }
.grid .col.s1of3 { width: 33.33333333%; }
.grid .col.s2of3 { width: 66.66666666%; }
.grid .col.s1of4 { width: 25%; }
.grid .col.s3of4 { width: 75%; }
.grid .col.s1of5 { width: 20%; }
.grid .col.s2of5 { width: 40%; }
.grid .col.s3of5 { width: 60%; }
.grid .col.s4of5 { width: 80%; }
CSS3 has some neat column layout options, but they're not very good compatability-wise, and a fair number of the options aren't supported by a large number of browsers.
If you're seeking to make columns of variable/fixed width, then this is probably the article you're looking for:
http://www.alistapart.com/articles/holygrail
Using this method, you can set one or more divs to a fixed width, while having another resize appropriately to fill the page.
If you just want all your columns to resize, then just make them all float: left, and width: {percentage of page}%
In the html below 'Rome' is appearing below 'Place' from the second line, how do I prevent that?
http://jsfiddle.net/JqxTx/21/
Thanks,
Chris.
I would change the span to a block element such as p and then style like
div label {
float: left;
}
div p {
margin-left: 40px;
}
DEMO
You could either go with hanging line indent or CSS3 columns, though regarding the latter you'll have to do some investigation as to whether they're useful in this scenario.
I usually go with old-style
<table>
<tr>
<td><label>Label</label></td>
<td><span>Text</span></td>
</tr>
</table>
since it's simple, it works, and though there's a bit of redundant code, it doesn't promote nesting and it's not that big of a mess.
I still fail to see any good, simple equivalent CSS replacement for this layout scheme.
The best one probably is either
<label style="float: left; width: 20%;">Label</label>
<span style="float: left; width: 80%;">Text</span>
or
<label style="position: absolute; width: 20%;">Label</label>
<span style="display:block; padding-left: 20%;">Text</span>
You could probably find more here or in the answer to this question.
But they're not as good as the table because they don't adapt to the first column's contents.
Hacks like
<label style="float:left; height: 2em;">Label</label>
<span>Text</span>
or
<label style="display:block; float:left;">Label</label>
<span style="display:block; float:left; width:90%;">Text</span>
work but I wouldn't recommend them because they both rely on certain screen dimensions.
G'luck.
http://jsfiddle.net/paislee/JqxTx/22/
Think this will work,as i made it into two blocks.
Just use a table:
<table><tr valign=top><td>Place <td>Rome Rome ... Rome</table>
You may well have several name/value pairs, and then they make an excellent table.