css is making me crazy (lay out issues )

lay out problems with #ap DIV and css

Page 1 of 1

3 Replies - 1099 Views - Last Post: 22 October 2009 - 10:18 AM

#1 Veltizar   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 15-October 09

css is making me crazy (lay out issues )

Post icon  Posted 15 October 2009 - 01:59 PM

Hay,


I'm having a problem making my #ap DIV work with my css my layout is getting all messed up when i change the position attribute forum absolute to relative i need the page contents to be able to conform to the the size of the window as it get bigger or smaller with out messing up the lay out.hear is my code what am i doing wrong?



 <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Cobbranch.com</title>

<style type="text/css">
<!--
body {
	background-image: url(../Img/backrounds/leather.gif);
}
#apDiv1 {	position:absolute;
	left:15px;
	top:14px;
	width:125px;
	height:219px;
	z-index:1;
}
.style5 {font-size: 24px
}
.style7 {font-size: 36px;
	color: #993300;
	font-weight: bold;
}
#apDiv2 {
	position:fixed;
	left:100%;
	top:19%;
	width:747px;
	height:69px;
	z-index:2;
	float:left;
}
#apDiv3 {
	position:relative;
	left:47%;
	top:20%;
	width:532px;
	height:38px;
	z-index:3;
	float:left;
}
.style3 {font-size: 21px;
	font-family: "Big Caslon";
}
#apDiv6 {
	position:relative;
	left:615px;
	top:30%;
	width:497px;
	height:25px;
	z-index:6;
	float:left;
}
#apDiv4 {
	position:absolute;
	left:390px;
	top:205px;
	width:245px;
	height:250px;
	z-index:4;
	float:right;
}
#apDiv5 {
	position:absolute;
	left:717px;
	top:176px;
	width:286px;
	height:272px;
	z-index:5;
	float:right;
}
#apDiv7 {
	position:absolute;
	left:1038px;
	top:201px;
	width:331px;
	height:219px;
	z-index:7;
	float:right;
}
#apDiv8 {
	position:relative;
	left:412px;
	top:25%;
	width:910px;
	height:48px;
	z-index:8;
	float:left;
}
-->
</style>
<head> </head>

<body>
<div id="apDiv1">
  <table border="0" cellspacing="0" cellpadding="0" width="136">
	<tr>
	  <td valign="bottom" bgcolor="#864040" align="left"><p><a title="Cobb Ranch" href="http://www.cobbranch.com"><img src="../Img/Banners/Logo-with-background.gif" alt="1" width="130" height="90" border="0" /></a><br />
			  <a href="animalfarm.html"><img src="../Img/Buttons/animalfarm_normal.gif" alt="animal farm" width="121" height="22" /></a><br />
	  </p>
		  <p><a href="christmasfestival.html"><img src="../Img/Buttons/xmas-festival_normal.gif" alt="animal farm" width="121" height="22" /></a><br />
		  </p>
		<p><a href="christmastrees.html"><img src="../Img/Buttons/christmastrees_normal.gif" alt="animal farm" width="121" height="22" /></a><br />
		  </p>
		<p><a href="cornmaze.html"><img src="../Img/Buttons/cornmaze_normal.gif" alt="animal farm" width="121" height="22" /></a><br />
		  </p>
		<p><a href="pizzafarm.html"><img src="../Img/Buttons/pizzafarm_normal.gif" alt="animal farm" width="121" height="22" /></a></p>
		<p><a href="../../../new/Pages/pumpkinpatch.html"><img src="../Img/Buttons/pumpkinpatch_normal.gif" alt="animal farm" width="121" height="22" /></a></p>
		<p><a href="picnics.html"><img src="../Img/Buttons/Copy [2] of companypicnic_normal.gif" alt="animal farm" width="121" height="22" /></a></p>
		<p><a href="employment.html"><img src="../Img/Buttons/employment_normal.gif" alt="animal farm" width="121" height="22" /></a></p>
		<p><a href="directions.html"><img src="../Img/Buttons/travel_directions_normal.gif" alt="animal farm" width="121" height="22" /></a></p>
		<p><a href="contactus.html"><img src="../Img/Buttons/contactus_normal.gif" alt="animal farm" width="121" height="22" /></a><br />
			  <a href="mailto:[email protected],[email protected]?subject=Contact Us Message"> </a> <br />
			  <a target="_blank" href="http://sanjoaquinvalley.com/RapidSearch_3/main2.php?bg=DFBF82"> <img src="../Img/Banners/Professor-Help-Brn.gif" alt="9" width="120" height="148" border="0" /></a><a target="right" href="../../../generalinfo.htm"> </a> <br />
		  </p>
		<div align="center"><br />
		</div></td>
	</tr>
  </table>
