Solved

Use of Layers question

Posted on 2004-09-21
5
542 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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

815 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

12 Experts available now in Live!

Get 1:1 Help Now