PDA

View Full Version : Desperate with layers


kidddgospel
04-24-2006, 09:24 PM
Please help a noob in need :D

Im really confortable with designing sites in DW using layers such as the site:
www.adcaucaia.com
However that tricky absolute positioning is what bothers me, that's where my need for help comes in. If you look at that site, ive cantered it for a 1024x768 res, but i want it to be centered proportinal to the user's current resolution. The problem is that with absolute positioning, the page wont center proportional to the user's current res. :arrow: Is there a sweet way to center layers in proportion to the user's current resolution?

dthomsen8
04-24-2006, 10:39 PM
Have you read the article on the home page here, "Center content with CSS" for a possible method? The article describes two methods.

domedia
04-24-2006, 10:41 PM
Read this thread
http://www.dreamweaverclub.com/forum/viewtopic.php?t=2750
It should help you out :)

kidddgospel
04-24-2006, 10:54 PM
First of all, Thanks for replying :D . Second, Yes ive serached all over, read some articles + posts and applied that centering method from the home page. However, My site is entirely done with layers. I tried to change "absolute" to "center" for all layers, then they all centered (with the help of the home page tutorial code) but were all out of order. Any solutions for a guy like me who wishes to design with layers only and also wants things to be neatly and proportionally centered? :P


Anxiously waiting for a solution

Regards,

dthomsen8
04-25-2006, 12:04 AM
First of all, Thanks for replying :D . Second, Yes ive serached all over, read some articles + posts and applied that centering method from the home page. However, My site is entirely done with layers. I tried to change "absolute" to "center" for all layers, then they all centered (with the help of the home page tutorial code) but were all out of order. Any solutions for a guy like me who wishes to design with layers only and also wants things to be neatly and proportionally centered? :P

Anxiously waiting for a solution

Regards,

You know you can convert your Dreamweaver "layers" into tables. Having converted to tables, then maybe you could use a CSS centering technique on the table structure.

kidddgospel
04-25-2006, 12:34 AM
tried that, wont allow me because ive got some crucial overlaping :(

sarcastik
04-25-2006, 05:04 AM
I'm with you kidddgospel. I design my sites in tables and I want to switch to layers, but until I can come across an easy to impliment centering method for layers I have no choice but to stick with tables. You want your site to function like this one:

http://www.urbanideasgroup.com/sites/jefflang/ (not complete)

Which is simple to do with tables, but in this so-called "dreamweaver club" no one can seem to show me how to do it with layers in "dreamweaver" instead they give me bunch of stuff for me to copy/paste into my code. If I wanted to do that I would probably be using notepad to do the entire site. Once you figure out how to center stuff in the actual program of dreamweaver pm me because I work with clients and there is no way I can sell someone a site that looks all weird depending on the screen size/or resolution, etc.

cariva
04-25-2006, 11:19 AM
I've got this same problem: how to make my webpages fit neatly inside any screen size/resolution and browser, when it's designed with frames. I've played around with the html/css codes in the article about centering, but no luck. Any help with this would be really appreciated, guys!

davidj
04-25-2006, 11:31 AM
what a nice guy sarcastik...

but in this so-called "dreamweaver club" no one can seem to show me how to do it with layers in "dreamweaver" instead they give me bunch of stuff for me to copy/paste into my code. If I wanted to do that I would probably be using notepad to do the entire site. Once you figure out how to center stuff in the actual program of dreamweaver pm me because I work with clients and there is no way I can sell someone a site that looks all weird depending on the screen size/or resolution, etc.


Here is my tip...

try pressing F1

domedia
04-25-2006, 01:55 PM
If you're not very fluent in basic principles behind user interaction and the web, HTML/CSS/JS or any of the server technologies, there's no reason why you should use layers. Keep using tables if it works for you. If you want to learn and make your website more accessible, user friendly and nice to the search engines (plus future compatible, easier to maintain etc, the list goes on ;) ), then you should learn how to code. There's plenty of people, me included that handcode *and* use Dreamweaver. Why on earth would you use notepad when you've got a tool like Dreamweaver available. :)

ramandeep
04-25-2006, 02:21 PM
Ok understand the concept and then move ahead
study this first and then the next layout example!

<!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> Dreamweaver club!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

#wrapper{
position:relative;
width:70%;
background-color:#999999;
border:1px solid #000;
height:200px;
}
#test{position:absolute;left:50%;}
#testinner{
position:relative;
left:-50%;
background-color:#CCCCCC;
border:1px solid #000;
}
p {
margin:0;
padding:0;
text-align:right;
}
p span {
float:left;
position:relative;
}
</style>
</head>
<body>
<h1>Centre an element of no specified width</h1>
<div id="wrapper">
<div id="test">
<div id="testinner">


<span>left</span>right</p>
See this and understand the concept!


</div>
</div>
</div>
</body>
</html>

ramandeep
04-25-2006, 02:28 PM
study this layout now

<!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 Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0}
h1,h2,h3,h4,p {margin-bottom:1em}
ul{margin-left:16px}

/* mac hide \*/
html,body{height:100%;}
/* end hide*/
body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 10px;
background:#F7F7F7;
color:#000;
text-align:center;
}
#outer{
min-height:100%;
width:765px;
margin-left:auto;
margin-right:auto;
text-align:left;
border-left:3px solid #fff;
border-right:3px solid #fff;
position:relative;
}
* html #outer {
width:771px;
w\idth:765px;
height:100%;
}
#header, #footer{
background:#ffffcc;
border-top:5px solid #fff;
border-bottom:5px solid #fff;
text-align:center;
}
#footer{
position:absolute;
bottom:0;
left:0;
width:765px;
height:40px;
}
* html #footer {
height:50px;
he\ight:40px;
bottom:-1px;
}
#clearfooter {
clear:both;
height:50px;
}
#right, #left, #content {
float:left;
width:150px;
}
#content{width:465px;}
.clearer{
height:1px;
overflow:hidden;
clear:both;
margin-top:-1px;
}
</style>
</head>
<body>
<div id="outer">
<div id="header">
<h1>Header</h1>
</div>
<div id="left">


Left</p>



Left content goes here : Left content goes here : Left content goes here
: Left content goes here : Left content goes here : Left content goes here
: Left content goes here : Left content goes here : Left content goes here
: </p>
</div>
<div id="content">


Content</p>


Center content goes here : Center content goes here : Center content goes
here : Center content goes here : Center content goes here : Center content
goes here : Center content goes here : Center content goes here : Center
content goes here : Center content goes here : Center content goes here
: Center content goes here : Center content goes here : Center content goes
here : Center content goes here : Center content goes here : Center content
goes here : Center content goes here : Center content goes here : </p>
</div>
<div id="right">


Right</p>



Right content goes here : Right content goes here : Right content goes
here : Right content goes here : Right content goes here : Right content
goes here : Right content goes here : Right content goes here : </p>
</div>
<div id="clearfooter"></div>
<div id="footer">


Footer</p>
</div>
</div>
</body>
</html>



Ask what you dont get !