Jump to content
Stef's Coding Community
harryd

styling border boxes

Recommended Posts

When you say border boxes, do you mean borders around boxes, like shadow borders?

 

You could look at items 12 to 14 here:-

http://w ww.wickham43.net/specialeffects.php#shadows

Share this post


Link to post
Share on other sites
I am looking around the web to find a good tutorial to style the box.

Any suggestions.

 

Thanks

 

I wrote an extremely detailed tutorial on just that. Here it is in it's entirety.

 

#box {

width:200px;

height:200px;

background:red;

border:1px solid #000;

}

 

Share this post


Link to post
Share on other sites

For example.

If I would use 3 rows and 3 cols in #content. I would have an image with few words under.

How can I style td borders to be all the same.

 

Thanks for your help.

Edited by harryd

Share this post


Link to post
Share on other sites

We don't recommend tables and td cells here for layout, try divs like this which produces three equal width columns with the same height. You can separate the styles for the columns and gve them different widths or heights if you want.

br />"http://www.w3.org/TR/html4/strict.dtd"> 








Test

<br />#content { width: 600px; margin: auto; }<br />.col1, .col2, .col3 { float: left; width: 200px; height: 50px; }<br />.clear: { clear: both; width: 100%; height: 0; visibility: none; }<br />




Column 1 row 1
Column 2 row 1
Column 3 row 1
 
Column 1 row 2
Column 2 row 2
Column 3 row 2
 
Column 1 row 3
Column 2 row 3
Column 3 row 3
 






Share this post


Link to post
Share on other sites

This is what I used in Dremweaver and it does not show any borders.

 

 

 

 

 

I don't know what I am doing wrong.

I would like to add some style or border to the 6 cells.

 

Thanks

Edited by harryd

Share this post


Link to post
Share on other sites

if you still desperately need a table, use Tablecloth.

Edit CSS, remove JS if you dont need to highlight columns/rows; at least it could give you correct markup.

Share this post


Link to post
Share on other sites

I don't need to use tables.

I am learning and will try to use what Wickham suggested.

If u have any suggestions from Wichams example.

 

Thanks

Share this post


Link to post
Share on other sites

Your code did not work because you did not have a table or row set up, only the data.

 

Did you try Wickham's code. What suggestions do you need?

Share this post


Link to post
Share on other sites
This is what I used in Dremweaver and it does not show any borders.

 

 

 

 

could you help me with the first col and where should the code go in the style.

 

Column 1 row 1

 

#content {

float: left;

color: #333;

border: 1px solid #FFFFFF;

margin: 0px 0px 0px 0px;

padding: 10px;

height: 630px;

width: 506px;

display: inline;

background-color: #FFFFFF;

}

 

I hope I am not asking to much.

You guys are huge help.

Edited by harryd

Share this post


Link to post
Share on other sites

bordercolor="#3d733b" is an old method used for tables, it won't work with divs.

 

Edit the styles for the divs in my example above like this:-

 

.col1, .col2, .col3 { float: left; width: 200px; height: 50px; border: 1px solid #ee678a; }

Share this post


Link to post
Share on other sites

This is what I did till now and everything is broken.

 

#content { width: 506px;

height: 630px;

margin: auto;

background-color:#FFFFFF;

display:inline;

padding: 10px; }

.col1, .col2, .col3 { float: left; width: 200px; height: 50px; border:#006633; }

 

P

 

Here is my original content.

 

#content {

float: left;

color: #333;

border: 1px solid #FFFFFF;

margin: 0px 0px 0px 0px;

padding: 10px;

height: 630px;

width: 506px;

display: inline;

background-color: #FFFFFF;

}

 

I am stuck :|

Help

Share this post


Link to post
Share on other sites

It is broken because your content div is only 506px wide and you have 3 columns of 200px each plus the extra 1px on each side for the border. So you need to make your content div 200px times 3, plus 6px for the borders.

 

