Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Help Please! Some problems with layers

Featured Replies

Hi, I am quite new to Web Designing... Cannot fixed a layers at one point. In FrontPage Design Mode everything looks great but when I go to Preview Mode my menu layer moves a bit left. And when I try to see my Main page in IE Menu Layer still not at a place I want. Moreover, when I resize (restore down) the window in IE my Menu Layer jump to other position on the page. Please someone help to fixed this problem!!! Thanks. :(

Trial.zip

  • Author
Can you copy and paste your XHTML and CSS code please?

 

I am not quite sure whether I am right coz I am totally new to web designing.

 

Here is my styles.css code

 

a.menu

{

text-decoration: none;

font-family: tahoma;

font-size: 12px;

font-weight: bold;

color: #3A3A3A;

}

a.menu:hover

{

text-decoration: underline;

font-family: tahoma;

font-size: 12px;

font-weight: bold;

color: #3A3A3A;

}

a.menu:visited

{

font-family: tahoma;

font-size: 12px;

font-weight: bold;

color: #3A3A3A;

}

td

{

font-family: tahoma;

font-size: 11px;

color: #6A6A6A;

}

a.more

{

color: #FF0000;

text-decoration: none;

font-family: tahoma;

font-size: 11px;

font-weight: bold;

}

a.more:visited

{

color: #FF0000;

font-family: tahoma;

font-size: 11px;

font-weight: bold;

}

a.more:hover

{

color: #FF0000;

font-family: tahoma;

text-decoration: underline;

font-size: 11px;

font-weight: bold;

}

a.footer

{

color: #585858;

text-decoration: none;

font-family: tahoma;

font-size: 12px;

font-weight: bold;

}

a.footer:visited

{

color: #585858;

font-family: tahoma;

font-size: 12px;

font-weight: bold;

}

a.footer:hover

{

color: #585858;

text-decoration: underline;

font-family: tahoma;

font-size: 12px;

font-weight: bold;

}

a.metamorph

{

color: #ffffff;

text-decoration: none;

font-family: tahoma;

font-size: 11px;

font-weight: normal;

}

a.metamorph:visited

{

color: #ffffff;

font-family: tahoma;

font-size: 11px;

font-weight: normal;

}

a.metamorph:hover

{

color: #ffffff;

text-decoration: underline;

font-family: tahoma;

font-size: 11px;

font-weight: normal;

}

.title

{

color: #3A3A3A;

font-size: 12px;

font-weight: 900;

}

 

 

My XHTML code you cam check here - www{dot}acsemi{dot}com

 

I hope it will help you.

  • Author
Is that all of your CSS?

 

 

Yes, that's all what I have in the styles.css. Actualy I never write this file and I don't know how to do it. I just download a template from Internet and trying to modify a little bit.

Hi, I am quite new to Web Designing... Cannot fixed a layers at one point. In FrontPage Design Mode everything looks great but when I go to Preview Mode my menu layer moves a bit left. And when I try to see my Main page in IE Menu Layer still not at a place I want. Moreover, when I resize (restore down) the window in IE my Menu Layer jump to other position on the page. Please someone help to fixed this problem!!! Thanks. :(

 

damn m8 u have a big mess in this html :]

Your problem is :

<div style="position: absolute; width: 568px; height: 98px; z-index: 0; left: 89px; top: 106px; float: left; visibility:visible" id="Menu">

 

but lets clear few things before solve this.

 

u have seperate css file

 <link rel=stylesheet type="text/css" href="styles.css">

So why u adding css style in html file too ?

 

<body bottommargin="0" leftmargin="0" marginheight="0" marginwidth="0" rightmargin="0" topmargin="0" bgcolor="#EAEAEA" onload="FP_preloadImgs(/*url*/'../Pictures/button4.jpg', /*url*/'../Pictures/button10.jpg', /*url*/'WebPicture/button2.jpg', /*url*/'WebPicture/button3.jpg', /*url*/'WebPicture/button5.jpg', /*url*/'WebPicture/button6.jpg', /*url*/'WebPicture/button8.jpg', /*url*/'WebPicture/button9.jpg', /*url*/'WebPicture/buttonB.jpg', /*url*/'WebPicture/buttonC.jpg', /*url*/'WebPicture/buttonE.jpg', /*url*/'WebPicture/buttonF.jpg', /*url*/'WebPicture/button29.jpg', /*url*/'WebPicture/button2A.jpg', /*url*/'WebPicture/button2C.jpg', /*url*/'WebPicture/button2D.jpg', /*url*/'WebPicture/button2F.jpg', /*url*/'WebPicture/button30.jpg')">

 

daaaaaaamn m8, why are u doin this ?

 

You shoud create div called wrapper or container and put those all div's and tables (if u really must, but will be good if u will start doing all on div's)

 

 

 

THIS

<table border="0" style="border: 2px solid #565656; border-top: 0px" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" height="100%" width="777">
<tr>
	<td><!-- logo image --><!-- end logo image -->
	<img border="0" src="WebPicture/Heading-proba.jpg" width="778" height="106"></td>
</tr>
<tr>
	<td width="2" height="23"> </td>
</tr>
<tr>
	<td height="100%" align="justify">
		<!-- main content starts here -->

 

u can replace with this :

<div id="header"></div>

and in css write something like this :

 

#header {

width:778px;

height:106px;

background-image:url(WebPicture/Heading-proba.jpg);

position:relative;

margin:0;

}

 

after this, in html u will have

<div id="Menu"> (clear all style things from there, and add something like this to your external css file)

 

#Menu {

position: relative;

width: 568px;

height: 98px;

z-index: 0;

float: left;

margin-top:0px;

}

 

In your html you gave to Menu div, position:absolute, and thats why u have those problems.

 

btw, stop using FrontPage m8, and start learning dreamwaver or some kind of freebie soft for creating websites.

 

and try to do not mix tables and div's,

Try to only on div's

index.html

styles.css

  • Author

Thanks for help n0xx. I knew that this website is terrible. I will try to learn dreamwaver.

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.