1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

CSS - Margins gone wild

Discussão em 'Web Development' iniciada por awls99, 25 de Junho de 2009. (Respostas: 6; Visualizações: 780)

  1. Isto é um prob estranho e não tenho tido sorte com pesquisa, enfim ca vai:

    temos aqui um html (tpl actualy):

    Código:
    <div id="news">
    	<p>&Uacute;ltimas not&iacute;cias e artigos.</p>
    	{if empty($news)}
    		<p>N&atilde;o existem ainda not&iacute;cias publicadas.</p>
    	{else}
    		{foreach from=$news item=newsitem}
    		 		  {if $newsitem.thumb}
    				   
    				  {/if}<div class="new">
    				  <h3>{$newsitem.title}</h3>
    				  <p>{$newsitem.date|truncate:10:false|fulldate} por {$newsitem.author}</p>
    				  <p align="justify"><a href="{$_base_path}/news/{$newsitem.category}/{$newsitem.file}" title="{$newsitem.title}">
    				  <img class="news" src="{$_base_path}/img/upload/news/thumb/{$newsitem.thumb}" alt="{$newsitem.title}" /></a>{$newsitem.description}</p>
    				  <p>Ver <a href="{$_base_path}/news/{$newsitem.category}/{$newsitem.file}" title="{$newsitem.title}">not&iacute;cia</a></p>
    				  
    		</div>{/foreach}
    		{/if}
    	</div>
    	<div id="categories">
    		<h3>Categorias de Not&iacute;cias</h3>
    		{if empty($categories)}
    			<p>N&atilde;o existem ainda categorias de not&iacute;cias.</p>
    		{else}
    			<ul>
    			{foreach from=$categories item=category}
    				<li><a href="{$_base_path}/news/{$category.file}" title="{$category.title}">{$category.title}</a></li>
    			{/foreach}
    			</ul>
    		{/if}
    		</div>
    O css que lhe da estilo tem:

    Código:
    h3 {
    	font-size: 11px;
    	color: #CCCCCC;
    	background-color: #006600;
    }
    div.new{
    width: 100%;
    float:left;
    margin-bottom:20px;
    background-color: #000;
    }
    O detalhe é que a principio não havia motivo para as div new terem qualquer cor sem ser a do body, mas elas resolveram que a cor do h3 eh que era de gente fixe entao fui obrigado a por o background-color: #000; No entanto elas continuam a achar que o h3 é muito fixe e metem-me a cor da margin a #006600 (verde mesa de poker) e eu fico 8|
    Já andei a procura na net e nada, ja experiementei tirar os styles a tag h3 e este problema desaparece, por isso que sei que é ai a causa.

    Obrigado pelo vosso tempo
     
  2. meiokilo

    meiokilo Power Member

    podes enviar em exemplo do htm? abre a página e depois guarda o código fonte e coloca aqui.
     
  3. Sure:

    Código:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <link rel="stylesheet" href="/css/main.css" />
    <link rel="stylesheet" href="/css/news/news.css" />
    
    
    <title></title>
    </head>
    <body>
    <div id="container">
    
    <div id="header">
    <div id="banner"><b><font color="#CCCCCC">panoverde.com</font></b></div>
    
    		 <div id="pub"><img src="/img/upload/banners/" width="468" height="60" /></div>
    		<div id="menu">	<ul class="menu">
    	  	  	        <li class="menu"><a href="/">Início</a></li>
    		      	  	        <li class="menu"><a href="/categories">Categorias</a></li>
    		      	  	        <li class="menu"><a href="/news">Notícias</a></li>
    		      	  	        <li class="menu"><a href="/rooms">Salas</a></li>
    
    		      	  	        <li class="menu"><a href="/#">Fórum</a></li>
    		      	  </ul></div></div>
    
    <div id="content">
    <table width="800" border="0" cellpadding="0" cellspacing="0" align="center">
      <tr>
        <td width="20"></td>
        <td height="40">
    		<div id="breadcrumbs-fade">
    		<div id="breadcrumbs">
    
    									<strong>Notícias</strong>
    						</div>
    		</div>
    	</td>
        <td width="20"></td>
      </tr>
    </table>
    	<div id="news">
    	<p>&Uacute;ltimas not&iacute;cias e artigos.</p>
    
    					 		  				   
    				  <div class="new">
    				  <h3>Notícia Poker 1</h3>
    				  <p> por PokerPT</p>
    				  <p align="justify"><a href="/news/poker/noticia-poker-1.html" title="Notícia Poker 1">
    				  <img class="news" src="/img/upload/news/thumb/news1.jpg" alt="Notícia Poker 1" /></a>Temporibus autem quibusdam nemo enim ipsam voluptatem similique sunt in culpa qui officia deserunt mollitia animi. Consectetur, adipisci velit, accusantium doloremque laudantium, et molestiae non recu</p>
    				  <p>Ver <a href="/news/poker/noticia-poker-1.html" title="Notícia Poker 1">not&iacute;cia</a></p>
    
    				  
    		</div>		 		  				   
    				  <div class="new">
    				  <h3>Notícia Poker 2</h3>
    				  <p> por </p>
    				  <p align="justify"><a href="/news/poker/noticia-poker-2.html" title="Notícia Poker 2">
    				  <img class="news" src="/img/upload/news/thumb/news2.jpg" alt="Notícia Poker 2" /></a>Omnis dolor repellendus. Nisi ut aliquid ex ea commodi consequatur? At vero eos et accusamus et iusto odio dicta sunt explicabo. Totam rem aperiam, sed ut perspiciatis unde omnis id est laborum et dol</p>
    				  <p>Ver <a href="/news/poker/noticia-poker-2.html" title="Notícia Poker 2">not&iacute;cia</a></p>
    
    				  
    		</div>		 		  				   
    				  <div class="new">
    				  <h3>Notícia Poker 3</h3>
    				  <p> por </p>
    				  <p align="justify"><a href="/news/poker/noticia-poker-3.html" title="Notícia Poker 3">
    				  <img class="news" src="/img/upload/news/thumb/news3.jpg" alt="Notícia Poker 3" /></a>Id est laborum et dolorum fuga. Velit esse quam nihil molestiae consequatur. Qui dolorem ipsum quia dolor sit amet, cum soluta nobis est eligendi optio qui in ea voluptate.</p>
    				  <p>Ver <a href="/news/poker/noticia-poker-3.html" title="Notícia Poker 3">not&iacute;cia</a></p>
    
    				  
    		</div>		 		  				   
    				  <div class="new">
    				  <h3>Notícia Bridge 1</h3>
    				  <p> por </p>
    				  <p align="justify"><a href="/news/bridge/noticia-bridge-1.html" title="Notícia Bridge 1">
    				  <img class="news" src="/img/upload/news/thumb/news1.jpg" alt="Notícia Bridge 1" /></a>Temporibus autem quibusdam nemo enim ipsam voluptatem similique sunt in culpa qui officia deserunt mollitia animi. Consectetur, adipisci velit, accusantium doloremque laudantium, et molestiae non recu</p>
    				  <p>Ver <a href="/news/bridge/noticia-bridge-1.html" title="Notícia Bridge 1">not&iacute;cia</a></p>
    
    				  
    		</div>		 		  				   
    				  <div class="new">
    				  <h3>Notícia Bridge 2</h3>
    				  <p> por </p>
    				  <p align="justify"><a href="/news/bridge/noticia-bridge-2.html" title="Notícia Bridge 2">
    				  <img class="news" src="/img/upload/news/thumb/news2.jpg" alt="Notícia Bridge 2" /></a>Omnis dolor repellendus. Nisi ut aliquid ex ea commodi consequatur? At vero eos et accusamus et iusto odio dicta sunt explicabo. Totam rem aperiam, sed ut perspiciatis unde omnis id est laborum et dol</p>
    				  <p>Ver <a href="/news/bridge/noticia-bridge-2.html" title="Notícia Bridge 2">not&iacute;cia</a></p>
    
    				  
    		</div>		 		  				   
    				  <div class="new">
    				  <h3>Notícias Casinos 1</h3>
    				  <p> por </p>
    				  <p align="justify"><a href="/news/casinos/noticia-casinos-1.html" title="Notícias Casinos 1">
    				  <img class="news" src="/img/upload/news/thumb/news1.jpg" alt="Notícias Casinos 1" /></a>Temporibus autem quibusdam nemo enim ipsam voluptatem similique sunt in culpa qui officia deserunt mollitia animi. Consectetur, adipisci velit, accusantium doloremque laudantium, et molestiae non recu</p>
    				  <p>Ver <a href="/news/casinos/noticia-casinos-1.html" title="Notícias Casinos 1">not&iacute;cia</a></p>
    
    				  
    		</div>		 		  				   
    				  <div class="new">
    				  <h3>Notícias Casinos 2</h3>
    				  <p> por </p>
    				  <p align="justify"><a href="/news/casinos/" title="Notícias Casinos 2">
    				  <img class="news" src="/img/upload/news/thumb/news2.jpg" alt="Notícias Casinos 2" /></a>Omnis dolor repellendus. Nisi ut aliquid ex ea commodi consequatur? At vero eos et accusamus et iusto odio dicta sunt explicabo. Totam rem aperiam, sed ut perspiciatis unde omnis id est laborum et dol</p>
    				  <p>Ver <a href="/news/casinos/" title="Notícias Casinos 2">not&iacute;cia</a></p>
    
    				  
    		</div>		 		  				   
    				  <div class="new">
    				  <h3>Notícia Casinos 3</h3>
    				  <p> por </p>
    				  <p align="justify"><a href="/news/casinos/" title="Notícia Casinos 3">
    				  <img class="news" src="/img/upload/news/thumb/news3.jpg" alt="Notícia Casinos 3" /></a>Id est laborum et dolorum fuga. Velit esse quam nihil molestiae consequatur. Qui dolorem ipsum quia dolor sit amet, cum soluta nobis est eligendi optio qui in ea voluptate.</p>
    				  <p>Ver <a href="/news/casinos/" title="Notícia Casinos 3">not&iacute;cia</a></p>
    
    				  
    		</div>			</div>
    	<div id="categories_table">
    		<h3>Categorias de Not&iacute;cias</h3>
    					<ul>
    							<li><a href="/news/poker" title="Poker">Poker</a></li>
    							<li><a href="/news/bridge" title="Bridge">Bridge</a></li>
    
    							<li><a href="/news/casinos" title="Casinos">Casinos</a></li>
    							<li><a href="/news/sueca" title="Sueca">Sueca</a></li>
    							<li><a href="/news/king" title="King">King</a></li>
    							<li><a href="/news/damas" title="Damas">Damas</a></li>
    						</ul>
    				</div>
    	
    
    </div>
    		<div id="sidebar">  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    		            </table></div>
    <div id="footer">
    Copyright &copy; 2009 : panoverde.com</div>
    
    </div>
    </body>
    </html>
     
  4. meiokilo

    meiokilo Power Member

    desculpa, mas tens de enviar tb os ficheiros main.css e news.css
     
  5. meiokilo

    meiokilo Power Member

    o problema está no h3 que está na div com o id=categories_tables . Se eliminares o h3 dessa div já funciona .... não percebi foi porquê...

    Para resolveres o problema basta aplicares a css do h3 apenas aos elementos do div news:

    Substituis

    h3{
    ...
    ...
    }

    por:

    #news h3 {
    ...
    ...
    }
     
  6. Obrigado pela tua resposta, isso de facto funciona, a razão deste evento continuará em segredo dos deuses do css, o problema da tua solução é que uso aquele h3 em muitos sitios :( , mas consegui meter o layout de maneira que fique bem sem margens, com sorte ninguém repara xD
     
  7. Eu uso sempre este selector logo no início das minhas CSS:

    * { margin: 0px; padding: 0px; }
     

Partilhar esta Página