← HTML + CSS

Layout

Lida 7675 vezes

Offline

frsantos 
Membro
Mensagens 1458 Gostos 0
Troféus totais: 35
Trófeus: (Ver todos)
Linux User Mobile User Apple User Level 6 Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter

o que estou a fazer de errado aqui?

index.html
Código: [Seleccione]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="http://meusite.com/estilo.css" />
</head>

<body>
<div id="geral">
<div id="cabecalho">
<div id="logo"><a href="http://meusite.com/"><img src="imagens/logo.png" alt="meusite" border="0"></a>
</div>
</div>
</div>
</body>
</html>

estilo.css
Código: [Seleccione]
/* CSS Document */

#geral {
width:980px;
margin-right: auto;
margin-left: auto;
text-align: left;
}

#cabecalho {
background-image: url(imagens/f_cabecalho.jpg);
background-color:#000033;
heigth:100px;
}

#logo {
float: left;
display: inline;
margin-left: 10px;
}

apenas aparece a imagem do logo, nem aparece a imagem de fundo que tenho no .css nem a cor ...
Offline

bfms 
Equipa
Mensagens 1769 Gostos 40
Feedback +1

Troféus totais: 35
Trófeus: (Ver todos)
Search Level 6 Apple User Super Combination Combination Topic Starter 50 Poll Votes 10 Poll Votes Poll Voter Poll Starter

Olhando só para o que tens ai, o #cabecalho tem um erro na altura.

heigth:100px;

deverá ser

height: 100px;
Offline

Pedro Lopes 
Beta tester
Mensagens 3568 Gostos 18
Feedback +6

Troféus totais: 32
Trófeus: (Ver todos)
Level 6 Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3

Como o bfms diz, tens mal escrito "altura", muda que já funciona. ;)
Offline

frsantos 
Membro
Mensagens 1458 Gostos 0
Troféus totais: 35
Trófeus: (Ver todos)
Linux User Mobile User Apple User Level 6 Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter

 #-o os pormenores fazem toda a diferença...  :obrigado:
Offline

frsantos 
Membro
Mensagens 1458 Gostos 0
Troféus totais: 35
Trófeus: (Ver todos)
Linux User Mobile User Apple User Level 6 Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter

para ter 3 divs lado a lado que codigo tenho de colocar para não ficar uma ao lado da outra?

por exemplo eu tenho o destaque 1 e queria que a caixa aparecesse ao lado, mas ela so aparece, após o destaque
exemplo:


queria que ficasse isto:
Offline

Pedro Lopes 
Beta tester
Mensagens 3568 Gostos 18
Feedback +6

Troféus totais: 32
Trófeus: (Ver todos)
Level 6 Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3

float: left; no destaque e float: right; na caixa.
Offline

frsantos 
Membro
Mensagens 1458 Gostos 0
Troféus totais: 35
Trófeus: (Ver todos)
Linux User Mobile User Apple User Level 6 Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter

a unica diferença foi que ficou encostado à direita, não ficou ao lado



o codigo que tenho é este
Código: [Seleccione]
#conteudo {
background-image:url(imagens/fundo.jpg);
height:440px;
}

#caixa1 {
padding-left:20px;
padding-top:20px;
width:400px;
height:auto;
float:left;
}

#titulo1 {
color:#eaeeed;
background-image:url(imagens/f_azul.jpg);
height:24px;
font-size:16px;
font-weight:bold;
}

#subcaixa1 {
background-color:#eaeeed;
}

#texto1 {
color:#104770;
font-size:12px;
width:390px;
padding-left:5px;
}

#caixa2 {
padding-left:440px;
padding-top:20px;
width:200px;
height:auto;
float:right;
}

#titulo2 {
color:#eaeeed;
background-image:url(imagens/f_azul.jpg);
height:24px;
font-size:16px;
font-weight:bold;
}

#subcaixa2 {
background-color:#eaeeed;
}

#texto2 {
color:#104770;
font-size:12px;
width:190px;
padding-left:5px;
}
Offline

rtbfreitas 
Equipa
Mensagens 1497 Gostos 9
Feedback +24

Troféus totais: 30
Trófeus: (Ver todos)
Windows User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4

Coloca float: left; na caixa2
Offline

Gonçalo Martins 
Membro
Mensagens 229 Gostos 0
Troféus totais: 26
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

html?
Offline

frsantos 
Membro
Mensagens 1458 Gostos 0
Troféus totais: 35
Trófeus: (Ver todos)
Linux User Mobile User Apple User Level 6 Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter

html:
Código: [Seleccione]
<div id="conteudo">
<div id="caixa1">
<div id="titulo1"><img src="imagens/transp.png" width="15" height="5" border="0">titulo
</div>
<div id="subcaixa1">
<div id="texto1">texto
</div>
</div>
</div>
</br>
<div id="caixa2">
<div id="titulo2"><img src="imagens/transp.png" width="15" height="5" border="0">titulo</div>
<div id="subcaixa2">
<div id="texto2">texto</div>
</div>
</div>

</div>

css:
Código: [Seleccione]
#conteudo {
background-image:url(imagens/fundo.jpg);
height:440px;
}

#caixa1 {
padding-left:20px;
padding-top:20px;
width:400px;
height:auto;
float:left;
}

#titulo1 {
color:#eaeeed;
background-image:url(imagens/f_azul.jpg);
height:24px;
font-size:16px;
font-weight:bold;
}

#subcaixa1 {
background-color:#eaeeed;
}

#texto1 {
color:#104770;
font-size:12px;
width:390px;
padding-left:5px;
}

#caixa2 {
padding-left:440px;
padding-top:20px;
width:200px;
height:auto;
float:left;
}

#titulo2 {
color:#eaeeed;
background-image:url(imagens/f_azul.jpg);
height:24px;
font-size:16px;
font-weight:bold;
}

#subcaixa2 {
background-color:#eaeeed;
}

#texto2 {
color:#104770;
font-size:12px;
width:190px;
padding-left:5px;
}

coloquei float left na caixa 2 e n dá na mesma
Offline

Vitor Teixeira 
Membro
Mensagens 1527 Gostos 9
Feedback +21

Troféus totais: 29
Trófeus: (Ver todos)
Tenth year Anniversary Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3

é assim que queres?

Offline

rtbfreitas 
Equipa
Mensagens 1497 Gostos 9
Feedback +24

Troféus totais: 30
Trófeus: (Ver todos)
Windows User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4

Código: [Seleccione]
#caixa2 {
margin-left:20px;
padding-top:20px;
width:200px;
float:left;
}

Tem de dar, com float left na caixa1 também, tu quando colocaste float: left, retiraste o padding-left que tinhas?
Offline

frsantos 
Membro
Mensagens 1458 Gostos 0
Troféus totais: 35
Trófeus: (Ver todos)
Linux User Mobile User Apple User Level 6 Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter

funcionou, muito obrigado
 :obrigado:
Offline

rtbfreitas 
Equipa
Mensagens 1497 Gostos 9
Feedback +24

Troféus totais: 30
Trófeus: (Ver todos)
Windows User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4

Sempre às ordens :)
Offline

frsantos 
Membro
Mensagens 1458 Gostos 0
Troféus totais: 35
Trófeus: (Ver todos)
Linux User Mobile User Apple User Level 6 Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter

uma outra questão agora, como faço para colocar uma imagem sob o site? ou seja, quero que uma imagem fique por cima do site sem que ele se altere, uma cena tipo os pop-ups do iol.pt e clix.pt
 no codigo .css o k devo colocar