...

View Full Version : How to prevent content stretching beyond the wrapper boundaries?



shakoor6
05-06-2011, 10:59 PM
for some reason the wrapper has stretching vertically beyond the page size I have set. Why is this?

angst
05-06-2011, 11:10 PM
can you post the page?

shakoor6
05-06-2011, 11:20 PM
How do i do tht? could i jus copy and past my html code on here? using the
code

angst
05-06-2011, 11:21 PM
Yes ;)



or a link to a page would be better

shakoor6
05-06-2011, 11:23 PM
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.

shakoor6
05-06-2011, 11:24 PM
HTML 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>

angst
05-06-2011, 11:26 PM
post CSS as well.

shakoor6
05-06-2011, 11:29 PM
CSS

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.

angst
05-06-2011, 11:44 PM
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.



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

shakoor6
05-06-2011, 11:59 PM
I'v tried that..the problem still remains and it takes all my text out of position with the football teams?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum