harryd Posted February 5, 2009 Report Posted February 5, 2009 I am looking around the web to find a good tutorial to style the box. Any suggestions. Thanks Quote
Wickham Posted February 5, 2009 Report Posted February 5, 2009 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 Quote
PicnicTutorials Posted February 5, 2009 Report Posted February 5, 2009 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; } Quote
harryd Posted February 5, 2009 Author Report Posted February 5, 2009 (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 February 5, 2009 by harryd Quote
Wickham Posted February 5, 2009 Report Posted February 5, 2009 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 Quote
harryd Posted February 5, 2009 Author Report Posted February 5, 2009 (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 February 5, 2009 by harryd Quote
lm Posted February 6, 2009 Report Posted February 6, 2009 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. Quote
harryd Posted February 6, 2009 Author Report Posted February 6, 2009 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 Quote
virtual Posted February 6, 2009 Report Posted February 6, 2009 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? Quote
harryd Posted February 6, 2009 Author Report Posted February 6, 2009 I will use his sample today. How would you add a border to the cells in Wickham's sample. Thanks a lot Quote
harryd Posted February 6, 2009 Author Report Posted February 6, 2009 (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 February 6, 2009 by harryd Quote
Wickham Posted February 6, 2009 Report Posted February 6, 2009 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; } Quote
harryd Posted February 6, 2009 Author Report Posted February 6, 2009 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; } 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 Quote
virtual Posted February 6, 2009 Report Posted February 6, 2009 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; } Quote
virtual Posted February 6, 2009 Report Posted February 6, 2009 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; } Quote
harryd Posted February 6, 2009 Author Report Posted February 6, 2009 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. Quote
harryd Posted February 6, 2009 Author Report Posted February 6, 2009 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 Quote
virtual Posted February 7, 2009 Report Posted February 7, 2009 Have you changed your html markup? It would be better if you posted that too. Quote
Andrea Posted February 7, 2009 Report Posted February 7, 2009 border: 1px solid #FFFFFF; background-color:#FFFFFF; Your background and border have the same color - you won't be able to see it. Quote
jlhaslip Posted February 7, 2009 Report Posted February 7, 2009 Might be able to pick up an idea or two from the following link. http://jlhaslip.com/samples/gallery/thumbs/index.html Quote
harryd Posted February 7, 2009 Author Report Posted February 7, 2009 (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 February 7, 2009 by harryd Quote
jlhaslip Posted February 7, 2009 Report Posted February 7, 2009 Would be nice to have a link to your test page. Or a listing of the html/css you are working with. Quote
harryd Posted February 7, 2009 Author Report Posted February 7, 2009 (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 February 7, 2009 by harryd Quote
jlhaslip Posted February 7, 2009 Report Posted February 7, 2009 We need the html as well. All of it. Quote
jlhaslip Posted February 7, 2009 Report Posted February 7, 2009 (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 February 7, 2009 by jlhaslip Quote
lm Posted February 8, 2009 Report Posted February 8, 2009 in all, if you need a gallery, do Google search on "CSS gallery", download or copy-paste it and edit. Here is an example on how to build such gallery from scratch You can also re-use the code from this template. Quote
Recommended Posts
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.