Crescer o layout junto com a noticia...

Griever · Novembro 17, 2014

Fiz um sistema básico de noticias aqui. estou desenvolvendo um site para minha esposa, um portfólio.

Estou com problemas pra o site acompanhar o tamanho das noticias no seu lay. alguém poderia ajudar como crescer o layout em css junto com o sisteminha?

Obs: o Layout eu fiz no Photoshop

Apenas Eu · Novembro 17, 2014

Olá!

Eu imagino que esse quadrado preto ai, você precisa fazer uma DIV com o background preto, ou usar uma imagem toda preta e usar o repet:

#div {
background:#ffffff;
height:200px; /* altura da div :) */
}

Ou se você não manja muito bem de css em último caso você faz uma imagem suficientemente grande de fundo para caber o texto :)

Griever · Novembro 17, 2014

É pq o seguinte, eu fiz uma div no meio do quadrado ai pra exibir a noticia e o estilo dela ta assim

div.bg-avatar {
	position: absolute;
	left: 53px;
	top: 396px;
	width: 550px;
	height: 308px;
	/* [disabled]font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; */
	font-variant: small-caps;
	/* [disabled]font-weight: normal; */
	/* [disabled]font-size: 13px; */
}

Ela esta no meio do site se eu botar background nela só o meio vai crescer, o resto ficara no lugar e fica também feio

rikaschmitt · Novembro 17, 2014

Tem como postar o css e o html?

Griever · Novembro 17, 2014

Tem como postar o css e o html?

<html>
<head>
<title><?php echo $titulo; ?>	</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- Save for Web Styles (portifolio nike2.psd) -->
<style type="text/css">
<!--



#bgsite {
	background: url(images/background_01.jpg);
	bottom: 500px;
}

#bgsite.gradient {
       
    }
	
div.Tabela_01 {
	left: 50%;
	position: absolute;
	width: 750px;
	margin: 0 0 0 -25%;
	top: 0px;
	background-image: url(images/cssbg2.png);
}

div.portifolio-nike2-01 {
	position:absolute;
	left:0px;
	top:0px;
	width:750px;
	height:85px;
}

div.portifolio-nike2-02 {
	position:absolute;
	left:0px;
	top:85px;
	width:40px;
	height:665px;
}

div.topo {
	position:absolute;
	left:40px;
	top:85px;
	width:564px;
	height:160px;
}

div.portifolio-nike2-04 {
	position:absolute;
	left:604px;
	top:85px;
	width:146px;
	height:168px;
}

div.portifolio-nike2-05 {
	position:absolute;
	left:40px;
	top:245px;
	width:564px;
	height:8px;
}

div.portifolio-nike2-06 {
	position:absolute;
	left:40px;
	top:253px;
	width:1px;
	height:497px;
}

div.menu {
	position:absolute;
	left:41px;
	top:253px;
	width:673px;
	height:37px;
}

div.portifolio-nike2-08 {
	position:absolute;
	left:714px;
	top:253px;
	width:36px;
	height:497px;
}

div.portifolio-nike2-09 {
	position:absolute;
	left:41px;
	top:290px;
	width:673px;
	height:91px;
}

div.portifolio-nike2-10 {
	position:absolute;
	left:41px;
	top:381px;
	width:576px;
	height:2px;
}

div.parceiros {
	position:absolute;
	left:617px;
	top:381px;
	width:97px;
	height:332px;
}

div.bg-noticias {
	position:absolute;
	left:41px;
	top:383px;
	width:423px;
	height:308px;
}

div.bg-noticias1 {
	position: absolute;
	left: 141px;
	top: 397px;
	width: 313px;
	height: 75px;
}

div.bg-avatar {
	position: absolute;
	left: 53px;
	width: 550px;
	/* [disabled]height: 1px; */
	/* [disabled]font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; */
	font-variant: small-caps;
	/* [disabled]font-weight: normal; */
	/* [disabled]font-size: 13px; */
	float: right;
	background-repeat: repeat;
}

div.bg-css {
	position: absolute;
	left: 0px;
	width: 750px;
	height: auto;
	/* [disabled]font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; */
	font-variant: small-caps;
	/* [disabled]font-weight: normal; */
	/* [disabled]font-size: 13px; */
	background-image: url(images/cssbg2.png);
	top: 396px;
	background-repeat: repeat;
}
div.portifolio-nike2-13 {
	position:absolute;
	left:464px;
	top:383px;
	width:153px;
	height:367px;
}

div.portifolio-nike2-14 {
	position:absolute;
	left:41px;
	top:691px;
	width:423px;
	height:59px;
}

div.portifolio-nike2-15 {
	position:absolute;
	left:617px;
	top:713px;
	width:97px;
	height:37px;
}

.botao {
	display: inline-block;
	background-color: #ccc;
	color: #FFFFFF;
	padding: 10px 20px;
	width: 131px;
	box-sizing: border-box;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 95%;
	border: 0px;
	background-color: #986200;
	text-align: center;
	text-decoration: none;
}

    .botao:hover {
    background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.15));
    cursor: pointer;
	text-align:center;
    }
	    /* EFEITOS */
          
	.botao-uppercase {
		text-transform:uppercase;
	}

div.emenu {
	position:absolute;
	left:47px;
	top:237px;
	width:131px;
	height:37px;
}

div.emenu1 {
	position: absolute;
	left: 326px;
	top: 237px;
	width: 131px;
	height: 37px;
}

div.emenu2 {
	position: absolute;
	left: 187px;
	top: 237px;
	width: 131px;
	height: 37px;
}

div.emenu3 {
	position: absolute;
	left: 464px;
	top: 237px;
	width: 131px;
	height: 37px;
}

div.emenu4 {
	position: absolute;
	left: 187px;
	top: 237px;
	width: 131px;
	height: 37px;
}

.imgborder {
	border: 1px solid #CDCDCD;
}

.not-titulo {
	font-size: 15px;
	color: #FFFFFF;
	font-family: adamina;
	font-style: normal;
}

/*a:link {
	color: #FFFFFF;
	text-decoration: none;
}*/

/*a:visited {
	text-decoration:none;
	color:#FFFFFF;
}*/

-->
</style>
<!-- End Save for Web Styles -->
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/adamina:n4:default.js" type="text/javascript"></script>
</head>
<body id="bgsite">
<!-- Save for Web Slices (portifolio nike2.psd) -->
<div class="Tabela_01">
	<div class="portifolio-nike2-01">
		<img src="images/portifolio-nike2_01.gif" width="750" height="85" alt="">
	</div>
	<div class="portifolio-nike2-02">
		<img src="images/portifolio-nike2_02.gif" width="40" height="665" alt="">
	</div>
	<div class="topo">
		<img src="images/topo.gif" width="564" height="160" alt="Portifólio">
	</div>
	<div class="portifolio-nike2-04">
		<img src="images/portifolio-nike2_04.gif" width="146" height="168" alt="">
	</div>
	<div class="portifolio-nike2-05">
		<img src="images/portifolio-nike2_05.gif" width="564" height="8" alt="">
	</div>
	<div class="portifolio-nike2-06">
		<img src="images/portifolio-nike2_06.gif" width="1" height="497" alt="">
	</div>
   
<div class="menu">
	  <img src="images/menu.png" width="673" height="37" alt="">
</div>
<div class="emenu">
    <p class="botao" ><a href="#" style="text-decoration: none; color: #FFFFFF;">Home</a></p>
</div>
<div class="emenu2">
  <p class="botao">Curriculum</p>
</div>
<div class="emenu1">
    <p class="botao">Trab.Sociais</p>
</div>
<div class="emenu3">
    <p class="botao">Ideais</p>
</div>
	<div class="portifolio-nike2-08">
		<img src="images/portifolio-nike2_08.gif" width="36" height="497" alt="">
	</div>
	<div class="portifolio-nike2-09">
		<img src="images/portifolio-nike2_09.gif" width="673" height="91" alt="">
	</div>
	<div class="portifolio-nike2-10">
		<img src="images/portifolio-nike2_10.gif" width="576" height="2" alt="">
	</div>
	<div class="parceiros">
		<img src="images/parceiros.gif" width="97" height="332" alt="">
	</div>
<div class="bg-noticias">
	<img src="images/bg_noticias.gif" width="423" height="308" alt="">
</div>
<div class="portifolio-nike2-13">
	<img src="images/portifolio-nike2_13.gif" width="153" height="367" alt="">
</div>
  <div class="portifolio-nike2-14">
		<img src="images/portifolio-nike2_14.gif" width="423" height="59" alt="">
</div>
<div class="portifolio-nike2-15">
		<img src="images/portifolio-nike2_15.gif" width="97" height="37" alt="">
	</div>
    
  <div class="bg-css">
  <div class="bg-avatar">
         <?php
			//echo titulolimite("Ola pessoal do WMONLINE novidades parabens, motivações pessoais caralho a4",10); // irá exibir - Ola pessoa...
			
            while($notitulo = mysql_fetch_assoc($resultado)) {
				echo titulolimite("<font class='not-titulo'>" .$notitulo['n_titulo']. "</font>", 72);
				echo "<p><img src='http://www.pieceproject.net/wp-content/themes/pieceproject/images/news/calendar-ico.png'> ".$notitulo['n_data'];
				
				echo titulolimite($notitulo['n_texto'], 500);

			}
			
		  ?>
           </div>
           </div>

	

<!-- End Save for Web Slices -->
</body>
</html>

Ta ae

rikaschmitt · Novembro 17, 2014

Você não tem um "modelo" online pra gente ver?

Quando colocamos position:absolute, o float não funciona, também não precisa por absoluto em tudo.

Griever · Novembro 17, 2014

Você não tem um "modelo" online pra gente ver?

Quando colocamos position:absolute, o float não funciona, também não precisa por absoluto em tudo.

Liberei o apache aqui para acesso externo. ta ae

http://179.187.44.149

rikaschmitt · Novembro 17, 2014

O erro é porque você limitou o site ao design que você fez. Ou seja, você montou ele para que ele ficasse daquela forma, "quadrado", então o conteúdo que precisa expandir, acaba passando o layout, que não acompanha.

Você tem que recortar todos os elementos básicos do site e montar ele de uma forma mais "simples". Na verdade, como seu site não tem imagens, apenas blocos de cor, você só tem que usar <div> com background da cor desejada.

Exemplo: http://jsfiddle.net/xb3bth7u/

Griever · Novembro 17, 2014

eu tentei criar uma div entre a div do script de noticias e , com background e repeat do fundo do site porém, a div não cresce com a noticia, só se for a própria div que o script esta dentro e se eu colocar ela, quebra o alinhamento da noticia

rikaschmitt · Novembro 17, 2014

Tenta algo assim:

http://jsfiddle.net/xb3bth7u/

Mais simples, sem utilizar imagens para fundo sendo que são apenas "cor".

Griever · Novembro 17, 2014

Então a dica é, fazer do meio para baixo, sem utilizar imagens?

Recortar de maneira que possa colocar o bg em cores e não imagens correto?

rikaschmitt · Novembro 17, 2014

Isso.

Electronic · Novembro 17, 2014

Então a dica é, fazer do meio para baixo, sem utilizar imagens?

Recortar de maneira que possa colocar o bg em cores e não imagens correto?

Parece codigo gerado automatico

se for for evite, pois seu layout fica todo travado dificilmente sai do jeito que vc quer

olha a diferenca do codigo gerado para o codigo que o rikaschmitt postou

Griever · Novembro 18, 2014

Parece codigo gerado automatico

se for for evite, pois seu layout fica todo travado dificilmente sai do jeito que você quer

olha a diferenca do codigo gerado para o codigo que o rikaschmitt postou

Eu modifiquei e só gerei a parte do TOP, a parte de baixo usei background, tudo funcionando no Chrome, porém IE e firefox fica quebrado

http://179.187.44.149/2/index2.php

vejam.

Arquivado

Crescer o layout junto com a noticia...

Recommended Posts

Griever 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Apenas Eu 13

Compartilhar este post

Link para o post

Compartilhar em outros sites

Griever 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

rikaschmitt 54

Compartilhar este post

Link para o post

Compartilhar em outros sites

Griever 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

rikaschmitt 54

Compartilhar este post

Link para o post

Compartilhar em outros sites

Griever 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

rikaschmitt 54

Compartilhar este post

Link para o post

Compartilhar em outros sites

Griever 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

rikaschmitt 54

Compartilhar este post

Link para o post

Compartilhar em outros sites

Griever 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

rikaschmitt 54

Compartilhar este post

Link para o post

Compartilhar em outros sites

Electronic 124

Compartilhar este post

Link para o post

Compartilhar em outros sites

Griever 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Fóruns

Tempo Real

Informação importante