CSS como nos BLOGs.

Leandro Senni · Março 9, 2008

Ola. como faz pra por.. uma imagem e ao lado texto e abaixo na foto ele continua so que na linha inteira...

como no WORD ao coloca um imagem o texto abre espaço e fica ao lado e embaixo...

VLW pessoal...

Maujor · Março 9, 2008

CSS:

img.left {
 display:block;
 float:left;
 margin:0 15px 0 0;
 }

div.clear {
 clear: both;
 }

HTML:

<p><img src="/imagens/minhaimagem.gif" alt="descrição da imagem" class="left" /> Aqui vai o texto que deverá ficar ao lado e embaixo da imagem</p>
<div class="clear"></div>

WillianAndrade · Março 11, 2008

olá man

a dica do maujor foi boa

mas eu aplicaria a imagem com css, caso ela seja apenas ilustrativa...

então eu criaria uma div só para o imagem, e fora dessa div um <p></p> com o texto

assim:

xhtml

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

	<title>Título da Página</title>

	<link rel="stylesheet" href="style.css" media="screen" />
</head>

<body>
<div id="site"> <!-- div que engloba todo o site -->
	<div id="topo">
		<h1><a href="#" title="Página Inicial">Logo do Site</a></h1>
	</div>
		<div id="menu">
			<ul>
				<li><a href="#" title="Home">Home</a></li>
				<li><a href="#" title="Blog">Blog</a></li>
				<li><a href="#" title="Contato">Contato</a></li>
			</ul>
		</div>

			<div id="conteudoLeft">
				<div class="imgs_post"></div>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras viverra. Phasellus sed leo id ligula fringilla egestas. Lorem ipsum
				dolor sit amet, consectetuer adipiscing elit. Ut a orci nec enim pellentesque ultricies. Aenean accumsan mi quis lorem. Fusce tristique
				felis non pede. Donec nec nisi ac nisi pretium viverra. In in dui. Donec egestas. Morbi odio purus, tempor a, congue in, interdum quis,
				sapien. Curabitur laoreet purus nec tortor. Mauris mattis faucibus urna. Sed sed purus eget ante vestibulum rutrum. Mauris id augue.
				Morbi at sapien a tellus suscipit fringilla. Nullam sem arcu, commodo accumsan, sagittis sit amet, rutrum quis, metus. Mauris non orci ut
				velit auctor pretium. Duis imperdiet placerat lectus. Nullam facilisis arcu non nunc pulvinar tristique.</p>

				<p>Proin nulla. Etiam semper. In dictum ligula vel mauris. Maecenas non mi. Cras sagittis metus a lacus. Vestibulum est odio,
				pellentesque aliquam, ultrices at, scelerisque eu, tortor. In lacinia nisl vel ipsum. Nunc tellus risus, mollis in, dignissim ut, sodales
				sed, dolor. Nam viverra fermentum pede. Morbi risus diam, ultrices nec, sollicitudin ac, molestie sed, massa. Fusce eu turpis eget magna
				placerat auctor.</p>

				<p>In egestas urna commodo arcu. Praesent commodo, mauris sed gravida blandit, felis nunc ornare nisl, quis dapibus libero ipsum eu erat.
				Cras at augue a mauris imperdiet rhoncus. Nulla augue turpis, suscipit ut, euismod nec, ultricies fermentum, metus. Donec rhoncus risus.
				Sed vel libero. Duis turpis leo, hendrerit ac, viverra lobortis, facilisis ac, ipsum. Ut aliquam est nec enim. Fusce elementum. Nulla
				pellentesque dignissim neque. Aliquam ac nunc at orci tincidunt facilisis. Donec imperdiet purus a urna tempor tincidunt. Integer
				consectetuer metus ut massa. Duis lacus orci, luctus at, molestie sit amet, laoreet sed, erat. In hac habitasse platea dictumst. Aenean
				magna enim, tempus ut, interdum vitae, pulvinar at, massa. Donec cursus. Nunc vestibulum. Nullam dolor. Fusce tincidunt sem eu pede.</p>
			</div>
			<div id="conteudoRight">
			
			</div>

		<div id="footer">
			<address>Willian Andrade © Todos os direitos reservados</address>
		</div>
</div>
</body>
</html>

css

* {margin:0; padding:0; font-family: Arial, Verdana, Helvetica, Sans-Serif;}

body {background-color:#000; color:#fff;}

body p {
	font-size:12px;
}

#site {
	width:770px;
	position:absolute;
	left:50%;
	margin:0 0 0 -335px;
}

#topo {
	height:200px;
	border-bottom:1px solid #fff; /* apenas para ilustrar melhor as divs usadas */
}

