Jump to content

Div desposiciona-se em ecrãs + pequenos


SitoMan

Recommended Posts

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://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;
}
Link to comment
Share on other sites

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
Link to comment
Share on other sites

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
Link to comment
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
×
×
  • 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.