Pagina Centrada com CSS sem scroll ate 800x600
Não use nenhum elemento HTML (figuras, tabelas, etc...) com largura superior a 750px.
Este é um texto qualquer destinado a demonstrar a obtenção da dica de contexto com uso das CSS CSS Sigla para a palavra inglesa "Cascading Style Sheet" foi traduzido para Folhas de Estilo em Cascata .Uma técnica de projetar páginas Web, separando conteúdo da apresentação. e com isto fornecer a você mais uma ferramenta para construção de suas páginas web
Este é o parágrafo seguinte no fluxo normal do documento web..bla..bla..bla...
posicionamento:
diversos:
table {
text-align: left;
}
H1 {font: 16px Arial; color: #000000; font-weight: bold; margin: 0px;}
H2 {font: 15px Arial; color: #000000; font-weight: bold; margin: 0px;}
H3 {font: 13px tahoma,arial,helvetica; color: #000000; font-weight: bold; margin: 0px;}
H4 {font: 12px tahoma,arial,helvetica; color: #000000; font-weight: bold; margin: 0px;}
H5 {font: 11px tahoma,arial,helvetica; color: #000000; font-weight: bold; margin: 0px;}
H6 {font: 10px tahoma,arial,helvetica; color: #000000; font-weight: bold; margin: 0px;}
A {
COLOR: #0000ff
}
A:link {
COLOR: #2b66a7; TEXT-DECORATION: none
}
A:visited {
COLOR: #2b66a7; TEXT-DECORATION: none
}
A:active {
COLOR: #2b66a7; TEXT-DECORATION: none
}
A:hover {
BORDER-TOP: #eb0000 1px dotted; COLOR: #eb0000; BORDER-BOTTOM: #eb0000 1px dotted
}
.arrow {
FONT-SIZE: 9px; COLOR: #000099; FONT-FAMILY: Arial,Helvetica,sans-serif
}
a.devlink2 { font: 11px tahoma,arial,helvetica; color: #000000; text-decoration: none; padding: 0px;}
a.devlink2:visited { font: 11px tahoma,arial,helvetica; color: #000000; text-decoration: none; font-weight: normal; }
a.devlink2:hover { font: 11px tahoma,arial,helvetica; color: #000000; text-decoration: underline; font-weight: normal; }
input,select,textarea { padding:1px; border:1px solid #969696; font:11px tahoma,arial,helvetica; }
/* text classes */
.text { font: 12px tahoma,arial,helvetica; color: #000000;}
.text10 { font: 10px tahoma,arial,helvetica; color: #000000; font-weight: normal; }
.text11 { font: 11px tahoma,arial,helvetica; color: #000000; font-weight: normal; }
.text11b { font: 11px tahoma,arial,helvetica; color: #000000; font-weight: bold; }
.text12bb { font: 12px tahoma,arial,helvetica; color: #004891; font-weight: bold; }
.text13b { font: 13px tahoma,arial,helvetica; color: #000000; font-weight: bold; }
.text16b { font: 16px Arial; color: #000000; font-weight: bold; }
.text18bb { font: 18px verdana,arial,helvetica; color: #2B6EBB; font-weight: bold; }
.text18b { font: 18px verdana,arial,helvetica; color: #000000; font-weight: bold; }
/* Menu bar */
.menuBarContainer {
border:1px solid #999;
background-color:#f3f3f3;
width:100% !important;
height:15px !important;
/* Fix broken box model for IE5/Win, IE6/Win ignores the following rules */
width /**/:100%;
height /**/:17px;
}
.menuButtonLeft {
margin-right:1px;
float:left;
border-right:1px solid #999;
width:159px !important;
/* Fix broken box model for IE5/Win, IE6/Win ignores the following rules */
width /**/:160px;
}
.menuButtonMiddle {
margin-right:1px;
float:left;
border-left:1px solid #999;
border-right:1px solid #999999;
width:196px !important;
/* Fix broken box model for IE5/Win, IE6/Win ignores the following rules */
width /**/:198px;
}
.menuButtonRight {
border-left:1px solid #999;
float:left;
width:198px !important;
/* Fix broken box model for IE5/Win, IE6/Win ignores the following rules */
width /**/:199px;
}
.footerButtonLeft {
margin-right:1px;
float:left;
border-right: 1px solid #999;
width:110px !important;
/* Fix broken box model for IE5/Win, IE6/Win ignores the following rules */
width /**/:111px;
}
.footerButtonMiddle {
margin-right:1px;
float:left;
border-left:1px solid #999;
border-right:1px solid #999;
width:104px !important;
/* Fix broken box model for IE5/Win, IE6/Win ignores the following rules */
width /**/:106px;
}
.footerButtonRight {
float:left;
border-left:1px solid #999;
width:110px !important;
/* Fix broken box model for IE5/Win, IE6/Win ignores the following rules */
width /**/:111px;
}
.menuBar {
font:10px verdana;
text-align: center;
border-left: 1px solid #ffffff;
border-top: 1px solid #ffffff;
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
color: #666666;
cursor: pointer;
background-color:#f3f3f3;
height:13px !important;
/* Fix broken box model for IE5/Win, IE6/Win ignores the following rules */
height /**/:15px;
}
.menuBarOver {
padding-left: 2px;
padding-top: 1px;
text-align: center;
font: 10px verdana;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #dddddd;
border-top: 1px solid #dddddd;
color: #666666;
cursor: pointer;
background-color:#f3f3f3;
height:12px !important;
/* Fix broken box model for IE5/Win, IE6/Win ignores the following rules */
height /**/:14px;
}
a.menuBarLink { text-decoration: none; color: #666666; }
a:hover.menuBarLink { text-decoration: none; color: #666666; }
a:visited.menuBarLink { text-decoration: none; color: #666666; }
/* Gray title box */
.titlebox {
background-color: #eeeeee;
border: 1px solid #969696;
padding: 2px;
padding-left: 10px;
font: 11px Tahoma, Verdana, Arial;
color: #666666;
font-weight: bold;
font-style: normal;
}
/* Gray title box with image on left side */
.titleboximage {
background-color: #eeeeee;
border: 1px solid #969696;
padding: 2px;
font: 10px Tahoma, Verdana, Arial;
color: #666666;
font-weight: bold;
font-style: normal;
background-image:url("http://images.bravenet.com/common/images/bluechip.gif");
background-repeat: no-repeat;
}
.optitle {
background-color: #eeeeee;
border: 1px solid #969696;
padding: 2px;
padding-left: 10px;
margin-top: 23px;
margin-bottom: 5px;
font: bold 11px Tahoma, Verdana, Arial;
color: #666666;
}
.opdesc {
font: 11px tahoma,arial,helvetica;
color: #000000;
font-weight: normal;
padding-bottom: 15px;
padding-left: 5px;
padding-top: 15px;
}
.opholder {
font: 11px tahoma,arial,helvetica;
color: #000000;
font-weight: normal;
padding-left: 20px;
}
.opend {
background-color: #eeeeee;
border: 1px solid #969696;
padding: 1px;
margin-top: 20px;
margin-bottom: 10px;
}
.cssbluebutton {
font: 10px tahoma,arial,helvetica;
font-weight: normal;
cursor: pointer;
text-decoration: none;
text-align: center;
background-color: #eeeeee;
border: 1px solid #aaaaaa;
width: 50px;
padding: 2px;
cursor: hand;
}
.cssbluebuttonDown {
font: 10px tahoma,arial,helvetica;
font-weight: normal;
text-decoration: none;
text-align: center;
background-color: #dddddd;
border: 1px solid #444444;
width: 50px;
cursor: pointer;
padding: 2px;
cursor: hand;
}
.cssbluebutton a, .cssbluebutton a:visited, .cssbluebuttonDown a {
color: #000000; text-decoration: none;
}
.formbutton {
border: 1px solid #333333;
height: 18px;
font: 11px tahoma,arial,helvetica;
background-color: #eeeeee;
background-image: url('http://www.basefile.com/images/button_shadow.gif');
}
.input_shadow
{
background: #fff url('http://www.basefile.com/images/inputbg.jpg') top left;
height: 16px;
padding: 3px 0px 0px 5px;
border: 1px solid #999;
border-top-width: 0px;
margin-top: -1px;
/* Fix for IE - IE6/Win ignores the following rules */
margin-top /**/:0px;
}
.formbutton_shadow {
cursor: pointer;
border: 0px solid #333333;
height: 24px;
margin: 0px;
padding: 0px 9px 5px 0px;
font: 11px tahoma,arial,helvetica;
background: #eee url('http://www.basefile.com/images/button.jpg') bottom right;
}
.input_shadow
{
background: #fff url('http://www.basefile.com/images/inputbg.jpg') top left;
height: 16px;
padding: 3px 0px 0px 5px;
border: 1px solid #999;
border-top-width: 0px;
margin-top: -1px;
/* Fix for IE - IE6/Win ignores the following rules */
margin-top /**/:0px;
}
.sidebarcontent {
font: 12px tahoma,arial,helvetica;
background-color: #f3f3f3;
}
.sidebartitle {
font: 10px verdana,arial,helvetica;
font-weight: bold;
text-align: left;
padding: 2px;
padding-left: 8px;
padding-bottom: 3px;
}
.sidebartitle_grey {
color: #000000;
border-top: 0px;
border-color: #999999;
border-bottom: 0px;
background-color: #f3f3f3;
padding-left: 5px;
}
.dropMenu {
border-bottom: 1px solid #999999;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
position: relative;
background-color: #fafafa;
width: 166px;
text-align: left;
background-repeat: no-repeat;
background-image: url('http://images.bravenet.com/common/images/dropdown_bottom.gif');
background-position: bottom right;
padding-top: 3px;
padding-bottom: 3px;
-moz-opacity: .80;
filter: alpha(opacity=95);
}
.dropMenuItem {
font: 11px tahoma;
background-color: #fafafa;
border: 1px solid #fafafa;
padding-left: 19px;
margin-left: 3px;
margin-right: 3px;
}
.dropMenuItemOver {
font: 11px tahoma;
background-color: #e4ebf9;
border: 1px solid #557fd7;
padding-left: 19px;
margin-left: 3px;
margin-right: 3px;
}
a.dropMenuLink { color: #444444; text-decoration: none;}
a:visited.dropMenuLink { color: #444444; text-decoration: none;}
a:hover.dropMenuLink { color: #444444; text-decoration: none; }
a.bluelink { font: 11px Tahoma, arial, helvetica; color: #004891; font-weight: bold; text-decoration: none; }
a.bluelink:link { font: 11px Tahoma, arial, helvetica; color: #004891; font-weight: bold; text-decoration: none; }
a.bluelink:visited { font: 11px Tahoma, arial, helvetica; color: #004891; font-weight: bold; text-decoration: none; }
a.bluelink:hover { font: 11px Tahoma, arial, helvetica; color: #004891; font-weight: bold; text-decoration: underline;}
a.bluelink2 {font: 11px Tahoma, arial, helvetica; color: #004891; text-decoration: none;}
a.bluelink2:link {font: 11px Tahoma, arial, helvetica; color: #004891; text-decoration: none;}
a.bluelink2:visited {font: 11px Tahoma, arial, helvetica; color: #004891; text-decoration: none;}
a.bluelink2:hover {font: 11px Tahoma, arial, helvetica; color: #004891; text-decoration: underline;}
.main_service_list
{
font: 11px tahoma,arial,helvetica;
background-color: #ffffff;
cursor: hand;
padding-bottom: 1px;
padding-top: 1px;
padding-left: 5px;
border: 0px solid #ffffff;
}
.main_service_list_over
{
font: 11px tahoma,arial,helvetica;
background-color: #e4ebf9;
cursor: hand;
padding-left: 4px;
border: 1px solid #557fd7;
}
/* general text indent used throughout */
.textindent {
padding-top: 5px;
}
.pageselect {
font: bold 11px tahoma,arial,helvetica;
color: #0377FD;
}
.code3 {
background-color: #F3F6FB;
border: 1px solid #B3B3B3;
font: 11px Tahoma, Verdana, Arial;
font-weight: normal;
font-style: normal;
color: #222222;
text-align: left;
width: 445px;
height:200px;
}
.sky {
background-color: #eeeeee;
width: 162px;
vertical-align: top;
text-align: center;
border: 1px solid silver;
padding-top:15px;
padding-bottom:15px;
}
.mainbgcolor
{
background-color:#2B6EBB;
color:#ffffff;
}
.signup_label
{
font: bold 12px verdana,arial,helvetica;
color: #004891;
width: 120px;
float: left;
text-align: right;
padding-right: 10px;
margin-top: 5px;
}
.signup_input
{
margin-top: 5px;
}
.hostingpackages
{
padding-left: 30px;
list-style-image: url(http://images.bravenet.com/common/images/webhosting/lightbullet.gif);
font: 12px arial,helvetica;
color: #000000;
font-weight: normal;
margin: 0px;
}
#selectionlist
{
margin : 0px;
padding : 0px;
}
#selectionlist li
{
list-style-type : none;
text-align : center;
width : 185px;
float : left;
margin : 3px;
padding : 0px;
}
#selectionlist li a
{
font : bold 12px Tahoma;
color : #555;
display : block;
background-color : #f1f1f1;
border : 1px solid #999;
text-decoration : none;
padding : 5px;
}
#selectionlist li a:hover
{
background-color : #E9EEFA;
border-color : #5A80D8;
}
.errorBar
{
margin: 2px 0px 2px 0px;
padding: 4px;
border: 1px solid #999;
background-color: #ffffee;
color: #f00;
}
.sponsorlinks { width: 240px; margin-left: 10px; margin-top: 5px; text-align: left; }
.sponsorlinks_title { font:bold 10px tahoma,Verdana,Helvetica,Sans Serif; color: #ffffff; }
.sponsorlinks a { font: 10px tahoma,verdana,helvetica; color: #004891; text-decoration: underline;}
.sponsorlinks a:visited { font: 10px tahoma,verdana,helvetica; color: #004891; text-decoration: underline; font-weight: normal; }
.sponsorlinks a:hover { font: 10px tahoma,helvetica; color: #004891;text-decoration: underline; font-weight: normal; }
a.sponsorlinks_desc { font: 10px tahoma,arial,helvetica; color: #000000; text-decoration: none; font-weight: normal;}
a.sponsorlinks_desc:visited { font: 10px tahoma,arial,helvetica; color: #000000; text-decoration: none; font-weight: normal;}
a.sponsorlinks_desc:hover { font: 10px tahoma,arial,helvetica; color: #000000;text-decoration: none; font-weight: normal; }
.tblSea {
BORDER-RIGHT: #669999 1px solid; BORDER-TOP: #669999 1px solid; BORDER-LEFT: #669999 1px solid; BORDER-BOTTOM: #669999 1px solid
}
.celSea {
BACKGROUND-COLOR: #669999
}
.tblBro {
BORDER-RIGHT: #99cccc 1px solid; BORDER-TOP: #99cccc 1px solid; BORDER-LEFT: #99cccc 1px solid; BORDER-BOTTOM: #99cccc 1px solid
}
.celBro {
BACKGROUND-COLOR: #ccffcc
}
.tblMain {
BORDER-RIGHT: #336699 1px solid; BORDER-TOP: #336699 1px solid; BORDER-LEFT: #336699 1px solid; BORDER-BOTTOM: #336699 1px solid
}
.celMain {
BACKGROUND-COLOR: #99cc66
}
.tblSponsor {
BORDER-RIGHT: #ff6600 1px solid; BORDER-TOP: #ff6600 1px solid; BORDER-LEFT: #ff6600 1px solid; BORDER-BOTTOM: #ff6600 1px solid
}
.celSponsor {
BACKGROUND-COLOR: #ff6600
}
.tblMsc {
BORDER-RIGHT: #cccccc 1px solid; BORDER-TOP: #cccccc 1px solid; BORDER-LEFT: #cccccc 1px solid; BORDER-BOTTOM: #cccccc 1px solid
}
.celMsc {
BACKGROUND-COLOR: #eeeeee
}
.celWhite {
BACKGROUND-COLOR: #ffffff
}