Css position:absolute problema

mullog

Membro
Tou a aprender a construir páginas usando css, mas estou com o seguinte problema na utilização da propriedade position: absolute(que permite posicionar um elemento-neste caso uma imagem).

õ código que tenho é:
CSS:
img#logo {
position: absolute;
left: 0px;
top: 0px;
height: 250px; width: 250px;
border-bottom-style: ridge;
border-bottom-color: limegreen;
}

img#bannertopo {
position:absolute;
left: 255px;
top: 0px;
border-bottom-style: ridge;
border-bottom-color: yellow;
}

HTML:
<html>

<head>
<title>pagina</title>
<link rel="stylesheet" type="text/css" href="cssdesign.css" />
</head>

<body>
<img id="logo" src="imagens/logo.png" alt="Logo">
<img id="bannertopo" src="imagens/bannertopo.bmp" alt="Banner Topo">

<p>dskhsdfkh</p>
</body>

</html>

O problema é que o elemento p é colocado no ínicio da página, o que me força a definir a posição deste elemento e de todos os que se seguirem, o que me põe dúvidas sobre estar a usar esta propriedade.
A razão porque a uso é porque quero a imagem encostada mesmo em cima em 0px 0px. Qual é a melhor solução?
 
Para definires os layouts correctamente, deverás utilizar div's para marcar as zonas onde queres que apareça tudo. Ou seja, deverá haver um div para o banner de cima, e um div abaixo para onde queres que apareça o texto todo.

<div id="geral">
<div id="banner">imagem</div>
<div id="texto"><p>texto</p></div>
</div>

Logicamente que terás que usar o CSS para melhor posicionar isto tudo.
A tua abordagem não está a ser correcta por isso aconselho-te a rever o teu esquema de layout :)

Força nisso. Estamos aqui para ajudar.
 
Ok, defini os divs mas depois de definir os div's mesmo assim há uma pequena distância entre as imagens e a borda do browser. Gostava de saber como removê-la?(se é que se o pode fazer em usar position)
 
E qual é o Browser? ;)

Experimenta no iE6, no iE7 (opcional, mas já que vai sair...) e no Firefox, Opera também se quiseres e vê os resultados, diferentes por certo.
 
Back
Topo