7 replies [Last post]
Dillon
Offline
newbie
Last seen: 10 years 41 weeks ago
Timezone: GMT-4
Joined: 2009-08-29
Posts: 10
Points: 11

Hello, I just created a website from scratch, is there any way I can make it position the layers better? I am using the position: absolute, and as you can see it moves around depending on your resolution or web browser... Is there any better way that I can position the layers, so it will look similar no matter what computer that you are using? Thanks for any help!

Here is the website:
http://www.homework.genesee.edu/~dhale1/fd/

-Dillon

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 32 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Recode it using proper html.

Recode it using proper html. You don't even have a doctype declaration and your html is full of errors. There's no need to use AP for this kind of layout.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Dillon
Offline
newbie
Last seen: 10 years 41 weeks ago
Timezone: GMT-4
Joined: 2009-08-29
Posts: 10
Points: 11

Ok, sorry about that, I fixed

Ok, sorry about that, I fixed the errors Glasses How would you recommend doing the layout, just put the location inside the html instead of the css? Thanks

-Dillon

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 32 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Dillon wrote: Ok, sorry about

Dillon wrote:

Ok, sorry about that, I fixed the errors Glasses How would you recommend doing the layout, just put the location inside the html instead of the css? Thanks

Well it's hard to be exact because I can only see the logon page. And the black background makes even that almost impossible for my aging eyes to read.

Should be a STRICT document type, not transitional. What are you transitioning from?

I'd delete all the styles from the stylesheet and just code it so it is usable with no CSS at all. Then once that works, I'd start styling the page. On the logon page you hardly need any positioning at all.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

L Harrison
Offline
newbie
Last seen: 10 years 41 weeks ago
Timezone: GMT-4
Joined: 2009-10-26
Posts: 3
Points: 4

When it comes down to it,

When it comes down to it, only use absolute positioning when it is INSIDE of an element that has relative positioning. The relatively-positioned element does not need any of the location properties (left, right, top, bottom), just position: relative. When you add an element with absolute positioning as a direct child under the relatively-positioned element, the absolutely-positioned element will be based on the parental relatively-positioned element.

But as opposed to Ed Seedhouse's recommendation of a strict Doctype, I would probably suggest just following the upcoming HTML 5 specs, and simply use as opposed to the long-winded DOCTYPES of xhtml (which is being ended after this upcoming spec is completed).

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 1 hour ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

L Harrison wrote: But as

L Harrison wrote:

But as opposed to Ed Seedhouse's recommendation of a strict Doctype, I would probably suggest just following the upcoming HTML 5 specs, and simply use as opposed to the long-winded DOCTYPES of xhtml (which is being ended after this upcoming spec is completed).

XHTML is not being done away with. It is the XHTML2 standard that is being abandoned not XHTML in total.

Dillon
Offline
newbie
Last seen: 10 years 41 weeks ago
Timezone: GMT-4
Joined: 2009-08-29
Posts: 10
Points: 11

Ok, I set the positioning to

Ok, I set the positioning to relative, but now I cant move the images above of the background... I tried using z-index and that didn't work. The design for this website is the background consists of 3 or 4 images, and the navigation bar is supposed to move up but it wont go where the background is... If this helps, I put my css code below... I have 3 different layers on the page, one holds the text which says "Welcome to the Corfu Fire Department Website! TEXT GOES HERE..... and the image", the second layer has the navigation bar, which is at the bottom... (I cant get it to go to the top) and one with the login button. I apologize about the messy code, I wasn't sure how to explain this any other way, I appreciate any more help

Thanks
-Dillon

body {
	background-color:#000;
	color:#666666;
}
 
#layerContent {
	position:relative;
	width:907px;
	height:652px;
	top: 5%;
	left:5%;
}
 
#login {
	color:#FF9900;
	position:relative;
	width:72px;
	height:20px;
	left: 20%;
	top: 50%;
	z-index:2;
}
 
