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.
Código (HTML):
Código (CSS):
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.
Código (HTML):
<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>
<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>
Código (CSS):
/* 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;
}
.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;
}