Absolute Positioning

Absolute Positioning

Page 1 of 1

2 Replies - 800 Views - Last Post: 12 June 2008 - 02:35 PM

#1 nugs2007  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 07-June 08

Absolute Positioning

Posted 07 June 2008 - 05:37 AM

Hi!!

I have used absolute positioning in CSS Code..now on some resolutions it is not working properly...pls help..

HTML Code
<div id="container">
<div id="topnav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
<div id="logo"><img src="images/logo.gif" alt="logo" width="371" height="90" /></div>
<div id="banner"><img src="images/banner.jpg" alt="banner" /></div>
<div class="midcont">
<div class="panel_left">



  <div id="menu">  
  <div><img src="images/c_1.gif" alt="" /></div>
  <div class="leftnav" style="padding-bottom:20px;">
  <ul style=" margin:0px; padding:0px;">
  <li><a href="#">HOME</a></li>
	<li><a href="#">ABOUT US </a></li>
	  <li><a href="#">SERVICES</a></li>
		<li><a href="#">COMPANY PROFILE </a></li>
				<li><a href="#">PROJECTS </a></li>
						<li><a href="#">CONTACT US </a></li>
  </ul>
  </div>
	 <div><img src="images/img_1.gif" /></div> 
  </div>
  
  
  
  
  
  </div>
<div class="panel_right">
<div class="content">
<div class="panel_a">
<p>We Have Solutions To<span style="color:#000000;"> All Real Estate Problems</span></p>
<div style=" font-family:Tahoma; color:#222222; font-size:11px; padding-top:5px; width:465px; text-align:justify; border-bottom:1px solid #dadada; padding-bottom:15px;">We buy houses in any area, any size, any price. Do you have a pressing need to sell your house fast? We buy houses fast and easy, often in as little as 7 days. We can close quickly and most importantly, relieve your stress and help you regain peace of mind. </div>
<div style=" font-family:Tahoma; color:#222222; font-size:11px; padding-top:5px; width:465px; text-align:justify; border-bottom:1px solid #dadada; padding-bottom:15px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
	<td width="58%" valign="top"><table width="100%" border="0" cellspacing="4" cellpadding="0">
	  <tr>
		<td><img src="images/bullet_1.gif" alt="bullet" width="9" height="12" /><span class="text_a">Sell House </span></td>
	  </tr>
	  <tr>
		<td class="text_b">We can have a solution for you...</td>
	  </tr>
	  <tr>
	   <td><p style=" font-family:Tahoma; color:#222222; font-size:11px; padding-top:5px;text-align:justify; font-weight:normal;">Bad credit is OK; we'll most likely put you in your dream home. Click the link below to see the homes we have available. If you do not see what you are looking for, let us know and we can easily get it for you at fair terms.
</p></td>
	  </tr>
	</table></td>
	<td width="42%"><img src="images/pic_1.gif" alt="sell" width="190" height="125" /></td>
  </tr>
  
</table>
</div>
<div style=" font-family:Tahoma; color:#222222; font-size:11px; padding-top:5px; width:465px; text-align:justify; border-bottom:1px solid #dadada; padding-bottom:15px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
	<td width="5%"></td>
	<td width="22%" rowspan="3"><img src="images/home_1.gif" alt="navgrow" width="89" height="78" /></td>
	<td width="73%" rowspan="3" valign="top"><table width="100%" border="0" cellspacing="2" cellpadding="0">
	  <tr>
		<td><img src="images/bullet_2.gif" alt="bullet" width="7" height="10" /><span class="text_c">See Available Homes </span></td>
	  </tr>
	  <tr>
			   <td><p style=" font-family:Tahoma; color:#222222; font-size:11px; padding-top:5px;text-align:justify; font-weight:normal;">Click the link below to see the homes we have available. If you do not see what you are looking for, let us know and we can easily get it for you at fair terms.
</p></td>
	  </tr>
	  <tr>
		<td class="text_d">Details | Sell Now!!</td>
	  </tr>
	</table></td>
  </tr>
  <tr>
	<td></td>
	</tr>
  <tr>
	<td></td>
	</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div  class="footer"><a href="#">Sell Your House</a> | <a href="#">Our Solutions</a> | <a href="#">Available Homes</a> | <a href="#">Investors</a> | <a href="#">Contact Us</a></div>
<div style=" font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#333333; text-align:center; height:20px; width:100%; float:left; background-color:#FFFFFF; padding-top:10px;">Copyright 2008 www.relestate.com All rights reserved</div>
</div>






