Css Div Help

atlanta · 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]

SuperBlue · 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>

Sign In

Css Div Help

Recommended Posts

atlanta

Link to comment

Share on other sites

SuperBlue

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information