atlanta Posted January 30, 2008 Share Posted January 30, 2008 Hey all , Started a design job since im pretty good at coding just needed to work on my website design side.... ok to start off i needed a little help on figureing out what to use divs. or table to get it done if you look at the attached picture you will see the layout format i need the comments to look like (on left).. could someone help me with the css values i need to use and div layout to accomplish that thanks... please let me know if u have any more questions. [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
SuperBlue Posted February 1, 2008 Share Posted February 1, 2008 This is something i've been working on, perhaps you will find it useful. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>brugbart.com - Learn By Doing: CSS Guestbook Layout</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> body { background: #000000; color: #ffffff; } #Basement { position: relative; width: 30em; margin: 1em auto; } #LeftContent { position: absolute; top: 0; left: 0; width: 30em; } .content1 { position: relative; } .content2 { position: relative; } .content1 img { position: absolute; right: 0; margin: 0 0 0 1em; } .content2 img { position: absolute; left: -7em; margin: 0 1em 0 0; } .content1 p { position: relative; right: 8em; padding: 0 1em; } .content2 p { position: relative; left: 0; padding: 0 1em; } .PBY { margin: 0;font-weight: bold;padding: 0 0 0 0.5em !important;position: absolute; } .content1 .PBY { right: 7em; width: 28.5em; background: #343230; } .content2 .PBY { left: 1em; width: 28.5em; background: #343230; } .DTIME { margin: 0;font-weight: bold;padding: 0 0 0 0.5em !important; } .content1 .DTIME { position: absolute; top: 0; left: 14em; } .content2 .DTIME { position: absolute; top: 0; left: 22em; } .content1 .DTIME { position: absolute; top: 0; left: 14em; } .content2 .DTIME { position: absolute; top: 0; left: 22em; } h2 { font-size: 1em;margin: 0; } img { border: 0.5em solid #343230;width: 6em;height: 7em; } span { color: #b0b379; } .Comm { font-weight: bold; } a:link { color: #f2f2ce; } a:visited { color: #236161; } a:active { color: #bcbe82; } a:hover { color: #bea582; } </style> </head> <body> <div id="Basement"> <div id="LeftContent"> <div class="content1"> <img src="saek/mappen-billeder/brugere/billee001.png"> <p class="PBY">Posted By: BlueBoden</p> <p class="DTIME">Date: 01/02/2008</p> <p>This is just a bunch of text. This is just a bunch of text. This is just a bunch of text. This is just a bunch of text. This is just a bunch of text. This is just a bunch of text. This is just a bunch of text. This is just a bunch of text. This is just a bunch of text. This is just a bunch of text. This is just a bunch of text. This is just a bunch of text. This is just a bunch of text. This is just a bunch of text. This is just a bunch of text. This is just a bunch of text. This is just a bunch of text. This is just a bunch of text. This is just a bunch of text. This is just a bunch of text. This is just a bunch of text. This is just a bunch of text. This is just a bunch of text. This is just a bunch of text.</p> <p class="Comm">Read/Post Comments <span>(1)</span></p> </div> <div class="content2"> <img src="saek/mappen-billeder/brugere/billee001.png"> <p class="PBY">Posted By: BlueBoden</p> <p class="DTIME">Date: 01/02/2008</p> <p>This is just a bunch of text. This is just a bunch of text. This is just a bunch of text. This is just a bunch of text. This is just a bunch of text. This is just a bunch of text. This is just a bunch of text. This is just a bunch of text. This is just a bunch of text. This is just a bunch of text. This is just a bunch of text. This is just a bunch of text.</p> <p class="Comm"><a href="www.brugbart.com">Read/Post Comments <span>(1)</span></a></p> </div> </div> </body> </html> 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.