Web Design Help

[• Ambrose •]

This does not have to do with ProBoards, but I have come here in the past because I was able to find good assistance quickly. I'm trying to change the appearance of my Models page on my youth modeling project's website (www.yrmodeling.com)...

I can't get the tables to appear properly, so I can't put in the info until I can figure that out. If anyone could help, please do! I have attached a picture of what I'm trying to do as to make it easier to understand.

Attachments:

[trent]

I'm not an html expert,but I think you'll have to put in a table within a table I can't get the 3 columns on the right

<table width="67%" border="5" cellspacing="0" cellpadding="4">
<tr>
<!-- Row 1 Column 1 -->
<td >
<b>
R1C1
</b>
</td>
<!-- Row 1 Column 2 -->
<td >
<b>
<table><br>
<td>pic</td> </b>
</td>
</tr>
<tr>
<!-- Row 2 Column 1 -->
<td >
<b>
R2C1
</b>
</td>
<!-- Row 2 Column 2 -->
<td >
R2C2
</td>
</tr>
<tr>
<!-- Row 3 Column 1 -->
<td >
<b>
R3C1
</b>
</td>
<!-- Row 3 Column 2 -->
<td >
R3C2
</td>
</tr>
</table>

[Tumbleweed]

Hi • Ambrose • ,

I moved this to where it fits a bit better. Try this:


<style>
#my-wrapper{width:500px;border:3px solid black;padding:8px;}
#first_box{float:left;border:1px solid black;padding:8px;}
#first_box img{width:150px;height:150px;}
#little_boxes_wrapper{width:220px; float:left;}
#little_boxes{width:200px;height:50px;border:1px solid black;margin: 0px 8px 8px 8px;}
           
</style>
       
       
<div id="my-wrapper">
<div id="first_box">
<a href="http://link.com"><img src="http://i657./uu300/EliteList/Bkgrns/4x4/CC/tud26.png"></a>
</div>
       
  <div id="little_boxes_wrapper">
      <div id="little_boxes">Content</div>
      <div id="little_boxes">Content</div>
      <div id="little_boxes">Content</div>
       
</div>  
</div>
<p style="clear:left;"></p>



That should get you started and you can customize the css. Just make sure you don't make something too big or it will throw the little boxes below the image.

[• Ambrose •]

Tumbleweed,
That looks good. I used it but had to change a few things so I could get it looking the way I want. But now I have to use so many <br />.'s...
Any way I can put spaces between the boxes while maintaining the main box's height? I'm also thinking about making the modeling types scroll-able from left to right but no idea how to do that.

[Tumbleweed]

Mar 17, 2016 17:02:23 GMT -8 • Ambrose • said:

Tumbleweed ,
That looks good. I used it but had to change a few things so I could get it looking the way I want. But now I have to use so many <br />.'s...
Any way I can put spaces between the boxes while maintaining the main box's height? I'm also thinking about making the modeling types scroll-able from left to right but no idea how to do that.

Instead of breaks just add margins to them. I already had some margins in there:

So this ....
#little_boxes{width:200px;height:50px;border:1px solid black;margin: 0px 8px 8px 8px;}

...might be this...

#little_boxes{width:200px;height:50px;border:1px solid black;margin: 8px 8px 18px 8px;}

(in case you don't know, the first pixel amount if for the top of the box, then right, then bottom and then left. I just changed the bottom margin amount.)

Oh, edit because I forgot to address the scroll question you had. When you say scroll do you mean like a marquee or do you mean with a manual scroll bar at the bottom?

[• Ambrose •]

Mar 18, 2016 10:27:21 GMT -8 Tumbleweed said:

Mar 17, 2016 17:02:23 GMT -8 • Ambrose • said:

Tumbleweed ,
That looks good. I used it but had to change a few things so I could get it looking the way I want. But now I have to use so many <br />.'s...
Any way I can put spaces between the boxes while maintaining the main box's height? I'm also thinking about making the modeling types scroll-able from left to right but no idea how to do that.

Instead of breaks just add margins to them. I already had some margins in there:

So this ....
#little_boxes{width:200px;height:50px;border:1px solid black;margin: 0px 8px 8px 8px;}

...might be this...

#little_boxes{width:200px;height:50px;border:1px solid black;margin: 8px 8px 18px 8px;}

(in case you don't know, the first pixel amount if for the top of the box, then right, then bottom and then left. I just changed the bottom margin amount.)

Oh, edit because I forgot to address the scroll question you had. When you say scroll do you mean like a marquee or do you mean with a manual scroll bar at the bottom?

Not sure about the scroll because I'm still working out the layout and all that... I wanted a manual scroll bar, if I was to go with that idea.

[Tumbleweed]

Mar 18, 2016 20:07:27 GMT -8 • Ambrose • said:

Mar 18, 2016 10:27:21 GMT -8 Tumbleweed said:

Instead of breaks just add margins to them. I already had some margins in there:

So this ....
#little_boxes{width:200px;height:50px;border:1px solid black;margin: 0px 8px 8px 8px;}

...might be this...

#little_boxes{width:200px;height:50px;border:1px solid black;margin: 8px 8px 18px 8px;}

(in case you don't know, the first pixel amount if for the top of the box, then right, then bottom and then left. I just changed the bottom margin amount.)

Oh, edit because I forgot to address the scroll question you had. When you say scroll do you mean like a marquee or do you mean with a manual scroll bar at the bottom?

Not sure about the scroll because I'm still working out the layout and all that... I wanted a manual scroll bar, if I was to go with that idea.

Manually scrolling left to right is kind of a bear to do but I did do it on one test site so if you are actually going to use the code I gave you, let me know and I'll work on the scroll.