Jump to content

Recommended Posts

Posted
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;

}

 

Posted (edited)

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
Posted

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
 






Posted (edited)

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
Posted (edited)
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
Posted

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; }

Posted

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

Posted

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; }

Posted

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;

}

Posted

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.

Posted

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

Posted

border: 1px solid #FFFFFF;

background-color:#FFFFFF;

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

Posted (edited)

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
Posted (edited)

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
Posted (edited)

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

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...