Solved

Use of Layers question

Posted on 2004-09-21
5
540 Views
Last Modified: 2011-10-03
My site uses Layers to lay my logo over a table. www.webweever.net. The site is designed for 1024x768 resolution, I have margins from the left set to center the series of tables in the center of the page. My problem is I would like to make the site 800x600 friendly, I assume this would require removing the margins so the page shrinks to the 800x600 resolution. If I remove the margins the layer presents a problem, is there a way I can anchor the layer to the table so that it follows the table to keep the format it currently has?
0
Comment
Question by:webweever
5 Comments
 
LVL 18

Expert Comment

by:Eternal_Student
ID: 12113143
Why dont you set the image to the background of the table, that way it will move with the table, when the browser is resized.

And if you want the design to have fluent margins use % instead of pixels.

That is what I would do anyway.
0
 
LVL 18

Expert Comment

by:Eternal_Student
ID: 12113204
Or make the logo canvas large enough to fill the cells (it wouldnt be that hard then you wouldn't need the layer)
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 250 total points
ID: 12113645
Hi webweever,

The biggest problem here is going to be your use of tables to layout your page. They're very rigid for what you doing, and we can handle this much better with some CSS. We completely strip out the presentation from the html, and just use some simple div's for positioning.
Also, we can totally remove all the javscript code, the rollovers, and the images - since it's basic verdana text on a solid background.

In an effort to bring this layout more inline with current best-practice coding standards, I've done a quick mockup of an example for you. It may take some learning, but it is well worth it.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Webweever: Web Design and Web Hosting</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="Web design,Web development,Website,website,WebHost,web host,Web site,web consultants,small businesses,small business,affordable,database design,internet design,Professional designs,Business,graphic design,site redesign,
search engine optimization,Web hosting,site maintenance, custom website design services, web design, website development, web development, domain names, web support, web maintenance, domain names, web site design, web site development, improved search results, web site maintenance, website maintenance,  search engine placement, web site design raleigh, professional web site design, web site design services, business web site design">
<style type="text/css">

body
{
      margin:20px auto;
      padding:0;
      text-align:center;
}

#container
{
      width:600px;
      margin:0 auto;
      border: 2px solid #000;
      text-align:left;
}

#header
{
      position:relative;
      background-color:#003399;
      height:200px;
}

#Layer1
{
      position:absolute;
      width:200px;
      height:115px;
      z-index:1;
      left: 91px;
      top: 10px;
}

#red
{
      background-color:#990000;
      float:right;
      width:300px;
      height:200px;
      border-left:2px solid #000;
}

#nav
{
      position:absolute;
      height:20px;
      z-index:2;
      left: 198px;
      top: 168px;
      text-align:center;
}

#nav ul
{
      padding: 0;
      margin: 0;
}

#nav ul li
{
      display: inline;
}

#nav ul li a
{
      padding: 10px;
      color: #ffffff;
      font-size: 9px;
      font-family:Verdana, Arial, Helvetica, sans-serif;
      text-decoration: none;
      float: left;
}

#nav ul li a.red:hover
{
      background-color:#990000;
      color: #fff;
}

#nav ul li a.blue:hover
{
      background-color:#003399;
      color: #fff;
}

#content
{
      padding:20px;
}

#content p
{
      font-size: 9px;
      font-family:Verdana, Arial, Helvetica, sans-serif;
}

#footer
{
      width:600px;
      margin:0 auto;
}

#footer p
{
      color: #000000;
      font-size: 9px;
      font-family:Verdana, Arial, Helvetica, sans-serif;
}

</style>

</head>
<body>

<div id="container">

      <div id="header">
            <div id="red"></div>
            <div id="Layer1"><img src="images/logo.gif" alt="webweever designs" width="410" height="148"></div>
            <div id="nav">
            <ul>
                  <li><a class="red" href="index.htm">home</a></li>
                  <li><a class="red" href="design.htm">design</a></li>
                  <li><a class="blue" style="border-left:2px solid #000;" href="portfolio.htm">portfolio</a></li>
                  <li><a class="blue" href="contact.htm">contact</a></li>
            </ul>
            </div>
      </div>

      <div id="content">
            <p>I am an independent design consultant providing web design and development services for small businesses, individuals and organizations throughout the country.</p>    
            <p>In the competitive world of internet advertising, my innovative designs and attention to detail will put your business in the limelight.</p>
            <p>Whether you need a complete site or simply an update, I will design your site in a timely manner and at a reasonable rate.</p>
      </div>

</div>

<div id="footer">
      <p class="style2">&copy; 2004 webweever designs</p>
</div>

</body>
</html>



Thanks,
Sean
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12114751
Sean is right.  You created the cross-resolution problem, an probably a lot of others to do with uer prferences, because you build a rgid table based design.  Using layers indicates you are trying to work outside of the two dimensional space of the typical table grid.

If you convert to the kind of layout Sean is giving you then maintaining any eleemnt relationship becomes child's play becaue you can manipulate and reposition elements dynamically at the DOM level, with very few restrictions.

Give all the elements an id so they all all be addressed directly through the DOM in scripting.  You can reference any element property this way:
document.getElementById('elementID').property

For dynamic positioning and/or sizing the properties you need are:

offsetLeft  that is the physical current position in pixels
offsetTop  that is the physical current position in pixels
offsetWidth that is the current actual width in pixels
offsetHeight that is the current actual height in pixels

can create the relationship by modifying styles like this
<script type="text/javascript">
function positionOverlay()
{
Target = document.getElementById('target');
obj = document.getElementById('overlay');
toppos=Target.offTop+45;
leftpos=Target.offsetLeft+60;
obj.style.position=absolute;
obj.style.left=leftpos+'px';
obj.style.top=toppos+'px';
obj.style.zIndex=10;
}
onload=positionOverlay;
onresize=positionOverlay;
</script>
You insure the relationship works at all resolutions and screen sizes
with the onload and onresize events. Nomater where the target element ends up on the page, the overlay will always be on top of it 45 pixels inside its top boundary  and 60 pixel inside of the left boundary.  Changes in user preferences will not change the relationship either. That is not just fluid, that is dynamic flow, and you can change the relationship for other events as well to interact with the user.

Cd&
 
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 12116623
A nice solution I saw and used a time ago involved having several different stylesheet and just two buttons to increase and decrease font-sizes. Because for every fontsize (level 1 to 5) there was a different stylesheet, it wouldn't be such a big deal to just create three stylesheets altering the whole layout to fit either 800x600, 1024x768, etc.

<link rel="alternate stylesheet" type="text/css" href="c/large.css"    title="A++" />
<link rel="alternate stylesheet" type="text/css" href="c/medium.css"   title="A+" />
<link rel="alternate stylesheet" type="text/css" href="c/small.css"    title="A" />
<link rel="alternate stylesheet" type="text/css" href="c/x-small.css"  title="A-" />
<link rel="alternate stylesheet" type="text/css" href="c/xx-small.css" title="A--" />
<script language="JavaScript1.2" src="j/fontsize.js" type="text/javascript"></script>
<a href="#" onClick="javascript:fontsizedown();" ><img src="i/fontdn.png" border="0" title="decrease fontsize"/></a>
<a href="#" onClick="javascript:fontsizeup();" ><img src="i/fontup.png" border="0" title="increase fontsize" /></a>

where fontsize.js is present at http://www.vaakmoe.nl/j/fontsize.js

(its 107 lines which is too much to quote here i guess)

regards

-r-
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now