Guestbook entries in div with % width

More
10 years 6 months ago #13493 by igorlaszlo
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" ?

Please Log in or Create an account to join the conversation.

More
10 years 6 months ago #13494 by igorlaszlo
You can see it in live here : www.igorlaszlo.com/#contact in the "comments" tab.

Please Log in or Create an account to join the conversation.

More
10 years 6 months ago #13495 by Pete
Hello Igor,

This is happening because you are forgetting to close your "commentsmessages" DIV, which is causing each of the following commentsmessages DIV to be inside the previous commentsmessages DIV.

In other words, change the code block in list.php to this:
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></div>"; }

Note that I added a "</div>" to the last "echo" statement.

Pete

DigiOz Webmaster
www.digioz.com
The following user(s) said Thank You: igorlaszlo

Please Log in or Create an account to join the conversation.

More
10 years 6 months ago #13496 by igorlaszlo
Thanks Pete !

It is evident... i just variated it so much that when i found the right way, i just did not put back the closing div, however it was there in the beginning :)

Now it looks like fine...

Thanks a lot !

Please Log in or Create an account to join the conversation.

More
10 years 6 months ago #13497 by Pete
You are very welcome. Yes, it does look much better. :)

DigiOz Webmaster
www.digioz.com

Please Log in or Create an account to join the conversation.

More
9 years 6 months ago #13884 by tazygill
"commentsmessages" DIV,.....????/ :huh: :huh:

Tazy

Please Log in or Create an account to join the conversation.

Time to create page: 0.123 seconds
Powered by Kunena Forum