8 replies [Last post]
Willian Felix
Offline
newbie
Brazil
Last seen: 11 years 19 weeks ago
Brazil
Joined: 2007-06-01
Posts: 7
Points: 0

Hello mates!
I've begun to work with css few times ago and I really enjoy it.
But I'm trying to do a centering multilevel menu and I'm getting some problems.
The fist problem is that I'm working in a centering layout so when I change the screen's resolution the menu I'm building change its position too.
Definitely, I'm using position absolute and percentage however it isnt working properly yet.

The code you can see below

#menu1{
position: absolute;
left: 38%;
top: 177px;
height: 98px;
background-color: #EEEEEE;
display: block;
visibility: hidden;
}

Any idea mates.
Sorry my english guys.I'm still studying it too. =)

yzhang12
Offline
newbie
Last seen: 11 years 19 weeks ago
Joined: 2007-11-02
Posts: 4
Points: 0

wrap id=menu1 element within

wrap id=menu1 element within a relatively positioned div with auto left/right margins and text centered, add text align left declaration

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 30 weeks 6 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Willian Felix

Willian Felix wrote:
Definitely, I'm using position absolute and percentage however it isnt working properly yet.

Ditch the AP, it's not necessary.

Could you post all your HTML and CSS please, between <code></code> tags please.

Verschwindende wrote:
  • CSS doesn't make pies

Willian Felix
Offline
newbie
Brazil
Last seen: 11 years 19 weeks ago
Brazil
Joined: 2007-06-01
Posts: 7
Points: 0

The code

Hey guys,
Thanks for the help you're provide me and sorry about the delay but I need to give priority to another project but now I need to put hands on in this project firmly.
I'll paste de code below. I've just tried in many ways but anyone of them had worked at all.
HTML file--------------------¬¬













Indique para um Amigo




A Clínica

Infertilidade

Procedimentos

Novidades

Como Chegar

Contato




--------------------------------

Css File-----------------------¬¬

#itemsSub{ width: 177px; height: 16px; margin-top: 2px; display: block; background-image: url(../../img/bgSubitemMenu.gif); background-repeat: no-repeat; vertical-align: middle; } #itemsSub a{ width: 177px; height: 16px; padding-top: 3px; display: block; background-image: url(../../img/bgSubitemMenu.gif); background-repeat: no-repeat; background-color: tranparent; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 13px; color: #00ad91; text-decoration: none; text-align: left; } #itemsSub a:hover{ background-image: url(../../img/bgOverSubitemMenu.gif); background-repeat: no-repeat; background-color: tranparent; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 13px; color: #00ad91; text-decoration: none; } /*Sub Menu Layers*/ #subMenu1 { position: absolute; left:201px; top:152px; width:177px; height:98px; z-index:2; background-color: #E4E5D7; display: block; visibility: hidden; } #subMenu2 { position: absolute; left:48%; top:228px; width:177px; height:44px; z-index:3; background-color: #E4E5D7; display: block; visibility: hidden; } #subMenu3 { position: absolute; left:39%; top:151px; width:177px; height:61px; z-index:4; background-color: #E4E5D7; visibility: hidden; } #subMenu4 { position: absolute; left:49%; top:151px; width:177px; height:42px; z-index:5; background-color: #E4E5D7; visibility: hidden; } --------------------------------- Hey guys I dont have ideas anymore, I've tried lots and lots of thing I've looked it up in tutorials but till now anything has worked at all.

Thanks a lot for your help mates.

See ya =)

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 15 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

If you are going to post

If you are going to post code you must post *all* of your code, from the very top of the file to the very bottom. You haven't done that.

Or if that is all your code you aren't creating html, so you can't expect CSS to work with it.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Willian Felix
Offline
newbie
Brazil
Last seen: 11 years 19 weeks ago
Brazil
Joined: 2007-06-01
Posts: 7
Points: 0

Hey Ed Hello,

Hey Ed Hello,

Definitely I didnt post all the code because i'm using includes so I only posted the top's page code and its css main file.
The css work "properly" in fact my only problem is how to center my menu in a way that when the user change its screen's resolution the menu needs to be in a right position and do not change.

Regards from Will

Triumph (not verified)
Anonymous's picture
Guru

Willian Felix

Willian Felix wrote:
Definitely I didnt post all the code because i'm using includes so I only posted the top's page code and its css main file.

OK, let us know when you do.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 15 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Willian Felix

Willian Felix wrote:
Definitely I didnt post all the code because i'm using includes so I only posted the top's page code and its css main file.

The browser sees and deals with all the code, and many problems are found far away from where posters think the problem lies. Thus we need to see the whole page as it is delivered to the browser.

This happens so often that we have learned to ask for all the code and we've posted that request very prominently in a sticky message at the top of the forum topic list, and we expect new users to read those messages and follow our policies. You are getting free help, after all.

All the code, both html and CSS is a requirement, and so is valid code, both html and CSS. Valid html markup is particularly important since CSS rules are only defined for valid markup and there are no cross browser standards for error correction.

In many cases simply getting one's code validating solves the apparent problem. Where it doesn't it at least gives us a basis to start looking.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Willian Felix
Offline
newbie
Brazil
Last seen: 11 years 19 weeks ago
Brazil
Joined: 2007-06-01
Posts: 7
Points: 0

Sorry mate

Hey Ed you are absolutely right I'd like to apologise the way I spoken to you mate, in fact I have some problems with english I'm still learnig it and sometimes I don't know how to express myself in a good way.
You can see I normally use simple vocabulary and sometimes I need to read more than one time the topics in order to understand properly.
I'm very glad to you lead me better how to deal in a forum. Thanks a lot.
Now I've read the topic "how to post" and below I'll post the entire code.

HTML ->I used Dreamweaver to built it :(

Clínica Monteleone







• Salas de Repouso

• Centro Cirúrgico

• Lab. Embriologia

• Lab. Andrologia

• Lab. Criopreservação

• Conforto Médico

• Sala de Reunião / Biblioteca



• Principais Causas

• Investigação

• Quando Procurar Ajuda?



• Indução de Ovulação

• Inseminação Artificial

• Fertilização in vitro / ICSI






Indique para um Amigo




A Clínica

Infertilidade

Procedimentos

Novidades

Como Chegar

Contato

• Nossa Missão

• Infra-Estrutura











Monteleone News




 

• Novo site da Clínica é inaugurado.

Conheça o nosso novo site, novas sessões, novo visual. Tudo isto para melhor atender os nossos clientes.





• Novo site da Clínica é inaugurado.

Conheça o nosso novo site, novas sessões, novo visual. Tudo isto para melhor atender os nossos clientes.
























Destaques






Process an entire photo shoot in a fraction of the time. With support for a comprehensive range of digital cameras, you can automatically adjust settings, convert to universal Digital Negative.




 


Indução de Ovulação




Process an entire photo shoot in a fraction of the time. With support for a comprehensive range of digital cameras, you can automatically adjust settings, convert to universal Digital Negative.











 
Quando Procurar?

 





Process an entire photo shoot in a fraction of the time. With support for a comprehensive range of digital cameras, you can automatically adjust settings, convert to universal Digital Negative.

Process an entire photo shoot in a fraction of the time. With support for a comprehensive range of digital cameras, you can automatically adjust settings, convert to universal Digital Negative.







 
 














© Copyright Monteleone 1999/2007 - Todos os direitos reservados.



CSS --- This one I did by hand

/*Containers*/
/*Reserved area for containers
-------------------------------
*/

/*Menu Items*/
#itemsSub{
width: 177px;
height: 16px;
margin-top: 2px;
display: block;
background-image: url(../../img/bgSubitemMenu.gif);
background-repeat: no-repeat;
vertical-align: middle;
}
#itemsSub a{
width: 177px;
height: 16px;
padding-top: 3px;
display: block;
background-image: url(../../img/bgSubitemMenu.gif);
background-repeat: no-repeat;
background-color: tranparent;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-indent: 13px;
color: #00ad91;
text-decoration: none;
text-align: left;
}
#itemsSub a:hover{
background-image: url(../../img/bgOverSubitemMenu.gif);
background-repeat: no-repeat;
background-color: tranparent;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-indent: 13px;
color: #00ad91;
text-decoration: none;
}
/*Sub Menu Layers*/
#subMenu1 {
position: absolute;
left:201px;
top:152px;
width:177px;
height:98px;
z-index:2;
background-color: #E4E5D7;
display: block;
visibility: hidden;
}
#subMenu2 {
position: absolute;
left:48%;
top:228px;
width:177px;
height:44px;
z-index:3;
background-color: #E4E5D7;
display: block;
visibility: hidden;
}
#subMenu3 {
position: absolute;
left:39%;
top:151px;
width:177px;
height:61px;
z-index:4;
background-color: #E4E5D7;
visibility: hidden;
}
#subMenu4 {
position: absolute;
left:49%;
top:151px;
width:177px;
height:42px;
z-index:5;
background-color: #E4E5D7;
visibility: hidden;
}

Thank guy! =)