Boas tardes,
Estou a criar uma página em HTML com CSS de entrada, o que pretendia era evitar que os elementos ficassem demasiado grandes em computadores com o ecrã mais pequenos, ou seja se usassem um ecrã mais pequeno para visualizar a página, as imagens ficavam mais pequenas, isso é possível?
O html é o seguinte:
(index.html)
Código :
e o CSS (style.css)
Código :
Obrigado,
cumps
Estou a criar uma página em HTML com CSS de entrada, o que pretendia era evitar que os elementos ficassem demasiado grandes em computadores com o ecrã mais pequenos, ou seja se usassem um ecrã mais pequeno para visualizar a página, as imagens ficavam mais pequenas, isso é possível?
O html é o seguinte:
(index.html)
Código :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22>"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/url]
<html xmlns="[url="http://www.w3.org/1999/xhtml%22>"]http://www.w3.org/1999/xhtml">[/url]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="[url="http://code.jquery.com/jquery-1.11.0.min.js%22>"]http://code.jquery.com/jquery-1.11.0.min.js">[/url] </script>
<script type="text/javascript" src="./vegas/jquery.vegas.js"> </script>
<link rel="stylesheet" type="text/css" href="./vegas/jquery.vegas.css" />
<link rel="stylesheet" type="text/css" href="./style.css" />
<script>
$(function() {
$.vegas({
src:'./images/background.jpg'
});
$.vegas('overlay', {
src:'./vegas/overlays/13.png'
});
});
$.vegas('slideshow', {
backgrounds:[
{ src:'./images/background.jpg', fade:3000 },
{ src:'./images/bg1.jpg', fade:3000 },
{ src:'./images/bg2.jpg', fade:3000 },
{ src:'./images/bg3.jpg', fade:3000 }
]
})('overlay', {
src:'./vegas/overlays/13.png'
});
</script>
<title>PaginaTeste</title>
</head>
<body>
<a href="[url="http://sas.portugalflash.com/%22><img"]http://sas.portugalflash.com/"><img[/url] src="images/logo.png" id="imgpos" /></a>
<div id="footer"><img src="images/clique_entrar.png" height="40" /><img src="images/pf.png" width="200" align="right" /></div>
</body>
</html>
<html xmlns="[url="http://www.w3.org/1999/xhtml%22>"]http://www.w3.org/1999/xhtml">[/url]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="[url="http://code.jquery.com/jquery-1.11.0.min.js%22>"]http://code.jquery.com/jquery-1.11.0.min.js">[/url] </script>
<script type="text/javascript" src="./vegas/jquery.vegas.js"> </script>
<link rel="stylesheet" type="text/css" href="./vegas/jquery.vegas.css" />
<link rel="stylesheet" type="text/css" href="./style.css" />
<script>
$(function() {
$.vegas({
src:'./images/background.jpg'
});
$.vegas('overlay', {
src:'./vegas/overlays/13.png'
});
});
$.vegas('slideshow', {
backgrounds:[
{ src:'./images/background.jpg', fade:3000 },
{ src:'./images/bg1.jpg', fade:3000 },
{ src:'./images/bg2.jpg', fade:3000 },
{ src:'./images/bg3.jpg', fade:3000 }
]
})('overlay', {
src:'./vegas/overlays/13.png'
});
</script>
<title>PaginaTeste</title>
</head>
<body>
<a href="[url="http://sas.portugalflash.com/%22><img"]http://sas.portugalflash.com/"><img[/url] src="images/logo.png" id="imgpos" /></a>
<div id="footer"><img src="images/clique_entrar.png" height="40" /><img src="images/pf.png" width="200" align="right" /></div>
</body>
</html>
e o CSS (style.css)
Código :
@charset "UTF-8";
/* CSS Document */
#imgpos{
width:628px;
height:450px;
position:absolute;
top:50%;
left:50%;
margin-left:-314px;
margin-top:-225px;
}
#footer {
width: 100%;
bottom: 0;
position: absolute;
}
/* CSS Document */
#imgpos{
width:628px;
height:450px;
position:absolute;
top:50%;
left:50%;
margin-left:-314px;
margin-top:-225px;
}
#footer {
width: 100%;
bottom: 0;
position: absolute;
}
Obrigado,
cumps