Tom's Guide | Tom's Hardware | Tom's Games

Computing.Net > Forums > Web Development > CSS table-like layout prob...

Computer Problems? Computing.Net has over 1,000,000 posts about all things technology related! Over 90% answered within 24 hours! Click here to start participating now! Also, be sure to check out the New User Guide.

CSS table-like layout prob...

Reply to Message Icon

Name: robber2
Date: November 8, 2004 at 08:01:13 Pacific
OS: w xp
CPU/Ram: 2 gig celeron, 256 MB
Comment:

paste the code below into your text editor and see if you can address these problems:
I'm trying to achieve something like a table of 3 images across with corresponding text UNDER ONLY the image.
the top set of images is positioned absolute and the lower sets are floated left. play around with the captions under the images (especially the lower images) and you will see the problem that developes (the text doesn't stay under the image ONLY. In the case of the top images, though the text stays under the images, it takes alot of CSS to tell it to do that and subsequent paragraphs have to be <br /><br /><br />'ed down the page to give the absolute positioning of the text room (or they'll overlap it - take out the <br />'s and see what haps). any input and advice is sincerely appreciated!
____________________________________________

<html>

<head>

<title>the big div!</title>

<style type="text/css">

</style>

</head>

<body>

<h1>The Big Div!</h1>

'mona try out this here div tag!</p>

'mona try out this here div tag<br />
and I'm gonna try it out good,<br />
see if it works like,<br />and even like how it works,<br />
like, know what I mean?</p>

<br />
<br />

<div class="pix1"></div>

<div class="pix2"></div>

<div class="pix3"></div>

<div class="pix4"></div>

<div class="pix5"></div>

<div class="pix6"></div>


<div class="text1">

three rings on three fingers as opposed to five rings on one finger or twelve rings on three people's fingers, or whatever!</p></div>
<div class="text2">

earrings and more earrings, in fact so many earrings, you'll be amazed!</p></div>
<div class="text3">

wanna look at some bracelets? well look no further than here!</p></div>


<br /><br /><br /><br />

This section of pictures was done using absolute positioning, and it worked out nicely except that the text under the pix is not centered, which burns my ass! But then I read another website about a different way to do "table-less layout", which is what this is all about, in the end...</p>

So if you wanna see what it looks like, see below...</p>


<div class="thinbox">
The content within this DIV element will be enclosed
in a box with a thin line around it, at least that's what Dave Ragget is telling me. Of course, I'll let you know if it works or what!
</div>
<br />

<div class="box">
The content within this DIV element will be enclosed
in a box with a thin line around it, at least that's what Dave Ragget is telling me. Of course, I'll let you know if it works or what!
</div>
<br />

<div class="color">
The content within this DIV element will be enclosed
in a box with a thin line around it, at least that's what Dave Ragget is telling me. Of course, I'll let you know if it works or what!
</div>
<br />

<div class="float">
<br />

three rings on three<br />fingers</p>
</div>


<div class="float">
<br />

an earring</p>
</div>

<div class="float">
<br />

groovy bracelets</p>
</div>

<p style clear="left"> </p>

<div class="float">
<br />

rings</p>
</div>

<div class="float">
<br />

earrings</p>
</div>

<div class="float">
<br />

bracelets</p>
</div>

<p style clear="left"> </p>

<div class="float">
<br />

rings</p>
</div>

<div class="float">
<br />

earrings</p>
</div>

<div class="float">
<br />

bracelets</p>
</div>

<p style clear="left">...funny, this wraps to the next line when it runs out of window... and how do you get two rows of three images each? (i gotta figure out how this float thing works...)</p>

 <br />

 <br />

 <br />

 <br />

 <br />

 <br />

 <br />

 <br />

 <br />

 <br />

</body>

</html>



Sponsored Link
Ads by Google

Response Number 1
Name: robber2
Date: November 8, 2004 at 08:05:38 Pacific
Reply:

THIS goes in the style:
____________________________________________


body { color: yellow; background: black url('ksl_logo.gif') no-repeat bottom right fixed; }

div.box { border: double; border-width: thin; border-color: blue; width: 450; padding: 10;}

div.thinbox { border: double; border-width: thin; border-color: blue; width: 600; padding: 10;}

div.color {background: rgb(204,204,255); color: green; width: 50%;
padding: 0.5em;
border: none;}

div.pix1 { position: absolute; left: 210px; top: 23px }
div.pix2 { position: absolute; left: 344px; top: 23px }
div.pix3 { position: absolute; left: 409px; top: 23px }
div.pix4 { position: absolute; left: 486px; top: 23px }
div.pix5 { position: absolute; left: 620px; top: 23px }
div.pix6 { position: absolute; left: 685px; top: 23px }

div.text1 { position: absolute; left: 210px; top: 177px; width: 124px; color: green; }
div.text2 { position: absolute; left: 344px; top: 177px; width: 55px; color: green; }
div.text3 { position: absolute; left: 409px; top: 177px; width: 67px; color: green; }

div.float {
float: left; padding-right: 60px;
}

div.float p {
text-align: center;
margin-top: 3px;
}


0

Response Number 2
Name: robber2
Date: November 8, 2004 at 08:11:16 Pacific
Reply:

for some reason, the opening

tag didn't copy, but rest assured, there's one in front of all of my paragraphs. you may have to add them yourself to get it to work...


0

Response Number 3
Name: robber2
Date: November 8, 2004 at 08:14:13 Pacific
Reply:

one more time:
____________________________________________

<pre>

<html>

<head>

<title>the big div!</title>

<style type="text/css">

</style>

</head>

<body>

<h1>The Big Div!</h1>

'mona try out this here div tag!</p>

'mona try out this here div tag<br />
and I'm gonna try it out good,<br />
see if it works like,<br />and even like how it works,<br />
like, know what I mean?</p>

<br />
<br />

<div class="pix1"></div>

<div class="pix2"></div>

<div class="pix3"></div>

<div class="pix4"></div>

<div class="pix5"></div>

<div class="pix6"></div>


<div class="text1">

three rings on three fingers as opposed to five rings on one finger or twelve rings on three people's fingers, or whatever!</p></div>
<div class="text2">

earrings and more earrings, in fact so many earrings, you'll be amazed!</p></div>
<div class="text3">

wanna look at some bracelets? well look no further than here!</p></div>


<br /><br /><br /><br />

This section of pictures was done using absolute positioning, and it worked out nicely except that the text under the pix is not centered, which burns my ass! But then I read another website about a different way to do "table-less layout", which is what this is all about, in the end...</p>

So if you wanna see what it looks like, see below...</p>


<div class="thinbox">
The content within this DIV element will be enclosed
in a box with a thin line around it, at least that's what Dave Ragget is telling me. Of course, I'll let you know if it works or what!
</div>
<br />

<div class="box">
The content within this DIV element will be enclosed
in a box with a thin line around it, at least that's what Dave Ragget is telling me. Of course, I'll let you know if it works or what!
</div>
<br />

<div class="color">
The content within this DIV element will be enclosed
in a box with a thin line around it, at least that's what Dave Ragget is telling me. Of course, I'll let you know if it works or what!
</div>
<br />

<div class="float">
<br />

three rings on three<br />fingers</p>
</div>


<div class="float">
<br />

an earring</p>
</div>

<div class="float">
<br />

groovy bracelets</p>
</div>

<p style clear="left"> </p>

<div class="float">
<br />

rings</p>
</div>

<div class="float">
<br />

earrings</p>
</div>

<div class="float">
<br />

bracelets</p>
</div>

<p style clear="left"> </p>

<div class="float">
<br />

rings</p>
</div>

<div class="float">
<br />

earrings</p>
</div>

<div class="float">
<br />

bracelets</p>
</div>

<p style clear="left">...funny, this wraps to the next line when it runs out of window... and how do you get two rows of three images each? (i gotta figure out how this float thing works...)</p>

 <br />

 <br />

 <br />

 <br />

 <br />

 <br />

 <br />

 <br />

 <br />

 <br />

</body>

</html>


</pre>


0

Response Number 4
Name: FBI Agent
Date: November 10, 2004 at 08:03:36 Pacific
Reply:

i REALLY dont understand what is going on with all of these div sections. i could probably do the same exact thing as you're trying to do and make it perfect the first time using nothing but tables. it could take a few hours depending on how many tables and rows im going to need to put on there(i've made a webpage with like 12 tables and that took me like 2 hours. it was horrible).

