...

View Full Version : Expanding page!



nickbob_sexypan
05-18-2007, 07:10 PM
Hey guys.

I am new to this CSS stuff. I have got a page which displays comments. It currently does not expand my content box, only the page.


#profile7
{
position:absolute;
top:560px;
width:355px;
height:auto;
right: 5px;
border:solid #F5F5F5 1px;
}

This comments sit inside this div and this div is inside

#profile

{
position:relative;
top:0px;
left: 126px;
width:520px;
background-color:#FFFFFF;
height:auto;
min-height:650px;
border-left:solid #CCCCCC 1px;
border-right:solid #CCCCCC 1px;
}
If anyone could help this would be much appreciated.

_Aerospace_Eng_
05-18-2007, 07:30 PM
We need to see your html as well but judging from your CSS your box will never be contained because its position absolute. Don't use it if you don't have to. The mistake many beginners make is abusing absolute positioning. Most layouts require little or NO absolute positioning.

nickbob_sexypan
05-20-2007, 10:10 PM
I have set it as relative, but it does exactly the same thing. My html is basically a sipmle list at the mo (cant do much more until this works). All it does is cut through the bottom of the container div.

<div id="profile7">
<p>
<?php
while($row3= mysql_fetch_array($result3))
{
echo $row3['comments'];?><br /><?php
}
?>

<?php } ?>

</p>
</div>

My Css is still the same, tried lots, but nothing works. Cheers

koyama
05-20-2007, 10:14 PM
Hmm... Still not enough code. We need a link to the live page.

nickbob_sexypan
05-20-2007, 10:22 PM
i cant do that as i cannot get it live yet. What code do you need and i can give it to ya.

Cheers for help, much appreciated.

Nick

koyama
05-20-2007, 10:36 PM
At least provide a complete code example that can be copied and pasted directly into a file and viewed in the browser so that the rendering problems you mention are seen.

Give us the generated HTML (i.e. without any php stuff) as what you get when saying 'View > Page Source' in your browser. Also provide the entire style sheet.

nickbob_sexypan
05-20-2007, 10:44 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- Holiday-Friends.Com -->
<!-- Built by Business Information Technology Students -->
<!-- Representing Bournemouth University England -->
<!-- All website built and owned by Adam Dale, Nick Whitmarsh and Daniel Salter -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Holiday-Friends.Com</title>
<style type="text/css" media="all">

@import "../css/loggedinsheet.css";

</style>
</head>

<body>

<div id="page">
<div id="container">
<div id="top">

<div id="logo"><a href="index.html"><img src="../logo.PNG" width="298" height="35" border="0" /></a></div>

<div id="top-l"><img src="../f4_1.GIF" /></div>
<div id="top-r"><img src="../f4_2.GIF" /></div>

<form id="search" name="search" method="get" action="../search/q.php">
<div id="s">
<input type="text" name="people" />
</div>
<div id="a">

<input type="submit" name="Submit" value="Search" style="color: white; background-color:#003399" />

</div>
</form>

</div>
<div id="sidemenu">
<div class="menutitle">Menu:</div>

<ul>
<li><a href="logout.php">Log Out</a></li>
<li><a href="s-resort.php">Search Holidays</a></li>
<li><a href="s-people.php">Search For Friends</a></li>
<li><a href="friends.php">Your Friends</a></li>
<li><a href="holidays.php">Create Holiday</a></li>
<li><a href="forums">Your Comments</a></li>
<li><a href="reviews.php">Holiday Reviews</a></li>
<li><a href="forums">Holiday Photos</a></li>
<li><a href="information.php">Your Information</a></li>
</ul>

</div>

<div id="interaction">

<div id="in1"><img src="../graphics/discuss2.gif" width="26" height="21" /></div>
<div id="in2"><a href="comments.php"><b>Comments</b></a></div>
<div id="in3"><img src="../graphics/group.gif" width="26" height="21" /></div>
<div id="in4"><a href="friends.php"><b>Friends</b></a></div>
<div id="in5"><img src="../graphics/inbox-up.gif" width="26" height="21" /></div>
<div id="in6"><a href="inbox.php"><b>Inbox</b></a></div>
<div id="in7"><img src="../graphics/star-up.gif" width="26" height="21" /></div>
<div id="in8"><a href="events.php"><b>My Events</b></a></div>
<div id="in9"><img src="../graphics/me-up.gif" width="26" height="21" /></div>
<div id="in10"><a href="index.php"><b>Me</b></a></div>

</div>
<div id="advert">advert</div>
<div id="advert-2">advert 2</div>


<div id="profile">

<!-- Profile information -->


<div id="profile1">
<img src= "pictures/amazing.gif" width = "150" height = "150" border="0"></div>

