Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

danisark

Layout HTML+CSS problemas

Por , em Flash, ActionScript e tecnologias Adobe

Recommended Posts

danisark    0

danisark
Postado

Bem sou novo na area de html e estou fazendo de tudo para aprender do melhor jeito possivel, ví varios videos do nettuts mais lá eles fazem os tutoriais no bloco de notas e isso me confunde muito eu não sei fazer a integração passando um alyout do photoshop para o dremwaver sem ter erros e em um codigo limpo, portanto primeiramente gostaria pedir dicas de tutoriais, links, onde eu realmente aprenda a me virar e estruturar qualquer tipo de layout...

 

Anw o meu problema atual é que eu estou tentando colocar essa imagem onde ficará a escrita junto do menu porém só conssigo quando coloco em position absolute e ai bulga tudo porque eu não posso escrtever nada por cima e ele não fica embaixo do menu mesmo com o z-index.

O codigo está aqui

Html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrap">
 <div id="header">
   <p><img src="img/logo.gif" width="367" height="91" alt="logo" /></p>
   <p><img src="img/home.gif" width="127" height="47" alt="hom" /><img src="img/info.gif" width="123" height="53" /><img src="img/local.gif" width="122" height="53" /><img src="img/contato.gif" width="126" height="53" /></p>
   <img src="img/background.png" width="650" height="460" />  
</div><!--end header-->
 <div id="container"></div> 
 <!--end container-->
</div><!-- end wrap -->
</body>
</html>

 

CSS

#wrap {
 text-align:left;
 margin: 0 auto;
 width:760px;
}
#header {
width: 780px;
text-align:center;
z-index:5;
}

body {
 	text-align:center;
 	margin: 0;
 	padding: 0;
background: #161719
}

#container {
width:650;
padding:0;
float: none;
margin: 0;
}
p#bg {
text-align:center;
margin:0;
padding:-200px;
position:absolute;
left: 183px;
top: 165px;

 

 

layout (image)

2chvpl5.jpg

 

Como está ficando.

 

4t4snb.jpg

Compartilhar este post

Link para o post
Compartilhar em outros sites

wdc_black_    0

wdc_black_
Postado

olá amigo, coloque assim

 

body,* {
       text-align:center;
       margin: 0;
       padding: 0;
       background: #161719
}

 

o * significa os 

<p>

do seu código,

eles possuem um espaçamento por padrão e as vezes dão muita dor de cabeça

pois se esquece de definir 

margin:0; e padding:0

para eles hehe ;)

qualquer coisa posta ai

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Flash, ActionScript e tecnologias Adobe
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito