Positioning a div layer

souvik das · #1 (**permalink**) 04-18-2005, 11:51 PM

HI
I am having a problem with layer in dreamweaver. I have
made a layer & inside it there is a form & a button. I have used CSS in both form & button. But the problem is that, in "1024" resolution The alignment of layer is perfect. But when I am making the screen resolution "800* 600" it is getting dealigned. It is going right side of the screen.

my question is that how can I keep the layer in its place ?

Please suggest me.

---------Souvik das-----------

paulhiles · #2 (**permalink**) 04-19-2005, 09:56 AM

Do you have a sample page to view? Or alternatively, a snippet of your CSS and the relevant section of HTML code?

The problem sounds like it could be an issue with absolute positioning and/or margin widths, but it's difficult to tell without seeing your code. Have you tried using "position: relative;" for your div's position and "margin: auto;" for the margin width?

Take a look at this excellent tutorial on CSS centering at the Quirksmode.org site.

Paul

souvik das · #3 (**permalink**) 04-20-2005, 12:35 AM

hi paulhiles

Have a look in the codes as you asked me

<div id="Layer1" style="position:absolute; width:208px; height:27px; z-index:1; left: 684px; top: 9px;">

paulhiles · #4 (**permalink**) 04-20-2005, 05:02 AM

By setting the div's position as absolute, you've permanently fixed it's position in relation to the rest of the page. So when a visitor adjusts or resizes their browser that div will just stay exactly where it is... i.e. 684 pixels from the left-hand side of the browser window.

Could you provide some of the actual HTML code? You mentioned a form and button in your original post. Also, how does the div fit in with other page elements around it? Have you nested the div inside of another div or possibly a table cell?

Paul

souvik das · #5 (**permalink**) 04-20-2005, 05:51 AM

Just copy the code & run it in 1024 resolution next run the same code in 800*600 resolution. You will see the diffrence.

------------Souvik das------------------------------

<script language="JavaScript" type="text/JavaScript">

</script>
</head>

<body>
<div id="Layer1" style="position:absolute; left:571px; top:21px; width:235px; height:30px; z-index:1">
<input type="text" name="textfield" />
<input type="submit" name="Submit" value="Submit" />
</div>
<table width="750" height="49" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<th width="423" bgcolor="#999999" scope="row">Souvik das Souvik das </th>
<th width="327" bgcolor="#999999" scope="row"> </th>
</tr>
</table>
</body>

paulhiles · #6 (**permalink**) 04-20-2005, 07:20 AM

If you place your div layer inside of the right hand table cell, replace the "absolute" position with "relative", then you can float the div to the right.

The coding is far from ideal, but it's largely based on your demo sample above. You could achieve all of this with just div elements if you wished.

<body>
<table width="750" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<th width="423" bgcolor="#999999" scope="row">Souvik das Souvik das </th>
<th width="327" bgcolor="#999999" scope="row">
<div id="Layer1" style="position:relative; float:right; margin: 0.8em; width:235px; height:30px; z-index:1">
<form action="" id="form1" method="post" name="form1">
<input type="text" name="textfield" />
<input type="submit" name="Submit" value="Submit" />
</form>
</div>
</th>
</tr>
</table>
</body>

souvik das · #7 (**permalink**) 04-20-2005, 07:56 AM

cool ...... its working thanks !!!

But when I am putting that layer on an image its not working. Its again the same.

I mean:---------
insert an image> draw a layer on that particular image> inside that layer...... The form & the button.

"The same problem inspite of your last code"

paulhiles · #8 (**permalink**) 04-20-2005, 08:10 AM

Are you trying to add image buttons for your form?
Or are you adding a background-image to the div itself?

Either way, it shouldn't alter the layout... maybe the images need to be resized or you might want to increase the size of the div allowing the images to fit.

Paul

souvik das · #9 (**permalink**) 04-20-2005, 08:17 AM

This is the thing I want to do...& you will see the difference in 1024 & 800*600.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="JavaScript" type="text/JavaScript">

</script>
</head>

<body>
<div id="Layer1" style="position:absolute; left:542px; top:17px; width:211px; height:19px; z-index:1">
<input type="text" name="textfield" />
<input type="submit" name="Submit" value="Submit" />
</div>
[img]file:///D|/Documents%20and%20Settings/ABC/My%20Documents/Unnamed%20Site%201/cashadvance-care-revised.jpg[/img]</body>
</html>

paulhiles · #10 (**permalink**) 04-20-2005, 08:40 AM

Okay, well that's different again!
First things first...
You're referencing an image that's on your local machine, so no-one except you can see it.
The div is now using absolute positioning again, and isn't related to any other object... and the image just seems to have been randomly inserted.

To be honest, I think you need to work through some HTML tutorials and improve your overall knowledge. This will help when faced with similar layout problems in the future.

Paul