New Topic/Question
Reply
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
MultiQuote
| 