- Posts: 15
- Thank you received: 1
Guestbook entries in div with % width
- igorlaszlo
- Topic Author
- Offline
- New Member
-
Less
More
10 years 10 months ago #13493
by igorlaszlo
Guestbook entries in div with % width was created 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 :
here is my structure in the list.php :
here is my css code :
I checked the structure with Firefox Firebug and i see that the structure becomes like this :
How and what should i change that the messages will be added in ONE div and only once which is THE "commentsmessages" ?
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.
- igorlaszlo
- Topic Author
- Offline
- New Member
-
Less
More
- Posts: 15
- Thank you received: 1
10 years 10 months ago #13494
by igorlaszlo
Replied by igorlaszlo on topic Guestbook entries in div with % width
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.
10 years 10 months ago #13495
by Pete
DigiOz Webmaster
www.digioz.com
Replied by Pete on topic Guestbook entries in div with % width
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:
Note that I added a "</div>" to the last "echo" statement.
Pete
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.
- igorlaszlo
- Topic Author
- Offline
- New Member
-
Less
More
- Posts: 15
- Thank you received: 1
10 years 10 months ago #13496
by igorlaszlo
Replied by igorlaszlo on topic Guestbook entries in div with % width
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![:) :)](/media/kunena/emoticons/8.png)
Now it looks like fine...
Thanks a lot !
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
![:) :)](/media/kunena/emoticons/8.png)
Now it looks like fine...
Thanks a lot !
Please Log in or Create an account to join the conversation.
10 years 10 months ago #13497
by Pete
DigiOz Webmaster
www.digioz.com
Replied by Pete on topic Guestbook entries in div with % width
You are very welcome. Yes, it does look much better.
![:) :)](/media/kunena/emoticons/8.png)
DigiOz Webmaster
www.digioz.com
Please Log in or Create an account to join the conversation.
9 years 10 months ago #13884
by tazygill
Tazy
Replied by tazygill on topic Guestbook entries in div with % width
"commentsmessages" DIV,.....????/ :huh: :huh:
Tazy
Please Log in or Create an account to join the conversation.
Time to create page: 0.127 seconds