Posicionamento de elementos

[NandoMazola 0]

Bom, comecei a praticar html e css e logo estou efetuando uma estrutura de uma site que ilustrei no fireworks para css. Enfim, como sempre tenho que posicionar alguns elementos e pretendo posicionar uma parte que esta relacionada a uma div cursos e dentro desta div tem mais duas div sendo cursos destaque e cursos lista, e justamente nos cursos lista eu não consigo posicionar da forma que eu desejo, ou seja, da mesma forma que esta no fireworks. Colocarei 4 imagens para ilustrar, sendo ela: Uma da ilustração no fireworks, outra ilustração no navegador com as falhas de poscionamento, outra os codigos html com alguns elementos e o código css ao qual eu estou necessitando de ajudas...Espero que tenham entendido. Obrigado.

 

Se alguém se importar e estiver disposto em me ajudar pode me adicionar no facebook: https://www.facebook.com/fernando.mazola.3

Fernando Mazola

 

 

1ª IMAGEM -> Layout ilustrado em fireworks

http://imgur.com/6FSG8vX,Ft9U3qx,TvE9E22,MDC89YH#1

2ª IMAGEM -> Visualização no browser

http://imgur.com/6FSG8vX,Ft9U3qx,TvE9E22,MDC89YH#0

3ª IMAGEM -> Código Html

http://imgur.com/6FSG8vX,Ft9U3qx,TvE9E22,MDC89YH#2

4ª IMAGEM -> Código CSS da parte que esta os elementos na pagina

http://imgur.com/6FSG8vX,Ft9U3qx,TvE9E22,MDC89YH#3

[Rafael Melo 1]

Nando,

 

Posta o código, assim o podemos ajudar melhor.

 

Eu usaria div mesmo separando as imagens e não ul.

[NandoMazola 0]

<div id="cursos_lista"><h3 class="h1-curso">Ultimos Cursos</h3>	<ul>    	<li>        <span>1</span>        <img src="uploads/cursos/01.jpg" width="140" height="93"/>		<h1>Lorem ipsum dolor sit amet</h1>        <p>consectetuer adipiscing elit, iam nonummy nibh euismod tincidunt ut laoreet dolore</p>        <h2>19/03/2014 - Por Admin</h2>        </li>                       <li>        <span>2</span>        <img src="uploads/cursos/01.jpg" width="140" height="93"/>        </li>       	                <li>        <span>3</span>        <img src="uploads/cursos/01.jpg" width="140" height="93"/>        </li>                 <li>        <span>4</span>        <img src="uploads/cursos/01.jpg" width="140" height="93"/>        </li></ul></div><!--Curso_lista-->

#cursos_lista{	width:900px;	}#cursos_lista ul{	margin:0px;	padding:0px;	float:left;	list-style:none;	margin:0px 0px 0px 66px;}#cursos_lista ul li{	display:inline;}#cursos_lista span{	margin:5px 3px 0px 10px;	font:40px Arial, Helvetica, sans-serif;	color:#fff;	background-color:#0066CC;	text-align:center;	float:left;}#cursos_lista img{	margin:5px 3px 15px 0px;	border:0;	float:left;}#cursos_lista p{	font:12px Arial, Helvetica, sans-serif;	color:#666666;	float:left;}#cursos_lista h1{	font:12px Arial, Helvetica, sans-serif;	color:#0066CC;	text-align:center;	float:left;}#cursos_lista h2{	font:12px Georgia, "Times New Roman", Times, serif;	color:#666666;	float:left;}.h1-curso {	font:18px Arial, Helvetica, sans-serif;	color:#666666;	margin:3px 0px 0px 70px;	font-weight:bold;	float:left;}

Bom, rafa, mandei as imagens para ilustrar melhor e os códigos para que consiga visualizar e trazer uma opção de escape para encaixar a img com os textos, obrigado viu pela disposição.

 

 

Preciso de ajuda urgente galerinha...

[Rafael Melo 1]

Não sei se isso que voce quer Nando, mais como tinha falado, eu uso "div" nesses casos.

<div id="cursos_lista">
<h3 class="h1-curso">Ultimos Cursos</h3>
	<div class="box">
        <span>1</span>
        <img src="uploads/cursos/01.jpg" width="140" height="93"/>
        <h1>Lorem ipsum dolor sit amet</h1>
        <p>consectetuer adipiscing elit, iam nonummy nibh euismod tincidunt ut laoreet dolore</p>
        <h2>19/03/2014 - Por Admin</h2>
    </div>
    <div class="box">
        <span>2</span>
        <img src="uploads/cursos/01.jpg" width="140" height="93"/>
    </div>
    <div class="box">
        <span>3</span>
        <img src="uploads/cursos/01.jpg" width="140" height="93"/>
    </div >
    <div class="box">
        <span>4</span>
        <img src="uploads/cursos/01.jpg" width="140" height="93"/>
    </div>
</div><!--Curso_lista-->

Em seu html coloquei div no lugar das ul>li

.box{
    float: left;
    position:relative;
    width: 150px;
}
.box h1,.box p{
    width:100%;
}

Ja no CSS coloquei class box com relative, o width coloca um tamanho que seja compatível com seu layout.

[W4y 2]

#cursos_lista{

width:100%;

}

 

 

#cursos_lista ul{

list-style-type: none;

margin:0px 0px 0px 66px;

}

 

#cursos_lista ul li{

float: left;

position:relative;

width: 150px;

margin: 15px;

}

 

#cursos_lista span{

margin:5px 3px 0px 10px;

font:40px Arial, Helvetica, sans-serif;

color:#fff;

background-color:#0066CC;

text-align:center;

float:left;

}

 

#cursos_lista img{

margin:5px 3px 15px 0px;

border:0;

float:left;

}

 

#cursos_lista p{

font:12px Arial, Helvetica, sans-serif;

color:#666666;

float:left;

}

 

#cursos_lista h1{

font:12px Arial, Helvetica, sans-serif;

color:#0066CC;

text-align:center;

float:left;

}

 

#cursos_lista h2{

font:12px Georgia, "Times New Roman", Times, serif;

color:#666666;

float:left;

}

 

 

.h1-curso {

font:18px Arial, Helvetica, sans-serif;

color:#666666;

margin:3px 0px 0px 70px;

font-weight:bold;

float:left;

}

 

<div id="cursos_lista">

<h3 class="h1-curso">Ultimos Cursos</h3>

<ul>

<li>

<span>1</span>

<img src="uploads/cursos/01.jpg" width="140" height="93"/>

<h1>Lorem ipsum dolor sit amet</h1>

<p>consectetuer adipiscing elit, iam nonummy nibh euismod tincidunt ut laoreet dolore</p>

<h2>19/03/2014 - Por Admin</h2>

</li>

 

 

<li>

<span>2</span>

<img src="uploads/cursos/01.jpg" width="140" height="93"/>

<h1>Lorem ipsum dolor sit amet</h1>

<p>consectetuer adipiscing elit, iam nonummy nibh euismod tincidunt ut laoreet dolore</p>

<h2>19/03/2014 - Por Admin</h2>

</li>

 

 

<li>

<span>3</span>

<img src="uploads/cursos/01.jpg" width="140" height="93"/>

<h1>Lorem ipsum dolor sit amet</h1>

<p>consectetuer adipiscing elit, iam nonummy nibh euismod tincidunt ut laoreet dolore</p>

<h2>19/03/2014 - Por Admin</h2>

</li>

 

<li>

<span>4</span>

<img src="uploads/cursos/01.jpg" width="140" height="93"/>

<h1>Lorem ipsum dolor sit amet</h1>

<p>consectetuer adipiscing elit, iam nonummy nibh euismod tincidunt ut laoreet dolore</p>

<h2>19/03/2014 - Por Admin</h2>

</li></ul></div><!--Curso_lista-->