</div>
<div id="apDiv2">
  <div align="center"><span class="style5"><span class="style7">THE ANIMAL FARM</span><br />
	Historic Cobb Ranch </span></div>
</div>
<div id="apDiv3">
  <table width="47" height="36" border="1" hspace="350" vspace="5" >
	<tr>
	  <td height="30"><a href="../../../new/Pages/subpages/Pumkin patch/lessonplans.html"><img src="../Img/Buttons/pumpkin patch/print_normal.gif" alt="1111111" width="121" height="22" /></a><a href="<?php echo $PHP_SELF; ?>?menu=off"></a></td>
	  <td valign="middle"><a href="animalfarm.html"><img src="../Img/Buttons/pumpkin patch/home_normal.gif" alt="111" width="121" height="22" /></a><a href="../../../new/Pages/pumpkinpatch.html"></a></td>
	  <td valign="middle"><a href="subpages/animal farm/animalfunfatcs.html"><img src="../Img/Buttons/pumpkin patch/funfacts_normal.gif" alt="11" width="121" height="22" /></a></td>
	  <td valign="middle"><a href="../../../new/Img/Photos/pizza farm/gallery/index.php"><img src="../Img/Buttons/pumpkin patch/photogallery_normal.gif" alt="111111" width="121" height="22" /></a></td>
	</tr>
  </table>
</div>
<div id="apDiv6">
  <div align="center"><span class="style3 style4 style5">Our animals may not be wild, but they are lots of fun!</span></div>
</div>
<div id="apDiv4"><span class="style3"><img src="../images/image5.jpg" alt="1" width="291" height="251"  /a /></span></div>
<div id="apDiv5">
  <p align="center" class="style3">Introduce yourself to all of our friends and make a few new one's along the way. Our educational displays make this experience not only fun, but also a learning opportunity.  Fun for young and young at heart... guaranteed!! Open </p>
  <p align="center" class="style3">During Cornfield Maze / Pumpkin Patch Hrs Only<br />
	For More Information Call<br />
	(559) 439-0606</p>
</div>
<div id="apDiv7"><span class="style3"><img src="../Img/Photos/Animal Farm/Photo Gallery/image6.jpg" alt="12" width="335" height="253" align="left" /></span></div>
</body>
  
:crazy:

Is This A Good Question/Topic? 0
  • +

Replies To: css is making me crazy (lay out issues )

#2 tommyflint   User is offline

  • D.I.C Addict
  • member icon

Reputation: 34
  • View blog
  • Posts: 679
  • Joined: 24-July 08

Re: css is making me crazy (lay out issues )

Posted 15 October 2009 - 02:39 PM

Could you post a link to the page aswell :)

tommyflint
Was This Post Helpful? 0
  • +
  • -

#3 thehat   User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: css is making me crazy (lay out issues )

Posted 15 October 2009 - 02:48 PM

Which of the ap div's is giving you the trouble? To start you off, you've defined #apDiv1 as 125px wide, but it contains a table that is 136 px wide.
Was This Post Helpful? 0
  • +
  • -

#4 ahmedelhamahmy   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 21-October 09

Re: css is making me crazy (lay out issues )

Posted 22 October 2009 - 10:18 AM

Need a link to see the result you are talking about...

Thank you in advance
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1