Ir para conteúdo

POWERED BY:

Arquivado

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

PatrickPC

Ao adicionar texto, div's se atrapalham e texto também

Por , em Desenvolvimento frontend

Recommended Posts

PatrickPC    0

PatrickPC
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

PatrickPC    0

PatrickPC
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fernando Gyn    0

Fernando Gyn
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

PatrickPC    0

PatrickPC
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fernando Gyn    0

Fernando Gyn
Postado

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">
<!-- inicio do destaque -->
<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>
<!-- fim dos destaques -->
<?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
bvbcbcbcvbcbcbbvcbcvcccbvbcvbcbbc
dvxcvxccvcxvcvxvcvccxvxcvxcvxvxcv
</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; 
}
#destaques ul.ui-tabs-nav li{ 
padding:1px 0; padding-left:13px;  
font-size:12px; 
color:#666; 
}
#destaques ul.ui-tabs-nav li img{ 
float:left; margin:2px 5px; 
background:#fff; 
padding:2px; 
border:1px solid #eee;
}
#destaques ul.ui-tabs-nav li span{
font-size:11px;
font-family:Verdana;
line-height:18px;
text-align: justify;
}
#destaques li.ui-tabs-nav-item a{ 
display:block; 
height:60px; 
color:#333;  background:#fff; 
line-height:20px;
}
#destaques li.ui-tabs-nav-item a:hover{ 
background:#f2f2f2; 
}
#destaques li.ui-tabs-selected{ 
background:url('../images/selected-item.gif') top left no-repeat;  
}
#destaques ul.ui-tabs-nav li.ui-tabs-selected a{ 
background:#ccc; 
}
#destaques .ui-tabs-panel{ 
width:400px; height:250px; 
background:#999; position:relative;
}
#destaques .ui-tabs-panel .info{ 
position:absolute; 
top:180px; left:0; 
background: url('../images/transparent-bg.png'); 
}
#destaques .info h2{ 
font-size:18px; font-family:Georgia, serif; 
color:#fff; padding:5px; margin:0;
overflow:hidden; 
}
#destaques .info p{ 
margin:0 5px; 
font-family:Verdana; font-size:11px; 
line-height:15px; color:#f0f0f0;
}
#destaques .info a{ 
text-decoration:none; 
color:#fff; 
}
#destaques .info a:hover{ 
text-decoration:underline; 
}
#destaques .ui-tabs-hide{ 
display:none; 
}

 

se quiser ver online.

 

http://nandogyn.no-ip.org/imasters/

Compartilhar este post

Link para o post
Compartilhar em outros sites

PatrickPC    0

PatrickPC
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fernando Gyn    0

Fernando Gyn
Postado

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
bvbcbcbcvbcbcbbvcbcvcccbvbcvbcbbc
dvxcvxccvcxvcvxvcvccxvxcvxcvxvxcv
</p>
</div>
<?php
}
?>

 

ele repete esse código acima a quantidade que estiver no array.

Compartilhar este post

Link para o post
Compartilhar em outros sites

PatrickPC    0

PatrickPC
Postado

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
bvbcbcbcvbcbcbbvcbcvcccbvbcvbcbbc
dvxcvxccvcxvcvxvcvccxvxcvxcvxvxcv
</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> ?!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fernando Gyn    0

Fernando Gyn
Postado

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>
Greve geral dos professores, na cidade tal....
</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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

PatrickPC    0

PatrickPC
Postado

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>
Greve geral dos professores, na cidade tal....
</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

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