by the looks of how it is in my browser right now, i could probably make it in less than an hour, and i would do it too. only problem is is that i dont know exactly how you want it since there's no images on the thing you put up and you said your problem was there.

i'll try and make up something and see if its what you wanted and i'll probably post back tomorrow. later

FBI Agent

AIM: EliteAssassin187


0

Response Number 5
Name: FBI Agent
Date: November 10, 2004 at 08:22:03 Pacific
Reply:

damn im good. i made it using nothing but tables and it took me less than 20mins. well lets see if it all pastes in here correctly

hmmm... it's allright, but go here and view the source. later


<html>

<head>

<title>the big div!</title>

<style type="text/css">

</style>


</head>

<body>
<table>
<tr>
<td>
<table border="1">
<tr>
<td width="20%">
The Big Div!
</td>
</tr>
<tr>
<td>
'mona try out this here div tag!
</td>
</tr>
<tr>
<td>
'mona try out this here div tag

and I'm gonna try it out good,

see if it works like,

and even like how it works,

like, know what I mean?
</td>
</tr>
</table>
</td>
<td width="80%">
<table border="1">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>three rings on three fingers as opposed to five rings on one finger or twelve rings on three people's fingers, or whatever!</td>
<td>earrings and more earrings, in fact so many earrings, you'll be amazed!</td>
<td>wanna look at some bracelets? well look no further than here!</td>
</tr>
</table>
</td>
</tr>
</table>


<table border="1">
<tr>
<td>
This section of pictures was done using absolute positioning, and it worked out nicely except that the text under the pix is not centered, which burns my ass! But then I read another website about a different way to do "table-less layout", which is what this is all about, in the end...
</td>
</tr>
</table>


<table border="1">
<tr>
<td>
So if you wanna see what it looks like, see below...
</td>
</tr>
</table>


<table bordercolor="blue" border="1">
<tr>
<td>
The content within this DIV element will be enclosed in a box with a thin line around it, at least that's what Dave Ragget is telling me. Of course, I'll let you know if it works or what!
</td>
</tr>
</table>


<table border="1">
<tr>
<td>three rings on three fingers</td>
<td>an earring</td>
<td>groovy bracelets</td>
</tr>
<tr>
<td>rings</td>
<td>earrings</td>
<td>bracelets</td>
</tr>
<tr>
<td>rings</td>
<td>earrings</td>
<td>bracelets</td>
</tr>
</table>


<table border="1">
<tr>
<td>
...funny, this wraps to the next line when it runs out of window... and how do you get two rows of three images each? (i gotta figure out how this float thing works...)
</td>
</tr>
</table>
</body>

</html>


FBI Agent

AIM: EliteAssassin187


0

Related Posts

See More



Sponsored Link
Ads by Google
Reply to Message Icon



Post Locked

This post is quite old and has been locked from receiving new replies. Please create a new posting instead.


Go to Web Development Forum Home


Sponsored links
Ads by Google


Results for: CSS table-like layout prob...
website in progress www.computing.net/answers/webdevel/website-in-progress/2382.html

css tables in firefox www.computing.net/answers/webdevel/css-tables-in-firefox/1608.html

site layout www.computing.net/answers/webdevel/site-layout/1503.html