Box Aufteilung CSS
Verfasst: So 24. Jun 2007, 10:47
Hallo,
Nach langen wollte ich nun mein Outfit ändern. Dazu wollte ich rechts etwas Platz bekommen um die Rechte Box einzufügen für News. Ich weiß, das es gegenüber Firefox und Explorer Unterschiede gibt.
Wenn man es sich Ansieht http://www.MotorsportSlalom.de sieht man, das es im Explorer eigentlich gut Aussieht (ziemlich nah an die linke Navigation), im Firefox dagegen habe ich noch Platz. Habe mal die css angehängt. Vielleicht kann mir jemand helfen oder einen Tipp geben das es im Firefox genauso Aussieht.
------------------------------------------------------------------------------------
html, body {
height : 100%;
}
body {
padding : 0;
margin : 0;
text-align : left;
width : 100%;
font-size : 11px;
font-family : Verdana, Tahoma, Arial, Helvetica, Sans-serif, sans-serif;
color : rgb(0, 0, 0);
background-color : #ffffff;
background-image : url(../upload/bullets/hint.jpg);
}
td {
font-size : 11px;
font-family : Verdana, Tahoma, Arial, Helvetica, Sans-serif, sans-serif;
color : #000000;
margin-bottom : 8px;
}
.input {
font-size : 11px;
font-family : Verdana, Tahoma, Arial, Helvetica, Sans-serif, sans-serif;
color : rgb(0, 0, 0);
width : 240px;
margin-bottom : 8px;
border-top : 1px solid #999999;
border-right : 1px solid #999999;
border-bottom : 1px solid #999999;
border-left : 1px solid #999999;
}
.label {
font-size : 11px;
font-family : Verdana, Tahoma, Arial, Helvetica, Sans-serif, sans-serif;
color : rgb(0, 0, 0);
}
.small {
font-size : 9px;
}
#outer {
height : 100%;
width : 100%;
color : #000000;
text-align : left;
position : absolute;
margin-left : 30px;
}
html > body #outer {
height : auto;
}
#innerwrap {
float : left;
width : 950px;
height : 540px;
background-color : #e5e5e5;
margin-top : 30px;
margin-left : 1.5px;
border-top : 1px solid #000000;
border-right : 1px solid #000000;
border-bottom : 1px solid #000000;
border-left : 1px solid #000000;
}
#header {
width : 925px;
height : 126px;
color : #000000;
z-index : 5;
position : absolute;
left : 42px;
top : 0;
margin-top : 30px;
background-image : url(../upload/logos/blue_banner.jpg);
background-repeat : no-repeat;
background-position : 170px center;
}
#left {
position : absolute;
width : 150px;
float : left;
padding-top : 130px;
padding-bottom : 20px;
left : 5px;
}
#left p {
padding-left : 3px;
padding-right : 2px;
}
#right p {
padding-left : 4px;
padding-right : 2px;
}
#imagecolumn {
margin-top : 0;
position : absolute;
top : 165px;
left : 900px;
width : 90px;
height : 220px;
z-index : 10;
padding-top : 180px;
padding-left : 10px;
padding-right : 10px;
color : rgb(62, 77, 116);
}
#imagecolumn a {
padding : 0;
font-weight : normal;
font-size : 11px;
color : rgb(190, 190, 190);
margin : 0;
}
#imagecolumn h1 {
padding : 0;
font-weight : normal;
font-size : 11px;
color : rgb(0, 0, 0);
margin : 0;
}
#right {
}
clip: rect( )
}
div,p { margin-top:0; }
#centrecontent {
width : 610px;
float : right;
padding-left : 0;
color : #000000;
margin-top : 130px;
padding-bottom : 20px;
overflow : auto;
height : 380px;
margin-right : 80px;
background-color : #efefef;
}
#centrecontent p { padding-left:3px:color:rgb(62,77,116); }
#clearfooter {
width : 780px;
height : 71px;
z-index : -1;
position : absolute;
top : 466px;
}
#bottomnavi {
text-align : center;
color : rgb(210, 210, 210);
height : 10px;
width : 590px;
}
#additionalnavi {
float : none;
margin-top : 1px;
padding-bottom : 2px;
text-align : right;
width : 550px;
color : #ffffff;
z-index : 4;
position : absolute;
margin-left : 360px;
}
#logo {
width : 925px;
padding-top : 20px;
}
#navipath {
padding : 0 10px;
color : rgb(99, 99, 99);
width : 388px;
margin : 2px 10px 5px;
}
.navi {
width : 165px;
border-bottom : 0 solid rgb(170, 170, 170);
}
h1 {
padding-left : 2px;
font-weight : bold;
font-size : 12px;
color : #000000;
margin : 0;
}
h1.content {
margin-bottom : 12px;
padding : 0;
}
hr {
color : #000000;
}
a {
font-size : 11px;
color : #000000;
text-decoration : none;
}
a:hover {
text-decoration : underline;
}
a.newsheadline {
font-weight : bold;
}
a.bottomnavi {
color : #330000;
font-size : 9px;
}
a.additionalnavi {
font-size : 11px;
color : #000000;
}
a.navipath {
font-size : 10px;
color : #000000;
}
a.navileft_passive {
display : block;
padding-top : 6px;
padding-bottom : 6px;
color : #000000;
background-image : url(../upload/bullets/nav.gif);
background-repeat : repeat-x;
background-position : 1px center;
}
a.navileft_active {
display : block;
background : url(../upload/bullets/nav_blau.gif) repeat-x 1px center;
padding-top : 5px;
padding-bottom : 5px;
color : #000000;
}
a.navileft_open {
padding-left : 15px;
display : block;
background : url(../upload/bullets/nav_rot.gif) repeat-x 1px center;
padding-top : 5px;
padding-bottom : 5px;
color : #000000;
}
a.sitemap_level1 {
display : block;
border-bottom : 1px solid #b4a8b4;
color : rgb(0, 0, 0);
font-weight : normal;
padding-bottom : 0.4em;
background : url("../images/navi_pfeil_rechts.gif") no-repeat;
background-position : right 0%;
}
a.sitemap_level2 {
color : rgb(62, 77, 116);
background : url("../images/navi_pfeil_rechts.gif") no-repeat;
background-position : 170px 4px;
display : block;
}
a.sitemap_level3 {
color : #000000;
}
.sitemap_level2_container {
float : left;
width : 50%;
padding-top : 0.3em;
}
.sitemap_level3_container {
float : right;
width : 50%;
padding-top : 0.3em;
}
.input_newsletterselect {
width : 80px;
vertical-align : middle;
font-size : 11px;
margin-right : 8px;
color : #000000;
}
#loginbox {
border-top : 0 solid #aeaeae;
border-bottom : 0 solid #aeaeae;
padding-bottom : 0.6em;
padding-top : 0.6em;
padding-left : 0.3em;
padding-right : 0;
margin-top : 1.5em;
margin-bottom : 1.5em;
background-image : url(../upload/bullets/login-button.jpg);
}
.input_searchbox {
width : 65px;
vertical-align : middle;
font-size : 11px;
}
.label_searchbox {
vertical-align : middle;
position : relative;
padding-left : 3px;
}
#searchbox {
background-color : #dfe0e5;
background-image : url(../upload/bullets/login-button.jpg);
border-top : 1px solid #aeaeae;
border-bottom : 1px solid #aeaeae;
padding-bottom : 0.6em;
padding-top : 0.6em;
padding-left : 0;
padding-right : 0;
margin-top : 1.5em;
margin-bottom : 1.5em;
}
.suche {
border : 1px solid #000080;
background-color : #92dd71;
}
#newsletterbox {
background-color : #dfe0e5;
border-top : 1px solid #aeaeae;
border-bottom : 1px solid #aeaeae;
padding-bottom : 0.6em;
padding-top : 0.6em;
padding-left : 0.5em;
padding-right : 0.5em;
margin-top : 1.5em;
margin-bottom : 1.5em;
}
.hidden {
display : none;
}
.balken {
padding-left : 0;
background-position : 2px 0;
}
-------------------------------------------------------------------------------------
Gruss
Michael
Nach langen wollte ich nun mein Outfit ändern. Dazu wollte ich rechts etwas Platz bekommen um die Rechte Box einzufügen für News. Ich weiß, das es gegenüber Firefox und Explorer Unterschiede gibt.
Wenn man es sich Ansieht http://www.MotorsportSlalom.de sieht man, das es im Explorer eigentlich gut Aussieht (ziemlich nah an die linke Navigation), im Firefox dagegen habe ich noch Platz. Habe mal die css angehängt. Vielleicht kann mir jemand helfen oder einen Tipp geben das es im Firefox genauso Aussieht.
------------------------------------------------------------------------------------
html, body {
height : 100%;
}
body {
padding : 0;
margin : 0;
text-align : left;
width : 100%;
font-size : 11px;
font-family : Verdana, Tahoma, Arial, Helvetica, Sans-serif, sans-serif;
color : rgb(0, 0, 0);
background-color : #ffffff;
background-image : url(../upload/bullets/hint.jpg);
}
td {
font-size : 11px;
font-family : Verdana, Tahoma, Arial, Helvetica, Sans-serif, sans-serif;
color : #000000;
margin-bottom : 8px;
}
.input {
font-size : 11px;
font-family : Verdana, Tahoma, Arial, Helvetica, Sans-serif, sans-serif;
color : rgb(0, 0, 0);
width : 240px;
margin-bottom : 8px;
border-top : 1px solid #999999;
border-right : 1px solid #999999;
border-bottom : 1px solid #999999;
border-left : 1px solid #999999;
}
.label {
font-size : 11px;
font-family : Verdana, Tahoma, Arial, Helvetica, Sans-serif, sans-serif;
color : rgb(0, 0, 0);
}
.small {
font-size : 9px;
}
#outer {
height : 100%;
width : 100%;
color : #000000;
text-align : left;
position : absolute;
margin-left : 30px;
}
html > body #outer {
height : auto;
}
#innerwrap {
float : left;
width : 950px;
height : 540px;
background-color : #e5e5e5;
margin-top : 30px;
margin-left : 1.5px;
border-top : 1px solid #000000;
border-right : 1px solid #000000;
border-bottom : 1px solid #000000;
border-left : 1px solid #000000;
}
#header {
width : 925px;
height : 126px;
color : #000000;
z-index : 5;
position : absolute;
left : 42px;
top : 0;
margin-top : 30px;
background-image : url(../upload/logos/blue_banner.jpg);
background-repeat : no-repeat;
background-position : 170px center;
}
#left {
position : absolute;
width : 150px;
float : left;
padding-top : 130px;
padding-bottom : 20px;
left : 5px;
}
#left p {
padding-left : 3px;
padding-right : 2px;
}
#right p {
padding-left : 4px;
padding-right : 2px;
}
#imagecolumn {
margin-top : 0;
position : absolute;
top : 165px;
left : 900px;
width : 90px;
height : 220px;
z-index : 10;
padding-top : 180px;
padding-left : 10px;
padding-right : 10px;
color : rgb(62, 77, 116);
}
#imagecolumn a {
padding : 0;
font-weight : normal;
font-size : 11px;
color : rgb(190, 190, 190);
margin : 0;
}
#imagecolumn h1 {
padding : 0;
font-weight : normal;
font-size : 11px;
color : rgb(0, 0, 0);
margin : 0;
}
#right {
}
clip: rect( )
}
div,p { margin-top:0; }
#centrecontent {
width : 610px;
float : right;
padding-left : 0;
color : #000000;
margin-top : 130px;
padding-bottom : 20px;
overflow : auto;
height : 380px;
margin-right : 80px;
background-color : #efefef;
}
#centrecontent p { padding-left:3px:color:rgb(62,77,116); }
#clearfooter {
width : 780px;
height : 71px;
z-index : -1;
position : absolute;
top : 466px;
}
#bottomnavi {
text-align : center;
color : rgb(210, 210, 210);
height : 10px;
width : 590px;
}
#additionalnavi {
float : none;
margin-top : 1px;
padding-bottom : 2px;
text-align : right;
width : 550px;
color : #ffffff;
z-index : 4;
position : absolute;
margin-left : 360px;
}
#logo {
width : 925px;
padding-top : 20px;
}
#navipath {
padding : 0 10px;
color : rgb(99, 99, 99);
width : 388px;
margin : 2px 10px 5px;
}
.navi {
width : 165px;
border-bottom : 0 solid rgb(170, 170, 170);
}
h1 {
padding-left : 2px;
font-weight : bold;
font-size : 12px;
color : #000000;
margin : 0;
}
h1.content {
margin-bottom : 12px;
padding : 0;
}
hr {
color : #000000;
}
a {
font-size : 11px;
color : #000000;
text-decoration : none;
}
a:hover {
text-decoration : underline;
}
a.newsheadline {
font-weight : bold;
}
a.bottomnavi {
color : #330000;
font-size : 9px;
}
a.additionalnavi {
font-size : 11px;
color : #000000;
}
a.navipath {
font-size : 10px;
color : #000000;
}
a.navileft_passive {
display : block;
padding-top : 6px;
padding-bottom : 6px;
color : #000000;
background-image : url(../upload/bullets/nav.gif);
background-repeat : repeat-x;
background-position : 1px center;
}
a.navileft_active {
display : block;
background : url(../upload/bullets/nav_blau.gif) repeat-x 1px center;
padding-top : 5px;
padding-bottom : 5px;
color : #000000;
}
a.navileft_open {
padding-left : 15px;
display : block;
background : url(../upload/bullets/nav_rot.gif) repeat-x 1px center;
padding-top : 5px;
padding-bottom : 5px;
color : #000000;
}
a.sitemap_level1 {
display : block;
border-bottom : 1px solid #b4a8b4;
color : rgb(0, 0, 0);
font-weight : normal;
padding-bottom : 0.4em;
background : url("../images/navi_pfeil_rechts.gif") no-repeat;
background-position : right 0%;
}
a.sitemap_level2 {
color : rgb(62, 77, 116);
background : url("../images/navi_pfeil_rechts.gif") no-repeat;
background-position : 170px 4px;
display : block;
}
a.sitemap_level3 {
color : #000000;
}
.sitemap_level2_container {
float : left;
width : 50%;
padding-top : 0.3em;
}
.sitemap_level3_container {
float : right;
width : 50%;
padding-top : 0.3em;
}
.input_newsletterselect {
width : 80px;
vertical-align : middle;
font-size : 11px;
margin-right : 8px;
color : #000000;
}
#loginbox {
border-top : 0 solid #aeaeae;
border-bottom : 0 solid #aeaeae;
padding-bottom : 0.6em;
padding-top : 0.6em;
padding-left : 0.3em;
padding-right : 0;
margin-top : 1.5em;
margin-bottom : 1.5em;
background-image : url(../upload/bullets/login-button.jpg);
}
.input_searchbox {
width : 65px;
vertical-align : middle;
font-size : 11px;
}
.label_searchbox {
vertical-align : middle;
position : relative;
padding-left : 3px;
}
#searchbox {
background-color : #dfe0e5;
background-image : url(../upload/bullets/login-button.jpg);
border-top : 1px solid #aeaeae;
border-bottom : 1px solid #aeaeae;
padding-bottom : 0.6em;
padding-top : 0.6em;
padding-left : 0;
padding-right : 0;
margin-top : 1.5em;
margin-bottom : 1.5em;
}
.suche {
border : 1px solid #000080;
background-color : #92dd71;
}
#newsletterbox {
background-color : #dfe0e5;
border-top : 1px solid #aeaeae;
border-bottom : 1px solid #aeaeae;
padding-bottom : 0.6em;
padding-top : 0.6em;
padding-left : 0.5em;
padding-right : 0.5em;
margin-top : 1.5em;
margin-bottom : 1.5em;
}
.hidden {
display : none;
}
.balken {
padding-left : 0;
background-position : 2px 0;
}
-------------------------------------------------------------------------------------
Gruss
Michael