 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
dramosde
Joined: 31 Jul 2009 Posts: 4
|
Posted: Fri Jul 31, 2009 11:19 pm Help with Scroll Box Overflow (DIV CODES) (I AM NEW TO HTML) |
|
|
|
Hi,
I am having a little trouble fixing a text overflow problem in my website.
If you look at the website: www.granjacapital.com
You will see that the text "ffffffffffffffffff" is continuous..it keeps on going and expanding in width...
What I would like is that the text would go to the next line as soon as the white box finishes and so on... Therefore, there would only be a vertical scroll bar, and not a horizontal one.. Below is the code I currently have:
(I copied a bit above so you can get the cell measures...)
<td width="398" height="372" colspan="5" valign="top" bgcolor="#FFFFFF">
<div id="holder" style="width: 398px; overflow: auto;">
<?php
if ($_REQUEST['p'] && file_exists($_REQUEST['p'].".php")) {
include $_REQUEST['p'].'.php';
}
else if ($_REQUEST['p']) {
echo "Page not found!";
}
else {
include "home.html";
}
?>
</div>
</td>
Also, if you have any suggestions whatsoever as to design, corrections or improvements, PLEASE, let me know...
Any help will be very much appreciated... I am very new to HTML coding, I am trying to learn on my own time...
Cheers |
|
sticks464

Joined: 31 Dec 2006 Posts: 2624
|
Posted: Sat Aug 01, 2009 4:53 am |
|
|
|
It's possible that the span combined with the image is causing the horizontal overflow, and the center aligned div doesn't help.
| Code: |
<div align="center" class="style1">
<p><span class="style3">Seja Bem-vindo,</span> fffffffffffffffffffffffffffffffffffffffffffffffffffff</p>
<p><img src="images/mainpageimage.jpg"><span class="style4"></span></p>
<p>ggggggg</p>
<p>gggggggggggggg</p>
<p>gggggggggggggg </p>
</div>
|
Remove the spans and center the paragraphs with a style.
| Code: |
<div class="style1">
<p><span class="style3">Seja Bem-vindo,</span><br> fffffffffffffffffffffffffffffffffffffffffffffffffffff</p>
<img src="images/mainpageimage.jpg">
<p>ggggggg</p>
<p>gggggggggggggg</p>
<p>gggggggggggggg </p>
</div> |
| Code: |
.style1 {
color: #000066;
width:375px;/*same width as image*/
overflow-x: hidden;
}
.style1 p {
text-align:center;
font-size: 24px;
font-weight: bold;
}
.style3 {font-size: 20px}
.style4 {font-size: 26px} |
|
|
dramosde
Joined: 31 Jul 2009 Posts: 4
|
Posted: Sat Aug 01, 2009 2:53 pm |
|
|
|
I am not quite sure where to include such code because what happens is:
The entire frame, except the text frame is fixed. THe white box (the text frame) is in a PHP mode where all the links call up a different page to be shown in the text frame. So i have many html pages, and the index.html that simply calls these other pages... so I don't have to edit the entire frame for each page in case something changes outside the text frame.
I think i was very confusing in this explanation.. let me know.. haha |
|
sticks464

Joined: 31 Dec 2006 Posts: 2624
|
Posted: Sun Aug 02, 2009 4:18 am |
|
|
|
Even though your frame is set for a width of 398px, you have to have room for the vertical scrollbar.
The width will have to be the same for all content shown or there will be a horizontal scrollbar. The content within the div will have to be styled by individual elements to prevent overflow.
On tour current layout add overflow-x:hidden and you can see the results. Anything that exceeds the width of the image will be hidden and there should be no horizontal scrollbar.
| Code: |
| <div id="holder" style="width: 375px; overflow-x: hidden;"> |
This should not affect the layout since the <td> width is 398px and the table controlls the image layout. |
|
|
|
You cannot post new topics in this forum You cannot reply to topics in this forum You cannot edit your posts in this forum You cannot delete your posts in this forum You cannot vote in polls in this forum
|
|
|
|
|
 |
|
|
|
|
|
|
|