Jump to content
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

peenas

Problemas a ajustar website

Recommended Posts

peenas

Boas, ao mudar de tamanho a minha janela do browser o meu site não se ajusta a resolução da janela, alguém sabe alguma maneira de corrigir isto? Um script?

Já pesquisei e não encontro nada que resulte.

Aqui fica um exemplo do que me aconteçe.

hybquwz.png

Share this post


Link to post
Share on other sites
fteixeira1993

Boas, ao mudar de tamanho a minha janela do browser o meu site não se ajusta a resolução da janela, alguém sabe alguma maneira de corrigir isto? Um script?

Já pesquisei e não encontro nada que resulte.

Aqui fica um exemplo do que me aconteçe.

hybquwz.png

Bom dia,

O ideal seria mostrar o código que já tem. Mas deve resolver com media querys em css3 e se não tem adicionar a linha abaixo se ainda não tiver no código.

<meta name="viewport" content="width=device-width, initial-scale=1">

cumps,

fteixeira1993

Share this post


Link to post
Share on other sites
peenas

Bom dia,

O ideal seria mostrar o código que já tem. Mas deve resolver com media querys em css3 e se não tem adicionar a linha abaixo se ainda não tiver no código.

<meta name="viewport" content="width=device-width, initial-scale=1">

cumps,

fteixeira1993

Boas, esse meta não fez nada, eu posso te dar o codigo. qual é a melhor maneira de por aqui o código?

Share this post


Link to post
Share on other sites
acao

Boas, esse meta não fez nada, eu posso te dar o codigo. qual é a melhor maneira de por aqui o código?

é necessária.

para colocares o código ao responderes ao post tens um botao que diz código, colas la o código css

cumps

acao

Edited by acao
  • Vote 1

Share this post


Link to post
Share on other sites
peenas

html, body {
max-width: 100%;
overflow-x: hidden;
}
body {
width: 100%;
margin: 0;
}
.container{
width: 65%;
margin: auto;
margin-top: 4px;
}
.header{
background: #3ADB92;
width:100%;
position:fixed;
top:0;
left:0;
}
}.scroller {
height:300px;
overflow:scroll;
}
/* Mete o logo no sitio em que esta */
.logo{
margin-top: -12;
position: absolute;
float: left;
}
.nav{
margin-bottom: 22px;
margin-top: -18px;
}
/* Retira o sublinhado do nav e mete a cor a branco */
.nav a{
text-decoration: none;
color: #FFFFFF;
font-size: 14pt;

}
/* Faz o Pesquisar */
.pesquisar input[type=text] {
width: 110px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
position:absolute;
left:345px; top:400px;
}
.pesquisar input[type=text]:focus {
width: 9.5%;
}
.nav li{
list-style: none;
float: left;
margin-left: 15px;
padding-top: 15px;
}
.nav a:hover{
color: #2B8226;
}
/* Mete a lista do lado direto da página */
.nav{
float:right;
}
.nav {
position: relative;
display: inline-block;
}

.main {
position:absolute;
left:345px; top:95px;
padding-right: 250px;
}
																					 /* Menu Dos Produtos */
@import url(http://fonts.googleapis.com/css?family=Roboto:700);
#cssmenu h3{
padding-bottom: -10px;
font-weight: bold;
padding-left: 40px;
color: #3ADB92;
}
#cssmenu hr{
margin: 0;
}
/* Faz com que o menu apareça naquele sitio sitio */
#cssmenu{
position:absolute;
left:345px; top:100px;
padding-right: 250px;
}
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu {
font-family: Roboto, sans-serif;
}
#cssmenu > ul {
width: 180px;
background: #ffffff;
}
#cssmenu > ul > li > a {
padding: 12px 15px;
font-size: 15px;
color: #666666;
font-weight: bold;
text-decoration: none;
-webkit-transition: color .2s ease;
-o-transition: color .2s ease;
-ms-transition: color .2s ease;
transition: color .2s ease;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
color: #222222;
}
#cssmenu ul li.has-sub > a::after {
position: absolute;
right: 15px;
display: block;
width: 10px;
height: 10px;
border-radius: 2px;
}
#cssmenu > ul > li.has-sub > a::after {
top: 14px;
background: #666666;
}
#cssmenu > ul > li.has-sub:hover > a::after,
#cssmenu > ul > li.has-sub > a:hover::after {
background: #222222;
}
#cssmenu ul ul li.has-sub > a::after {
top: 13px;
background: #ffffff;
}
#cssmenu ul ul li.has-sub:hover > a::after,
#cssmenu ul ul li.has-sub > a:hover::after {
background: #dddddd;
}
#cssmenu ul li.has-sub > a::before {
position: absolute;
right: 15px;
z-index: 2;
display: block;
width: 0;
height: 0;
border: 3px solid transparent;
content: "";
}
#cssmenu > ul > li.has-sub > a::before {
top: 16px;
border-left-color: #ffffff;
}
#cssmenu ul ul li.has-sub > a::before {
top: 15px;
border-left-color: #2e353b;
}
#cssmenu ul {
-webkit-perspective: 600px;
-moz-perspective: 600px;
perspective: 600px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#cssmenu ul ul {
position: absolute;
top: 0;
left: -9999px;
width: 180px;
background: #2e353b;
opacity: 0;
-moz-transition: opacity 0.2s ease, -moz-transform 0.2s ease;
-webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
-ms-transition: opacity 0.2s ease, -ms-transform 0.2s ease;
-o-transition: opacity 0.2s ease, -o-transform 0.2s ease;
transition: opacity .2s ease, transform .2s ease;
-webkit-transform: rotate3d(0, 1, 0, 45deg);
-moz-transform: rotate3d(0, 1, 0, 45deg);
transform: rotate3d(0, 1, 0, 45deg);
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
transform-origin: left center;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
#cssmenu ul li:hover > ul {
left: 100%;
opacity: 1;
transform: rotate3d(0, 0, 0, 0);
}
#cssmenu ul ul::after {
position: absolute;
left: -8px;
top: 14px;
z-index: 5;
display: block;
width: 0;
height: 0;
border: 4px solid transparent;
border-right-color: #2e353b;
content: "";
}
#cssmenu ul ul a {
padding: 12px 15px;
font-size: 12px;
color: #ffffff;
font-weight: 700;
text-decoration: none;
-webkit-transition: color .2s ease;
-o-transition: color .2s ease;
-ms-transition: color .2s ease;
transition: color .2s ease;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
color: #dddddd;
}
																					 /* SlideShow */
/* Faz com que o Slideshow apareça naquele sitio */
.slideshow{
z-index: -1;
margin-top: -200px;
padding-left: 250px;
}
a,img {border: none;}
.trs {-webkit-transition:all ease-out 0.5s;
-moz-transition:all ease-out 0.5s;
-o-transition:all ease-out 0.5s;
-ms-transition:all ease-out 0.5s;
transition:all ease-out 0.5s;}
/* Faz com que o slideshow apareça naquele sitio sitio e também que aquilo passe por de baixo do header*/
#slider {
z-index: -1;
position: relative;
}
#slider a { position: absolute; top: 0; left: 0; opacity: 0;filter:alpha(opacity=0);}
.ativo { opacity: 1!important; filter:alpha(opacity=100)!important;}

/*controladores*/
span {background: #3ADB92; cursor: pointer; opacity: 0;filter:alpha(opacity=0); position: absolute; bottom: 40%; width: 43px; height: 43px; z-index: 5;}
.next {right: 10px;}
.next:before,.next:after {left: 21px;}
.next:before {
-webkit-transform: rotate(-42deg);
top: 5px;
}
.next:after {
-webkit-transform: rotate(-132deg);
top: 19px;
}
.next:before,.next:after,.prev:before,.prev:after {content: "";
height: 20px;
background: #fff;
width: 1px;
position: absolute;
}
.prev {left: 10px;}
.prev:before,.prev:after {left: 18px;}
.prev:before {
-webkit-transform: rotate(42deg);
top: 5px;
}
.prev:after {
-webkit-transform: rotate(132deg);
top: 19px;
}

figure:hover span {opacity: 0.76;filter:alpha(opacity=76);}
figure {
max-width: 937px;
height: 354px;
position: relative;
overflow: hidden;
margin: 50px auto;
}

figcaption {
padding-left: 20px;
color: #fff;
font-family: "Kaushan Script","Lato","arial";
font-size: 22px;
background: #3ADB92;
width: 100%;
position: absolute;
bottom: 0; left: 0;
line-height: 55px;
height: 55px;
z-index: 5
}
																							 /* Form de registo*/
/* Mete o Form no local que esta*/
.form{
position:absolute;
left:27%; top:100px;
padding-right: 250px;
}
/* Mete a borda do form a verde*/
.form fieldset {
border: 3px solid #3ADB92;
}
.form label {
line-height: 20px;
font-size: 1.1em;
width:250px;
display:inline-block;
font-weight:bold;
color: #666666;
text-align: right;
}
.form legend {
display: block;
padding: 0;
margin-bottom: 20px;
font-size: 21px;
line-height: inherit;
color: #333;
border: 0;
}
																						 /* PoPUP de Login/registo*/
/* Mete o texto ao centro e com as cores que está*/
.popup_div-dialog h2{
font-size: 14pt;
color:#666666;
font-family: comic-sans MS;
text-align: center;
}
.popup_div-body p{
font-size: 14pt;
color:#666666;
font-family: comic-sans MS;
text-align: center;
}
color: #333333;
height:1500px;
}
.wrap {
padding: 40px;
text-align: center;
}

