/    Sign up×
Community /Pin to ProfileBookmark

Silly div layer keeps moving if page is resized

Copy linkTweet thisAlerts:
Oct 15.2003

how do i keep this darn thing from moving

<div id=”Layer1″ style=”position:absolute; left:135px; top:191px; width:297px; height:242px; z-index:1″>
<table width=”75%” border=”0″ align=”center” valign=”top”>
<tr>
<td width=”96″><div align=”center”></div></td>
</tr>
<tr>
<td><font size=”1″ face=”Verdana, Arial, Helvetica, sans-serif”><strong>::
Aviation Interior</strong></font></td>
</tr>
<tr>
<td><strong><font size=”1″ face=”Verdana, Arial, Helvetica, sans-serif”>::
Aviation Exterior</font></strong></td>
</tr>
<tr>
<td><strong><font size=”1″ face=”Verdana, Arial, Helvetica, sans-serif”>::
Aerial Photography </font></strong></td>
</tr>
<tr>
<td><font size=”1″ face=”Verdana, Arial, Helvetica, sans-serif”><strong>::
Architectual Photographs </strong></font></td>
</tr>
</table>
</div>

to post a comment
HTML

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@pyroOct 15.2003 — Keep it from moving? By positioning it absolutly, it shouldn't be moving...
Copy linkTweet thisAlerts:
@ennuiauthorOct 15.2003 — check it out [URL=http://www.bspassoc.com/gal.html]http://www.bspassoc.com/gal.html[/URL] make the page about half it size and then maximize it and you will see the choose a gallery options move around ? ? ?
Copy linkTweet thisAlerts:
@pyroOct 15.2003 — Nope, doesn't move for me (Mozilla Firebird and IE 6) -- which might cause a problem if the user browses with a screen resolution larger than 1024x768...
Copy linkTweet thisAlerts:
@DaveSWOct 15.2003 — do you mean the fact that the page is 820px wide centered? so as soon as the screen is wider than 820px it moves to the center? or move in some other way?
Copy linkTweet thisAlerts:
@spufiOct 15.2003 — What I noticed was the images part of the site was moving, but the menu itself wasn't, so it was off.

On another note, I was looking at your code and you really should use more CSS for things like your menu. Here's a reworked version of it.

CSS that goes in your <head> tag.

<style>

<!--

li { font:bold 65% Verdana, Arial, Helvetica, "sans-serif"; list-style-type:none; }

li a { color:#600; }

#menu { position:absolute; left:135px; top:191px; width:297px; z-index:1 }

-->

</style>

The first part defines your font as being bold, a size of 65%(change if needed), and then the font family. You can write them out seperately, but this is the shorthand version. I then define the list style type as none so it gets rid of the dots that show up by default when using unordered list. The second line defines the color as 660000(600 being the shorthand version) for any link in a list item. The third part is just using a better name for your id and then defining all of the styles for it. If your site shifts around depending upon the resolution size than you will want to change the position definitions by using percentages instead of "px."

Here's the HTML part. Notice how much cleaner the code is.

<ul id="menu">

<li>:: <a href="Interior.html" target="news">Aviation Interior</a></li>

<li>:: <a href="Exterior.htm" target="news">Aviation Exterior</a></li>

<li>:: <a href="Interior.html" target="news">Aerial Photography</a></li>

<li>:: <a href="Interior.html" target="news">Architectual Photographs</a></li>

<li>:: <a href="Interior.html" target="news">Catalogs</a></li>

<li>:: <a href="Interior.html" target="news">Digital Enhancement</a></li>

<li>:: <a href="Interior.html" target="news">Industrial Photography</a></li>

</ul>

For more CSS info.

http://www.w3schools.com/css/css_reference.asp#list
Copy linkTweet thisAlerts:
@ennuiauthorOct 15.2003 — ok your right its not the div layer that moves its the table:eek: so I guess my question should be how do you get the table tostay were it is?do you mean the fact that the page is 820px wide centered? so as soon as the screen is wider than 820px it moves to the center? [/QUOTE] how do i make it so both items stay together
Copy linkTweet thisAlerts:
@spufiOct 15.2003 — [i]Originally posted by pyro [/i]

[B]Keep it from moving? By positioning it absolutly, it shouldn't be moving... [/B][/QUOTE]

What he said. Get rid of your align=center in your table tag and use absolute positioning. Of course, if you had placed your menu code without using absolute positioning on it within the table, then the menu would move along with the rest of your stuff.

Not that you should be using tables for layout...?
Copy linkTweet thisAlerts:
@ennuiauthorOct 15.2003 — Ok I am sorry but how would I get the table to be centered using absolute positioning... please for give my ignorance as I have never really used anything like that... I am using dream weaver and when I put the div layer it made it for me. I am trying to learn so please bear with me
×

Success!

Help @ennui spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.6,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...