#navigate {
	position:relative;
	width:575px;
	height:51px;
	left:-10%;
	top:5%;
	z-index:3;
}
 
.background {
        z-index:1;
}
 
.content {
	font-family: Arial, Helvetica, sans-serif;
}
 
#contentid {
	position:relative;
	width:883px;
	height:604px;
	top: 5%;
	left:5%;
}
 
a:link {color:#FF9900; text-decoration:underline;}
a:hover {color:#FF9900; text-decoration:none;}
a:active {color:#FFCC00; text-decoration:underline;}
a:visited {color:#FF9900; text-decoration:underline;}

and here is the html code for the page.

<!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>
<title>Untitled-6</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css.css" />
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
 
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
 
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('images/link_beg_hov.jpg','images/link_hover.jpg','images/calendar_hover.gif','images/members_hover.gif','images/history_hover.gif','images/links_hover.gif')">
<div class="content" id="contentid">
  <p>Welcome to the Corfu Fire Department Website! TEXT GOES HERE..... </p>
  <p><img src="images/cross.gif" alt="Corfu Fire Department Logo" width="261" height="323" /></p>
</div>
<div align="center" class="background">
  <div id="login"><a href="login.html">Login</a></div>
  <!-- ImageReady Slices (Untitled-6.psd) -->
  <table id="table_background" width="950" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td class="background" colspan="3">
        <img src="images/index_01.gif" alt="Corfu Fire Department Logo" width="950" height="180" /></td>
    </tr>
    <tr>
      <td class="background" rowspan="2">
        <img src="images/index_02.gif" alt="Background" width="97" height="950" /></td>
	    <td>
		    <img src="images/index_03.gif" alt="Background" width="44" height="29" /></td>
	    <td class="background" rowspan="2">
		    <img src="images/index_04.gif" alt="Background" width="809" height="950" /></td>
    </tr>
    <tr>
      <td>
        <img src="images/index_05.gif" alt="Background" width="44" height="921" class="background" /></td>
    </tr>
  </table>
  <div id="navigate">
 
  <a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','images/home_hover.gif',1)">
 
  <img src="images/home.gif" alt="Click To Go To Index" name="Image6" width="57" height="38" border="0" /></a>
 
  <a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','images/about_hover.gif',1)">
  	<img src="images/about.gif" alt="Click To Go To About" name="Image7" width="57" height="38" border="0" /></a>
 
  <a href="events.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','images/events_hover.gif',1)"><img src="images/events.gif" alt="Click To Go To Events" name="Image8" width="57" height="38" border="0" /></a>
 
  <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','images/link_hover.jpg',1)"></a>
 
  <a href="calendar.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','images/calendar_hover.gif',1)">
  <img src="images/calendar.gif" alt="Click To Go To Calendar" name="Image11" width="81" height="38" border="0" /></a>
 
  <a href="members.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','images/members_hover.gif',1)">
  <img src="images/members.gif" alt="Click To Go To Members" name="Image12" width="81" height="38" border="0"/></a>
 
  <a href="history.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','images/history_hover.gif',1)">
  <img src="images/history.gif" alt="Click To Go To History" name="Image13" width="66" height="38" border="0"/></a>
 
  <a href="links.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','images/links_hover.gif',1)">
  <img src="images/links.gif" alt="Click To Go To Links" name="Image14" width="57" height="38" border="0"/>  </a></div>
  <!-- End ImageReady Slices -->
</div>
</body>
</html>

Dillon
Offline
newbie
Last seen: 10 years 41 weeks ago
Timezone: GMT-4
Joined: 2009-08-29
Posts: 10
Points: 11

Ok, I learned something while

Ok, I learned something while I was messing with my css, when I use for example

position:relative;
left:10%;
top:10%;

It wont overlap (even with z-index set) when I use percentages for the position--- but if I do pixels, it will overlap,

position:relative;
left:10px;
top:10px;

does anyone know why this is? Thanks

-Dillon