asked on

problem with text/info going outside of defined areas, how do I fix this please

I have a site thats at
http://www.dragon-software.info/sites/Stingers2/
if you look in the bottom right conner it has the text of
"Watch major sporting events on our many tv sets and a 100 inch big screen!"
this is the area if too much text is typed in it makes the table go nuts(misaligned)
I also have this problem above with the events (but I would assume if the bottom right ones fixed i can copy the same logic to other places in the page.

please understand this too much text is due to an admin allowing for custom text to be placed in that area, I need to limit the text on this page, and can not limit it in the admin area.

how do I limit or stop problems on this page
thank you in advance for any help or code you may provide

ddrudik

Where do they add this text? Directly to the page or in another area? Is the text applied using PHP? Seemed to wrap fine when I added additional text manually to the generated page in that area. Maybe you could provide example w/source code of the problem.

Johnny

ASKER

the admin is one I designed. using tinymce, a wyswg interface, and the sites live(at there site) and there typing into much text in that area and messing up the page.

http://www.dragon-software.info/sites/Stingers2/admin/content_admin.php
login ee pw admin <<--- note this will be deleted when question is completed
thats an example of the interface, the page is the Home Page (Bottom Right Panel)

example just type in allot of info you'll see the problem

paulp75

on this line

<div style="height:330;width:98%">
take out the height
<div style="width:98%">

Johnny

ASKER

paulp75:

is there a way to keep the look and if the text is too much it does nothing, basically lock the table sizes in place maybe?

so if text is to much it does not move the alignments?

Johnny

ASKER

i added an event, and the picture and the text is now way off the page...
how do i fix this?

paulp75

try it with css. took a while to put together for you
might be easier if you got rid of the tables altogether

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Stingers 2 Sports Lounge - Urbana, Ohio</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <LINK HREF="style.css" REL="stylesheet" TYPE="text/css">
    <link rel="shortcut icon" href="/favicon.ico">
<script type="text/javascript" language="javascript">
<!-- hide script from old browsers
 
//detect browser:
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3) browserVer = "1";
else if (browserName == "Microsoft Internet Explorer" && browserVer == 4) browserVer = "1";
else browserVer = "2";
 
//preload images:
if (browserVer == 1) {
a1 = new Image(107,36);
a1.src = "images/Home.gif";
a2 = new Image(107,36);
a2.src = "images/Home_Red.gif";
b1 = new Image(127,36);
b1.src = "images/Upcoming_Events.gif";
b2 = new Image(127,36);
b2.src = "images/Upcoming_Events_Red.gif";
c1 = new Image(137,36);
c1.src = "images/Drink_Specials.gif";
c2 = new Image(137,36);
c2.src = "images/Drink_Specials_Red.gif";
d1 = new Image(147,36);
d1.src = "images/Gallery.gif";
d2 = new Image(147,36);
d2.src = "images/Gallery_Red.gif";
e1 = new Image(157,36);
e1.src = "images/Map_Directions.gif";
e2 = new Image(157,36);
e2.src = "images/Map_Directions_Red.gif";
f1 = new Image(167,36);
f1.src = "images/Contact_Us.gif";
f2 = new Image(167,36);
f2.src = "images/Contact_Us_Red.gif";
}
 
//image swapping function:
function hiLite(imgDocID, imgObjName, comment) {
if (browserVer == 1) {
document.images[imgDocID].src = eval(imgObjName + ".src");
window.status = comment; return true;
}}
//end hiding -->
</script>
 
 <script type="text/javascript" src="dropinslideshow.js">
 
 /***********************************************
 * Drop-in Slideshow Script- © Dynamic Drive (www.dynamicdrive.com)
 * This notice must stay intact for legal use.
 * Visit http://www.dynamicdrive.com/ for full source code
 ***********************************************/
 
</script>
</head>
<body>
 
 
 
<div style="clear:both; width:800px; margin-left:1px; margin-top:5px; margin-right:1px; height:66px;"><img src="images/Top_Header.gif" width="800" height="66" alt=""></div>
<div id="contentcontainer" style="background-repeat:repeat-x; background-position:top;  background-image:url(images/Main_body.gif); width:800px;">
<div style="clear:both; width:224px; float:left;">
<img src="images/Bottom_Bee.gif" width="224" height="177" alt="">
			
            <div STYLE="margin-left:20px; margin-top:5px; margin-right:10px">
	<!-- left side panel -->
		<p>Hours: M-Sat 1 p.m. to 2:30 a.m.<br /> Closed Sunday <br /> Happy Hour: M-F 6-9<br /> <br /> <strong> Stingers 2 Sports Lounge</strong><br /> 244 		Patrick Ave.<br /> Urbana, OH 43078 <br /> (937) 653-8448<br /> <br /> 21+ Establishment</p>
		<p>&nbsp;</p>         <!-- left side panel -->
  </div>
</div>
  
 
		<!--  right panel starts here -->
<div style="width:576px; float:right;">
 
<div><strong><big>Next Events at Stingers 2 Sports Lounge</big></strong> &nbsp;&nbsp;<small><a href="events.php">Click here for more events</a></small>
				 
 
<br />
				 
				
			</font>
			<hr align="center" width="576px">
			<!-- upper middle panel -->
                     <p><span style="font-family: Arial,Helvetica,sans-serif; color: black;">We are honored that you are visiting our web site.
   We are always striving to find new
   ways to get our message out to current and prospective patrons.
   This web site allows us to reach people we may never have been
   able to reach before. </span></p>
 
