Problemas com CSS

m_ysa.15

Power Member
Boas,

tenho o seguinte problema:

codigo html

<ul>
<li id="teste1">
<h3><a href="#teste1"><img src="1-1.jpg" alt="" />teste1</a></h3>
<p>
texto texto texto
</p>
</li>
<li id="teste2">
<h3><a href="#teste2"><img src="1-2.jpg" alt="" />teste2</a></h3>
<p>
texto texto texto
</p>
</li>
(... varios <li>)

</ul>

eu preciso de meter a pagina da seguinte forma:

as imagens no top da pagina em forma de grelha

e o <p> assim como <h3> a seguir as imgens

algo do genro:

image image image
image image image

titulo <h3>
paragrafo <p>

titulo <h3>
paragrafo <p>

titulo <h3>
paragrafo <p>

titulo <h3>
paragrafo <p>

Claro que nao posso mudar o html, terei de mudar apenas o css ,para que a pagina fique com apresentaçao que falei em cima
Alguem me pode dar uma ajudinha, pois já tentei e não consegui fazer o que pertendo


cumprs e obrigada de avanço
 
Boas,
ninguem tem nenhuma ideia?

Tipo para meter as imagens em cima
teria de usar position:absolute; top:0; , mas depois não lhe posso aplicar float:left, para poder meter as imagens lado a lado

please help
 
Boas,

Antes de mais obrigada barricas por teres disponiblizado um pouco do teu tempo, no meu problema

Como a que faço em css, pois não posso tocar no html ?
 
Boas,

Consegui resolver o meu problema, deixo aqui a minha solução, poderá interessar a outras pessoas


<html>


<head>
<style>
body{
margin:0 auto;
width:500px;
}
ul{
padding-top:340px;
position:relative;
}
img{
position:absolute;
}

#teste1 img{
left:0px;
top:0px;
}

#teste2 img{
top:0px;
left:200px;
}

#teste3 img{
top:200px;
left:0px;
}

#teste4 img{
top:200px;
left:200px;
}
</style>
</head>
<body>
<ul>
<li id="teste1">
<h3><a href="#teste1"><img src="1-1.jpg" alt="" />teste1</a></h3>
<p>
texto texto texto
texto texto texto
</p>
</li>
<li id="teste2">
<h3><a href="#teste2"><img src="1-2.jpg" alt="" />teste2</a></h3>
<p>
texto texto texto
texto texto texto
</p>
</li>
<li id="teste3">
<h3><a href="#teste2"><img src="1-3.jpg" alt="" />teste2</a></h3>
<p>
texto texto texto
texto texto texto
</p>
</li>
<li id="teste4">
<h3><a href="#teste2"><img src="1-4.jpg" alt="" />teste2</a></h3>
<p>
texto texto texto
texto texto texto
</p>
</li>
</body>
</html>

Cumprimentos
 
Última edição:
Back
Topo