HilarYo Posted March 3, 2014 at 12:00 PM Report #547327 Posted March 3, 2014 at 12:00 PM (edited) 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) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"> </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="http://sas.portugalflash.com/"><img 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) @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; } Obrigado, cumps Edited March 3, 2014 at 12:01 PM by HilarYo
NCS_One Posted March 3, 2014 at 04:30 PM Report #547376 Posted March 3, 2014 at 04:30 PM Boas, Podes usar o "media". http://css-tricks.com/css-media-queries/ Se a vida te voltar as costas aproveita e apalpa-lhe o cu.
HappyHippyHippo Posted March 3, 2014 at 04:45 PM Report #547384 Posted March 3, 2014 at 04:45 PM isso é possível? sim mas nunca atribuindo valores estáticos/definidos como tamanho das imagens como tens no teu HTML ... usa percentagens IRC : sim, é algo que ainda existe >> #p@p Portugol Plus
HilarYo Posted March 4, 2014 at 10:33 PM Author Report #547539 Posted March 4, 2014 at 10:33 PM Boas, Podes usar o "media". http://css-tricks.com/css-media-queries/ Parece-me um pouco complexo, para o meu conhecimento de css 😄 , pouco ou nenhum 😄 Vou experimentar, obrigado sim mas nunca atribuindo valores estáticos/definidos como tamanho das imagens como tens no teu HTML ... usa percentagens Significa que se usar tamanhos deste género: #imgpos{ width:100%; height:100%; position:absolute; top:50%; left:50%; margin-left:-50%; margin-top:-50%; }
I-NOZex Posted March 4, 2014 at 11:23 PM Report #547543 Posted March 4, 2014 at 11:23 PM exacto, embora essa posição absoluta possa estragar o esquema... e media querys nao é nada de complicado, acredita, quando ouvi falar tambem achei uma coisa de outro mundo, mas é tao simples xD remomendo que leias este artigo, a mim foi o que me ajudou imenso Responsive Design in 3 Steps (tel algures no fim um link para um outro artigo onde fala em maior detalhe das media querys 😉 ) B2R » Beat2Revolution v3.0b | Regista e divulga-nos beat2revolution.net
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now