Ir para conteúdo

POWERED BY:

Arquivado

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

Cristi@ano

Inserir imagem em uma Classe

Por , em Desenvolvimento frontend

Recommended Posts

Cristi@ano    0

Cristi@ano
Postado

Olá eu criei uma classe para o paragrafo <p>, e gostaria de inserir uma imagem dentro do conteudo dessa classe, só que quando eu ensiro a imagem, <img src="imagem">, essa imagem não se comporta bem com o conteudo.Como eu faço pra especificar o comportamento dessa imagem, eu faço individualmente pelo HTML ou tem como criar uma classe de estilo em CSS?Muito abrigado, qualquer coisa postem algum links sobre isso pra mim. Desde já agradeço...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Cristi@ano    0

Cristi@ano
Postado

Se quiserem dar algum toque quanto ao código, seria legal...Código da página

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><link rel="stylesheet" href="estilos1.css"type="text/css" media="screen"></head><body><div id="tudo"><div id="topo"><p>BLOGOFOLIO</p  ></div>  <div id="conteudo1">		<h1> </h1>		<h1>Símbolos & Logotipos</h1>		<p>Simbolos e logotipos são as duas formas de se criar uma marca, podem serem usados em conjunto, somente o símbolo ou somente o logotipo.</p>		<p>O que difere o símbolo do logotipo?</p>		<p>O símbolo é apenas um sinal gráfico, um desenho representacional, é composto de formas e não é empregado letras.</p>		<p>O logotipo é a forma escrita, criado com fontes modificadas ou normais.</p>		<h1>Assinatura Visual</h1>		<p>Quando símbolo e logotipo se juntam surge uma assinatura visual, a disposição dos 2 elementos podem variar, sendo representados empilhados, sobrepostos, lado-a-lado. Possibilitando uma enorme variedade na construção da assinatura visual. </p>		<p> </p>		<h1>Projetos</h1>		<p class="textodata">Nome do trabalho </p>		<p class="caixatexto">Aqui informações e imagem que eu gostaria de inserir</p>  </div><div id="menuver">		<p> </p>		<li>Design Gráfico</li>		<li><a href="#" title="marcas e logotipos">simbolos e logotipos</a></li>		<li><a href="#" title="vetores">vetores</a></li>		<li>Design de interface</li>		<li><a href="#" title="Web-design">Web-design</a></li>		<li><a href="#" title="Topos">Topos</a></li>				<li>Design Ambiental</li>		<li><a href="#" title="Sinalização">sinalização</a></li>				<li>Design editorial</li>		<li><a href="#" title="projetos editoriais">projetos editoriais</a></li>				<li>Design de embalagem</li>		<li><a href="#" title="Rótulos">rótulos</a></li>  </div><div id="conteudo2"><p> </p><h2>Links interessantes</h2><p>www.????.comwww.????.com.br</p></div><div id="rodape"></div></div></body></html>

Código do CSS

body {	background-color: #FFFFFF;	margin-top: 0px;}#tudo {	width: 750px;	text-align:left;	margin:0 auto;	background-image: url(junho2007/bg_conteudo001.jpg);	background-repeat: repeat-y;}#topo {	width: 717px;	height: 181px;	background-image: url(junho2007/topo002.jpg);	background-repeat: no-repeat;	padding-right: 15px;	padding-left: 15px;}#conteudo1 {	width: 470px;	float: left;	padding: 15px;}#conteudo2 {	width: 210px;	float: right;	clear:both;	padding: 20px;}#conteudo1 * {	padding: 0 20px;	}#menuver * {	padding: 0 10px;	}#rodape {	height: 38px;	clear:both;	background-image: url(junho2007/bg_rodape002.jpg);	background-repeat: no-repeat;}h1 {	font-family: Verdana, sans-serif;	font-size: medium;}h2 {	font-family: Verdana, sans-serif;	font-size: small;	color: #993300;}p {	font-size:small;	font-family: Verdana, sans-serif;	text-align: justify;	font-variant: normal;	color: #5C8285;	line-height:150%;}p.textodata {	font-size:small;	font-family: Georgia, verdana, sans-serif;	text-align: left;	color: #CC9900;	line-height:200%;	background-color: #F0EFE3;	font-weight: normal;	padding-left: 5px;	font-variant: normal;}p.caixatexto {	color:#333333;	font-weight: normal;	font-family: verdana, sans-serif;	padding: 5px;	border-left: 2px solid #D3CFAD;	text-align: left;	float: none;	display: block;}#menuver {	float: right;	width: 210px;	font: 12px Verdana, sans-serif;	padding: 20px;}#menuver li {	list-style: none;	width: 160px;	line-height: 22px;	color: #993300;	font-weight: bold;	margin: 1px;}#menuver li a {	margin:0; 	padding:0;	text-decoration:none;	color: #fff;}#menuver li a:visited {	color: #fff;}#menuver li a:hover {	color: #FFFFFF;	display: block;	text-indent: 10px;}#menuver li a:active { 	color: #ACA362; }

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