1 Replies - 4851 Views - Last Post: 12 December 2009 - 07:30 PM

#1 StewVinci  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 12-December 09

Browser Window Resizing Problem

Posted 12 December 2009 - 04:42 AM

Now first off, let me start by saying that this problem may be a very simple one to you experts, but to me, a beginner in the web worldl, problem solving can be very tedious and stressful which is why i've turned to you for help.

Now my problem is that I have DIVS for all the content and a seperate CSS style sheet. These DIVS however will get misaligned whenever I change the browser window size and all I want is for my page elements to STAY IN THE SAME SPOT REGARDLESS OF THE BROWSER WINDOW SIZE OR SCREEN RESOLUTION. Certain images will suddenly move up and away from where they were originally. Now I was told by my web design teacher to use absolute positioning. Tried that. Still a no go. And my teacher is basically clueless.

Anyway here is my html code:


<html>
<head>
<link rel="stylesheet" type="text/css" href="Mid-Portfolio.css" />
<script type="text/javascript" src="lightbox/js/prototype.js"></script>
<script type="text/javascript" src="lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox/js/lightbox.js"></script>



<style type="text/css">

.copyright {
background-image: url("copyright.jpg");
position: absolute;
bottom: -30px;
height: 25px;
width: 1136px;
left: 1px;
border-style: none;
font-size: 11px
}


.copyrightSM {
background-image: url("copyright2.jpg");
position: absolute;
bottom: -15px;
height: 13px;
width: 700px;
left: 150px;
border-style: none;
}

.copyrightTP {
background-image: url("copyrightTP.jpg");
position: absolute;
bottom: 526px;
height: 13px;
width: 950px;
left: 8px;
border-style: none;
}

.copyrightTXT {
position: absolute;
bottom: -31px;
left: 334px;
font-size: 12px;
width: 350px;
height: 15px;
}


.updatebar {
background-image: url("updatebar_4.png");
position: absolute;
bottom: 517px;
height: 51px;
width: 178px;
left: 850px;
border-style: none;
}

.background {
background-image: url("Home_final.jpg");
position: absolute;
top: 30px;
height: 542px;
width: 950x;
left: 58px;
border-style: none;
}
</style>


<title>StewartPenson.com</title>

<style type="text/css">
.RightPanel {
position: absolute;
top: 1px;
left:850px;
width: 110px;
height: 485px;
background-color: #836FFF;
border-width: 2px;
border-style: none;
padding: 30px;
margin: 30px;
font-weight: bold;
font-size: medium;
<font color= #FFFFFF;>
}
</style>



</head>

<body>

<div id="container">


<img src= "Home_final.jpg" alt="Welcome" class="background" title="Welcome"/>
<div id="slidetabsmenu">
 <div id="links">
  <ul>
<li><a href="www.itsstew-art.com/index.html" title="Home"><img src="homepage_home2.jpg"><span>Home</span></a></li>
<li><a href="www.itsstew-art.com/Bio.html" title="Bio"><img src="homepage_bio2.jpg"><span>Bio</span></a></li>
<li><a href="www.itsstew-art.com/Portfolio.html" title="Portfolio"><img src="homepage_portfolio2.jpg"><span>Portfolio</span></a></li>
<li><a href="www.itsstew-art.com/Links.html" title="Links"><img src="homepage_links2.jpg"><span>Links</span></a></li>
<li><a href="www.itsstew-art.com/Contacts.html" title="Contacts"><img src="homepage_contacts2.jpg"><span>Contacts</span></a></li>	
</div>
 </div>
  <div id="pageheader">
  </div>
  
  <div class="RightPanel">
   <a>12/15/09 SITE IS OFFICIALLY LAUNCHED!</a> <br />
  </div>

<div class="copyright">
</div>

<div class="copyrightSM">
</div>

<div class="copyrightTP">
</div>

<div class="copyrightTXT">
<a><font color= "#FFFFFF">(C) COPYRIGHT STEWART PENSON ALL RIGHTS RESERVED</a></font>
</div>

<div class="updatebar">
</div>


<br style="clear: left;" />

</div>
</body>

</html>







And here's the CSS style sheet code


<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
	
#slidetabsmenu {
float:left;
width:100%;
font-size:90%;
line-height:normal;
font color: #FFFFFF;
}

* html #slidetabsmenu{ /*IE only. Add 1em spacing between menu and rest of content*/
margin-bottom: 1em;
}

#slidetabsmenu ul{
list-style-type: none;
margin:0;
margin-left: 0px;
padding:0;
}

#slidetabsmenu li{
display:inline;
margin:0;
padding:0;
}

#slidetabsmenu a {
float:left;
background:url(tab-left.jpg) no-repeat left top;
margin:0;
padding:0 0 0 9px;
text-decoration:none;
}

#slidetabsmenu a span {
float:left;
display:block;
background:url(tab-right.jpg) no-repeat right top;
padding:3px 14px 3px 5px;
font-weight:bold;
color:#FFFFFF;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#slidetabsmenu a span {float:none;}
/* End IE5-Mac hack */

#slidetabsmenu a:hover span {
color: #DDA0DD;
}

#slidetabsmenu #current a {
background-position:0 -125px;
}

#slidetabsmenu #current a span {
background-position:100% -125px;
color: black;
}

#slidetabsmenu a:hover {
background-position:0% -125px;
}

#slidetabsmenu a:hover span {
background-position:100% -125px;
}

</style>

#pageHeader { 
	background: transparent url(titlebar.jpg) no-repeat top right; 
	margin-top: 0px; 
	margin-bottom: 20px; 
	width: 170px; 
	height: 150px; 
	float: right;
	margin-left: 100px:
	}
	#pageHeader span {
	display:none
	}

#pageHeader {
	padding-top: 20px;
	}


#links a img
{
height: 0; width: 0; border-width: 0;
}

#links a:hover img 
{
position: absolute;
top: 34px; left: 58px; bottom: 500px; height: 542px; width: 950px;
 }
	

body {
background-image: url("HomePage_Repeat.jpg");
background-repeat: repeat; 

}

#container{
margin-left: 50px;
}





The problems i'm having are with the "Update bar" and "Copyright" classes moving on me. SOMEBODY please tell me where i've gone wrong and help me find a solution as I am COMPLETELY and UTTERLY lost and have tried everything that I know to get this to work and I have to have this done by Monday. Thanks in advance guys.

-Stew

Is This A Good Question/Topic? 0
  • +

Replies To: Browser Window Resizing Problem

#2 Martyr2  Icon User is online

  • Programming Theoretician
  • member icon

Reputation: 4398
  • View blog
  • Posts: 12,249
  • Joined: 18-April 07

Re: Browser Window Resizing Problem

Posted 12 December 2009 - 07:30 PM

Do you have this posted up on the web somewhere with all the graphics and such in place? I have tested your code so far and nothing is moving on me except when I condense the window down to a ridiculous microscopic width. But only then the text just collapses which is what it should be doing.

Absolute positioning is the right way to go if you want to fix elements into a page, so I just need to see where you have this on the web and perhaps pictures of what is moving would be helpful. :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1