Sorry, but I think this is gonna be a l–o–n–g one?!
So I could use help in two areas here…
1.) Fix the background behind the User Comments so it always extends the same height as the User Summary area to left
Currently…
Desired…
2.) Cleaning up my HTML and CSS because I’m sure they could be streamlined. (Be nice!!!)
Here is my current HTML with one sample Comment included…
<!-- ********************************-->
<!-- Attempt to Display Comments. *-->
<!-- ********************************-->
<div id="boxComments">
<h3>What Do You Think?</h3>
<ul>
<li>
<a id="addCommentButton" class="button" href="http://local.debbie/articles/add_comment.php">Add a Comment</a>
</li>
</ul>
<div class='commentWrapper'>
<div class='commentBody'>
<div class='userInfo'>
<a href='/account/profile.php?user=DoubleDee'>
<strong>DoubleDee</strong>
<img id='onlineStatus' src='/images/Light_Green_10.png' width='10' alt='Member Online' /><br />
<img class='noborder' src='/uploads/f21190299a795e9cf3439f7f62c223f79e023ab7.jpg' width='100'
alt='Member Photo'
title='Picture: Debbie sitting outside in the garden.' />
</a>
<dl>
<dt>Joined:</dt>
<dd>May 2012</dd>
<dt>Location:</dt>
<dd>Phoenix, AZ</dd>
<dt>Posts:</dt>
<dd>3</dd>
</dl>
</div>
<div class='userPost'>
<span class='commentDate'>Posted on: 2012-02-28 11:00pm</span>
<span class='commentNo'>#4</span>
<p>Update: Sorry to bother with this, I found the answer with a little minor digging. But, if anyone else was wondering the same, I think I'll explain.
<br />
<br />
The <textarea> tag is different than the <input> tag in that where you would normally put data to display in an <input> field under the 'value' attribute, the <textarea> tag stores the same information not in a 'value' attribute, but in between the opening and closing tags: eg. <textarea> value info goes here </textarea>.
<br />
<br />
Hope that helps someone, sometime...</p>
</div>
</div>
<div class='commentFooter'>
<img src='/images/Flag_Red_20x22.png' width='15' alt='Flag Comment' />
</div>
</div>
</div><!-- End of COMMENTS SECTION -->
And here are my Styles…
/*******************/
/* COMMENTS Styles */
/*******************/
#boxComments{
max-width: 640px;
margin: 0 auto;
margin: 40px auto;
padding: 0 20px 60px 20px;
border: 1px solid #333;
}
/* Still do not understand this! */
#boxComments:after{ /* Contain floats without overflow. */
content: "";
clear: both;
display: block;
height: 0;
font-size: 0;
}
#boxComments h3,
#boxAddComment h3{
height: 20px;
margin: 0px -20px 10px -20px;
padding: 0.4em 10px 0.2em 10px;
text-align: left;
line-height: 1.4em;
font-size: 1em;
font-weight: bold;
color: #FFF;
background-color: #333;
}
/* Row of Buttons. */
#boxComments ul{
margin: 0 0 0 20px;
padding: 0;
}
#boxComments ul li{
float: left;
margin: 5px 5px 0 0;
padding: 0;
}
#boxComments .commentWrapper{
width: 100%;
min-width: 498px;
float: left;
margin: 20px 0;
}
#boxComments .commentBody{
width: 100%;
float: left;
border-top: 1px solid #333;
}
#boxComments .userInfo{
float: left;
width: 160px;
padding: 10px 0px 0 0;
font-size: 0.9em;
text-align: center;
}
#boxComments .userInfo a{
padding: 0 0.7em 0 0;
color: #0071D8;
font-size: 1.1em;
font-weight: bold;
text-decoration: none;
}
#boxComments .userInfo dl{
margin: 0;
padding: 10px 0 0 0;
}
#boxComments .userInfo dt{
float: left;
width: 4.5em;
text-align: right;
}
#boxComments .userInfo dd{
margin: 0 0 0 5em;
text-align: left;
}
#boxComments .userPost{
margin: 0 0 0 160px;
/* float: left; /**/
/* width: 440px; /**/
/* FIX THIS */
/* max-width: 430px; /**/
/* min-width: 288px; /**/
padding: 10px 20px 20px 20px;
font-size: 0.9em;
}
#boxComments .commentDate{
display: inline-block;
padding: 0 0 10px 0;
color: #AAA;
}
#boxComments .commentNo{
display: inline-block;
float: right;
padding: 0 0 10px 0;
color: #AAA;
}
#boxComments .commentFooter{
float: left; /**/
/* width: 620px; /**/
/* min-width: 498px; /**/
width: 100%;
margin: 0 0px;
padding: 3px 0px 2px 0;
background-color: #FAFAFA;
}
I think if I can get help writing better HTML and CSS, a lot of my other problems with this part of my website will fix themselves, including:
[INDENT]- Issue with Background
- Broken Fluid Design
- Problem moving Flag over to the right.
[/INDENT]
Thanks,
Debbie