Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Apr 2011
    Posts
    107
    Thanks
    18
    Thanked 0 Times in 0 Posts

    How to prevent content stretching beyond the wrapper boundaries?

    for some reason the wrapper has stretching vertically beyond the page size I have set. Why is this?

  • #2
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts
    can you post the page?

  • #3
    Regular Coder
    Join Date
    Apr 2011
    Posts
    107
    Thanks
    18
    Thanked 0 Times in 0 Posts
    How do i do tht? could i jus copy and past my html code on here? using the
    Code:
    code

  • #4
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts
    Yes



    or a link to a page would be better

  • #5
    Regular Coder
    Join Date
    Apr 2011
    Posts
    107
    Thanks
    18
    Thanked 0 Times in 0 Posts
    im new to all this...i dunno how to send link to page..il do it this way 1st nd c if u spot an error.

  • #6
    Regular Coder
    Join Date
    Apr 2011
    Posts
    107
    Thanks
    18
    Thanked 0 Times in 0 Posts
    HTML CODE
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    	<head>
    		<title>Sport News</title>
    		<link rel="stylesheet" href="global.css" type="text/css" /> 
    	</head>
    	<body id="homepage"> 
    		<div id="wrapper">
    			<div id="header">
    			<img src="images/Logo.png" width="273" height="66" alt="Logo"/>
    		</div>
    			<div id="f">
    			<div id="o">
    			<div id="flashContent">
    			<center>
    			<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="880" height="440" id="Flash/Flash Edited" align="middle">
    				<param name="movie" value="Flash/Flash Edited.swf" />
    				<param name="quality" value="best" />
    				<param name="bgcolor" value="#ffffff" />
    				<param name="play" value="true" />
    				<param name="loop" value="true" />
    				<param name="wmode" value="window" />
    				<param name="scale" value="showall" />
    				<param name="menu" value="true" />
    				<param name="devicefont" value="false" />
    				<param name="salign" value="" />
    				<param name="allowScriptAccess" value="sameDomain" />
    				<!--[if !IE]>-->
    				<object type="application/x-shockwave-flash" data="Flash/Flash Edited.swf" width="880" height="440">
    					<param name="movie" value="Flash/Flash Edited.swf" />
    					<param name="quality" value="best" />
    					<param name="bgcolor" value="#ffffff" />
    					<param name="play" value="true" />
    					<param name="loop" value="true" />
    					<param name="wmode" value="window" />
    					<param name="scale" value="showall" />
    					<param name="menu" value="true" />
    					<param name="devicefont" value="false" />
    					<param name="salign" value="" />
    					<param name="allowScriptAccess" value="sameDomain" />
    				<!--<![endif]-->
    					<a href="http://www.adobe.com/go/getflash">
    						<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
    					</a>
    				<!--[if !IE]>-->
    				</object>
    				<!--<![endif]-->
    			</object>
    			</center>
    		</div>
    			
    	<div id="Newsbar">
    			<img src="Homepage/NewsBar.png" width="546" height="50" alt="News Bar"/>
    			 
    		<img class="nani" src="Homepage/Nani.jpg" align="left" width="85" height="54"/>
    			
    		<img class="bpoints" src="Homepage/News.png" width="60" height="261"/>
    			
    		<div><img class="gossip" src="Homepage/Gossip.png" width="295" height="320"/></div>
    	</div>
    	
    	<div id="Livebar">
    	
    			<img src="Homepage/LiveBar.png" width="312" height="50" alt="Live Bar"/>
    			
    			<img class="Team1" src="Homepage/Team1.png" width="103" height="100"/>
    			
    			<center><img class="Team2" src="Homepage/Team2.png" width="84" height="114"/></center>
    			
    			<img class="Team3" src="Homepage/Team3_10.png" width="95" height="86"/>
    		
    			<img class="fhighlights" src="Homepage/football highlights.jpg" width="209" height="208/>"
    		
    		</div>
    	
    		<div id="teams">
    			<left><b class="time">12:00</b></left>
    			<p class="team1">Arsenal V Chelsea</p>
    			<p class="league">Premier League Football</p>
    		</div>
    		
    		<div id="teams2">
    			<left><b class="time">15:00</b></left>
    			<p class="team1">Tottenham V Liverpool</p>
    			<p class="league">Premier League Football</p>
    		</div>
    		
    		<div id="teams3">
    			<left><b class="time">17:30</b></left>
    			<p class="team1">Everton V Wolves</p>
    			<p class="league">Premier League Football</p>
    		</div>
    
    		<div id="main"></div>
    				
    			</div>
    				</div>
    				
    	<ul id="navigation">
    	
    		<li id="Homepage"><a href="index.html"><span>Homepage</span></a></li>
    		<li id="Football"><a href="#"><span>Football</span></a></li>	
    		<li id="Cricket"><a href="#"><span>Cricket</span></a></li>
    		<li id="Tennis"><a href="#"><span>Tennis</span></a></li>
    		<li id="Boxing"><a href="#"><span>Boxing</span></a></li>
    	</ul>
    	
    	<ul id ="footer1">
    	
    		<li id="Homepage1"><a href="#"><span>Homepage</span></a></li>
    		<li id="Football2"><a href="#"><span>Football</span></a></li>	
    		<li id="Cricket3"><a href="#"><span>Cricket</span></a></li>
    		<li id="Tennis4"><a href="#"><span>Tennis</span></a></li>
    		<li id="Boxing5"><a href="#"><span>Boxing</span></a></li>
    		</ul>
    				
    		
    		</div>
    		
    	</body>
    </html>

  • #7
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts
    post CSS as well.

  • #8
    Regular Coder
    Join Date
    Apr 2011
    Posts
    107
    Thanks
    18
    Thanked 0 Times in 0 Posts
    CSS
    Code:
    body{
    	background-colour:#ccc;
    	font-family: Helvetica, Arial, sans-serif; 
    	color: white; 
    }
    
    #wrapper{
    	margin:0 auto;
    	width:900px; 
    	background-color: none;
    	overflow:hidden;
    }
    
    #header{
    	position: relative;
    	margin: 0;
    	padding: 0;
    	width:273px;
    	height:66px; 
    }
    
    #flashContent{ margin:0; padding-left:10px; width:875px; height:435px; position:relative; top:80px;
    }
    
    #Newsbar{
    margin:0;
    padding-left:14px;
    width:546px;
    height:50px;
    position:relative;
    top:90px;
    }
    
    img.nani{
    padding-top: 10px;
    padding-left: 0px;
    }
    
    img.bpoints{
    padding-top: 10px;
    padding-left: 200px;
    }
    
    #Livebar{
    margin:0;
    float:right;
    padding-right:11px;
    width:312px;
    height:50px;
    position:relative;
    top:42px;
    }
    
    img.fhighlights{
    width: 209px;
    height: 208px;
    padding-top: 180px;
    padding-left: 70px;
    }
    
    #navigation{ margin:0; padding:0; width:900px; height:55px; position:absolute; top:87px;
    	background-image: url(Nav-Bars2.gif);}
    
    #navigation li {margin:0; padding:0; list-style-type:none; 
    display:inline; height:55px; text-align:center; float:left; line-height:55px;}
    
    #navigation a { display:block; height:54px; }
    #navigation a:hover {background-image:url(Nav-Bars2.gif);}
    
    #Homepage {width:185px; }
    #Homepage a:hover {background-position:bottom 0; }
    
    #Football {width:185px; }
    #Football a:hover {background-position:bottom -185px; }
    
    #Cricket {width:185px; }
    #Cricket a:hover {background-position:bottom -370px; }
    
    #Tennis {width:150px; }
    #Tennis a:hover {background-position:bottom -555px; }
    
    #Boxing {width:150px; }
    #Boxing a:hover {background-position:bottom -705px; }
    
    #navigation span { display:none; }
    
    #main{
    	width:900px;
    	height:540px;
    }
    
    img.Team1{
    padding-top: 10px;
    padding-left: 0px;
    }
    
    
    #teams{
    	width:153px;
    	height:0px;
    	padding:120px 0 0 700px;
    }
    
    b.time{
    	color:#969595;
    	font-size:12px;
    }
    
    p.team1{
    	color:black;
    	font-size:17px;
    	margin-bottom: 3px;
    	margin-top: 3px;
    }
    
    p.league{
    	color:black;
    	font-size:14px;
    	width:170px;
    	margin-bottom: 3px;
    	margin-top: 3px;
    }
    
    #teams2{
    	width:168px;
    	height:0px;
    	padding:110px 0 0 700px;
    }
    
    img.Team2{
    padding-top:0px;
    padding-right: 205px;
    }
    
    
    #teams3{
    	width:135px;
    	height:0px;
    	padding:110px 0 0 700px;
    }
    
    
    img.Team3{
    padding-top:5px;
    padding-left: 0px;
    }
    
    
    img.gossip{
    width: 295px;
    height: 320px;
    padding-top: 0px;
    padding-left: 0px;
    
    }
    
    #footer1{ margin:0; padding:0; width:900px; height:40px; position:absolute; top:1300px;
    	background-image: url(footer.gif);}
    
    #footer1 li {margin:0; padding:0; list-style-type:none; 
    display:inline; height:40px; text-align:center; float:left; line-height:5px;}
    
    #footer1 a { display:block; height:40px; }
    #footer1 a:hover {background-image:url(footer.gif);}
    
    #Homepage1 {width:338px; } 
    #Homepage1 a:hover {background-position:bottom 0px; }
    
    #Football2 {width:75px; }
    #Football2 a:hover {background-position:bottom -338px; }
    
    #Cricket3 {width:65px; }
    #Cricket3 a:hover {background-position:bottom -413px; }
    
    #Tennis4 {width:65px; }
    #Tennis4 a:hover {background-position:bottom -478px; }
    
    #Boxing5 {width:66px; }
    #Boxing5 a:hover {background-position:bottom -543px; }
    
    #footer1 span { display:none; }
    Appreciate it.

  • #9
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts
    ok,
    it seems that you have several areas hidden by setting the height very low on #Livebar, if you remove the height then the full page displays. though it's a bit hard to tell what i'm looking at without images, but it seems like this is the case.

    PHP Code:
    #Livebar{
    margin:0;
    float:right;
    padding-right:11px;
    width:312px;
    height:50px/* try removing this line */
    position:relative;
    top:42px;


  • #10
    Regular Coder
    Join Date
    Apr 2011
    Posts
    107
    Thanks
    18
    Thanked 0 Times in 0 Posts
    I'v tried that..the problem still remains and it takes all my text out of position with the football teams?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •