2015-11-13 67 views
0

我是這些語言的新手,我仍然有一些難以同化的東西,至於我,我會幫助更改我在互聯網上找到的代碼示例。我的寬度頁面比我的瀏覽器大

現在我在我的項目中遇到了兩個困難。

1我有一個小小的空白,我看不到它在代碼中的位置。

2生成的頁面寬度大於瀏覽器頁面的寬度。

我的代碼

/************************************************************************ 
 
*                  * 
 
*     Sinorcaish Screen-based Style Sheet     * 
 
*     Copyright (C) 2004-07, John Zaitseff     * 
 
*                  * 
 
************************************************************************/ 
 

 
/* Author: John Zaitseff <[email protected]> 
 
    Version: 1.3 
 

 
    $Id: sinorcaish-screen.css 189 2007-03-22 01:35:44Z john $ 
 

 
    This file provides the Sinorcaish style sheet for screen-based user 
 
    agents (ie, for ordinary Web browsers). This file conforms to the 
 
    Cascading Style Sheets 2.1 specification. 
 

 
    The design of Sinorcaish is influenced by Sinorca (available from the 
 
    Open Source Web Design site, http://www.oswd.org/), which in turn was 
 
    based on the Acronis company web site (http://www.acronis.com/). You 
 
    can find more information about this design from its home page on the 
 
    ZAP Group web site, http://www.zap.org.au/documents/styles/sinorcaish/. 
 

 
    This file may be redistributed and/or modified on the condition that 
 
    the original copyright notice is retained. 
 
*/ 
 

 

 
/********** Global Styles **********/ 
 

 
\t \t \t \t /* The global font size is set to 90% as */ 
 
\t \t \t \t /* most browsers' normal font size is too */ 
 
\t \t \t \t /* large, at least when using Verdana  */ 
 
html,body { 
 
    font-family:  Verdana, "DejaVu Sans", "Bitstream Vera Sans", "Lucida Sans", Arial, Helvetica, sans-serif; 
 
    font-size:  90%; \t /* Allow IE/Win to resize the document */ 
 
    color:   black; 
 
    background:  white; 
 
    margin:   0; 
 
    padding:   0; 
 
    border:   none; 
 
    w 
 
} 
 

 
.hidden { \t \t \t /* Used for content that should be displayed */ 
 
\t \t \t \t /* by non-stylesheet-aware browsers   */ 
 
    display:   none !important; 
 
} 
 

 
.notprinted { \t \t \t /* Used for content that should not be */ 
 
} \t \t \t \t /* printed to paper     */ 
 

 

 
/* Headings */ 
 

 
h1, \t \t \t \t /* Headings (H1-H6) should only be used in */ 
 
h2, \t \t \t \t /* the main content area     */ 
 
h3 { 
 
    font-weight:  bold; 
 
    text-align:  left; 
 
    margin:   0.5em 0 0 0; 
 
    padding:   0; 
 
} 
 

 
h4, 
 
h5, 
 
h6 { 
 
    font-weight:  bold; 
 
    text-align:  left; 
 
    margin:   1.25em 0 0 0; 
 
    padding:   0; 
 
} 
 

 
h1 { font-size:  175% } 
 
h2 { font-size:  145% } 
 
h3 { font-size:  120% } 
 
h4 { font-size:  105% } 
 
h5 { font-size:  80% } 
 
h6 { font-size:  65% } 
 

 

 
/* Anchors */ 
 

 
a:link { 
 
    text-decoration: none; 
 
    color:   #0066CC; 
 
    background:  transparent; 
 
} 
 

 
a:visited { 
 
    text-decoration: none; 
 
    color:   #003399; 
 
    background:  transparent; 
 
} 
 

 
a:hover, 
 
a:active { 
 
    text-decoration: underline; 
 
} 
 

 

 
/* Inline elements and classes */ 
 

 
\t \t \t \t /* This style sheet assumes B, BIG, EM, I, */ 
 
\t \t \t \t /* SMALL, STRONG, SUB and SUP are defined */ 
 
\t \t \t \t /* by the browser as per the HTML4 sample */ 
 
