Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá galera,
Seguinte, preciso saber o que tenho que fazer para acertar as seguintes situações:
1º: Eu Inseri uma tabela dentro de uma div, o texto está ficando com o paragrafo muito longo entre uma linha e outra, gostaria que ficase da forma que está nas caixas (divs) deste site: screen do site Clique aqui
2º: Agora veja o meu site: Clique aqui
No topico "moda", a baixo tem uma fotinha e do lado o texto ai que gostari de ficar como descrevi acima.
E também da forma que está ao dar mais um "enter" o topico "Geral" se desloca, creio que se for inserindo mais conteúdos os topicos vao se desconfigurar tds na pagina. Oque devo fazer também.
Fico no aguardo galera.
Att.
>
Dá uma olhada: line-height
Então cara,
Dei uma olhada no artigo, porem no que eu mecho na
p, ul, ol {
margin: 10px -6px;
line-height: 50%;
font-size: 14px;
font-family: Verdana;
font-weight: normal;
text-align: justify;
}O texto ou imagem que está na minha "splash2" tambem se desloca.
E a outra questão é os elementos do meu "#content" estão se encavalando quando da mais de 3 enter's.
De uma olhada Clique aqui
gostaria que ficase da forma que está nas caixas (divs)
O que você sabe sobre box model???
Vamos como nosso amigo jack, vamos por partes.
seu texto ultrapassa por não ter espaço.
mas pode ser feito isso.
seu_seletor{
width:300px;
word-wrap:break-word;
}precisa definir um tamanho e definir word-wrap:break-word
para ele quebrar as palavras.
>
Vamos como nosso amigo jack, vamos por partes.
seu texto ultrapassa por não ter espaço.
mas pode ser feito isso.
seu_seletor{
width:300px;
word-wrap:break-word;
}precisa definir um tamanho e definir word-wrap:break-word
para ele quebrar as palavras.
Fernando gyn
Até inclui o "word-wrap:break-word;", mas por estar trabalhando com tabela, creio que o atributo não funcione.
Na verdade, o melhor seria eu trabalhar dentro do "content", outras div's, porem não sei oq fiz de errado que as divs estavam se misturando umas com as outras.
O que você me indicaria de fazer dentro do "content", pois não quero usar tabelas e sim divs.
Link do site: Clique aqui
me manda o layout para eu ver como deveria ser.
>
me manda o layout para eu ver como deveria ser.
Fernando gyn,
Segue o layout do site: Clique aqui
Fico no aguardo
bom ando sem tempo e cheio de problemas, mas veja se o que fiz ate agora te ajuda.
arquivo.php
<?php
$dados = array ("Moda","Saúde","Geral","Eventos","Tecnologia","Rota","Sobre Rodas","Imóveis","Sexo","Economia");
?><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link type="text/css" rel="stylesheet" href="css/estrutura.css">
<link type="text/css" rel="stylesheet" href="css/destaque.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#destaques > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>
</head>
<body>
<div id="geral">
<div id="topo"></div>
<div id="conteudo"><div id="destaques">
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
</ul>
<!-- First Content -->
<div id="fragment-1" class="ui-tabs-panel" style="">
<img src="images/image1.jpg" alt="" />
<div class="info" >
<h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
</div>
</div>
<!-- Second Content -->
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image2.jpg" alt="" />
<div class="info" >
<h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
</div>
</div>
<!-- Third Content -->
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image3.jpg" alt="" />
<div class="info" >
<h2><a href="#" >35 Amazing Logo Designs</a></h2>
<p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
</div>
</div>
<!-- Fourth Content -->
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image4.jpg" alt="" />
<div class="info" >
<h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
</div>
</div>
</div><?php
foreach ( $dados as $valor ) {
?>
<div class="chamadas">
<h3><?php echo $valor;?></h3>
<img src="foto1.jpg" alt="foto">
<h4>hggh</h4>
<p>sasdasasasdsdasdasdadasdadasdsafsddsadasdasdsadasassdasdasdsdasds
</p>
<img src="foto1.jpg" alt="foto">
<h4>hggh</h4>
<p>vcxvccxvcvxvxxcvcxcvcxvvxxcxxc</p>
</div>
<?php
}
?>
</div>
<div id="banners">gdfgdfg</div>
<div class="clear"></div>
</div>
<div id="rodape"></div>
</body>
</html>css principal
@CHARSET "UTF-8";
* {
margin: 0;
padding: 0;
font-weight: normal;
list-style: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #525252;
}
#geral {
width: 980px;
border: 1px solid #000;
margin: 8px auto 0 auto;
}
#topo {
height: 70px;
}
#conteudo {
width: 680px;
float: left;
}
#destaques {
border: 5px solid #ccc;
background: #f1f1f1;
height: 250px;
}
#banners {
width: 295px;
float: right;
background-color: #F9F9F9;
height: 1000px;
}
.chamadas {
width: 330px;
float: left;
margin-right: 4px;
margin-bottom: 10px;
margin-top: 20px;
padding-left:5px;
}.chamadas h3 {
word-wrap: break-word;
text-indent: 8px;
line-height: 37px;
margin-bottom:20px;
background: url(../img/ltitulos.gif) repeat-x;
}.chamadas img {
width: 58px;
height: 58px;
float: left;
margin-right: 10px;
clear:both;
}.chamadas p {
display: block;
width: 250px;
float: left;
text-align:justify;
word-wrap: break-word;
padding-bottom:15px;
}
.clear {
clear: both;
}
#rodape {
background-color: #2D2722;
height: 326px;
}css da sua galeria
#destaques ul.ui-tabs-nav{
float:right;
list-style:none;
padding:0; margin:0;
width:250px;
}padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}font-size:11px;
font-family:Verdana;
line-height:18px;
text-align: justify;
}display:block;
height:60px;
color:#333; background:#fff;
line-height:20px;
}background:#f2f2f2;
}background:url('../images/selected-item.gif') top left no-repeat;
}background:#ccc;
}width:400px; height:250px;
background:#999; position:relative;
}position:absolute;
top:180px; left:0;
background: url('../images/transparent-bg.png');
}font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}text-decoration:none;
color:#fff;
}text-decoration:underline;
}display:none;
}se quiser ver online.
Fernando Gyn, bacana cara!
Agora me diz uma coisa, eu ultilizo o dremweaver certo para diagramar e tal.
Ai no que você nomeou como ".chamadas" na css so está aparecendo uma caixa no dreamweaver, porem la no site estão aparecendo todas igual a sua q você postou.
Seria algum opção no codigo .php que você ultilizou para não aparecer tdas as caixas de noticias?
O site: Clique aqui
bom esta vendo isso
$dados = array ("Moda","Saúde","Geral","Eventos","Tecnologia","Rota","Sobre Rodas","Imóveis","Sexo","Economia");
ele faz um foreach no arquivo como mostra abaixo com as opções do array $dados
<?php
foreach ( $dados as $valor ) {
?>
<div class="chamadas">
<h3><?php echo $valor;?></h3>
<img src="foto1.jpg" alt="foto">
<h4>hggh</h4>
<p>sasdasasasdsdasdasdadasdadasdsafsddsadasdasdsadasassdasdasdsdasds
</p>
<img src="foto1.jpg" alt="foto">
<h4>hggh</h4>
<p>vcxvccxvcvxvxxcvcxcvcxvvxxcxxc</p>
</div>
<?php
}
?>ele repete esse código acima a quantidade que estiver no array.
>
bom esta vendo isso
$dados = array ("Moda","Saúde","Geral","Eventos","Tecnologia","Rota","Sobre Rodas","Imóveis","Sexo","Economia");
ele faz um foreach no arquivo como mostra abaixo com as opções do array $dados
<?php
foreach ( $dados as $valor ) {
?>
<div class="chamadas">
<h3><?php echo $valor;?></h3>
<img src="foto1.jpg" alt="foto">
<h4>hggh</h4>
<p>sasdasasasdsdasdasdadasdadasdsafsddsadasdasdsadasassdasdasdsdasds
</p>
<img src="foto1.jpg" alt="foto">
<h4>hggh</h4>
<p>vcxvccxvcvxvxxcvcxcvcxvvxxcxxc</p>
</div>
<?php
}
?>ele repete esse código acima a quantidade que estiver no array.
Certo, entendi ... então caso eu queira adicionar outras editorias no site eu incluo dentro do "array", como você colocou la as editorias né.
E o conteúdo no caso, eu insiro dentro do <h4>hggh</h4> e <p> Conteudo</p> ?!
bom esse <h4>alguma coisa</h4>
coloquei como base do site que mostrou no primeiro post
porque ele tem uma estrutura assim por exemplo
<h4>Greve de professores</h4>
<p>e tipo questão do array eu coloquei porque sou preguiçoso.
e como costumava trabalhar, com dados vindos de banco eu pensei nossa que chato fazer cada caixinha dessas.
e fiz isso pra fazer uma e mostrar varias se preciso.
mas os dados teria que definir outras porque só mudar ai vai gerar o mesmo conteúdo para todos
mas se quer deixar isso bom usa banco de dados.
>
bom esse <h4>alguma coisa</h4>
coloquei como base do site que mostrou no primeiro post
porque ele tem uma estrutura assim por exemplo
<h4>Greve de professores</h4>
<p>e tipo questão do array eu coloquei porque sou preguiçoso.
e como costumava trabalhar, com dados vindos de banco eu pensei nossa que chato fazer cada caixinha dessas.
e fiz isso pra fazer uma e mostrar varias se preciso.
mas os dados teria que definir outras porque só mudar ai vai gerar o mesmo conteúdo para todos
mas se quer deixar isso bom usa banco de dados.
Cara eu tentei no .css adicionar tipo tem .chamadas ai coloquei .chamadas2 e repeti o codigo de .chamadas2 h3 etc
E peguei a parte do codigo e a div class chamei de "chamadas2":
<?php
foreach ( $dados as $valor ) {
?>
<div class="chamadas2">
<h3><?php echo $valor;?></h3>
<img src="images/foto1.jpg" alt="foto">
<h4>Título 2</h4>
<p>Testando a matéria deste bloco
</p>
<img src="images/foto1.jpg" alt="foto">
<h4>Titulo 3</h4>
<p>Testando mais outro bloco de materia
</p>
</div>
<?php
}
?>Como você falou eu vou faze-lo dinamico, em php, porem essa parte de php não manjo bem.
Agora dessa forma que eu fiz está correta ou como você me indicaria em fazer?
A ideia é fazer mais ou menos do jeito deste site: Clique aqui
Segue link do meu site: Clique aqui
Dá uma olhada: line-height