Layout ajustável a tela?
3 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Layout ajustável a tela?
Qual é minha questão:
Tenho um site e ele não se ajusta a tela, gostaria de saber como faço para que meu layout se ajuste a tela. Não quero que a tela deforme toda, mudando os menus de lugar etc. Quero só que o layout do site por completo se ajuste a tela, sem deformações. Falaram que eu tenho de colocar: width="100%" ..Já está assim. No tablet ele fica com a tela grande tem de ficar rolando o site para esquerda e para direita para ver . E o zoom do tablet não funciona neste site, tipo aumenta o zoom no toque e do dedo e diminuir o zoom no toque do dedeo. E só não funciona para este site para todos os sites funciona ... O que será?
Endereço do meu fórum:
Não é necessário.
Versão do fórum:
PHPBB3
Tenho um site e ele não se ajusta a tela, gostaria de saber como faço para que meu layout se ajuste a tela. Não quero que a tela deforme toda, mudando os menus de lugar etc. Quero só que o layout do site por completo se ajuste a tela, sem deformações. Falaram que eu tenho de colocar: width="100%" ..Já está assim. No tablet ele fica com a tela grande tem de ficar rolando o site para esquerda e para direita para ver . E o zoom do tablet não funciona neste site, tipo aumenta o zoom no toque e do dedo e diminuir o zoom no toque do dedeo. E só não funciona para este site para todos os sites funciona ... O que será?
Endereço do meu fórum:
Não é necessário.
Versão do fórum:
PHPBB3
- Código:
/**************************************************************** *****/
/*
código do style.css
#art-main
{
background: #ffffff;
margin:0 auto;
font-size: 11px;
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
font-weight: normal;
font-style: normal;
line-height: 150%;
position: relative;
width: 100%;
min-height: 100%;
left: 0;
top: 0;
cursor:default;
overflow:hidden;
}
table, ul.art-hmenu
{
font-size: 11px;
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
font-weight: normal;
font-style: normal;
line-height: 150%;
}
h1, h2, h3, h4, h5, h6, p, a, ul, ol, li
{
margin: 0;
padding: 0;
}
/* Reset buttons border. It's important for input and button tags.
* border-collapse should be separate for shadow in IE.
*/
.art-button
{
border-collapse: separate;
-webkit-background-origin: border !important;
-moz-background-origin: border !important;
background-origin: border-box !important;
background: #FDA862;
background: linear-gradient(top, rgba(254, 196, 149, 0.8) 0, rgba(253, 137, 43, 0.8) 100%) no-repeat;
background: -webkit-linear-gradient(top, rgba(254, 196, 149, 0.8) 0, rgba(253, 137, 43, 0.8) 100%) no-repeat;
background: -moz-linear-gradient(top, rgba(254, 196, 149, 0.8) 0, rgba(253, 137, 43, 0.8) 100%) no-repeat;
background: -o-linear-gradient(top, rgba(254, 196, 149, 0.8) 0, rgba(253, 137, 43, 0.8) 100%) no-repeat;
background: -ms-linear-gradient(top, rgba(254, 196, 149, 0.8) 0, rgba(253, 137, 43, 0.8) 100%) no-repeat;
background: linear-gradient(top, rgba(254, 196, 149, 0.8) 0, rgba(253, 137, 43, 0.8) 100%) no-repeat;
-svg-background: linear-gradient(top, rgba(254, 196, 149, 0.8) 0, rgba(253, 137, 43, 0.8) 100%) no-repeat;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:1px 1px 2px 1px rgba(0, 0, 0, 0.12);
-moz-box-shadow:1px 1px 2px 1px rgba(0, 0, 0, 0.12);
box-shadow:1px 1px 2px 1px rgba(0, 0, 0, 0.12);
border:1px dotted rgba(150, 164, 166, 0.8);
padding:0 5px;
margin:0 auto;
height:19px;
}
.art-postcontent,
.art-postheadericons,
.art-postfootericons,
.art-blockcontent,
ul.art-vmenu a
{
text-align: left;
}
.art-postcontent,
.art-postcontent li,
.art-postcontent table,
.art-postcontent a,
.art-postcontent a:link,
.art-postcontent a:visited,
.art-postcontent a.visited,
.art-postcontent a:hover,
.art-postcontent a.hovered
{
font-size: 12px;
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
}
.art-postcontent p
{
margin: 12px 0;
}
.art-postcontent h1, .art-postcontent h1 a, .art-postcontent h1 a:link, .art-postcontent h1 a:visited, .art-postcontent h1 a:hover,
.art-postcontent h2, .art-postcontent h2 a, .art-postcontent h2 a:link, .art-postcontent h2 a:visited, .art-postcontent h2 a:hover,
.art-postcontent h3, .art-postcontent h3 a, .art-postcontent h3 a:link, .art-postcontent h3 a:visited, .art-postcontent h3 a:hover,
.art-postcontent h4, .art-postcontent h4 a, .art-postcontent h4 a:link, .art-postcontent h4 a:visited, .art-postcontent h4 a:hover,
.art-postcontent h5, .art-postcontent h5 a, .art-postcontent h5 a:link, .art-postcontent h5 a:visited, .art-postcontent h5 a:hover,
.art-postcontent h6, .art-postcontent h6 a, .art-postcontent h6 a:link, .art-postcontent h6 a:visited, .art-postcontent h6 a:hover,
.art-blockheader .t, .art-blockheader .t a, .art-blockheader .t a:link, .art-blockheader .t a:visited, .art-blockheader .t a:hover,
.art-vmenublockheader .t, .art-vmenublockheader .t a, .art-vmenublockheader .t a:link, .art-vmenublockheader .t a:visited, .art-vmenublockheader .t a:hover,
.art-headline, .art-headline a, .art-headline a:link, .art-headline a:visited, .art-headline a:hover,
.art-slogan, .art-slogan a, .art-slogan a:link, .art-slogan a:visited, .art-slogan a:hover,
.art-postheader, .art-postheader a, .art-postheader a:link, .art-postheader a:visited, .art-postheader a:hover
{
font-size: 20px;
font-family: 'Times New Roman', Georgia, Times, Serif;
font-weight: normal;
font-style: normal;
line-height: 120%;
}
.art-postcontent a, .art-postcontent a:link
{
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
text-decoration: none;
color: #33AAEB;
}
.art-postcontent a:visited, .art-postcontent a.visited
{
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
text-decoration: none;
color: #9FABAD;
}
.art-postcontent a:hover, .art-postcontent a.hover
{
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
text-decoration: underline;
color: #5DBCEF;
}
.art-postcontent h1
{
color: #33AAEB;
margin: 10px 0 0;
font-size: 20px;
font-family: 'Times New Roman', Georgia, Times, Serif;
}
.art-blockcontent h1
{
margin: 10px 0 0;
font-size: 20px;
font-family: 'Times New Roman', Georgia, Times, Serif;
}
.art-postcontent h1 a, .art-postcontent h1 a:link, .art-postcontent h1 a:hover, .art-postcontent h1 a:visited, .art-blockcontent h1 a, .art-blockcontent h1 a:link, .art-blockcontent h1 a:hover, .art-blockcontent h1 a:visited
{
font-size: 20px;
font-family: 'Times New Roman', Georgia, Times, Serif;
}
.art-postcontent h2
{
color: #33AAEB;
margin: 10px 0 0;
font-size: 18px;
font-family: 'Times New Roman', Georgia, Times, Serif;
}
.art-blockcontent h2
{
margin: 10px 0 0;
font-size: 18px;
font-family: 'Times New Roman', Georgia, Times, Serif;
}
.art-postcontent h2 a, .art-postcontent h2 a:link, .art-postcontent h2 a:hover, .art-postcontent h2 a:visited, .art-blockcontent h2 a, .art-blockcontent h2 a:link, .art-blockcontent h2 a:hover, .art-blockcontent h2 a:visited
{
font-size: 18px;
font-family: 'Times New Roman', Georgia, Times, Serif;
}
.art-postcontent h3
{
color: #869698;
margin: 10px 0 0;
font-size: 16px;
font-family: 'Times New Roman', Georgia, Times, Serif;
}
.art-blockcontent h3
{
margin: 10px 0 0;
font-size: 16px;
font-family: 'Times New Roman', Georgia, Times, Serif;
}
.art-postcontent h3 a, .art-postcontent h3 a:link, .art-postcontent h3 a:hover, .art-postcontent h3 a:visited, .art-blockcontent h3 a, .art-blockcontent h3 a:link, .art-blockcontent h3 a:hover, .art-blockcontent h3 a:visited
{
font-size: 16px;
font-family: 'Times New Roman', Georgia, Times, Serif;
}
.art-postcontent h4
{
color: #B7C1C2;
margin: 10px 0 0;
font-size: 14px;
font-family: 'Times New Roman', Georgia, Times, Serif;
}
.art-blockcontent h4
{
margin: 10px 0 0;
font-size: 14px;
font-family: 'Times New Roman', Georgia, Times, Serif;
}
.art-postcontent h4 a, .art-postcontent h4 a:link, .art-postcontent h4 a:hover, .art-postcontent h4 a:visited, .art-blockcontent h4 a, .art-blockcontent h4 a:link, .art-blockcontent h4 a:hover, .art-blockcontent h4 a:visited
{
font-size: 14px;
font-family: 'Times New Roman', Georgia, Times, Serif;
}
.art-postcontent h5
{
color: #B7C1C2;
margin: 10px 0 0;
font-size: 13px;
font-family: 'Times New Roman', Georgia, Times, Serif;
}
.art-blockcontent h5
{
margin: 10px 0 0;
font-size: 13px;
font-family: 'Times New Roman', Georgia, Times, Serif;
}
.art-postcontent h5 a, .art-postcontent h5 a:link, .art-postcontent h5 a:hover, .art-postcontent h5 a:visited, .art-blockcontent h5 a, .art-blockcontent h5 a:link, .art-blockcontent h5 a:hover, .art-blockcontent h5 a:visited
{
font-size: 13px;
font-family: 'Times New Roman', Georgia, Times, Serif;
}
.art-postcontent h6
{
color: #6C7C7F;
margin: 10px 0 0;
font-size: 12px;
font-family: 'Times New Roman', Georgia, Times, Serif;
}
.art-blockcontent h6
{
margin: 10px 0 0;
font-size: 12px;
font-family: 'Times New Roman', Georgia, Times, Serif;
}
.art-postcontent h6 a, .art-postcontent h6 a:link, .art-postcontent h6 a:hover, .art-postcontent h6 a:visited, .art-blockcontent h6 a, .art-blockcontent h6 a:link, .art-blockcontent h6 a:hover, .art-blockcontent h6 a:visited
{
font-size: 12px;
font-family: 'Times New Roman', Georgia, Times, Serif;
}
header, footer, article, nav, #art-hmenu-bg, .art-sheet, .art-hmenu a, .art-vmenu a, .art-slidenavigator > a, .art-checkbox:before, .art-radiobutton:before
{
-webkit-background-origin: border !important;
-moz-background-origin: border !important;
background-origin: border-box !important;
}
header, footer, article, nav, #art-hmenu-bg, .art-sheet, .art-slidenavigator > a, .art-checkbox:before, .art-radiobutton:before
{
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ul
{
list-style-type: none;
}
ol
{
list-style-position: inside;
}
html, body
{
height: 100%;
}
body
{
padding: 0;
margin:0;
min-width: 1100px;
color: #C8CFD0;
}
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.cleared {
font: 0/0 serif;
clear: both;
}
form
{
padding: 0 !important;
margin: 0 !important;
}
table.position
{
position: relative;
width: 100%;
table-layout: fixed;
}
li h1, .art-postcontent li h1, .art-blockcontent li h1
{
margin:1px;
}
li h2, .art-postcontent li h2, .art-blockcontent li h2
{
margin:1px;
}
li h3, .art-postcontent li h3, .art-blockcontent li h3
{
margin:1px;
}
li h4, .art-postcontent li h4, .art-blockcontent li h4
{
margin:1px;
}
li h5, .art-postcontent li h5, .art-blockcontent li h5
{
margin:1px;
}
li h6, .art-postcontent li h6, .art-blockcontent li h6
{
margin:1px;
}
li p, .art-postcontent li p, .art-blockcontent li p
{
margin:1px;
}
.art-shapes
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: 0;
}
.art-slider-inner {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
.art-slidenavigator > a {
display: inline-block;
vertical-align: middle;
outline-style: none;
font-size: 1px;
}
.art-slidenavigator > a:last-child {
margin-right: 0 !important;
}
.art-slidecontainerheader {
position: relative;
width: 100%;
height: 100%;
}
.art-slidecontainerheader .art-slide-item
{
}
.art-slidecontainerheader .art-slide-item {
-webkit-transition: 1000ms ease-in-out opacity;
-moz-transition: 1000ms ease-in-out opacity;
-ms-transition: 1000ms ease-in-out opacity;
-o-transition: 1000ms ease-in-out opacity;
transition: 1000ms ease-in-out opacity;
position: absolute;
display: none;
left: 0;
top: 0;
opacity: 0;
width: 100%;
height: 100%;
}
.art-slidecontainerheader .active, .art-slidecontainerheader .next, .art-slidecontainerheader .prev {
display: block;
}
.art-slidecontainerheader .active {
opacity: 1;
}
.art-slidecontainerheader .next, .art-slidecontainerheader .prev {
width: 100%;
}
.art-slidecontainerheader .next.forward, .art-slidecontainerheader .prev.back {
opacity: 1;
}
.art-slidecontainerheader .active.forward {
opacity: 0;
}
.art-slidecontainerheader .active.back {
opacity: 0;
}
.art-slideheader0 {
background-image: url('images/slideheader0.jpg');
background-position: 0 0;
background-repeat: no-repeat;
}
.art-slideheader1 {
background-image: url('images/slideheader1.jpg');
background-position: 0 0;
background-repeat: no-repeat;
}
.art-slideheader2 {
background-image: url('images/slideheader2.jpg');
background-position: 0 0;
background-repeat: no-repeat;
}
.art-slideheader3 {
background-image: url('images/slideheader3.jpg');
background-position: 0 0;
background-repeat: no-repeat;
}
.art-slideheader4 {
background-image: url('images/slideheader4.jpg');
background-position: 0 0;
background-repeat: no-repeat;
}
.art-slideheader5 {
background-image: url('images/slideheader5.jpg');
background-position: 0 0;
background-repeat: no-repeat;
}
.art-slidenavigatorheader {
display: inline-block;
position: absolute;
direction: ltr !important;
top: 236px;
left: 0%;
z-index: 101;
line-height: 0 !important;
-webkit-background-origin: border !important;
-moz-background-origin: border !important;
background-origin: border-box !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
white-space: nowrap;
right: 0px;
}
.art-slidenavigatorheader
{
background: #96A4A6;background: rgba(150, 164, 166, 0.7);
padding:3px;
}
.art-slidenavigatorheader > a
{
background: #525F60;background: linear-gradient(top, #596769 0, #657476 20%, #596769 50%, #505C5E 80%, #596769 100%) no-repeat;background: -webkit-linear-gradient(top, #596769 0, #657476 20%, #596769 50%, #505C5E 80%, #596769 100%) no-repeat;background: -moz-linear-gradient(top, #596769 0, #657476 20%, #596769 50%, #505C5E 80%, #596769 100%) no-repeat;background: -o-linear-gradient(top, #596769 0, #657476 20%, #596769 50%, #505C5E 80%, #596769 100%) no-repeat;background: -ms-linear-gradient(top, #596769 0, #657476 20%, #596769 50%, #505C5E 80%, #596769 100%) no-repeat;background: linear-gradient(top, #596769 0, #657476 20%, #596769 50%, #505C5E 80%, #596769 100%) no-repeat;-svg-background: linear-gradient(top, #596769 0, #657476 20%, #596769 50%, #505C5E 80%, #596769 100%) no-repeat;
-webkit-border-radius:30%;-moz-border-radius:30%;border-radius:30%;
margin:0 10px 0 0;
width: 7px;
height: 7px;
}
.art-slidenavigatorheader > a.active
{
background: #525F60;background: linear-gradient(top, #424C4D 0, #5B6A6B 40%, #5E6C6E 50%, #5B6A6B 60%, #424C4D 100%) no-repeat;background: -webkit-linear-gradient(top, #424C4D 0, #5B6A6B 40%, #5E6C6E 50%, #5B6A6B 60%, #424C4D 100%) no-repeat;background: -moz-linear-gradient(top, #424C4D 0, #5B6A6B 40%, #5E6C6E 50%, #5B6A6B 60%, #424C4D 100%) no-repeat;background: -o-linear-gradient(top, #424C4D 0, #5B6A6B 40%, #5E6C6E 50%, #5B6A6B 60%, #424C4D 100%) no-repeat;background: -ms-linear-gradient(top, #424C4D 0, #5B6A6B 40%, #5E6C6E 50%, #5B6A6B 60%, #424C4D 100%) no-repeat;background: linear-gradient(top, #424C4D 0, #5B6A6B 40%, #5E6C6E 50%, #5B6A6B 60%, #424C4D 100%) no-repeat;-svg-background: linear-gradient(top, #424C4D 0, #5B6A6B 40%, #5E6C6E 50%, #5B6A6B 60%, #424C4D 100%) no-repeat;
-webkit-border-radius:30%;-moz-border-radius:30%;border-radius:30%;
border:1px solid #3D4648;
margin:0 10px 0 0;
width: 7px;
height: 7px;
}
.art-slidenavigatorheader > a:hover
{
background: #B65302;
-webkit-border-radius:30%;-moz-border-radius:30%;border-radius:30%;
border:1px solid #ED6C02;
margin:0 10px 0 0;
width: 7px;
height: 7px;
}
.art-header
{
margin:0 auto;
height: 250px;
background-image: none;
background-position: 0 0;
background-repeat: no-repeat;
position: relative;
width: 1100px;
z-index: auto !important;
}
.responsive .art-header
{
background-image: none;
background-position: center center;
}
.art-header>.widget
{
position:absolute;
z-index:101;
}
.art-nav
{
background: #282E2F;
background: transparent;
border-top:1px solid #96A4A6;
border-bottom:2px solid #96A4A6;
padding:6px;
margin:2px auto 0;
position: relative;
z-index: 100;
font-size: 0;
text-align: left;
}
ul.art-hmenu a, ul.art-hmenu a:link, ul.art-hmenu a:visited, ul.art-hmenu a:hover
{
outline: none;
position: relative;
z-index: 11;
}
ul.art-hmenu, ul.art-hmenu ul
{
display: block;
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
}
ul.art-hmenu li
{
position: relative;
z-index: 5;
display: block;
float: left;
background: none;
margin: 0;
padding: 0;
border: 0;
}
ul.art-hmenu li:hover
{
z-index: 10000;
white-space: normal;
}
ul.art-hmenu:after, ul.art-hmenu ul:after
{
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
ul.art-hmenu, ul.art-hmenu ul
{
min-height: 0;
}
ul.art-hmenu
{
display: inline-block;
vertical-align: middle;
}
.art-nav:before
{
content:' ';
}
.desktop-nav.art-nav{
width: 1100px;
padding-left: 6px;
padding-right: 6px;
}
.art-hmenu-extra1
{
position: relative;
display: block;
float: left;
width: auto;
height: auto;
background-position: center;
}
.art-hmenu-extra2
{
position: relative;
display: block;
float: right;
width: auto;
height: auto;
background-position: center;
}
.art-hmenu
{
float: left;
}
.art-menuitemcontainer
{
margin:0 auto;
}
ul.art-hmenu>li {
margin-left: 9px;
}
ul.art-hmenu>li:first-child {
margin-left: 4px;
}
ul.art-hmenu>li:last-child, ul.art-hmenu>li.last-child {
margin-right: 4px;
}
Re: Layout ajustável a tela?
lufran2.2 escreveu:Qual é minha questão:
Tenho um site e ele não se ajusta a tela, gostaria de saber como faço para que meu layout se ajuste a tela. Não quero que a tela deforme toda, mudando os menus de lugar etc. Quero só que o layout do site por completo se ajuste a tela, sem deformações. Falaram que eu tenho de colocar: width="100%" ..Já está assim. No tablet ele fica com a tela grande tem de ficar rolando o site para esquerda e para direita para ver . E o zoom do tablet não funciona neste site, tipo aumenta o zoom no toque e do dedo e diminuir o zoom no toque do dedeo. E só não funciona para este site para todos os sites funciona ... O que será?
Endereço do meu fórum:
Não é necessário.
Versão do fórum:
PHPBB3
- Código:
/**************************************************************** *****/
/*
código do style.css
#art-main
{
background: #ffffff;
margin:0 auto;
font-size: 11px;
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
font-weight: normal;
font-style: normal;
line-height: 150%;
position: relative;
width: 100%;
min-height: 100%;
left: 0;
top: 0;
cursor:default;
overflow:hidden;
}
table, ul.art-hmenu
{
font-size: 11px;
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
font-weight: normal;
font-style: normal;
line-height: 150%;
}
h1, h2, h3, h4, h5, h6, p, a, ul, ol, li
{
margin: 0;
padding: 0;
}
/* Reset buttons border. It's important for input and button tags.
* border-collapse should be separate for shadow in IE.
*/
.art-button
{
border-collapse: separate;
-webkit-background-origin: border !important;
-moz-background-origin: border !important;
background-origin: border-box !important;
background: #FDA862;
background: linear-gradient(top, rgba(254, 196, 149, 0.8) 0, rgba(253, 137, 43, 0.8) 100%) no-repeat;
background: -webkit-linear-gradient(top, rgba(254, 196, 149, 0.8) 0, rgba(253, 137, 43, 0.8) 100%) no-repeat;
background: -moz-linear-gradient(top, rgba(254, 196, 149, 0.8) 0, rgba(253, 137, 43, 0.8) 100%) no-repeat;
background: -o-linear-gradient(top, rgba(254, 196, 149, 0.8) 0, rgba(253, 137, 43, 0.8) 100%) no-repeat;
background: -ms-linear-gradient(top, rgba(254, 196, 149, 0.8) 0, rgba(253, 137, 43, 0.8) 100%) no-repeat;
background: linear-gradient(top, rgba(254, 196, 149, 0.8) 0, rgba(253, 137, 43, 0.8) 100%) no-repeat;
-svg-background: linear-gradient(top, rgba(254, 196, 149, 0.8) 0, rgba(253, 137, 43, 0.8) 100%) no-repeat;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:1px 1px 2px 1px rgba(0, 0, 0, 0.12);
-moz-box-shadow:1px 1px 2px 1px rgba(0, 0, 0, 0.12);
box-shadow:1px 1px 2px 1px rgba(0, 0, 0, 0.12);
border:1px dotted rgba(150, 164, 166, 0.8);
padding:0 5px;
margin:0 auto;
height:19px;
}
.art-postcontent,
.art-postheadericons,
.art-postfootericons,
.art-blockcontent,
ul.art-vmenu a
{
text-align: left;
}
.art-postcontent,
.art-postcontent li,
.art-postcontent table,
.art-postcontent a,
.art-postcontent a:link,
.art-postcontent a:visited,
.art-postcontent a.visited,
.art-postcontent a:hover,
.art-postcontent a.hovered
{
font-size: 12px;
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
}
.art-postcontent p
{
margin: 12px 0;
}
.art-postcontent h1, .art-postcontent h1 a, .art-postcontent h1 a:link, .art-postcontent h1 a:visited, .art-postcontent h1 a:hover,
.art-postcontent h2, .art-postcontent h2 a, .art-postcontent h2 a:link, .art-postcontent h2 a:visited, .art-postcontent h2 a:hover,
.art-postcontent h3, .art-postcontent h3 a, .art-postcontent h3 a:link, .art-postcontent h3 a:visited, .art-postcontent h3 a:hover,
.art-postcontent h4, .art-postcontent h4 a, .art-postcontent h4 a:link, .art-postcontent h4 a:visited, .art-postcontent h4 a:hover,
.art-postcontent h5, .art-postcontent h5 a, .art-postcontent h5 a:link, .art-postcontent h5 a:visited, .art-postcontent h5 a:hover,
.art-postcontent h6, .art-postcontent h6 a, .art-postcontent h6 a:link, .art-postcontent h6 a:visited, .art-postcontent h6 a:hover,
.art-blockheader .t, .art-blockheader .t a, .art-blockheader .t a:link, .art-blockheader .t a:visited, .art-blockheader .t a:hover,
.art-vmenublockheader .t, .art-vmenublockheader .t a, .art-vmenublockheader .t a:link, .art-vmenublockheader .t a:visited, .art-vmenublockheader .t a:hover,
.art-headline, .art-headline a, .art-headline a:link, .art-headline a:visited, .art-headline a:hover,
.art-slogan, .art-slogan a, .art-slogan a:link, .art-slogan a:visited, .art-slogan a:hover,
.art-postheader, .art-postheader a, .art-postheader a:link, .art-postheader a:visited, .art-postheader a:hover
{
font-size: 20px;
font-family: 'Times New Roman', Georgia, Times, Serif;
font-weight: normal;
font-style: normal;
line-height: 120%;
}
.art-postcontent a, .art-postcontent a:link
{
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
text-decoration: none;
color: #33AAEB;
}
.art-postcontent a:visited, .art-postcontent a.visited
{
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
text-decoration: none;
color: #9FABAD;
}
.art-postcontent a:hover, .art-postcontent a.hover
{
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
text-decoration: underline;
color: #5DBCEF;
}
.art-postcontent h1
{
color: #33AAEB;
margin: 10px 0 0;
font-size: 20px;
font-family: 'Times New Roman', Georgia, Times, Serif;
}
.art-blockcontent h1
{
margin: 10px 0 0;
font-size: 20px;
font-family: 'Times New Roman', Georgia, Times, Serif;
}
.art-postcontent h1 a, .art-postcontent h1 a:link, .art-postcontent h1 a:hover, .art-postcontent h1 a:visited, .art-blockcontent h1 a, .art-blockcontent h1 a:link, .art-blockcontent h1 a:hover, .art-blockcontent h1 a:visited
{
font-size: 20px;
font-family: 'Times New Roman', Georgia, Times, Serif;
}
.art-postcontent h2
{
color: #33AAEB;
margin: 10px 0 0;
font-size: 18px;
font-family: 'Times New Roman', Georgia, Times, Serif;
}
.art-blockcontent h2
{
margin: 10px 0 0;
font-size: 18px;
font-family: 'Times New Roman', Georgia, Times, Serif;
}
.art-postcontent h2 a, .art-postcontent h2 a:link, .art-postcontent h2 a:hover, .art-postcontent h2 a:visited, .art-blockcontent h2 a, .art-blockcontent h2 a:link, .art-blockcontent h2 a:hover, .art-blockcontent h2 a:visited
{
font-size: 18px;
font-family: 'Times New Roman', Georgia, Times, Serif;
}
.art-postcontent h3
{
color: #869698;
margin: 10px 0 0;
font-size: 16px;
font-family: 'Times New Roman', Georgia, Times, Serif;
}
.art-blockcontent h3
{
margin: 10px 0 0;
font-size: 16px;
font-family: 'Times New Roman', Georgia, Times, Serif;
}
.art-postcontent h3 a, .art-postcontent h3 a:link, .art-postcontent h3 a:hover, .art-postcontent h3 a:visited, .art-blockcontent h3 a, .art-blockcontent h3 a:link, .art-blockcontent h3 a:hover, .art-blockcontent h3 a:visited
{
font-size: 16px;
font-family: 'Times New Roman', Georgia, Times, Serif;
}
.art-postcontent h4
{
color: #B7C1C2;
margin: 10px 0 0;
font-size: 14px;
font-family: 'Times New Roman', Georgia, Times, Serif;
}
.art-blockcontent h4
{
margin: 10px 0 0;
font-size: 14px;
font-family: 'Times New Roman', Georgia, Times, Serif;
}
.art-postcontent h4 a, .art-postcontent h4 a:link, .art-postcontent h4 a:hover, .art-postcontent h4 a:visited, .art-blockcontent h4 a, .art-blockcontent h4 a:link, .art-blockcontent h4 a:hover, .art-blockcontent h4 a:visited
{
font-size: 14px;
font-family: 'Times New Roman', Georgia, Times, Serif;
}
.art-postcontent h5
{
color: #B7C1C2;
margin: 10px 0 0;
font-size: 13px;
font-family: 'Times New Roman', Georgia, Times, Serif;
}
.art-blockcontent h5
{
margin: 10px 0 0;
font-size: 13px;
font-family: 'Times New Roman', Georgia, Times, Serif;
}
.art-postcontent h5 a, .art-postcontent h5 a:link, .art-postcontent h5 a:hover, .art-postcontent h5 a:visited, .art-blockcontent h5 a, .art-blockcontent h5 a:link, .art-blockcontent h5 a:hover, .art-blockcontent h5 a:visited
{
font-size: 13px;
font-family: 'Times New Roman', Georgia, Times, Serif;
}
.art-postcontent h6
{
color: #6C7C7F;
margin: 10px 0 0;
font-size: 12px;
font-family: 'Times New Roman', Georgia, Times, Serif;
}
.art-blockcontent h6
{
margin: 10px 0 0;
font-size: 12px;
font-family: 'Times New Roman', Georgia, Times, Serif;
}
.art-postcontent h6 a, .art-postcontent h6 a:link, .art-postcontent h6 a:hover, .art-postcontent h6 a:visited, .art-blockcontent h6 a, .art-blockcontent h6 a:link, .art-blockcontent h6 a:hover, .art-blockcontent h6 a:visited
{
font-size: 12px;
font-family: 'Times New Roman', Georgia, Times, Serif;
}
header, footer, article, nav, #art-hmenu-bg, .art-sheet, .art-hmenu a, .art-vmenu a, .art-slidenavigator > a, .art-checkbox:before, .art-radiobutton:before
{
-webkit-background-origin: border !important;
-moz-background-origin: border !important;
background-origin: border-box !important;
}
header, footer, article, nav, #art-hmenu-bg, .art-sheet, .art-slidenavigator > a, .art-checkbox:before, .art-radiobutton:before
{
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ul
{
list-style-type: none;
}
ol
{
list-style-position: inside;
}
html, body
{
height: 100%;
}
body
{
padding: 0;
margin:0;
min-width: 1100px;
color: #C8CFD0;
}
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.cleared {
font: 0/0 serif;
clear: both;
}
form
{
padding: 0 !important;
margin: 0 !important;
}
table.position
{
position: relative;
width: 100%;
table-layout: fixed;
}
li h1, .art-postcontent li h1, .art-blockcontent li h1
{
margin:1px;
}
li h2, .art-postcontent li h2, .art-blockcontent li h2
{
margin:1px;
}
li h3, .art-postcontent li h3, .art-blockcontent li h3
{
margin:1px;
}
li h4, .art-postcontent li h4, .art-blockcontent li h4
{
margin:1px;
}
li h5, .art-postcontent li h5, .art-blockcontent li h5
{
margin:1px;
}
li h6, .art-postcontent li h6, .art-blockcontent li h6
{
margin:1px;
}
li p, .art-postcontent li p, .art-blockcontent li p
{
margin:1px;
}
.art-shapes
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: 0;
}
.art-slider-inner {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
.art-slidenavigator > a {
display: inline-block;
vertical-align: middle;
outline-style: none;
font-size: 1px;
}
.art-slidenavigator > a:last-child {
margin-right: 0 !important;
}
.art-slidecontainerheader {
position: relative;
width: 100%;
height: 100%;
}
.art-slidecontainerheader .art-slide-item
{
}
.art-slidecontainerheader .art-slide-item {
-webkit-transition: 1000ms ease-in-out opacity;
-moz-transition: 1000ms ease-in-out opacity;
-ms-transition: 1000ms ease-in-out opacity;
-o-transition: 1000ms ease-in-out opacity;
transition: 1000ms ease-in-out opacity;
position: absolute;
display: none;
left: 0;
top: 0;
opacity: 0;
width: 100%;
height: 100%;
}
.art-slidecontainerheader .active, .art-slidecontainerheader .next, .art-slidecontainerheader .prev {
display: block;
}
.art-slidecontainerheader .active {
opacity: 1;
}
.art-slidecontainerheader .next, .art-slidecontainerheader .prev {
width: 100%;
}
.art-slidecontainerheader .next.forward, .art-slidecontainerheader .prev.back {
opacity: 1;
}
.art-slidecontainerheader .active.forward {
opacity: 0;
}
.art-slidecontainerheader .active.back {
opacity: 0;
}
.art-slideheader0 {
background-image: url('images/slideheader0.jpg');
background-position: 0 0;
background-repeat: no-repeat;
}
.art-slideheader1 {
background-image: url('images/slideheader1.jpg');
background-position: 0 0;
background-repeat: no-repeat;
}
.art-slideheader2 {
background-image: url('images/slideheader2.jpg');
background-position: 0 0;
background-repeat: no-repeat;
}
.art-slideheader3 {
background-image: url('images/slideheader3.jpg');
background-position: 0 0;
background-repeat: no-repeat;
}
.art-slideheader4 {
background-image: url('images/slideheader4.jpg');
background-position: 0 0;
background-repeat: no-repeat;
}
.art-slideheader5 {
background-image: url('images/slideheader5.jpg');
background-position: 0 0;
background-repeat: no-repeat;
}
.art-slidenavigatorheader {
display: inline-block;
position: absolute;
direction: ltr !important;
top: 236px;
left: 0%;
z-index: 101;
line-height: 0 !important;
-webkit-background-origin: border !important;
-moz-background-origin: border !important;
background-origin: border-box !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
white-space: nowrap;
right: 0px;
}
.art-slidenavigatorheader
{
background: #96A4A6;background: rgba(150, 164, 166, 0.7);
padding:3px;
}
.art-slidenavigatorheader > a
{
background: #525F60;background: linear-gradient(top, #596769 0, #657476 20%, #596769 50%, #505C5E 80%, #596769 100%) no-repeat;background: -webkit-linear-gradient(top, #596769 0, #657476 20%, #596769 50%, #505C5E 80%, #596769 100%) no-repeat;background: -moz-linear-gradient(top, #596769 0, #657476 20%, #596769 50%, #505C5E 80%, #596769 100%) no-repeat;background: -o-linear-gradient(top, #596769 0, #657476 20%, #596769 50%, #505C5E 80%, #596769 100%) no-repeat;background: -ms-linear-gradient(top, #596769 0, #657476 20%, #596769 50%, #505C5E 80%, #596769 100%) no-repeat;background: linear-gradient(top, #596769 0, #657476 20%, #596769 50%, #505C5E 80%, #596769 100%) no-repeat;-svg-background: linear-gradient(top, #596769 0, #657476 20%, #596769 50%, #505C5E 80%, #596769 100%) no-repeat;
-webkit-border-radius:30%;-moz-border-radius:30%;border-radius:30%;
margin:0 10px 0 0;
width: 7px;
height: 7px;
}
.art-slidenavigatorheader > a.active
{
background: #525F60;background: linear-gradient(top, #424C4D 0, #5B6A6B 40%, #5E6C6E 50%, #5B6A6B 60%, #424C4D 100%) no-repeat;background: -webkit-linear-gradient(top, #424C4D 0, #5B6A6B 40%, #5E6C6E 50%, #5B6A6B 60%, #424C4D 100%) no-repeat;background: -moz-linear-gradient(top, #424C4D 0, #5B6A6B 40%, #5E6C6E 50%, #5B6A6B 60%, #424C4D 100%) no-repeat;background: -o-linear-gradient(top, #424C4D 0, #5B6A6B 40%, #5E6C6E 50%, #5B6A6B 60%, #424C4D 100%) no-repeat;background: -ms-linear-gradient(top, #424C4D 0, #5B6A6B 40%, #5E6C6E 50%, #5B6A6B 60%, #424C4D 100%) no-repeat;background: linear-gradient(top, #424C4D 0, #5B6A6B 40%, #5E6C6E 50%, #5B6A6B 60%, #424C4D 100%) no-repeat;-svg-background: linear-gradient(top, #424C4D 0, #5B6A6B 40%, #5E6C6E 50%, #5B6A6B 60%, #424C4D 100%) no-repeat;
-webkit-border-radius:30%;-moz-border-radius:30%;border-radius:30%;
border:1px solid #3D4648;
margin:0 10px 0 0;
width: 7px;
height: 7px;
}
.art-slidenavigatorheader > a:hover
{
background: #B65302;
-webkit-border-radius:30%;-moz-border-radius:30%;border-radius:30%;
border:1px solid #ED6C02;
margin:0 10px 0 0;
width: 7px;
height: 7px;
}
.art-header
{
margin:0 auto;
height: 250px;
background-image: none;
background-position: 0 0;
background-repeat: no-repeat;
position: relative;
width: 1100px;
z-index: auto !important;
}
.responsive .art-header
{
background-image: none;
background-position: center center;
}
.art-header>.widget
{
position:absolute;
z-index:101;
}
.art-nav
{
background: #282E2F;
background: transparent;
border-top:1px solid #96A4A6;
border-bottom:2px solid #96A4A6;
padding:6px;
margin:2px auto 0;
position: relative;
z-index: 100;
font-size: 0;
text-align: left;
}
ul.art-hmenu a, ul.art-hmenu a:link, ul.art-hmenu a:visited, ul.art-hmenu a:hover
{
outline: none;
position: relative;
z-index: 11;
}
ul.art-hmenu, ul.art-hmenu ul
{
display: block;
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
}
ul.art-hmenu li
{
position: relative;
z-index: 5;
display: block;
float: left;
background: none;
margin: 0;
padding: 0;
border: 0;
}
ul.art-hmenu li:hover
{
z-index: 10000;
white-space: normal;
}
ul.art-hmenu:after, ul.art-hmenu ul:after
{
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
ul.art-hmenu, ul.art-hmenu ul
{
min-height: 0;
}
ul.art-hmenu
{
display: inline-block;
vertical-align: middle;
}
.art-nav:before
{
content:' ';
}
.desktop-nav.art-nav{
width: 1100px;
padding-left: 6px;
padding-right: 6px;
}
.art-hmenu-extra1
{
position: relative;
display: block;
float: left;
width: auto;
height: auto;
background-position: center;
}
.art-hmenu-extra2
{
position: relative;
display: block;
float: right;
width: auto;
height: auto;
background-position: center;
}
.art-hmenu
{
float: left;
}
.art-menuitemcontainer
{
margin:0 auto;
}
ul.art-hmenu>li {
margin-left: 9px;
}
ul.art-hmenu>li:first-child {
margin-left: 4px;
}
ul.art-hmenu>li:last-child, ul.art-hmenu>li.last-child {
margin-right: 4px;
}
Olá lufran2.2.
|
Bem-vindo à nossa comunidade!!!
Pra começar precisamos do endereço do seu fórum
A não esqueça de por os códigos nas tags
- Código:
[code][/code]
Até mais.
Re: Layout ajustável a tela?
|
Acenda sua "Folha de estilo CSS"
Adicione o código abaixo no começo de sua CSSPainel de Controle Visualização Imagens e Cores Cores Folha de estilo CSS
Código:
Vermelho > Vai diminuindo até ficar do tamanho que desejar.#wrap {
width: 98% !important;
}
e Validar.
Até
Convidado- Convidado
Re: Layout ajustável a tela?
PabloW. escreveu:Saudações!
Seja bem-vindo ao nosso fórum de Suporte! Como acabou de se inscrever, veja aqui alguns links importantes a saber:
Acenda sua "Folha de estilo CSS"Adicione o código abaixo no começo de sua CSSPainel de Controle Visualização Imagens e Cores Cores Folha de estilo CSS
Código:Vermelho > Vai diminuindo até ficar do tamanho que desejar.#wrap {
width: 98% !important;
}
e Validar.
Até
Não funcionou veja neste site onde faço o teste, e se tiver um tablet acesse o endereço do meu site e perceba que ele não aumenta o zomm e nem diminui, Ou seja ele não se ajusta na tela do tablet. Não quero responsivo que ele se ajusta e deforma tudo quero só que ele fica a justavel a tela do tablet.
Endereço que eu uso para ver se tá bom.
http://quirktools.com/screenfly/
Digite o endereço do site ai e vera ele não acompanha.
Endereço do meu site: www.luisantonio13.com.br
Re: Layout ajustável a tela?
Bom dia,
A tela não se ajusta pois há um tamanho mínimo para que o fórum mantenha sua estrutura sem ser deformado, o que pode tentar fazer é remover qualquer atributo que limite largura no seu CSS e testá-lo apenas com a porcentagem descrita no Painel de Controle, contudo há o risco de deformar o slide no topo do fórum.
Cordialmente,
The Boss
A tela não se ajusta pois há um tamanho mínimo para que o fórum mantenha sua estrutura sem ser deformado, o que pode tentar fazer é remover qualquer atributo que limite largura no seu CSS e testá-lo apenas com a porcentagem descrita no Painel de Controle, contudo há o risco de deformar o slide no topo do fórum.
Cordialmente,
The Boss
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos