| |||||||||
![]() |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
|
|
|
SlickEdit: Code in over 40 languages across 7 platforms. SlickEdit’s unmatched power, speed, and flexibility allows even the most accomplished developers to write better code faster. Download a free trial today! |
|
#1
|
|||
|
|||
|
Please help Im having format issues
Ok have been making a site which runs off the below coding. Iv just realised that this site does not display the way it displays on my laptop on lower screen resolutions. It pops off the screen or gets really blown up. Please can someone help Iv spent the last 3days trying to fix it .
/* NON-HEADER */ *{padding:0; margin:0;} body {font-size:62.5%; background-color:rgb(255,255,255); font-family:verdana,arial,sans-serif;} /*Font-size: 1.0em = 10px when browser default size is 16px*/ .main-navigation {display:inline /*Fix IE floating margin bug*/; float:left; width:200px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;} .main-content {display:inline; /*Fix IE floating margin bug*/; float:left; width:440px; margin:0 0 0 30px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;} .main-subcontent {display:inline /*Fix IE floating margin bug*/; float:right; width:185px; margin:0 15px 0 0; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;} .footer {clear:both; width:900px; padding:1.0em 0 1.0em 0; background:rgb(225,225,225) url(../img/bg_foot.jpg) no-repeat; font-size:1.0em; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;} /* --- For alternative headers START PASTE here --- */ /* HEADER */ .header-top {width:900px; height:80px; background:rgb(240,240,240) url(../img/bg_head_top.jpg); overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;} .header-middle {width:900px; height:150px; background:rgb(230,230,230) url(../img/bg_head_middle.gif); overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;} .header-bottom {width:900px; height:40px; background:rgb(255,255,255) url(../img/bg_head_breadcrumbs.jpg) repeat-y;} .header-breadcrumbs {clear:both; width:900px; padding:1.0em 0 1.5em 0; background:rgb(255,255,255) url(../img/bg_head_breadcrumbs.jpg) repeat-y;} /********************/ /* HEADER SECTION */ /********************/ .sitelogo {width:60px; height:40px; position:absolute; z-index:1; margin:22px 0 0 20px; background:url(../img/bg_head_top_logo.gif); } .sitename {width:300px; height:45px; position:absolute; z-index:1; margin:20px 0 0 90px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;} .sitename h1 {font-size:240%;} .sitename h2 {margin:-4px 0 0 0; color:rgb(125,125,125); font-size:120%;} .sitename a {text-decoration:none; color:rgb(125,125,125);} .sitename a:hover {text-decoration:none; color:rgb(50,50,50);} .nav0 { width:250px; position:absolute; z-index:2; margin:25px 0 0 0; top:-10px; margin-left:550px !important/*Non-IE6*/; margin-left:553px /*IE6*/;--> left: 145px; } .nav0 ul {float:right; padding:0 20px 0 0;} .nav0 li {display:inline; list-style:none;} .nav0 li a {padding:0 0 0 3px;} .nav0 a:hover {text-decoration:none;} .nav0 a img {height:14px; border:none;} UL.BLUE { font-size: 1.1em; list-style-image:url('../img/bullet.jpg'); list-style-type:disc } #topmenu a { float:left; background:url('../img/menuleft.gif') no-repeat left top; margin:0; text-decoration:none; padding-left:4px; padding-right:0; padding-top:0; padding-bottom:0 } #topmenu a span { float:left; display:block; background:url('../img/menuright.gif') no-repeat right top; color:#888; padding-left:6px; padding-right:15px; padding-top:5px; padding-bottom:4px } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #topmenu a span {float:none;} /* End IE5-Mac hack */ #topmenu a:hover span { color:#999999; } #topmenu a:hover { background-position:0% -42px; } #topmenu a:hover span { background-position:100% -42px; } .nav1 { width:500px; position:absolute; z-index:3; margin:45px 0 0 550px; left: 0px; top: 15px; } .nav1 ul {float:right; padding:0 15px 0 0; font-weight:bold;} .nav1 li {display:inline; list-style:none;} .nav1 li a {display:block; float:left; padding:2px 5px 2px 5px; color:rgb(125,125,125) ; text-decoration:none; font-size:120%;} .nav1 a:hover {text-decoration:none; color:rgb(50,50,50);} .sitemessage { width:465px; height:120px; position:absolute; z-index:1; margin:20px 0 0 480px; color:rgb(234,239,247); /*overflow:visible !important /*Activate if Firefox print problems*/ ; overflow:hidden /*IE6*/; left: 120px; top: 84px; } .sitemessage h1 {width:400px; text-align:left; font-size:230%;} .sitemessage h2 {float:left; width:320px; margin:8px 0 0 0; text-align:right; line-height:100%; font-size:160%;} .sitemessage h3 {float:left; width:320px; margin:10px 0 0 0; text-align:right; font-size:140%;} .sitemessage h3 a {text-decoration:none; color:rgb(234,239,247);} .sitemessage h3 a:hover {text-decoration:none; color:rgb(50,50,50);} /*Drop-down menu*/ .nav2 {float:left; width:900px; border:none; background:rgb(220,220,220) url(../img/bg_head_bottom_nav.jpg) no-repeat; color:rgb(75,75,75); font-size:130%;} /*Color navigation bar normal mode*/ .nav2 ul {list-style-type:none;} .nav2 ul li {float:left; position:relative; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; border-right:solid 1px rgb(175,175,175);} .nav2 ul li a {float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:3.1em; line-height:3.1em; padding:0 16px 0 16px; text-decoration:none; font-weight:bold; color: rgb(100,100,100);} .nav2 ul li ul {display:none; border:none;} /*Non-IE6 hovering*/ .nav2 ul li:hover a {background-color:rgb(210,210,210); text-decoration:none;} /*Color main cells hovering mode*/ .nav2 ul li:hover ul {display:block; width:10.0em; position:absolute; z-index:999; top:3.0em; margin-top:0.1em; left:0;} .nav2 ul li:hover ul li a {display:block; width:10.0em; height:auto; line-height:1.3em; margin-left:-1px; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(237,237,237); font-weight:normal; color:rgb(50,50,50);} /*Color subcells normal mode*/ .nav2 ul li:hover ul li a:hover {background-color:rgb(210,210,210); text-decoration:none;} /*Color subcells hovering mode*/ /*IE6 hovering*/ .nav2 table {position:absolute; top:0; left:0; border-collapse:collapse;} .nav2 ul li a:hover {background-color:rgb(210,210,210); text-decoration:none;} /*Color main cells hovering mode*/ .nav2 ul li a:hover ul {display:block; width:10.0em; position:absolute; z-index:999; top:3.1em; t\op:3.0em; left:0; marg\in-top:0.1em;} .nav2 ul li a:hover ul li a {display:block; w\idth:10.0em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(237,237,237); font-weight:normal; color:rgb(50,50,50);} /*Color subcells normal mode*/ .nav2 ul li a:hover ul li a:hover {background-color:rgb(210,210,210); text-decoration:none;} /*Color subcells hovering mode*/ .header-breadcrumbs ul {float:left; width:560px; list-style:none; padding:0 0 0 15px; font-family:verdana,arial,sans-serif;} .header-breadcrumbs ul li {display:inline; padding:0 0 0 10px; background:transparent url(../img/bg_bullet_arrow.gif) no-repeat 0 50%; font-weight:bold; color:rgb(125,125,125); font-size:100%;} .header-breadcrumbs ul a {color:rgb(70,122,167); text-decoration:none;} .header-breadcrumbs ul a:hover {color:rgb(42,90,138); text-decoration:underline;} .header-breadcrumbs .searchform {float:right; width:285px; padding:0 17px 0px 0px !important /*Non-IE6*/; padding:0 12px 0px 0px /*IE6*/;} .header-breadcrumbs .searchform form fieldset {float:right; border:none;} .header-breadcrumbs .searchform input.field {width:10.0em; padding:0.2em 0 0.2em 0; border:1px solid rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:120%; } .header-breadcrumbs .searchform input.button {width:3.0em; padding:1px !important /*Non-IE6*/; padding:0 /*IE6*/; background:rgb(230,230,230); border:solid 1px rgb(150,150,150); text-align:center; font-family:verdana,arial,sans-serif; color:rgb(150,150,150); font-size:120%;} .header-breadcrumbs .searchform input.button:hover {cursor ointer; border:solid 1px rgb(80,80,80); background:rgb(220,220,220); color:rgb(80,80,80);}/* --- For alternative headers END PASTE here --- */ /******************/ /* MAIN SECTION */ /******************/ /* MAIN NAVIGATION */ .main-navigation .round-border-topright {width:10px; height:10px; position:absolute; z-index:100; margin:0 0 0 190px; background:url(../img/bg_corner_topright.gif) no-repeat;} /* MAIN CONTENT */ .column1-unit {width:440px; margin-bottom:5px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;} .column2-unit-left {float:left; width:200px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;} .column2-unit-right {float:right; width:200px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;} modifications for main content container boxes .contentbox-title-shading { margin: 0px; padding: 0px 0px 0px 0px; background-color: rgb(225,225,225); font-weight: bold; } /* No shading */ .contentbox-noshading { margin: 0px; padding: 0px 0px 0px 0px; width:200px; background-color: white; } /* Shading */ .contentbox-shading { margin: 0px; padding: 7px 10px 5px 10px; background-color: transparent; } .column3-unit-left {float:left; width:120px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;} .column3-unit-middle {float:left; width:120px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/; margin-left:40px;} .column3-unit-right {float:right; width:120px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;} /* MAIN SUBCONTENT */ .subcontent-unit-border-popup {width:200px; margin:0 0 2.0em 0; padding:0 0 5px 0; border:solid 1px rgb(190,190,190); background:rgb(248,216,211);} .subcontent-unit-border {width:183px; margin:0 0 2.0em 0; padding:0 0 5px 0; border:solid 1px rgb(190,190,190); background:rgb(235,235,235);} .subcontent-unit-border-green {width:183px; margin:0 0 2.5em 0; padding:0 0 10px 0; border:solid 1px rgb(160,214,81); background-color:rgb(217,239,185);} .subcontent-unit-border-blue {width:183px; margin:0 0 2.5em 0; padding:0 0 10px 0; border:solid 1px rgb(137,170,214); background-color:rgb(213,225,240);} .subcontent-unit-border-orange {width:183px; margin:0 0 2.5em 0px; padding:0 0 10px 0; border:solid 1px rgb(232,177,13); background-color:rgb(248,224,150);} .subcontent-unit-border-red {width:183px; margin:0 0 2.5em 0px; padding:0 0 10px 0; border:solid 1px rgb(232,177,13); background-color: rgb(248,216,211);} .subcontent-unit-noborder {width:185px; margin:0 0 2.5em 0; padding:0 0 10px 0; background:rgb(235,235,235);} .subcontent-unit-noborder-green {width:185px; margin:0 0 2.5em 0; padding:0 0 10px 0; background-color:rgb(217,239,185);} .subcontent-unit-noborder-blue {width:185px; margin:0 0 2.5em 0; padding:0 0 10px 0; background-color:rgb(213,225,240);} .subcontent-unit-noborder-orange {width:185px; margin:0 0 2.5em 0; padding:0 0 10px 0; background-color:rgb(248,224,150);} .round-border-topleft {width:10px; height:10px; position:absolute; z-index:100; background:url(../img/bg_corner_topleft.gif) no-repeat; margin-top:-1px; margin-left:-1px;} .round-border-topright {width:10px; height:10px; position:absolute; z-index:100; background:url(../img/bg_corner_topright.gif) no-repeat; margin-top:-1px; margin-left:174px;} .round-noborder-topleft {width:10px; height:10px; position:absolute; z-index:100; background:url(../img/bg_corner_topleft.gif) no-repeat; margin-top:0px; margin-left:0px;} .round-noborder-topright {width:10px; height:10px; position:absolute; z-index:100; background:url(../img/bg_corner_topright.gif) no-repeat; margin-top:0px; margin-left:175px;} /********************/ /* FOOTER SECTION */ /********************/ .footer p {line-height:1.3em; text-align:center; color:rgb(125,125,125); font-weight:bold; font-size:110%;} .footer p.credits {font-weight:normal;} .footer a {text-decoration:underline; color:rgb(125,125,125);} .footer a:hover {text-decoration:none; color:rgb(0,0,0);} .footer a:visited {color:rgb(0,0,0);} /******************/ /* CLEAR FLOATS */ /******************/ .page-container:after, .header:after, .header-breadcrumbs:after, .main:after, .main-navigation:after, .main-content:after, .main-content div:after, .main-subcontent:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} .column1-unit:after, .column2-unit-left:after, .column2-unit-right:after, .column3-unit-left:after, .column3-unit-middle:after, .column3-unit-right:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} .subcontent-unit-border:after, .subcontent-unit-noborder:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} .subcontent-unit-border-blue:after, .subcontent-unit-border-green:after, .subcontent-unit-border-orange:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} .subcontent-unit-noborder-blue:after, .subcontent-unit-noborder-green:after, .subcontent-unit-noborder-orange:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} .footer:after, p:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} .clear-contentunit {clear:both; width:440px; height:0.1em; border:none; background:rgb(210,210,210); color:rgb(210,210,210);} /********************************/ /* PRINTING and MISCELLANEOUS */ /********************************/ @media print {.header-top {width:900px; height:80px; background:rgb(240,240,240); overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}} @media print {.header-breadcrumbs {width:900px; background:transparent;}} @media print {.nav2 {float:left; width:900px; border:none; background:rgb(240,240,240); color:rgb(75,75,75); font-size:1.0em; font-size:130%;}} /*Color navigation bar normal mode*/ @media print {.main {clear:both; width:900px; padding-bottom:30px; background:transparent;}} @media print {.main-navigation {display:inline /*Fix IE floating margin bug*/; float:left; width:199px; border-right:solid 1px rgb(200,200,200); border-bottom:solid 1px rgb(200,200,200); background-color:rgb(240,240,240); overflow:visible !important /*Firefox*/; overflow:hidden /*IE*/;}} @media print {.footer {clear:both; width:900px; height:3.7em; padding:1.1em 0 0; background:rgb(240,240,240); font-size:1.0em; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}} |
|
#2
|
|||
|
|||
|
you have set widths by px so if that adds up to a greater value than the screen size you are using to view the site, it will give you the scrolling across bars.
eg: Left col = 200px - Middle col = 800px right col = 200px - total px 1200 so a screen set to 800 x 600 will have the cross scroll bars One way around this is to you % instead of hardcoding a size. This way the site will adjust for each screen resolution. eg: Left col = 20% - Middle col = 60% right col = 20% - total 100% Will resize for all screen res. |
![]() |
| Viewing: ASP Free Forums > Web Design > Web Layout > Please help Im having format issues |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
|
|
|
|
|