\t \t \t \t /* style sheet.       */ 
 
code, 
 
kbd, 
 
samp, 
 
tt { 
 
    font-family:  "Courier New", Courier, monospace; 
 
    font-size:  115%; \t /* Courier tends to be a little too small */ 
 
    line-height:  1.0; \t /* Otherwise lines tend to spread out */ 
 
} 
 

 
kbd, 
 
code.markup, \t \t \t /* HTML/CSS markup */ 
 
span.markup, \t \t \t /* Alternative form for HTML/CSS markup */ 
 
.title { \t \t \t /* Title in floating boxes/left sidebar */ 
 
    font-weight:  bolder; 
 
} 
 

 
abbr, 
 
acronym { 
 
    font:   inherit; \t /* Don't use small-caps, etc. */ 
 
} 
 

 
.tooltip { 
 
    cursor:   help; 
 
    border-bottom: 1px dotted #CCCCCC; 
 
} 
 

 
abbr[title], 
 
acronym[title] { 
 
    cursor:   help; 
 
    border-bottom: 1px dotted #CCCCCC; 
 
} 
 

 
cite, 
 
dfn, 
 
var, 
 
.fn, \t \t \t \t /* Filename */ 
 
.url, \t \t \t \t /* Uniform Resource Locator */ 
 
.email { \t \t \t /* E-mail address */ 
 
    font-style:  italic; 
 
} 
 

 
.program, \t \t \t /* Command-line name of a computer program */ 
 
.window, \t \t \t /* Window or dialog box name */ 
 
.menu, \t \t \t \t /* Menu item in a computer program */ 
 
.gui, \t \t \t \t /* Generic GUI element in a computer program */ 
 
.key { \t \t \t \t /* Keypress in a computer program */ 
 
    font-weight:  bolder; 
 
} 
 

 
.clearboxes { \t \t \t /* Clear navboxes and floatboxes */ 
 
    clear:   right; 
 
} 
 

 
.unicode { 
 
    font-family:  "Arial Unicode MS", "Lucida Sans Unicode", Verdana, "DejaVu Sans", "Bitstream Vera Sans", "Lucida Sans", Arial, Helvetica, sans-serif; 
 
} 
 

 

 
/* Block-inline elements and classes */ 
 

 
img { 
 
    vertical-align: baseline; 
 
    margin:   0; 
 
    padding:   0; 
 
    border:   none; 
 
} 
 

 
img.icon16 { \t \t \t /* For 16x16 file-type icons */ 
 
    vertical-align: -2px; 
 
} 
 

 
del, 
 
del * { \t \t \t \t /* Required for Mozilla */ 
 
    text-decoration: line-through; 
 
} 
 

 
ins, 
 
ins * { \t \t \t \t /* Required for Mozilla */ 
 
    text-decoration: underline; 
 
} 
 

 
.floatleft { \t \t \t /* Left-floating images and spans */ 
 
    margin:   0.5em 1.5em 0.5em 0; 
 
    float:   left; 
 
} 
 

 
.floatright { \t \t \t /* Right-floating images and spans */ 
 
    margin:   0.5em 0 0.5em 1.5em; 
 
    float:   right; 
 
} 
 

 
.nowrap { 
 
    white-space:  nowrap; 
 
} 
 

 

 
/* Block elements */ 
 

 
p { 
 
    margin:   1em 0; 
 
    padding:   0; 
 
} 
 

 
blockquote { \t \t \t /* Should only be used in main content area, */ 
 
\t \t \t \t /* floating boxes or left sidebar.   */ 
 
    margin:   1em 2.5em; 
 
    padding:   0; 
 
} 
 

 
pre { \t \t \t \t /* Should only be used in main content area */ 
 
\t \t \t \t /* and floating boxes.      */ 
 
    font-family:  "Courier New", Courier, monospace; 
 
    font-size:  95%; \t /* Courier tends to be a little too small */ 
 
    line-height:  1.2; 
 
    margin:   1em 2.5em; 
 
    padding:   0; 
 
} 
 

 
pre code, 
 
pre kbd, 
 
pre samp, 
 
pre tt { 
 
    font-size:  100%; \t /* PRE is already enlarged above */ 
 
    line-height:  1.2; \t /* Use same value as for PRE above */ 
 
} 
 

 
hr { 
 
    color:   #999999; 
 
    background:  transparent; 
 
    height:   1px; \t /* Required for IE/Win */ 
 
    margin:   0; 
 
    padding:   0; 
 
    border-color: #999999; 
 
    border-width: 1px; 
 
    border-style: none none solid none; 
 
} 
 

 
hr.lighter { \t \t \t /* Warning: not printed out on paper */ 
 
    color:   #F0F0F0; 
 
    background:  transparent; 
 
    border-color: #F0F0F0; 
 
} 
 

 

 
/* Lists */ 
 

 
ol { 
 
    list-style:  decimal outside; 
 
    margin:   1em 0; 
 
    padding:   0 0 0 2.5em; 
 
} 
 

 
ol.alpha { 
 
    list-style-type: lower-alpha; 
 
} 
 

 
ol.number { 
 
    list-style-type: decimal; 
 
} 
 

 
ul { 
 
    list-style:  square outside; 
 
    margin:   1em 0; 
 
    padding:   0 0 0 2.5em; 
 
} 
 

 
ol ol, 
 
ol ul, 
 
ul ol, 
 
ul ul { 
 
    margin-top:  0; 
 
    margin-bottom: 0; 
 
} 
 

 
ol ul, \t \t \t \t /* Override possible browser styles */ 
 
ol ol ul, 
 
ol ul ul, 
 
ul ul, 
 
ul ol ul, 
 
ul ul ul { 
 
    list-style:  square outside; 
 
} 
 

 
li { 
 
    margin:   0; 
 
    padding:   0; 
 
} 
 

 
dl { 
 
    margin:   1em 0; 
 
    padding:   0; 
 
} 
 

 
dt { 
 
    font:   inherit; \t /* Don't make the text bold by default */ 
 
    margin:   1em 0 0.25em 0; 
 
    padding:   0; 
 
} 
 

 
dd { 
 
    margin:   0 0 1em 2.5em; 
 
    padding:   0; 
 
} 
 

 

 
/* Tables */ 
 
\t \t \t \t /* Tables should never be used for visual */ 
 
\t \t \t \t /* formatting: that is the role of CSS! */ 
 

 
table.simple { 
 
    color:   inherit; 
 
    background:  inherit; \t /* Don't make tables transparent */ 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
    empty-cells:  show; 
 
    margin:   0.5em 2.5em; 
 
    padding:   0; 
 
    border:   1px solid #999999; 
 
} 
 

 
table.simple caption { 
 
    text-align:  center; 
 
    caption-side: top; 
 
    margin:   0 2.5em 0.75em; 
 
    padding:   0; 
 
    border:   none; 
 
} 
 

 
table.simple td, 
 
table.simple th { 
 
    text-align:  center; 
 
    vertical-align: middle; 
 
    margin:   0; 
 
    padding:   0.25em 0.5em; 
 
    border:   1px solid #999999; 
 
} 
 

 
table.simple th, 
 
table.simple td.highlight, 
 
table.simple th.highlight { 
 
    font-weight:  bold; 
 
    color:   inherit; 
 
    background:  #F0F0F0; 
 
} 
 

 
table.simple td.lighter, 
 
table.simple th.lighter { 
 
    color:   inherit; 
 
    background:  #F8F8F8; 
 
} 
 

 
table.simple td.left, 
 
table.simple th.left { 
 
    text-align:  left; 
 
} 
 

 
table.simple td.center, 
 
table.simple th.center { 
 
    text-align:  center; 
 
} 
 

 
table.simple td.right, 
 
table.simple th.right { 
 
    text-align:  right; 
 
} 
 

 

 
/* Forms */ 
 

 
form { 
 
    margin:   1em 0; 
 
    padding:   0; 
 
    border:   none; 
 
} 
 

 
input, 
 
button, 
 
select, 
 
fieldset, 
 
legend { 
 
    font-family:  Verdana, "DejaVu Sans", "Bitstream Vera Sans", "Lucida Sans", Arial, Helvetica, sans-serif; 
 
    font-size:  95%; 
 
    color:   black; 
 
    background:  inherit; 
 
    vertical-align: middle; 
 
} 
 

 
textarea { 
 
    font-family:  "Courier New", Courier, monospace; 
 
    font-size:  100%; 
 
    color:   black; 
 
    background:  inherit; 
 
    vertical-align: middle; 
 
} 
 

 
fieldset { 
 
    font-size:  100%; 
 
    margin:   1em 0; 
 
    border:   1px solid #999999; 
 
} 
 

 
legend { 
 
    font-size:  100%; 
 
    margin:   0 0.5em; 
 
    padding:   0 0.25em; 
 
    border:   none; 
 
} 
 

 
table.formtable { 
 
    color:   inherit; 
 
    background:  inherit; 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
    empty-cells:  show; 
 
    margin:   0; 
 
    padding:   0; 
 
    border:   none; 
 
} 
 

 
table.formtable td, 
 
table.formtable th { 
 
    text-align:  justify; 
 
    vertical-align: middle; 
 
    margin:   0; 
 
    padding:   0.25em 0.5em; 
 
    border:   none; 
 
} 
 

 
table.formtable th { 
 
    text-align:  center; 
 
    font-weight:  bold; 
 
} 
 

 
table.formtable td.label, 
 
table.formtable th.label { 
 
    text-align:  right; 
 
    vertical-align: top; 
 
} 
 

 
table.formtable td.vertspace, 
 
table.formtable th.vertspace { 
 
    empty-cells:  show; 
 
    margin:   0; 
 
    padding:   0.5em 0; 
 
    height:   1em; \t /* Required for IE/Win */ 
 
} 
 

 
table.formtable fieldset { 
 
    margin:   0; 
 
} 
 

 
table.formtable fieldset td, 
 
table.formtable fieldset th { 
 
    margin:   0.25em 0.5em; 
 
} 
 

 
.reqfield { 
 
    color:   red; 
 
    background:  transparent; 
 
    font-weight:  bolder; 
 
} 
 

 
.info { 
 
    color:   gray; 
 
    background:  transparent; 
 
    font-size:  90%; 
 
} 
 

 

 
/* The following HTML elements should NOT be used in documents using this 
 
    style sheet: 
 

 
     address - use the #footer style instead 
 
     q  - use &ldquo; and &rdquo; instead 
 
*/ 
 

 

 
/********** Styles for Main Content **********/ 
 

 
#main { 
 
    text-align:  justify; 
 
    line-height:  1.5; 
 
    color:   black; 
 
    background:  white; 
 
    margin:   0 0 0 12.5em; 
 
    padding:   0.1em 1.5em 0.5em 1em; 
 
    border-left:  1px solid #999999; 
 
    width: 100%; 
 
} 
 

 
#main h1 { \t \t \t /* Should be used once, following navhead */ 
 
    color:   #999999; 
 
    background:  transparent; 
 
    margin:   0 0 0.5em 0; 
 
} 
 

 
#main .highlight { \t \t /* Highlight box (for warnings, etc) */ 
 
    color:   inherit; 
 
    background:  #F0F0F0; 
 
    margin:   1em 0; 
 
    padding:   1em 2.5em; 
 
    border:   1px solid #999999; 
 
} 
 

 
#main .totop { \t \t \t /* For "Top ^" lines in FAQs, etc */ 
 
    font-size:  90%; 
 
    text-align:  right; 
 
    margin:   -0.75em 0 1em 0; 
 
    padding:   0 0 0.25em 0; 
 
    border-bottom: 1px solid #F0F0F0; 
 
} 
 

 
#main table.simple td.highlight, /* Else "#main .highlight" will override */ 
 
#main table.simple th.highlight { 
 
    margin:   0; 
 
    padding:   0.25em 0.5em; 
 
} 
 

 

 
/* Other styles related to the main content */ 
 

 
#mainlink { \t \t \t /* "Skip to main content" link */ 
 
    display:   none !important; 
 
} 
 

 
#navhead { \t \t \t /* "Path to this page" information */ 
 
\t \t \t \t /* Warning: not printed out on paper */ 
 
    font-size:  90%; 
 
} 
 

 
#navhead hr { 
 
    display:   none; 
 
} 
 

 
#endmain { 
 
    visibility:  hidden; 
 
    clear:   both; \t /* Doesn't always work under IE/Win */ 
 
} 
 

 

 
/********** Styles for Floating Boxes **********/ 
 

 
\t \t \t \t /* "navbox" is used to provide intra/inter- */ 
 
\t \t \t \t /* page links; it is NOT printed out on  */ 
 
\t \t \t \t /* paper. "floatbox" is used to provide */ 
 
\t \t \t \t /* floating boxes that may appear anywhere */ 
 
\t \t \t \t /* in the main content; they ARE printed. */ 
 
.floatbox, 
 
.navbox { 
 
    overflow:  visible; 
 
    font-size:  95%; 
 
    line-height:  1.25; 
 
    margin:   0 0 0.75em 1.5em; 
 
    padding:   0.5em 1em; 
 
    border:   1px solid #999999; 
 
    float:   right; 
 
    clear:   right; 
 
} 
 

 
.floatbox { 
 
    color:   black; 
 
    background:  #F0F0F0; 
 
    width:   35%; 
 
} 
 

 
.navbox { 
 
    text-align:  left; 
 
    color:   black; 
 
    background:  white; 
 
    width:   12.5em; 
 
} 
 

 
.floatbox hr, \t \t \t /* Used for non-stylesheet-aware browsers */ 
 
.navbox hr { 
 
    display:   none !important; 
 
} 
 

 
.floatbox p, 
 
.navbox p { 
 
    margin:   0.75em 0; 
 
    padding:   0; 
 
} 
 

 
.floatbox ol, 
 
.floatbox ul { 
 
    margin:   0.75em 0; 
 
    padding:   0 0 0 1.5em; 
 
} 
 

 
.navbox ol, 
 
.navbox ul { 
 
    margin:   0.5em 0; 
 
    padding:   0 0 0 1.5em; 
 
} 
 

 
.floatbox blockquote { 
 
    margin:   0.75em 1.5em; 
 
    padding:   0; 
 
} 
 

 
.floatbox pre { 
 
    font-size:  95%; 
 
    margin:   0.75em 1.5em; 
 
    padding:   0; 
 
} 
 

 
.floatbox dt { 
 
    margin:   0.75em 0; 
 
    padding:   0; 
 
} 
 

 
.floatbox dt { 
 
    margin:   0.75em 0 0.25em 0; 
 
    padding:   0; 
 
} 
 

 
.floatbox dd { 
 
    margin:   0 0 0.75em 1.5em; 
 
    padding:   0; 
 
} 
 

 
#main .floatbox .highlight { 
 
    color:   inherit; 
 
    background:  white; 
 
    margin:   0.75em 0; 
 
    padding:   0.75em 1.5em; 
 
} 
 

 
#main .floatbox table.simple { 
 
    margin:   0.75em 0; 
 
} 
 

 
#main .floatbox table.simple th, 
 
#main .floatbox table.simple td.highlight, 
 
#main .floatbox table.simple th.highlight { 
 
    color:   inherit; 
 
    background:  white; 
 
    margin:   0; 
 
    padding:   0.25em 0.5em; 
 
} 
 

 

 
/********** Styles for Header **********/ 
 

 
\t \t \t \t /* In this style sheet, headers are composed */ 
 
\t \t \t \t /* of three parts: left, right and subheader */ 
 
\t \t \t \t /* Left part is ideally an image.   */ 
 

 
#header { \t \t \t /* Warning: not printed out on paper */ 
 
    color:   #003399; 
 
    /* background:  #8CA8E6; */ 
 
    padding: 0.5px 1px; color: #fff; background: #6c90df url('../Css/bar_head.png') repeat-x 100% top; 
 
    /*background-image: "CSS/grd_head.png"*/ 
 
    width: 100%; 
 
} 
 

 
#header a:link, 
 
#header a:visited { 
 
    color:   #003399; 
 
    background:  transparent; 
 
} 
 

 
#header .highlight, 
 
#header a.highlight:link, 
 
#header a.highlight:visited { 
 
    color:   white; 
 
    background:  transparent; 
 
} 
 

 
/* Left part of header (ideally an image but may be a link) */ 
 

 
#header div.left { 
 
    float:   left; 
 
    clear:   left; 
 
    margin:   0; 
 
    padding:   0; 
 
} 
 

 
#header div.left img { 
 
    display:   block; \t /* Otherwise IMG is an inline, causing gaps */ 
 
} 
 

 
#header div.left, 
 
#header div.left a:link, 
 
#header div.left a:visited { 
 
    font-size:  200%; 
 
    font-weight:  bold; 
 
    text-decoration: none; 
 
    color:   white; 
 
    background:  transparent; 
 
    
 
} 
 

 
#header div.left p { 
 
    margin:   0 0 0 0.25em; 
 
    padding:   0; 
 
} 
 

 
#header div.left .alt { 
 
    color:   #FF9800; 
 
    background:  transparent; 
 
} 
 

 
/* Right part of header is for external/global links, search, etc */ 
 

 
#header div.right { 
 
    font-size:  90%; 
 
    text-align:  right; 
 
    margin:   0; 
 
    padding:   0.5em 1.17em 0 1em; 
 
    float:   right; 
 
    clear:   right; 
 
} 
 

 
#header div.right a:link, 
 
#header div.right a:visited { 
 
    margin:   0; 
 
    padding:   0 0.5em; 
 
} 
 

 
#header div.right form { 
 
    margin:   0; 
 
    padding:   0.25em 0.5em 0 0; 
 
} 
 

 
#header div.right form input { 
 
    font-size:  95%; 
 
    vertical-align: middle; 
 
} 
 

 
/* Subheader for global links */ 
 

 
#header div.subheader { 
 
    color:   white; 
 
    background:  #003399; 
 
    margin:   0; 
 
    padding:   0; 
 
    border:   1px solid #003399; /* Required for IE/Win */ 
 
    clear:   both; 
 
} 
 

 
#header div.subheader p { \t /* To overcome an IE/Win unwanted padding */ 
 
\t \t \t \t /* bug, still present in IE7.    */ 
 
    margin:   0; 
 
    padding:   0.5em; 
 
} 
 

 
#header div.subheader a:link, 
 
#header div.subheader a:visited { 
 
    font-weight:  bolder; 
 
    color:   white; 
 
    background:  transparent; 
 
    margin:   0; 
 
    padding:   0 0.5em; 
 
} 
 

 
#header div.subheader .highlight, 
 
#header div.subheader a.highlight:link, 
 
#header div.subheader a.highlight:visited { 
 
    color:   #FDA05E; 
 
    background:  transparent; 
 
} 
 

 

 
/********** Styles for Left Sidebar **********/ 
 

 
#sidebar { \t \t \t /* Warning: not printed out on paper */ 
 
    width:   12.5em; 
 
    border-right: 1px solid #999999; 
 
    float:   left; 
 
    background-color:#F0F0F0; 
 
    clear:   both; 
 
} 
 

 
#sidebar div { 
 
    font-size:  95%; 
 
    margin:   0; 
 
    padding:   0.25em 0.25em; 
 
} 
 

 
#sidebar div.lighter { 
 
    color:   inherit; 
 
    background:  white; 
 
} 
 

 
#sidebar p { 
 
    margin:   0.5em 0; 
 
} 
 

 
#sidebar .title a:link, 
 
#sidebar .title a:visited { 
 
    color:   black; 
 
    background:  transparent; 
 
} 
 

 
#sidebar ul { 
 
    list-style:  none outside; 
 
    margin:   0.5em 0; 
 
    padding:   0; 
 
} 
 

 
#sidebar ul li { 
 
    margin:   0; 
 
    padding:   0.125em 0; 
 
} 
 

 
#sidebar ul li.highlight { 
 
    color:   inherit; 
 
    background:  white; 
 
    margin-left:  -1em; 
 
    margin-right: -1em; 
 
    padding-left: 1em; 
 
    border-top:  1px solid #999999; 
 
    border-bottom: 1px solid #999999; 
 
} 
 

 
#sidebar ul li.highlight a:link, 
 
#sidebar ul li.highlight a:visited { 
 
    color:   black; 
 
    background:  transparent; 
 
} 
 

 

 
/********** Styles for Footer **********/ 
 

 
.wrapper { 
 
    min-height: 100%; 
 
    height: auto !important; 
 
    height: 100%; 
 
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */ 
 
} 
 

 

 
#footer { 
 
    font-size:  90%; 
 
    text-align:  left; 
 
    color:   white; 
 
    /*background:  #6381DC; */ 
 
     color:   #003399; 
 
    /* background:  #8CA8E6; */ 
 
    padding: 4px 2px; color: #fff; background: #6c90df url('../Css/bar_head.png') repeat-x 10% top; 
 
    margin:   0; 
 
    padding:   0.5em 1.67em 0.5em 15.25em; 
 
    clear:   both; 
 
    position: absolute; 
 
    bottom: 0px; 
 
} 
 

 

 
#footer a:link, 
 
#footer a:visited { 
 
    text-decoration: underline; 
 
    color:   white; 
 
    background:  transparent; 
 
} 
 

 
#footer hr { 
 
    display:   none !important; 
 
} 
 

 
/* End of the Sinorcaish style sheet */
<%@ Master Language="VB" CodeFile="Home.master.vb" Inherits="Home" %> 
 

 
<!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 id="Head1" runat="server" > 
 
    <title> </title> 
 
<asp:ContentPlaceHolder id="head" runat="server"> 
 
    </asp:ContentPlaceHolder> 
 
    <link href="CSS/Style.css" rel="stylesheet" type="text/css" /> 
 
    <link href="Styles/sinorcaish-screen.css" rel="stylesheet" type="text/css" /> 
 
    <link href="Styles/CustomStyles.css" rel="stylesheet" type="text/css" /> 
 
</head> 
 
<body class="body" > 
 
    <form id="form1" runat="server" class="body" > 
 
     <!-- ======== Header ======== --> 
 
     <div id="header"> 
 
      <div class="left"> 
 
       teste 
 
      </div> 
 
      <div class="right"> 
 
      <%=DateTime.Now.ToShortDateString()%> 
 
       <asp:ImageButton ID="ImageButton1" runat="server" Height="25px" 
 
        ImageUrl="~/Images/sair_64.png" Width="25px" /> 
 
      </div> 
 
      <div class="subheader"> 
 
      <em></em> 
 
      </div> 
 
     </div> 
 

 
     <!-- ======== Left Sidebar ======== --> 
 
     <div id="sidebar"> 
 
      <div> 
 
      <ul> 
 
       
 
       <p>Importações</p> 
 
       <li><a href="Paginas/ImportStock.aspx">Importar Stock Médico</a></li> 
 
       <li><a href="Paginas/ImportStock.aspx">Importar Stock Enfermeiros</a></li> 
 

 

 
       </ul> 
 

 
       <ul> 
 
       <li> </li> 
 
       <li> </li> 
 
       <li> </li> 
 
       <p>Configuração Tabelas</p> 
 
       <li><a href="Paginas/consulta_gruposprof.aspx">Grupos Profissionais</a></li> 
 
       <li><a href="Paginas/grupoprof_gere.aspx">Regiões</a></li> 
 
       </ul> 
 
      
 
      </div> 
 
     </div> 
 

 
     <!-- ======== Main Content ======== --> 
 
     <div id="main" class="body"> 
 
      <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server" > 
 
      
 
      </asp:ContentPlaceHolder> 
 
     </div> 
 
     
 
     <!-- ======== Footer ======== --> 
 

 
     <div id="footer"> 
 
      h 
 
      Website design by <a href="http://www.highvalue.pt/">H</a> 
 
      <a href="http://www.highvalue.pt/">H</a> 
 
     </div> 
 
     
 
    </form> 
 
</body> 
 
</html>

感謝的!

+0

你能把這個減少到一個最小的例子嗎?要講清楚你在問什麼並不容易。 – ajshort

+0

你不能指望任何人爲你調試867行的css文件。 –