CSS Code
/* CSS Document */
body{margin:0px auto; padding:0px; text-align:center; background-color:#8c3310; width:100%}
#container{ width:90%; background-color:#FFFFFF; margin-left:auto; margin-right:auto;}
#topnav{ background-image:url(images/top-nav.gif); background-repeat:repeat-x; padding-top:5px; text-align:right; padding-right:40px; padding-bottom:4px; margin-left:11px;}
#topnav li{display:inline; font-family:Tahoma; font-size:12px; color:#000; font-weight:bold; background-image:url(images/bullet.gif); background-repeat:no-repeat; border-left:2px solid #000; padding-left:10px;}
#logo {height:90px;left:70px;position:absolute;top:25px;width:300px;z-index:1;}
#banner{ width:100%;}
.midcont{width:100%; background-color:#FFFFFF; height:465px;}
.panel_left{width:225px; float:left; background-color:#FFFFFF; margin-left:10px;}
.panel_right{width:714px; float:right; background-image:url(images/home.gif); background-repeat:no-repeat; background-position:right top; background-color:#FFFFFF;}
#menu {
	width:225px;
	height:115px;
	z-index:0;
	left:158px;
	top: 300px;
}
.leftnav{ background-image:url(images/bg_nav.gif); background-repeat:repeat; width:238px;}
.leftnav li{list-style-image:url(images/bullet_3.gif);font-size:12pt; color:#14394e; font-family:Times New Roman, Times, serif; text-align:left; margin-top:0px; margin-left:20px; line-height:20pt; padding-top:0px; background-image:url(images/nav-list.gif); background-repeat:no-repeat;}

.leftnav li a{ color:#14394e; text-decoration:none; font-weight:550;}
.leftnav li a:hover{ color:#ae2441; text-decoration:none;}

.content{width:465px; margin-left:15px; float:left; background-color:#FFFFFF;}
.panel_a{width:465px; font-family:Tahoma; font-size:12px; color:#3333333; background-color:#FFFFFF; margin-top:0px;}
.panel_a p{ font-family:Tahoma; font-size:14pt; font-weight:bold; color:#ff4e00; background-color:#FFFFFF; text-align:left; padding-top:5px;}
.text_a{font-family:Tahoma; font-size:11pt; color:#000000; font-weight:bold; padding-left:5px;}
.text_b{font-family:Tahoma; font-size:12px; color:#000000; font-weight:bold; padding-left:5px;}
.text_c{font-family:Arial; font-size:11pt; color:#ff5400; font-weight:bold; padding-left:5px;}
.text_d{font-family:Tahoma; font-size:9pt; color:#c80006; font-weight:bold; padding-left:5px; text-align:right;}
.footer{ background-image:url(images/foot.gif); background-repeat:repeat-x; font-family:Tahoma; font-size:11px; font-weight:bold; text-align:center; width:100%; float:left; color:#FFFFFF; padding-top:5px; background-color:#FFFFFF; }
.footer a{ color:#FFFFFF; text-decoration:none;}
.footer a:hover{ color:#ba2a06; text-decoration:none;}

Attached image(s)

  • Attached Image


Is This A Good Question/Topic? 0
  • +

Replies To: Absolute Positioning

#2 BetaWar  Icon User is online

  • #include "soul.h"
  • member icon

Reputation: 1104
  • View blog
  • Posts: 6,917
  • Joined: 07-September 06

Re: Absolute Positioning

Posted 07 June 2008 - 01:47 PM

The only example of position: absolute that I see in your code isfor #logo. Which I am assuming that you are trying to place behind the navbar (top right). The issue that I see with this is that you tell it where to be positioned on the x-axis (left) before you tell it to be positioned absolutely.

Try changing ou code to this and seeing if it works:

Quote

#logo {height:90px;position:absolute;top:25px;left:70px;width:300px;z-index:1;}


Hope that helps.
Was This Post Helpful? 0
  • +
  • -

#3 level1  Icon User is offline

  • D.I.C Head

Reputation: 14
  • View blog
  • Posts: 65
  • Joined: 12-June 08

Re: Absolute Positioning

Posted 12 June 2008 - 02:35 PM

I'm pretty sure this will fix your problem:

Quote

#container{ width:90%; background-color:#FFFFFF; margin-left:auto; margin-right:auto; position: relative;}


right now it is relative to your document - i.e. top left of your browser. this will make it relative to top left of the container element. you will have to change your left position of the logo some to get it to line up again, but it won't adjust browser to browser / screen to screen anymore.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1