<div id="profile2"><b>Nick Whitmarsh</b></div>
<div id="profile2-2">Email 1: &nbsp;&nbsp;readingfc_fan@btinternet.com <br /> Email 2: &nbsp;&nbsp; <br /> Mobile: &nbsp;&nbsp;&nbsp;&nbsp;1256477266</div>
<div id="profile3"><b>About me</b></div>
<div id="profile3-3">My name is Nick Whitmarsh. I love to play football and watching Reading Fc who are quality. </div>
<div id="profile4"><b>Favourite Holiday(s)</b></div>
<div id="profile4-4">My favourite ever holiday was Disney. I really enjoyed this because Pluto rox. Im goin again in 2008</div>
<div id="profile5"><b>Next Holiday:</b></div>
<div id="profile5-5">H10 princess</div>
<div id="profile6"><b>Comments</b></div>
<div id="profile7">
<p>
<br /><br />hello<br /><br /><br /><br />howdy<br />

</p>
</div>
<form id="form1" name="form1" method="get" action="commentsave.php">
<div id="profile8">


<textarea name="comments" cols="41" rows="4"></textarea>
</div>
<div id="profile9">

<input type="submit" name="Submit2" value="Post Comment" style="color: white; background-color:#003399" />
</div>
</form>

<div id="profile10"><b>Friends</b></div>
<div id="profile11">php here for friends</div>
<div id="profile12"><b>Past Holidays</b></div>
<div id="profile13">
H10 princess <br>H10 princess <br>Belgion darza <br>Butlins <br>
</div>
<div id="profile14">Photo</div>

<div id="image1"><img src="../graphics/group.gif" /></div>
<div id="image2"><img src="../graphics/group.gif" /></div>
<div id="image3"><img src="../graphics/group.gif" /></div>
<div id="image4"><img src="../graphics/group.gif" /></div>
<div id="image5"><img src="../graphics/group.gif" /></div>
<div id="image6"><img src="../graphics/group.gif" /></div>
<div id="image7"><img src="../graphics/group.gif" /></div>


<div id="footer">
<pre><a href="../terms.html">Terms and Conditions</a> | <a href="../privacy.html">Privacy Policy</a> | <a href="../about.html">About Us</a> | <a href="../contact.html">Contact Us</a></pre>
</div>
<div id="declarations"> &copy;Copyright 2007 Holiday-Friends.Com all rights reserved </div>

</div>
</div>
</div>
</body>

</html>

That is the source code for the html page.



/* CSS Document */

body
{
font: 8pt/16pt georgia;
color: #555753;
margin: 0px;
background-color:#D1D8D8;

}
#profile

{
position:relative;
top:0px;
left: 126px;
width:520px;
background-color:#FFFFFF;
min-height:650px;
height:auto;
border-left:solid #CCCCCC 1px;
border-right:solid #CCCCCC 1px;

}


#profile7
{
position:relative;
top:560px;
width:355px;
/*height:auto;*/
right: 5px;
border:solid #F5F5F5 1px;


}

#footer

{
background-color:#FFFFFF;
position:absolute;
bottom:5px;
right:0px;
text-align: center;
width:520px;
padding-bottom:10px;
border-bottom:thin #999999 dashed;
border-top: thin #999999 dashed;
}

#container
{
margin: 0px auto;
width: 772px;
top: 10px;
/*min-height:350px;*/
height:auto;
background-color:#FFFFFF;
padding:0px;
position: relative;
border-bottom:#6D87A8 solid 2px;
}

#page

{
margin: 0px auto;
width: 772px;
height:auto;
/*min-height:350px;*/
position: relative;
border-right:1px solid #d5d5d5;
padding:0px;
background-color:#D1D8D8;

}



body
{
font: 8pt/16pt georgia;
color: #555753;
margin: 0px;
background-color:#D1D8D8;

}


This should be everything that effects the page. The CSS has more but they should not be effecting my page in anyway. Cheers

Nick

koyama
05-20-2007, 11:06 PM
I'm not sure why you are positioning #profile7 at all.

Instead of this:


#profile7 {
position:relative;
top:560px;
width:355px;
/*height:auto;*/
right: 5px;
border:solid #F5F5F5 1px;
}
What is wrong with this? :


#profile7 {
width:355px;
/*height:auto;*/
border:solid #F5F5F5 1px;
}

nickbob_sexypan
05-20-2007, 11:30 PM
I have changed everything to relative on the page but for some reason it always stops at the end of this div

#profile11
{
position:relative;
top:235px;
left: 5px;
width:146px;
height:160px;
border-left:dotted #F4F4F4 2px;
border-right:dotted #F4F4F4 2px;
border-bottom:dotted #F4F4F4 2px;
}

No matter how big this div is???

koyama
05-20-2007, 11:43 PM
I have changed everything to relative on the page but for some reason it always stops at the end of this div
[...]
No matter how big this div is???
But why are you using position: relative? I see no reason for this. When you do that, the offsets top, right, bottom, and left, are used indicate how much the element should be shifted compared to where it normally would have been placed. However, the adjacent elements and the container are not affected by this offset. This is why you still see a 'hole' at the position where it would have been without the offset.

Your solution is to not use relative positioning to push around with elements. Leave it at position: static which is the default. And instead use margins and paddings for adding whitespace around the elements.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum