Ir para conteúdo

POWERED BY:

Arquivado

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

Emanuellefx

Estilização de um sistema de notícias

Por , em Desenvolvimento frontend

Recommended Posts

Emanuellefx    0

Emanuellefx
Postado

Pessoal, não sei exatamente como explicar, alem de ser nova nesse assunto, mas eu preciso estilizar um post de notícias, basicamente, e não acho algum tutorial ou site que me explique. Além de não ter ideia de como fazer isso em questão de criatividade.

 

o "esqueleto" é este, caso seja necessário pra alguém me ajudar.

 

<div class="conteudo">
<center><table class="" border="1px">
<thead>
<td>Titulo</td>
<td>Descriçãp</td>
<td>Imagem</td>
</thead>
<tbody>
<?php
if ($total > 0) {
do {
?>
<tr>
</td>
<td>
<?php echo $linha['titulo'] ?>
</td>
<td>
<?php echo $linha['noticias'] ?>
</td>
<td>
<?php
$foto = $linha['caminho_img2'];
echo "<img src='$foto'/>";
?>
</td>
<?php
} while ($linha = mysql_fetch_assoc($dados));
}
?>
</tr>
</tbody>
</table></center>
</div>
Preciso que fique mais ou menos assim : http://static.tumblr.com/lb7gsbo/MPAnq1ywg/sem_t__tulo.png

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marco Bruno    19

Marco Bruno
Postado

Olá, Emanuelle.

 

Algumas dicas:

- Não utilize tabelas para possicionar os elementos na página;

- Estude as própriedades CSS display, position e float, elas são utilizadas para alinhar os elementos na tela;

- Estude as Arquiteturas de CSS (SMACSS, BEM, DRY CSS, Atomic Design e OOCSS) para deixar o seu código front-end organizado e de fácil manutenção.

 

Segue abaixo um código de exemplo do layout que você esta querendo (http://static.tumblr.com/lb7gsbo/MPAnq1ywg/sem_t__tulo.png):

 

HTML (index.html):

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Exemplo</title>

    <link rel="stylesheet" href="css/post.css">
</head>
<body>
    <article class="post">
        <img class="post-photo" src="http://imageplaceholder.com?size=300x300" alt="Exemplo de imagem para Post">
        <h1 class="post-title">Título do Post</h1>
        <p class="post-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur neque dui, id blandit odio porttitor id. Etiam tristique at nisl ut consequat. Morbi hendrerit elementum feugiat. Vivamus sit amet iaculis nulla, vitae convallis lectus. Donec ullamcorper orci nec lacus rutrum sollicitudin. Quisque sapien mi, aliquam ac pretium sit amet, tempus in leo. Proin dictum fringilla leo, vitae ornare purus fringilla id. Duis nulla erat, gravida sit amet interdum facilisis, sollicitudin a erat. Maecenas at augue vulputate, commodo tortor quis, convallis felis. In elementum turpis consectetur, viverra felis ac, congue mi. Suspendisse tristique nisl id molestie ultrices. Vestibulum maximus ullamcorper ultrices. Aliquam at rhoncus justo. Integer eleifend auctor magna ac vulputate. In mauris lorem, accumsan vel urna nec, rutrum finibus turpis. Nam nec venenatis sem.</p>
    </article>
</body>
</html>

CSS (post.css):

/*
Reset CSS
*/

* {
    margin: 0;
    padding: 0;
    border: none;
    list-style: none;
}

body {
    font-family: Arial, sans-serif;
    font-size: 16px;
}

/*
Código para alinhar as coisas na página
*/

.post {
    background-color: #ecf0f1;
    overflow: hidden;
    padding: 10px;
}
.post-photo {
    float: left;
    margin-right: 40px;
}

Qualquer dúvida só mandar no forum. :-)

 

[]'s

Marco Bruno

Compartilhar este post

Link para o post
Compartilhar em outros sites

Emanuellefx    0

Emanuellefx
Postado

 

 

Marco Bruno, me foi beeeem útil, porem como não sou lá essas coisas ainda, estou com uma dúvida: como faço pra imagem ficar menor SEMPRE? o tamanho que estava a tua é perfeito, porém quando eu cadastro uma noticia nova e seleciono uma imagem pra postar, fica complemente desproporcional (grande demais) e deixa a caixa da notícia gigante, e aaah queria ela um pouco menor em questão de largura, fica muito comprida na pagina! :-( Mas estamos quase lá!

Compartilhar este post

Link para o post
Compartilhar em outros sites

danmartinsiss    5

danmartinsiss
Postado

bom dia

 

primeiro redimenciona a imagem ja nos tamanhos ideais que voce quer no caso como ele colocou foi

 

300x300 px.

 

note que ele esta utilizando uma imagem que ja esta 300x300

 

<img class="post-photo" src="http://imageplaceholder.com?size=300x300" alt="Exemplo de imagem para Post">

Compartilhar este post

Link para o post
Compartilhar em outros sites

Emanuellefx    0

Emanuellefx
Postado

bom dia

 

primeiro redimenciona a imagem ja nos tamanhos ideais que voce quer no caso como ele colocou foi

 

300x300 px.

 

note que ele esta utilizando uma imagem que ja esta 300x300

 

<img class="post-photo" src="http://imageplaceholder.com?size=300x300" alt="Exemplo de imagem para Post">

 

Ah sim, porém queria saber se teria alguma forma do campo onde a imagem ficar ser sempre desse tamanho, independente dos px dela, entende? mas obrigada, aliás, saberia me dizer como faço pra ficar um pouco menor a caixa do conteúdo em questão de largura?

 

No momento ta assim (coloquei essa cor pra ficar mais visível) : http://static.tumblr.com/lb7gsbo/5iSnq37jk/noticia.jpg

Compartilhar este post

Link para o post
Compartilhar em outros sites

danmartinsiss    5

danmartinsiss
Postado

Crie essa classe no seu css

.container {
	width: 750px
}

abra uma div bem aqui depois da Body e fecha ela antes da body

vai ver que dara uma margem para voce.

o ideal e que ela abrace todo seu site.

 

fiz esse layout pra voce veja se gosta para colocar as noticias dentro

.post {
	padding: 20px;
	margin: 20px 0;
	border: 1px solid #eee;
	border-left-width: 5px;
	border-radius: 3px
}
.post h4 {
	margin-top: 0;
	margin-bottom: 5px

}
.post h3 {
	margin-top: 0;
	margin-bottom: 5px
}
.post verde h4 {
	color: #3c763d
}
.post verde h3{
	color: #3c763d

apenas mude o css que voce tem do post.. ai na div onde esta a classe post voce apenas de um espaco e coloque verde h3 ou verde h4 que a fonte do cabecalho vai ficar grande e da cor do post. tipo assim 

<article class="post h3 verde">

quanto a imagem para voce redimensionar automatico

 

voce cria uma classe CSS para que ele receba o maximo de pixel por exemplo no seu caso 300.

ai se for o caso de um que veio muito grande e nao esta diminuindo voce informa o important dentro da classe que voce crioou

.post-content{
max-width:300px;
}
.post-content img{
max-width:100% !important;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Emanuellefx    0

Emanuellefx
Postado

 

Crie essa classe no seu css

.container {
	width: 750px
}

abra uma div bem aqui depois da Body e fecha ela antes da body

vai ver que dara uma margem para voce.

o ideal e que ela abrace todo seu site.

 

fiz esse layout pra voce veja se gosta para colocar as noticias dentro

.post {
	padding: 20px;
	margin: 20px 0;
	border: 1px solid #eee;
	border-left-width: 5px;
	border-radius: 3px
}
.post h4 {
	margin-top: 0;
	margin-bottom: 5px

}
.post h3 {
	margin-top: 0;
	margin-bottom: 5px
}
.post verde h4 {
	color: #3c763d
}
.post verde h3{
	color: #3c763d

apenas mude o css que voce tem do post.. ai na div onde esta a classe post voce apenas de um espaco e coloque verde h3 ou verde h4 que a fonte do cabecalho vai ficar grande e da cor do post. tipo assim 

<article class="post h3 verde">

quanto a imagem para voce redimensionar automatico

 

voce cria uma classe CSS para que ele receba o maximo de pixel por exemplo no seu caso 300.

ai se for o caso de um que veio muito grande e nao esta diminuindo voce informa o important dentro da classe que voce crioou

.post-content{
max-width:300px;
}
.post-content img{
max-width:100% !important;
}

 

 

Cara obrigada, vocês dois me ajudaram bastante, melhor que algum professor que tenho eu diria! SUFHUSEHF

 

Mas preciso de outra ajuda, uma coisa foi eliminada, porem essa é muito mais importante que o caso da notícia, pois esse trabalho é pra enviar agora dia 19 e estou bem tensa em relação a isso, para não ficar muito extenso aqui, alguém poderia me auxiliar via e-mail?

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