#topo h1 {
	font-size:25px;
}

#topo h1 a {
	float:left;
	text-decoration:none;
	color:#f0f0f0;
	margin:100px 0 0 10px;
}

#topo h1 a:hover {
	text-decoration:underline;
}

#menu {
	height:20px;
	text-align:center;
	border-bottom:1px solid #fff; /* apenas para ilustrar melhor as divs usadas */
}

#menu ul {
	list-style:none;
}

#menu ul li {
	padding:0 50px;
	display:inline;
}

#menu ul li a {
	color:#fff;
}

#conteudoLeft {
	width:480px;
	float:left;
	margin:20px 0;
	padding:0 20px;
	border-right:1px solid #fff; /* apenas para ilustrar melhor as divs usadas */
}

#conteudoLeft div.imgs_post {
	width:220px;
	height:170px;
	border:1px solid #a0a0a0;
	margin:0 10px 0 0;
	background:url(teste.jpg) no-repeat center center;
	float:left;
}

#conteudoLeft p {
	text-align:justify;
	text-indent:25px;
	margin:0 0 25px 0;
}

#conteudoRight {
	width:249px;
	height:200px;
	float:right;
	background-color:red;
}

#footer {
	height:20px;
	padding:30px 0 0 0;
	clear:both;
	text-align:center;
}

#footer address {
	font-size:9px;
	font-style:normal;
	color:#a0a0a0;
}

qualquer dúvida volte a postar man

abraço

EDIT: ah, apliquei uma imagem teste no tamanho de 200px (width) por 150px (height).

Maujor · Março 11, 2008

olá man
a dica do maujor foi boa

mas eu aplicaria a imagem com css, caso ela seja apenas ilustrativa...

então eu criaria uma div só para o imagem, e fora dessa div um <p></p> com o texto

Por que complicar?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">

Atenção: Este DOCTYPE não existe! De onde você tirou isto?

<head>
<title>Título da Página</title>

...segue um extenso código que não tem nada com a pergunta

Para que este código todo, com menu, rodapé, etc...?

Isto pode confundir os iniciantes.

kalder · Março 11, 2008

Prezado Maujor,

Permita uma dúvida (meio newbie até), e como fazer para posicionar uma imagem ao centro, sem a necessidade de texto fluindo, eu sempre apelo pra uma "gambiarra", inserindo uma div com "text-align=center".

[ ]'s

Maujor · Março 11, 2008

Veja este artigo (em duas partes):

Centralizar uma imagem

kalder · Março 11, 2008

Bah, sem palavras, muito bom, muito obrigado... gostei também daquela solução nos coments da primeira parte, em alguns casos, até me serve também (aquela solução que usa "margin=0 auto")!

Muito grato mesmo!!!

[ ]'s

rev087 · Março 11, 2008

A solução do Maujor é excelente, mas eu mudaria só uma coisa: usaria um CSS hack para não sujar o HTML com a <div class=clear>

O CSS do Maujor:

img.left {
  display:block;
  float:left;
  margin:0 15px 0 0;
  }

O fix "universal":

.clearfix:after {
  content: ".";
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}

O fix para IE7 e IE6, respectivamente:

*+html .clearfix {
  min-height: 1%;
}

* html .clearfix {
  height: 1%;
  overflow: visible;
}

E o HTML, sem a div no final:

<p class="clearfix"><img src="/imagens/minhaimagem.gif" alt="descrição da imagem" class="left" /> Aqui vai o texto que deverá ficar ao lado e embaixo da imagem</p>

É claro que é uma solução um pouco mais complexa, e não é tão amigavel para iniciantes quanto a solução do Maujor, mas é uma alternativa. A idéia básica consiste em usar a pseudo-classe :after para adicionar um elemento "virtual" com clear:both, ao invéz de uma div.

Leandro Senni · Março 11, 2008

nossa... vlw ai pessoal... bom minha sorte é que to ah um tempo entao deu pra entender bem todas esplicação...

MAUJOR e todos VLW... vou por isso no meu site.. assim q possivel...

Arquivado

CSS como nos BLOGs.

Recommended Posts

Leandro Senni 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Maujor 144

Compartilhar este post

Link para o post

Compartilhar em outros sites

WillianAndrade 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Maujor 144

Compartilhar este post

Link para o post

Compartilhar em outros sites

kalder 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Maujor 144

Compartilhar este post

Link para o post

Compartilhar em outros sites

kalder 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

rev087 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Leandro Senni 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

JAVA - Ajuda em Paginação

JAVA - Orientação para Invalidar Sessão

printf iniciante básico

Fóruns

Tempo Real

Informação importante