Pessoal,
Estou tentando fazer um layout com tableless e gostaria de saber se tem como fazer o efeito rowspan com div. Nem sei se isso é possível, se não for, me avisem.
Valeu!
Publicidade
|
|
Page 1 of 1
efeito rowspan com div
#3
Posted 12 September 2007 - 12:31 PM
Na verdade tem sim! Não sei exatamente como você quer fazer isso, mas eu precisei de algo semelhante e quando cai aqui neste tópico, com nossa amiga Giselecn afirmando que não é possível, fui tentar fazer o meu próprio rowspan. Os códigos estão abaixo, não sou expert em css, mas acho que isto já da pro gasto.
O Css que utilizei:
.p_produto {
width:535px;
border: #EEE 2px solid;
}
.p_principal {
font-family: Verdana, Arial, Helvetica, sans-serif;
padding:5px;
background-color:#EEEEEE;
display:block;}
.p_titulo { font-size: 12px;}
.p_desc { font-size: 10px; font-weight: bold;}
.p_texto {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
padding:5px;
text-align:justify;
float:left}
.p_info {
background-color:#FFFFFF;
position:relative;
display:block;}
.p_img { float:left; padding:5px;}
.p_tit {
font-weight:bold;
padding:5px;
}
.seta {
float:right;
display:block;
}
O Html
O Css que utilizei:
CODE
.p_produto {
width:535px;
border: #EEE 2px solid;
}
.p_principal {
font-family: Verdana, Arial, Helvetica, sans-serif;
padding:5px;
background-color:#EEEEEE;
display:block;}
.p_titulo { font-size: 12px;}
.p_desc { font-size: 10px; font-weight: bold;}
.p_texto {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
padding:5px;
text-align:justify;
float:left}
.p_info {
background-color:#FFFFFF;
position:relative;
display:block;}
.p_img { float:left; padding:5px;}
.p_tit {
font-weight:bold;
padding:5px;
}
.seta {
float:right;
display:block;
}
O Html
HTML
<div class="p_produto">
<div class="p_principal">
<div class="seta"><a href="#"><img src="/imagens/seta_abaixo.jpg" width="25" height="25" border="0" /></a></div>
<div class="p_titulo">TESTE</div>
<div class="p_desc">- Testando a descrição</div>
</div>
<div class="p_info">
<div class="p_img"><img src="ImagemDe100x150.jpg" width="100" height="150" /></div>
<div class="p_texto">
· qwer sdf awer asdf;<br />
· qwer sdf awer asdf;<br />
· qwer sdf awer asdf;<br />
· qwer sdf awer asdf;<br />
· qwer sdf awer asdf;<br />
<div class="p_tit">Características:</div>
· qwer sdf awer asdf<br />
· qwer sdf awer asdf<br />
· qwer sdf awer asdf<br />
· Rede: Polietileno<br />
· qwer sdf awer asdf</div>
</div>
</div>
<div class="p_principal">
<div class="seta"><a href="#"><img src="/imagens/seta_abaixo.jpg" width="25" height="25" border="0" /></a></div>
<div class="p_titulo">TESTE</div>
<div class="p_desc">- Testando a descrição</div>
</div>
<div class="p_info">
<div class="p_img"><img src="ImagemDe100x150.jpg" width="100" height="150" /></div>
<div class="p_texto">
· qwer sdf awer asdf;<br />
· qwer sdf awer asdf;<br />
· qwer sdf awer asdf;<br />
· qwer sdf awer asdf;<br />
· qwer sdf awer asdf;<br />
<div class="p_tit">Características:</div>
· qwer sdf awer asdf<br />
· qwer sdf awer asdf<br />
· qwer sdf awer asdf<br />
· Rede: Polietileno<br />
· qwer sdf awer asdf</div>
</div>
</div>
Share this topic:
Page 1 of 1
Similar Topics
| Topic | Forum | Started By | Stats | Last Post Info | |
|---|---|---|---|---|---|
|
Feira de Las Vegas confirma futuro que combina real com virtual
|
Notícias |
Notícias
|
|
|
|
Início da série de estratégia Command & Conquer está de graça na web
|
Notícias |
Notícias
|
|
|
|
Alcatel vê queda de até 12% no mercado de equipamento de telecom
|
Notícias |
Notícias
|
|
|
|
Problemas com PHP
Ao usar PHPmyAdmin deu esse erro: |
PHP |
Arthur Freitag
|
|
|
|
UTILIZANDO MASCARAS E MOVIECLIP
TUTORIAL DO CARNEIRINHO - efeitos interessantes usando mascara no flas |
Flash & ActionScript |
CLEIDE
|
|
|
|
Como reinicio o Som?
Comando para reiniciar o som |
Flash & ActionScript |
Shimizu
|
|
|
|
Como reduzir peso do SWF com JPEG inseridos.
? |
Flash & ActionScript |
qto.
|
|
|
|
Mark Zuckerberg diz que come apenas a carne de animais que ele mesmo abate
|
Notícias |
Notícias
|
|
Publicidade
|
|

Help













