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

Thread: Expanding page!

  1. #1
    New to the CF scene
    Join Date
    May 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Expanding page!

    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.

    Code:
    	#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
    Code:
    	#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.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    May 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Code:
    <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

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Hmm... Still not enough code. We need a link to the live page.

  • #5
    New to the CF scene
    Join Date
    May 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #6
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    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.

  • #7
    New to the CF scene
    Join Date
    May 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <!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.


    Code:
    /* 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

  • #8
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    I'm not sure why you are positioning #profile7 at all.

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

  • #9
    New to the CF scene
    Join Date
    May 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have changed everything to relative on the page but for some reason it always stops at the end of this div
    Code:
    	#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???

  • #10
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by nickbob_sexypan View Post
    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.


  •  

    Posting Permissions

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