回答

2

你給元素#main寬度爲100%,也是一個填充,使得該框共有(100%+總水平填充)寬。如果你想添加填充而不改變它的大小,請添加:box-sizing:border-box。

https://css-tricks.com/box-sizing/

+0

感謝您的快速回復。 我刪除了填充行,並以相同的方式繼續。 我在剩下的元素中做了同樣的事情(如果這是有道理的),對於情況是增加寬度但是失敗的情況。 – Paula

+0

嗨@Paula,我不知道我明白你在告訴我什麼,但它不是你需要擔心的填充,它是完全正確的,唯一的問題是你沒有告訴容器元素(#主要),如果你添加填充它不應該增長。 #main { box-sizing:border-box; .... – leuquim

+0

如果您希望所有元素默認採用這種方式,許多人都使用通用選擇器:* {box-sizing:border-box}(引用所有元素) – leuquim

0

試着改變你的CSS這樣的:

* { 
    margin: 0; 
    padding: 0; 
} 

html,body { 
    font-family:  Verdana, "DejaVu Sans", "Bitstream Vera Sans", "Lucida Sans", Arial, Helvetica, sans-serif; 
    font-size:  90%; /* Allow IE/Win to resize the document */ 
    color:   black; 
    background:  white; 
    border:   none; 
    width:   100%; 
    height:   100%; 
} 

有些瀏覽器(如谷歌瀏覽器)具有預定義的邊距和補。 *符號選擇文檔中的所有內容,通過使用*可以消除那些討厭的預定義邊距和填充。

此外,我已經改變了身體和html標籤的寬度和高度,以擴展到屏幕尺寸的100%。

0
<body> 
<form id="form1" runat="server"> 
    <div style="width:99%;"> 
    <!-- ======== Header ======== --> 
    <div id="header"> 
     <div class="left"> 
      teste 
     </div> 
     <div class="right"> 
     <%=DateTime.Now.ToShortDateString()%> 
      <asp:ImageButton ID="ImageButton1" runat="server" Height="25px" 
       ImageUrl="~/Images/sair_64.png" Width="25px" /> 
     </div> 
     <div class="subheader"> 
     <em></em> 
     </div> 
    </div> 

    <!-- ======== Left Sidebar ======== --> 
    <div id="sidebar"> 
     <div> 
     <ul> 

      <p>Importações</p> 
      <li><a href="Paginas/ImportStock.aspx">Importar Stock Médico</a></li> 
      <li><a href="Paginas/ImportStock.aspx">Importar Stock Enfermeiros</a></li> 


      </ul> 

      <ul> 
      <li> </li> 
      <li> </li> 
      <li> </li> 
      <p>Configuração Tabelas</p> 
      <li><a href="Paginas/consulta_gruposprof.aspx">Grupos Profissionais</a></li> 
      <li><a href="Paginas/grupoprof_gere.aspx">Regiões</a></li> 
      </ul> 

     </div> 
    </div> 

    <!-- ======== Main Content ======== --> 
    <div id="main" class="body"> 
     <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server" > 

     </asp:ContentPlaceHolder> 
    </div> 

    <!-- ======== Footer ======== --> 

    <div id="footer"> 
     h 
     Website design by <a href="http://www.highvalue.pt/">H</a> 
     <a href="http://www.highvalue.pt/">H</a> 
    </div> 
    </div> 
</form> 

變化從代碼與此有關。希望它可以幫助

+0

-1 ...什麼你覺得99%的樣子怎麼樣?想象一下,屏幕上有1%的分辨率,談論寬度,800像素和屏幕與1280,1600像素......看@leuquim的答案。downvote。 –

0

這是由於在#main

#main{  
    background: none repeat scroll 0 0 rgb(255, 255, 255); 
    border-left: 1px solid rgb(153, 153, 153); 
    color: rgb(0, 0, 0); 
    line-height: 1.5; 
    margin: 0 0 0 12.5em; 
/* padding: 0.1em 1.5em 0.5em 1em;*/ 
    text-align: justify; 
    width: 100%; 
} 

填充去除填充在#main,它應該工作。

相關問題