Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
/applications/core/interface/imageproxy/imageproxy.php?img=http://img77.imageshack.us/img77/3142/42504044ic5.jpg&key=468a5b9955582902cbadf0d2d6de60d07f52a02b1968bc355b1b3319e2a98de3" alt="Imagem Postada" />
Gostaria do menu alinhado com o logo que eu já tinha feito mas quando coloquei o texto puff, ele tinha que ficar do lado do menu.
OBS.: O menu esta em uma class e o texto (h1) esta em uma class chamada PUM ( :blink: ).
Please helpem me :)
Qual é o código?
esse menu está logo após o logo no fluxo?
você flutuou essas DIVs?
cara... não vai ser só posicionando com absolute que irá resolver, e na minha opinião, essa ainda é a pior solução.
Ainda tô estudando isso de abstoluto, posicionamento etc.
Mas eu tentei melhorar e refiz o código, ficou assim:
>
<html xmlns="[http://www.w3.org/1999/xhtml"](http://www.w3.org/1999/xhtml) xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Pousada da serra</title>
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
</head>
<body>
<img class="logo" src="images/pousadalogo.png" img/>
<br>
<br>
<br>
<a class="menu" href="www.google.com.br">HOME</a>
<a class="menu" href="www.google.com.br">ACOMODACOES</a>
<a class="menu" href="www.google.com.br">LAZER</a>
<a class="menu" href="www.google.com.br">PACOTES</a>
<a class="menu" href="www.google.com.br">CONTATO</a>
<p>Na cidade de Cunha, a Pousada Clima da Serra, além de ter uma das melhores localizações, oferece um serviço de qualidade<br>, pois nossos funcionários são técnicos de turismo, o que faz os nossos hóspedes se sentirem totalmente à vontade.
.Tem.<br> o melhor custo-benefício de hospedagem da cidade, pois tem uma das menores tarifas sem perder a qualidade e o . conforto <br>que oferece outros estabelecimentos.
Quando se faz uma reserva na Pousada Clima da Serra, nossos hóspedes têm direito a c<br>afe da manhã e o uso de todos os equipamentos que a pousada dispõe, como piscinas, churrasqueiras, fogão de lenha, estaci<br>onamento, entre outros.
Mesmo em períodos de baixa temporada recebemos visitantes que procuram um bom lugar para desc<br>ansar, com conforto e comodidade. Venha você também visitar uma das mais belas cidades do Brasil e nos prestigiar com sua <br>presença.</p>
</body>
</html>>
body{
background: #FFFFFF; / FUNDO BRANCO /
color: #000000; / COR DO TEXTO, PRETA/
padding-left: 20px; / PADDING DA ESQUERDA DO DOCUMENTO É 20PIXELS /
padding-top: 20px; / O PADDINT DO TOPO É DE 20PIXELS /
}
img{
margin-left: 20px;
}a.menu{
text-align: right;
width: 155px;
padding-right: 20px;
border-right: solid 10px #d1d101;
display: block;
padding-left: -200px; /* PADDING DA ESQUERDA É 60PX*/
font-weight: bold; /* TEXTO É BOLD */
font-size: 32px; /* TAMAMHO É 32PX*/
color: #d1d101; /* A COR DA FONTE DO MENU É #....*/
font-family: "Futura-CondensedLight-Thin"; /* A FONTE É VERDANA*/
text-decoration: none; /* NÃO HÁ DECORAÇÃO NO TEXTO*/
line-height:175%;
}a.menu:hover{
font-family: "Futura-CondensedLight-Thin";
display: block;
padding-left: 0px;
font-weight: bold;
font-size: 32px;
color: #6d6d01;
}p{
margin-left: 210px;
margin-top 2cm;
}Ele ta certo mais não "sobe".
Bom, estão faltando algumas coisas na tua marcação.
Como por exemplo, é muito mais fácil posicionar elementos nivel de bloco.
Então façamos um para o teu menu.
#menu {
list-style: none;
float: left;
}
...
<ul id="menu">
<li><a class="menu" href="www.google.com.br">HOME</a></li>
<li><a class="menu" href="www.google.com.br">ACOMODACOES</a></li>
<li><a class="menu" href="www.google.com.br">LAZER</a></li>
<li><a class="menu" href="www.google.com.br">PACOTES</a></li>
<li><a class="menu" href="www.google.com.br">CONTATO</a></li>
</ul>Bom, na verdade não estava "certo".. pois você definiu um **paragrafo**, e ele ocupa um bloco inteiro, ou seja width 100%... por isso que não tinha como ele ficar ao lado do menu do jeito que você estava fazendo.Não entendi o porque de tanto padding e desses negativos. Dá uma revisada ai.Olá,
Só para lembrar que a propriedade do padding não aceita valores negativos.
Cumps \o/
posiciona ele em absotulo e tenta usar lista pra facilitar o posicionamento tamanho etc.. =D