Jump to content
Sign in to follow this  
SitoMan

Div desposiciona-se em ecrãs + pequenos

Recommended Posts

SitoMan

Viva pessoal,

Estou com um problema. O objectivo era que, ao diminuir-mos o tamanho do ecrã, o conteúdo continuasse do lado direito da imagem. Em vez disso, está a ir para baixo da imagem.

Como consigo resolver este problema?

Um abraço, e obrigado pela ajuda.

<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<title>Site sobre filmes</title>
<link rel="stylesheet" type="text/css" href="teste.css" />
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
<div id="content">
<div id="player-box" class="content-box">
<div class="player-aux">
<div class="thumb"><a href="#" class="thumb-aux"><img src="http://img196.imageshack.us/img196/3558/imgtv.png" width="128px"; height="190px"; ></a></div>
<div class="movie-info">
<a href="" class="movie-name">The Pursuit of Happyness</a>
<div class="clear"></div>
<div class="movie-detailed-info">
 <div class="detailed-aux"><span class="genre"><strong>Ação, Aventura</strong></span></div>
 <div class="detailed-aux">
 <span class="director-caption">Realizador: </span><span class="director">Gabriele Muccino</span><br />
 <span class="director-caption">Elenco: </span><span class="director">Will Smith, Jaden Smith, Thandie Newton</span>
 </div>
 <div class="wtv-rating"></div>
 <div class="clear"></div>
 <span class="movie-synopsis" id="movie-synopsis">Chris Gardner (Will Smith) é um vendedor, que apesar do seu talento, luta desesperadamente por conseguir sustentar a família.</span>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</body>
</html>

/* GENERAL */
.clear {
clear: both;
}
div#content{
background-color:#f5f5f5;
overflow: hidden;
padding-bottom: 5px;
padding-top: 5px;
}
div#content div.content-box{
background-color:#f5f5f5;
width:100%;
overflow: hidden;
margin-left:5px;
}
div#content div#player-box div.player-aux{
width: 100%;
overflow: hidden;
}

div#content div#player-box div.player-aux div.thumb{
float: left;
width: 136px;
overflow: hidden;
margin-right: 15px;
}
div#content div#player-box div.player-aux div.thumb a.thumb-aux{
float: left;
width: 128px;
height: 190px;
overflow: hidden;
background-color: white;
border: 1px solid #D4D4D4;
border-bottom: 1px solid #A7A7A7;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 0px 5px 10px -7px #000;
-webkit-box-shadow: 0px 5px 10px -7px #000;
box-shadow: 0px 5px 10px -7px #000;
padding: 3px;
}
div#content div#player-box div.player-aux div.movie-info{
float:left;
margin-top: 2px;
}
div#content div#player-box div.player-aux div.movie-info a.movie-name{
font-family: 'PTSans Bold', Tahoma;
font-size: 20px;
color: #52A2C9;
text-decoration: none;
}
div#content div#player-box div.player-aux div.movie-info a.movie-name:hover {
text-decoration: underline;
}
div#content div#player-box div.player-aux div.movie-info div.movie-detailed-info{
float: left;
width: 100%;
overflow: hidden;
}
div#content div#player-box div.player-aux div.movie-info div.movie-detailed-info span.director-caption{
font-family: Tahoma;
font-size: 11px;
color: #9d9d9d;
}
div#content div#player-box div.player-aux div.movie-info div.movie-detailed-info span.director{
font-family: Tahoma;
font-size: 11px;
color: #545457;
}
div#content div#player-box div.player-aux div.movie-info div.wtv-rating{
float: left;
width: 195px;
overflow: hidden;
margin: 0px 0px 5px 0px;
}
div#content div#player-box div.player-aux div.movie-info span.movie-synopsis{
float: left;
font-family: Tahoma;
font-size: 13px;
color: #545457;
line-height: 18px;
margin-bottom: 5px;
}

Edited by SitoMan

Share this post


Link to post
Share on other sites
yoda

Lê este artigo, principalmente a secção sobre as tabelas : http://css-tricks.com/almanac/properties/d/display/

Se usares o display correctamente, consegues com que a imagem fique alinhada do lado esquerdo e o texto do lado direito, pois os containers deles comportar-se-ão como colunas de tabelas.

Edited by yoda
  • Vote 1

Share this post


Link to post
Share on other sites
SitoMan

Boa tarde,

div_esquerda

div#content div#player-box div.player-aux div.thumb{
float: left;
width: 136px;
overflow: hidden;
margin-right: 15px;
}

div_direita

div#content div#player-box div.player-aux div.movie-info{
float:left;
margin-top: 2px;
width: calc(100% - 136px);
}

No entanto, não está a funcionar. Peço desculpa pela noobice. :/

Edited by SitoMan

Share this post


Link to post
Share on other sites
SitoMan

Estive a ler sobre a função calc, e vi que não existe uma compatibilidade significativa. Consegui que no Chrome a coisa funciona-se mas, por exemplo num iPad onde testei, não funcionou.

Alguma alternativa que um leigo consiga aplicar?

Obrigado.

Share this post


Link to post
Share on other sites
SitoMan

Sim, a primeira solução que dei.

Essa solução não é para leigos, digo eu. Ou então sou só eu que leio aquilo e não entendo nada. :/

Share this post


Link to post
Share on other sites
SitoMan

PM sent.

Podem encerrar que, mesmo que não usufrua do serviço, não vou conseguir meter isto a funcionar.

Obrigado.

EDIT: Se alguém estiver disponível para o fazer, por favor, envie PM. Obrigado.

Edited by SitoMan

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.