hello,
in my guestbook design, i changed and put the entries in div instead of table. in the css file i want to declare the divs width in % because of the mobile devices.
when i add a new entry, the first entry resizes relatively to the new one, so it becomes smaller. if i write another new entry, the first one becomes even smaller, the second a bit bigger and the newest has always the right size.
here is my structure in the add.php file :
Code:
echo "<div class='commentsmessages'><div class='commentsmessagesheader'></div><div class='commentsmessage'>";
echo "<span>$yournametxt</span> $temp1 <br>";
echo "<span>$youremailtxt</span> $temp2 <br>";
echo "<span>$yourcountrytxt</span> $temp4 <br>";
echo "<span>$yourwebsitetxt</span> $temp5 <br>";
echo "<span>$yourMessagetxt</span> ".smiley_face($temp3)." <br>";
echo "</div></div>";
here is my structure in the list.php :
Code:
//echo $i."<br>end-".$end."-start-".$start;
echo "<div class='commentsmessages'><div class='commentsmessagesheader'>A note, an idea, an opinion...</div><div class='commentsmessage'>";
echo "<span>$listDatetxt: </span>";
$lines[$i]->showDate();
echo "<br><span>$listnametxt: </span>";
$lines[$i]->showFrom();
echo "<br><span>$listcountrytxt: </span>";
$lines[$i]->showCountry();
echo "<br><span>$listwebsitetxt: </span><a href='http://";
$lines[$i]->showWebsite();
echo "' target='_blank'>";
$lines[$i]->showWebsite();
echo "</a>";
echo "<br><br><span>$listMessagetxt: </span><br>";
$lines[$i]->showMessage();
echo "</div>";
}
here is my css code :
Code:
.commentsmessages {
width: 70%;
position: relative;
display: block;
margin: 0 auto 0;
}
.commentsmessagesheader {
font-family: "Michroma", Verdana, sans-serif;
font-size: 14px;
font-weight: bold;
letter-spacing: 5px;
padding: 3px;
background: #a5ad25;
box-shadow: 0px 1px 5px 1px #000000;
-moz-box-shadow: 0px 1px 5px 1px #000000;
-webkit-box-shadow: 0px 1px 5px 1px #000000;
-o-box-shadow: 0px 1px 5px 1px #000000;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=180, Strength=5);
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=180, Strength=5)";
}
.commentsmessage {
margin-bottom: 20px;
padding: 10px;
font-size: 14px;
background: #1c1f26;
text-align: left;
box-shadow: 0px 1px 5px 1px #222222;
-moz-box-shadow: 0px 1px 5px 1px #222222;
-webkit-box-shadow: 0px 1px 5px 1px #222222;
-o-box-shadow: 0px 1px 5px 1px #222222;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#222222, Direction=180, Strength=5);
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(color=#222222, Direction=180, Strength=5)";
}
.commentsmessage span {
color: #868991;
text-shadow: 0 -1px 0 #dddddd;
font-weight: lighter;
}
I checked the structure with Firefox Firebug and i see that the structure becomes like this :
Code:
<div class="commentsmessages">
<div class="commentsmessagesheader"></div>
<div class="commentsmessage">newest, 3rd message</div>
<div class="commentsmessages">
<div class="commentsmessagesheader"></div>
<div class="commentsmessage">2nd message</div>
<div class="commentsmessages">
<div class="commentsmessagesheader"></div>
<div class="commentsmessage">1st message</div>
</div><!-- 1st message -->
</div><!-- 2nd message -->
</div><!-- 3rd message -->
How and what should i change that the messages will be added in ONE div and only once which is THE "commentsmessages" ?