In other words:

 

#content {

width: 606px;

height: 630px;

margin: auto;

background-color:#FFFFFF;

display:inline;

padding: 10px;

}

 

.col1, .col2, .col3 {

float: left;

width: 200px;

height: 50px;

border: 1px solid #006633; }

Share this post


Link to post
Share on other sites

Oops I didn't see a couple of lines in your content div that you should remove. You don't need the padding and take out display: inline;

 

#content {

width: 606px;

margin: auto;

background-color:#FFFFFF;

}

Share this post


Link to post
Share on other sites

Would you check my whole style sheet if I post it.

My goal is to have 9cells for the pics with few words under and every cell to have the same style.

 

Thanks Virtual and Wickham for your time.

Share this post


Link to post
Share on other sites

Here are two styles I used for my content. If anybody could take a look.

 

This is the new style but it does not match the line up like the old one.

 

#content {

float: left;

width: 522px;

height: 630px;

margin: auto;

border: 1px solid #FFFFFF;

background-color:#FFFFFF;

}

.col1, .col2, .col3 {

float: left;

width: 150px;

height: 150px;

border: 1px solid #006633;

margin: 0px 0px 0px 0px;

}

 

Here is the old style

 

#content {

float: left;

color: #333;

border: 1px solid #ccc;

margin: 0px 0px 0px 0px;

padding: 10px;

height: 530px;

width: 526px;

display: inline;

background-color: #FFFFFF;

 

My goal is not to use tables. I did follow the advice above but still need some help.

 

Thanks

Share this post


Link to post
Share on other sites

border: 1px solid #FFFFFF;

background-color:#FFFFFF;

Your background and border have the same color - you won't be able to see it.

Share this post


Link to post
Share on other sites

I did change html.

Thanks for the link and your help guys.

Since I started to work on #content footer and right column went out of line. I cant figure out the spacing between cols.

I would appreciate a tutorial link.

 

Thanks again!

Edited by harryd

Share this post


Link to post
Share on other sites

here is the css that I am woking on.

 

#content {

float: left;

width: 526px;

height: 630px;

margin: auto;

border: 1px solid #FFFFFF;

background-color:#FFFFFF;

}

 

I am not able to work with cols and rows. Space between them etc. Wickham and Virtual were helpful but still need more help.

 

.col1, .col2, .col3 {

float: left;

width: 150px;

height: 150px;

 

}

 

Thanks

Edited by harryd

Share this post


Link to post
Share on other sites

Needed to use a different technique to clear the content div.

 

br />"http://www.w3.org/TR/html4/strict.dtd"> 








Test

<br />    <br />body { <br />    margin: 0;<br />    padding: 0;<br /><br />    }<br />    <br />#content  {<br />    <br />    width: 490px;<br />    height: auto;<br />    border: 10px dotted #cff;<br />    padding: 2px;<br />    <br />    }<br />    <br />.col1, .col2, .col3 {<br />    float: left;<br />    width: 150px;<br />    height: 150px;<br />    border: 3px solid #000;<br />    background-color:#FFc;<br />    margin: 3px;<br />   <br />}<br /><br /><br />.clear:after{ <br />    content: "."; <br />    display: block; <br />    height: 0; <br />    font-size:0; <br />    clear: both; visibility:hidden; <br />    } <br />.clear {<br />    display: inline-block;<br />    } <br />    <br />/* Hides from IE Mac \*/ <br />* html .clear{<br />    height: 1%;<br />    } <br />.clear{<br />    display:block;<br />    } <br />/* End Hack */ <br /><br />





Column 1 row 1
Column 2 row 1
Column 3 row 1

Column 1 row 2
Column 2 row 2
Column 3 row 2

Column 1 row 3
Column 2 row 3
Column 3 row 3




 

More info on this clearing method can be found at http://csscreator.com/?q=attributes/containedfloat.php

Edited by jlhaslip

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...