Log in

View Full Version : Resolved CSS table creation


auriaks
03-29-2010, 08:45 PM
Hi,

Maybe someone (more experienced) would help me to create this table I attached??

Thanks in advance...
Nile
03-29-2010, 09:23 PM
Something as simple as:
http://localhostr.com/files/3d6527/capture.png
Doesn't even require tables. If the above is what you want - with your confirmation, I will make it for you.
auriaks
03-29-2010, 09:33 PM
Yea... That is the best I expect :)

You gonna create this without div's?
Nile
03-29-2010, 09:35 PM
No, I'm going to use divs. Not tables. Well - I may use a table for the bottom part but not the images. It should be done in about 10 minutes.
auriaks
03-29-2010, 09:38 PM
it would be perfect...

Tip: can you make it without the "Sed" vertical line? :)
Nile
03-29-2010, 09:43 PM
You can change it however you like.


<style type="text/css">
.container {
background: #E9E9E9;
border: 1px solid #DCDCDC;
padding: 5px;
font-family: georgia;
font-size: 12px;
color: #000;
width: 860px;
}
.container .left {
float: left;
width: 55%;
margin: 0;
padding: 0;
}
.container p {
margin: 0;
padding: 0;
}
.container .left p.sentence {
font-weight: bold;
padding-bottom: 5px;
}
.container .left p img {
padding: 2px 0 0 0;
}
.container .left table {
font-size: 12px;
font-weight: bold;
padding-top: 15px;
float: left;
}
.container .left table td {
padding-right: 13px;
}
.container .right {
float: right;
}
.container .clear {
clear: both;
}
</style>
<div class="container">
<div class="left">
<p class="sentence">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<table>
<tr><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td></tr>
<tr><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td></tr>
<tr><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td></tr>
<tr><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td></tr>
<tr><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td></tr>
<tr><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td></tr>
<tr><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td></tr>
<tr><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td></tr>
</table>
<p class="images">
<img src="http://localhostr.com/files/0140c7/nature.png" alt="Nature" title="Nature" />
<img src="http://localhostr.com/files/0140c7/nature.png" alt="Nature" title="Nature" />
</p>
</div>
<div class="right">
<img src="http://localhostr.com/files/46edf9/sky.png" alt="Sky" title="Sky" />
</div>
<div class="clear" />
</div>

Example:
http://unlinkthis.net/examples/display-tabletodiv.html
auriaks
03-29-2010, 09:57 PM
Made my day :D
can I write <style> script not in the <head> directory?
Nile
03-29-2010, 10:00 PM
You can - but I wouldn't. Put this part of the code in the <head> part of the document:


<style type="text/css">
.container {
background: #E9E9E9;
border: 1px solid #DCDCDC;
padding: 5px;
font-family: georgia;
font-size: 12px;
color: #000;
width: 860px;
}
.container .left {
float: left;
width: 55%;
margin: 0;
padding: 0;
}
.container p {
margin: 0;
padding: 0;
}
.container .left p.sentence {
font-weight: bold;
padding-bottom: 5px;
}
.container .left p img {
padding: 2px 0 0 0;
}
.container .left table {
font-size: 12px;
font-weight: bold;
padding-top: 15px;
float: left;
}
.container .left table td {
padding-right: 13px;
}
.container .right {
float: right;
}
.container .clear {
clear: both;
}
</style>

And then this:


<div class="container">
<div class="left">
<p class="sentence">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<table>
<tr><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td></tr>
<tr><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td></tr>
<tr><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td></tr>
<tr><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td></tr>
<tr><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td></tr>
<tr><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td></tr>
<tr><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td></tr>
<tr><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td></tr>
</table>
<p class="images">
<img src="http://localhostr.com/files/0140c7/nature.png" alt="Nature" title="Nature" />
<img src="http://localhostr.com/files/0140c7/nature.png" alt="Nature" title="Nature" />
</p>
</div>
<div class="right">
<img src="http://localhostr.com/files/46edf9/sky.png" alt="Sky" title="Sky" />
</div>
<div class="clear" />
</div>

Where you need it