.mybutton {
background: #3ADB92;
border: #3ADB92 solid 1px;
border-radius: 3px;
color: #fff;
display: inline-block;
font-size: 14px;
padding: 8px 15px;
text-decoration: none;
text-align: center;
min-width: 60px;
position: relative;
transition: color .1s ease;
}
.mybutton:hover {
background: #357ebd;
}
.mybutton.mybutton-big {
font-size: 18px;
padding: 15px 20px;
min-width: 100px;
}
.mybutton-close {
font-weight: bold;
color: black;
font-size: 15px;
text-decoration: none;
position: absolute;
right: 10px;
top: 10px;
}
.mybutton-close:hover {
color: #919191;
}
.popup_div:before {
content: "";
display: none;
background: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
}
.popup_div:target:before, .popup_div.loaded:before {
display: block;
}

.popup_div-dialog {
background: #fefefe;
border: #3ADB92 solid 1px;
border-radius: 5px;
margin-left: -200px;
position: fixed;
left: 50%;
top: -100%;
z-index: 11;
width: 360px;
-webkit-transform: translate(0, -500%);
-ms-transform: translate(0, -500%);
transform: translate(0, -500%);
-webkit-transition: -webkit-transform 0.3s ease-out;
-moz-transition: -moz-transform 0.3s ease-out;
-o-transition: -o-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
}
.popup_div-body {
padding: 20px;
}
.popup_div-top {
padding: 10px 20px;
}

.popup_div-bottom{
padding: 5px 20px 10px 20px;
}

.popup_div-top {
border-bottom: #eeeeee solid 1px;
}
.popup_div-top h2 {
font-size: 20px;
}

.popup_div:target .popup_div-dialog, .popup_div.loaded .popup_div-dialog {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
top: 20%;
}

.popup_div-bottom {
font-size: 26pt;
font-weight: bold;
border-top: #eeeeee solid 1px;
text-align: center;
}

.popup_div-body input{width:100%;padding:10px;margin-bottom:20px;}
.bottomcontent{
font-size:12px;
}
																						 /* Pagina de registar*/
h5 {
display:inline-block;
text-align: center;
}
label {
line-height: 20px;
font-size: 1.1em;
width:250px;
display:inline-block;
font-weight:bold;
color:#4f8db3;
text-align: right;
}
.button-primary {
padding-left: 250px;
font-weight: bold;
padding: 12px 20px;
background: #3ADB92;
color: #fff !important;
font-size: 14px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
cursor: pointer;
text-decoration: none;
text-shadow: 0 1px 0px rgba(0,0,0,0.15);
border-width: 1px 1px 3px !important;
border-style: solid;
border-color: #3ADB92 !important;
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background-color: #3ADB92 !important;
margin-left: 60%;
}
footer {
margin: 50px 0;
}

Aqui está o codigo

Edited by peenas

Share this post


Link to post
Share on other sites
acao

boas

não tens media queries tens que as adicionar no «final do teu css»

@media only screen and (min-width : 10px) and (max-width : 239px){
body{font-size: 50%;} /* exemplo etc*/
}
@media only screen and (min-width : 240px) and (max-width : 319px){
body{font-size: 70%;} /*exemplo etc*/
}
@media only screen and (min-width : 240px) and (max-width : 319px){
}
@media only screen and (min-width : 320px) and (max-width : 532px) {
}
@media only screen and (min-width : 533px) and (max-width : 767px) {}

@media only screen and (min-width : 768px) and (max-width : 992px) {}
/*etc*/

colocas o css para cada situação, e podes ajustar as medidas do ecran conforme tu entenderes.

aqui podes testar os vários monitores e ver as medidas dos fones tablets etc. http://quirktools.com/screenfly/

tens que colocar meta tage anterior dentro

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

ps: o teu css tem muitas medidas fixas, se tiveres dificuldades nos ajustes seria bom alterares o que possível para percentagem %.

cumps

acao

Edited by acao
  • Vote 1

Share this post


Link to post
Share on other sites
JoseF

Ou então se criares um ficheiro CSS quando meteres o tamanho daquilo que queres nao metas em "px" ou "em", mete em "%"

Espero ter me expressado bem e em ter ajudado.

Share this post


Link to post
Share on other sites
acao

boas, tens toda a informação, tens que gerir todo o css para cada situação.

cimps

acao

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

×

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.