hassank1 Posted July 11, 2008 Share Posted July 11, 2008 Hey I am working on a social network website .. so one of the essential components in such a site . is to use a box that contains a header + title .. and content (mostly a thumnails but not in all cases) here's exactly what I am trying to do : however , I didn't succed to build it (am beginner , however I know the basics of css) so could someone helped me please.. thx Quote Link to comment Share on other sites More sharing options...
xtopolis Posted July 12, 2008 Share Posted July 12, 2008 I made something similar. Thanks for the challenge. This may not be exactly what you're looking for, but it's definitely tweakable to get there. Pretty close eh? Enjoy. index.html <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="index.css" /> </head> <body> <div id="Wrapper"> <div id="r_g"> <h3 id="rg">Recent Groups</h3> <div class="floatright"><img src="" class="rgThumbs"><br />I am a caption.</div> <div class="floatright"><img src="" class="rgThumbs"><br />No wait, I'm a caption.</div> <div class="floatright"><img src="" class="rgThumbs"><br />This word is certainly a little loooongerrrrr.</div> <p style="clear: both;"> </p> <div class="floatright"><img src="" class="rgThumbs"><br />Luckily most captions are small.</div> <div class="floatright"><img src="" class="rgThumbs"><br />You can always make the box wider.</div> <div class="floatright"><img src="" class="rgThumbs"><br />To accomdate bigger captions.</div> <p style="clear: both;"> </p> <!-- THIS TRAILING <P> IS IMPORTANT, MAKES THE RECENT GROUP BOX EXTEND IN HEIGHT TO MATCH THE IMAGES--> </div> </div><!-- wrapper --> </body> </html> index.css * { margin: 0; padding: 0;} html,body { width: 100%; height: 100%;} div#wrapper { width: 85%; margin: 0 auto;} div#r_g { right: 0; border: 1px solid purple; background-color: rgb(226,226,226); width: 300px; /*This size needs to match the (3 images) X .floatright width + (3images) X [(2) X .floatright padding for each side]*/ /* ie: 80 * 3 = 240 => + 3 * (2 * 10) = 300 totalpx*/ } h3#rg { padding: 3px; padding-bottom: 5px; color: white; background-color: purple; font-size: 8pt; font-family: 'Verdana'; margin-bottom: 10px; font-weight: normal; } .floatright { float: left; width: 80px; padding: 10px; padding-bottom: 0px; font-size: 10px; font-family: 'Tahoma', monospace; text-align: center; } img.rgThumbs { border: 1px solid black; height: 40px; width: 40px; margin-bottom: 5px; } Quote Link to comment Share on other sites More sharing options...
hassank1 Posted July 12, 2008 Author Share Posted July 12, 2008 thanks man ! I'll check it .. Quote Link to comment Share on other sites More sharing options...
hassank1 Posted July 12, 2008 Author Share Posted July 12, 2008 it worked !! however I want to ask is it necessary to user the wrapper div ? or can I omit it ? Quote Link to comment Share on other sites More sharing options...
hassank1 Posted July 12, 2008 Author Share Posted July 12, 2008 I am having a problem in firefox .. check the picture below Quote Link to comment Share on other sites More sharing options...
xtopolis Posted July 12, 2008 Share Posted July 12, 2008 hassank1 - 1)The wrapper is not necessary. I just have a habit of wrapping my code. 2)Does it not work AFTER you changed what I had, or did it not work from the get go? And in what version of FF? I was at work when I wrote that using FF2, IE6, and it seemed to be fine. At home in FF3 and IE7, it works well, but IE7 has right side padding issues like in your pics. 3) Are you going to use pictures of a set size? ie: 32x32 pix ONLY, or will they be variable sized? If so, you will need to set it up to accommodate the largest size images, and change your widths accordingly. (Like the comment I left in the css file) Quote Link to comment Share on other sites More sharing options...
hassank1 Posted July 13, 2008 Author Share Posted July 13, 2008 hmm .. ok I'll check the code again .. I think I've modified something .. about the size I am going to use pictures of the same width but with different heights. Quote Link to comment Share on other sites More sharing options...
hassank1 Posted July 13, 2008 Author Share Posted July 13, 2008 problem solved .. the problem was that another attached style sheet override some rules .. (margin) .. so I fixed it .. Quote Link to comment Share on other sites More sharing options...
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.