<div style="text-align:center; margin-left:auto; margin-right:auto; font-family: Times New Roman,Times,serif; font-size: x-large;"><em>Thank you</em> <br /> <span style="font-family: Times New Roman,Times,serif; font-size: xx-small;"> The Stingers 2 Sports Lounge Staff</span></div>                  
   <!-- upper middle panel end-->
   
		<div STYLE="width:300px; margin-left:2px; margin-top:5px; float:left;">
 
		    		    
		    <script type="text/javascript">
		    <!--
		    var myimages=new Array()
		       myimages[0]=["pictures/bartenders.png", "", ""]
myimages[1]=["pictures/dancefloor.png", "", ""]
myimages[2]=["pictures/entrancestaff.png", "", ""]
myimages[3]=["pictures/pooltable.png", "", ""]
myimages[4]=["pictures/theband.png", "", ""]
		    
		    //Create new drop-in slideshow
		    //Syntax: new dropinslideshow(image_array, slideshow_width, slideshow_height, delay_before_rotation)
		    new dropinslideshow(myimages,280,170,3000,true)
		    -->
		</script>
		    </div>
		<div style="width;276px; float:left;margin-left:1px; margin-top:5px">
		&nbsp;
		    <font color="black" face="Arial,Helvetica,sans-serif" size="2">
			<!-- bottom right panel -->
 
			<p style="margin-top:0px; margin-left:2px;"><span style="font-size: xx-small;"><strong>Watch major sporting events on our many tv sets and a 100 inch big screen!</strong></span><br /><br /> <span style="font-size: xx-small;"> Corn-hole tournaments.<br /></span><span style="font-size: xx-small;">Weekly contests.</span><br /><span style="font-size: xx-small;">Smokers welcome. on our </span><span style="font-size: xx-small;">outisde patio with heated canopy.</span></p>
 </font>
<p><span style="font-size: xx-small;">Every Wednesday night is guitar hero night!</span></p>
 
 
 
			<!-- upper left panel -->
 
				 
			</div>
		
		   
		</div>
 
	<br clear="all">
	</div>
		
 
 
 
	<div style="clear:both;">
			<!-- <img src="images/Main_Under_Bee.gif" width="224" height="257" alt=""> -->
<div style="float:left;"><img name="a" src="images/Home_Red.gif" alt="" width="75" height="38" border="0"></div>
<div style="float:left;"><a href="events.php" onMouseOver="hiLite('b','b2','Current Events')" onMouseOut="hiLite('b','b1','')"><img name="b" src="images/Upcoming_Events.gif" alt="" width="175" height="38" border="0"></a></div>
<div style="float:left;"><a href="drinks.php" onMouseOver="hiLite('c','c2','Drink Specials')" onMouseOut="hiLite('c','c1','')"><img name="c" src="images/Drink_Specials.gif" alt="" width="154" height="38" border="0"></a></div>
<div style="float:left;"><a href="gallery.php" onMouseOver="hiLite('d','d2','Gallery')" onMouseOut="hiLite('d','d1','')"><img name="d" src="images/Gallery.gif" alt="" width="90" height="38" border="0"></a></div>
<div style="float:left;"><a href="map.php" onMouseOver="hiLite('e','e2','Map Directions')" onMouseOut="hiLite('e','e1','')"><img name="e" src="images/Map_Directions.gif" alt="" width="181" height="38" border="0"></a></div>
<div style="float:left;"><a href="contact.php" onMouseOver="hiLite('f','f2','Contact US')" onMouseOut="hiLite('f','f1','')"><img name="f" src="images/Contact_Us.gif" alt="" width="125" height="38" border="0"></a></div>
</div>
		
		
			<img src="images/Black_Line.gif" width="800" height="18" alt="">
			
		<div style="background-repeat:repeat-x; background-position:top; background-image:url(images/Bottom_Banner.gif); height:50px; tex-align:center; width:800px;">
		  Copyright &copy; 2007, Stingers 2 Sports Lounge,  All rights reserved
		<small>Design by <a class="siteinfo" href="http://www.SpringfieldConnect.com">Springfield Connect</a></small>
		
</div>
<!-- End ImageReady Slices -->
</body>
</html>

Open in new window

Johnny

ASKER

my page has ALLOT of php code to make the page.

what did you do to the page?
as ill have to cut and paste the code to fit my php coded page.

Johnny

ASKER

paulp75:

the separation lines are gone and the pictures are not on the left and text not on the right

so what ever you did did not fix my page its reformatted not the way it was.
file:///Z:/home/www/dragon-software.info/sites/Stingers2/index1.html

and as i said i have allot of php code building that page, so i will have to know what your doing to change the page

Johnny

ASKER

sorry gave local link not web link
http://dragon-software.info/sites/Stingers2/index1.html

paulp75

for the seperation lines, just add border styles to it.

Johnny

ASKER

I wanted the layout to stay the same, with your proposed solution paulp75, the layout was taken away with the bottom T section as well as the border lines i had, mainly the section at the bottom where the picture was on the left and the text on the right.

I'm sorry but I've been trying for a full 6 hours now and I cant for the life of me get my layout back..the solution you have provided is basically worthless to me to even test it..

I DID NOT want a layout change i wanted the text on the bottom right to NOT move the rest of the page, if a amount that would push the table borders was achived.

basically I'm back to square one now.

I need the text to stay in place (with my layout intact) the text when too much is place in that area pushes the pictures down as well as runs off the background, I want it to just fit(the area stays locked, and more text then can fit in that area does NOT display, or something along that idea) The problem is when too much text is typed in the admin section that allow for changing that area the rest of the page is messed up, when too much text is placed there, I need to limit or not display the text somehow.

Thank for any farther help you may provide
(maybe i was not clear on what i needed)

ASKER CERTIFIED SOLUTION

paulp75

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial