Ir para conteúdo

Arquivado

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

Rafael Leal

- Formatar estrutura em css

Por , em Desenvolvimento frontend

Recommended Posts

William Bruno    1501

William Bruno
Postado

Uma marcação simples para isso seria flutuar a imagem, e definir um width para o container de tudo.

<head>
<style  type="text/css">
* {
	margin: 0;
	padding: 0;
}
#conteudo {
	width: 500px;
}
#conteudo p {
	margin-bottom: 10px;
}
.fotoTexto {
	float: right;
}


</style>
</head>
<body>
<div id="conteudo">
<h1>Titulo da Notícia</h1>
<img src="foto.png" alt="" class="fotoTexto" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec in nulla. 
Nam non nisl. Pellentesque sit amet metus. Vivamus et odio. 
Donec eros magna, rutrum vel, pellentesque sit amet, pellentesque dapibus, neque. 
Phasellus pellentesque. Pellentesque habitant morbi tristique 
senectus et netus et malesuada fames ac turpis egestas.</p>

<p> Quisque pretium enim eu nisi. Aliquam at turpis nec mauris cursus sodales. 
 Sed pharetra enim rutrum felis. Proin consequat. Suspendisse ornare viverra lectus. 
 Curabitur massa. Nunc dui. Fusce placerat, ligula sit amet ornare molestie, 
 odio turpis sagittis nisl, eget dictum tellus lacus at libero. Maecenas diam.
 Morbi blandit nisl sed tortor. In id pede. Aliquam sem leo, elementum vel,
 adipiscing et, ultricies eu, mi. </p>

<p>Fusce quam justo, consectetuer in, dictum ac, aliquet non, mauris. 
Nulla semper sagittis tortor. Donec blandit elit sed est. 
Suspendisse odio urna, convallis vel, accumsan non, ultrices in, sem. 
Ut adipiscing, turpis sit amet vulputate suscipit, nulla eros varius enim, 
vitae rhoncus lorem libero et justo.  </p>
 
 </div><!-- /conteudo -->
Sendo que "foto.png" é apenas essa sua foto com o F e o A em cima.

Se forem 3 coisas diferentes, 3 imagens. você cria uma DIV, e coloca as 3 dentro dele. Flutuando agora esse container, e não mais a imagem diretamente.

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,

 

Amigo mostre-nos que já elaborou, pode ser que a gente consiga melhorar ;).

 

Cumprimentos,

webflex

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

Você por acaso viu o que o Willian disse??

 

qual a dificuldade agora, poste a ultima versão do código

 

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito