5

Estou criando "informativos" para colocar na página inicial do meu site e preciso de uma luz. Eu queria que ele ficasse assim: Demostração de como eu gostaria que ficasse o informativo

E quando a resolução de tela do visitante fosse diminuindo, as div's do título e da descrição fossem encolhendo. E quando a resolução fosse bem pequena, como 500, o título se movesse abaixo da imagem. Exemplo:

Imagem de como eu quero que fique

Código simplificado:

<div class="body">
    <div class="i1" id="ID-DA-POSTAGEM">
        <div class="i1Img"><img src="http://i.snag.gy/uIuFD.jpg" /></div>
        <div class="i1Content">…</div>
        <div class="clear"></div>
    </div>
</div>
.clear{clear: both;}
div.body{/*simula largura do site*/
    width:711px; /*original 710px*/
    border:1px solid red; /*borda de marcação*/
    margin:0 auto;
}

.i1Img {
    float:left;
    width:200px; /*largura da imagem*/
}

.i1Content{
    float:right;
    width:505px; /* +200px(imagem) + 5px(padding) = 710px*/
    padding-left:5px;
}

Eu coloquei o HTML e CSS completos que estou usando no JSFiddle http://jsfiddle.net/j75Zh/

2 Respostas 2

4

Usando o Media Queries em CSS, você consegue fazer isso.

Veja o exemplo abaixo, retirado do site www.maxdesign.com.au.

O código é simples, e com uma rápida analise você entende o código.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Media query Resolution Dependent Layout</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="master.css" />
</head>
<body>
<div id="container">
    <h1>
        Site name 
    </h1>
    <div id="nav">
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>
    </div>
    <div id="content">
        <h2>
            Main heading here 
        </h2>
        <p>
            <img class="feature-image" src="fern.jpg" alt="fern" />Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
        </p>
    </div>
    <div id="extras">
        <h3>
            Related info 
        </h3>
        <p>
            Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
        </p>
    </div>
</div>
</body>
</html>

mastes.css

/* --------------------------------
Site:       Site name
CSS author: Your name here
Updated:    Date
Updated by: Your name here
-------------------------------- */

/* ----------------------------
simple reset
---------------------------- */

html, body, ul, ol, li, form, fieldset, legend
{
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6, p { margin-top: 0; }
fieldset,img { border: 0; }
legend { color: #000; }
li { list-style: none; }
sup { vertical-align: text-top; }
sub { vertical-align: text-bottom; }

table
{
    border-collapse: collapse;
    border-spacing: 0;
}

caption, th, td
{
    text-align: left;
    vertical-align: top;
    font-weight: normal;
}

input, textarea, select
{
    font-size: 110%;
    line-height: 1.1;
}

abbr, acronym
{
    border-bottom: .1em dotted;
    cursor: help;
}

body
{
    margin: 20px;
    color: #000;
    background: #fff;
    font: 90%/1.3 "DejaVu Sans", "URW Gothic L", "Helvetica Neue", Helvetica, Arial, "Microsoft Sans Serif", sans-serif;
}

#container
{
    float: left;
    width: 1000px;
    background: #bbb;
}

#nav
{
    float: left;
    width: 200px;
    background: lime;
}

#content
{
    float: left;
    width: 550px;
    margin: 0 0 0 25px;
    background: yellow;
}

#extras
{
    float: right;
    width: 200px;
    background: gray;
}

.feature-image
{
    float: right;
    margin: 0 0 10px 10px;
}

@media screen and (max-width:999px)
{
    #container { width: 800px; }

    #extras
    {
        clear: left;
        float: none;
        margin: 0 0 0 225px;
        width: 550px;
    }
}

@media screen and (max-width:480px)
{
    #container { width: 400px; }

    #nav
    {
        float: none;
        width: auto;
    }

    #content
    {
        float: none;
        width: auto;
        margin: 0;
    }

    #extras
    {
        float: none;
        width: auto;
        margin: 0;
    }

    .feature-image { display: none; }
}

Mas fique atento que nem todos os navegadores suportam Media-Queries. Para maximizar a compatibilidade, você deve utilizar, como sugestão, um código em JavaScript que simule o Media-Queries em navegadores que não o suportam, como o Respons.js

0
2

Media queries

Use media-queries do css3. O modo mais amplamente aceito é o mesmo aplicado pelo Bootstrap:

.row::before, .row::after {
  display: table;
  content: " ";
  clear: both;
  line-height: 0;
}
@media (min-width: 640px) {
  .col-3, .col-9 { float: left; }
  .col-3 { width: 25%; }
  .col-9 { width: 75%; }
}

Porém, as versões Internet Explorer < 9 não dão suporte nativo. Para isso, use uma biblioteca fallback JavaScript. Há inúmeras para isso, as mais famosas são a Respond.js e a css3-mediaqueries-js, ainda tem a matchMedia.js e a media-match. Para mim, a que costuma funcionar melhor é a css3-mediaqueries-js:

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

No entanto, há uma corrente crescente de programadores que dispensam esse "fallbacks.js" em favor de uma melhor estruturação do desenvolvimento front-end. Ele está contido na ideia de que primeiro você deve se preocupar em desenvolver layout para dispositivos móveis, e somente depois aplicar os comportamentos para resoluções maiores. Há vários motivos para isso, mas os principais no nosso escopo da pergunta são:

  1. Independência do JavaScript para corrigir bug de layout.
  2. Desnecessário efetuar um HTTP Request a mais.
  3. Navegadores que não dão suporte estão caindo em desuso, e esse redução deve ser promovida por nós programadores. Se o navegador não suportar media-queries, ele mostrará o conteúdo como para dispositivo móvel.

.imagem {
  background: #dd6666;
  height: 150px;
}
.titulo {
  background: #66dd66;
  margin: 0;
  padding: 20px;
}
.descricao {
  background: #6666ee;
  margin: 0;
  padding: 20px;
}
h1, p {
  margin: 0;
}
.row::before,
.row::after {
  display: table;
  content: " ";
  clear: both;
  line-height: 0;
}
@media (min-width: 640px) {
  .col-3 {
    float: left;
    width: 25%;
  }
  .col-9 {
    float: left;
    width: 75%;
  }
}
<!--[if lte IE 8]>
<script src="//cdn.jsdelivr.net/css3-mediaqueries/0.1/css3-mediaqueries.min.js"></script>
<![endif]-->

<div class="row">
  <div class="col-3 imagem">
  </div>
  <div class="col-9">
    <div class="titulo">
      <h1>Título da Imagem</h1>
    </div>
    <div class="descricao">
      <p>Descrição da imagem</p>
    </div>
  </div>
</div>

Media Types

Outra alternativa, é separar os estilos em arquivos diferentes por resolução e tipo de dispositivos. O que dá maior manutenabilidade e flexibilidade:

<link rel="stylesheet" type="text/css" href="style.css" media="screen, handheld" />
<link rel="stylesheet" type="text/css" href="enhanced.css" media="screen  and (min-width: 40.5em)" />

Mais sobre:

http://www.html5rocks.com/en/mobile/responsivedesign/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .