Hallo zusammen.
Ich habe eine Seite im drei Spalten-Layout und Kopfbanner erstellt. Dabei habe ich die einzelnen Bereich mit div's positioniert.
Nun läßt sich das Ergebnis nicht überall gleich schön ansehen. In einigen Browsern zerschießt es das Layout ganz in manchen ist es gar nicht zu sehen...
Das Stichwort ist - so habe ich schon rausgefunden - heißt dabei wohl Browserweiche (Conditional Comments). Wie man diese einbinden muss, habe ich gefunden .
Für jeden berücksichtigten Browser solch ein Syntax:
<!--[if lt IE 6]>
<link rel="Stylesheet" href="ie5.css" type="text/css" />
<![endif]-->
Nun verstehe ich aber nicht, wie ich die speziellen css-Dateien anpassen kann....(Brett vorm Kopf?!?) Ich meine, gibt es für die einzelnen Browser andere "Keywords" innerhalb der Css. Oder muss ich mir sämtliche Browser zulegen und dann das Layout per Hand anpassen?
Ich weiß im Moment überhaupt nicht, wie ich das (möglichst schnell) umsetzten kann....
Danke Euch, sunshine
(meine css-Datei lautet...
body {
background-color: #EAEAEA;
font-family: Sans-serif, Trebuchet MS, Arial, Helvetica;
padding: 0px;
margin: 0px;
min-width: 40em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
}
p, td, dd {
margin-top:12px; margin-bottom:12px;
font-size:10pt;
line-height:1.35;
color: #000000;
font-family: "Sans Serif", "Trebuchet MS", Arial, Helvetica, san-serif;
}
#wrap {/* Bereichsdefinition (zentrierte Allgemeinausrichtung)*/
width: 900px;
margin: 0 auto;
text-align: left;
}
#kopf {/* Bereichsdefinition für Logo/Banner*/
background-color:#FFFFFF;
width: 900px;
height: 105px;
text-align:right;
margin: 15px;
}
#navigation_seite { /* Bereichsdefinition */
font-size: 75%;
float: left;
width: 220px;
margin-left: 15px;
margin-top: 5px;
padding: 0;
background-color:#EAEAEA;
}
#navigation_seite h4, a {
font-size: 85%;
line-height:1.0;
color: #0318FE;
text-decoration: none;
}
#navigation_seite p {
font-size: 75%;
line-height:1.0;
color: #000000;
text-decoration: none;}
#hauptfenster {/* Bereichsdefinition */
margin-left: 235px;
margin-right: -65px;
margin-top: 0px;
background-color:#FFFFFF;
width: 495px;
float: left;
padding: 15px;
}
#hauptfenster a {
color: #0318FE;
text-decoration:none;
}
#hauptfenster a:hover, #kontakt a:hover, #downloads a:hover {
color: #0318FE;
text-decoration:underline;
}
#kontakt {
font-size: 75%;
float: right;
width: 220px;
margin-right: -65;
margin-top: 5px;
padding: 5;
background-color:#FFFFFF;
}
#downloads {
padding: 10px;
background-color:#FFFFFF;
float: right;
height: 75%;
width: 220px;
margin-right: -65;
margin-top: 20px;
padding: 5px;
}
#kontakt h1, #downloads h1{
font-size:10pt;
margin-bottom:14px;
margin-top:10px;
margin-left:5px;
line-height:1.2;
color: #000000
padding: 5px;
}
#kontakt p, #downloads p {
margin-left:5px;
text-decoration:none;
font-size:9pt;
line-height:1.2;
}
#kontakt a, #downloads a{
margin-left:5px;
text-decoration:none;
font-size:9pt;
line-height:1.2;
color: #0318FE;
}
#downloads li {
list-style-type: none;
font-size:9pt;
line-height:1.2;
color: #000000;
}
p.copyright {
padding-top: 20px;
font-size: 9pt;
text-align: right;}
div {clear:both;}
dt {
font-size:10pt;
font-weight: bold;
font-family: san-serif, Trebuchet MS, Arial, Helvetica;
line-height:1.35;
color: #000000;}
ul {
list-style-type: circle;
font-size:10pt;
line-height:1.35;
color: #000000;
font-family: "Sans Serif", "Trebuchet MS", Arial, Helvetica, san-serif;}
caption {
text-align: center;
line-height: 1;
font-weight: bold;
font-style: italic;
font-size: 18pt;
}
thead, tfoot {
font-weight: bold;
}
p.abb {margin-top:0; margin-bottom:12px;
font-size:10pt;
line-height:1.35;
color: #000000;
font-family: "Sans Serif", "Trebuchet MS", Arial, Helvetica, san-serif;
clear:left;
text-align:left;}
p.foto {margin-top:0; margin-bottom:12px;
font-size:10pt;
line-height:1.35;
color: #000000;
font-family: "Sans Serif", "Trebuchet MS", Arial, Helvetica, san-serif;
}
.merke {
font-size:8pt;
font-style:italic;
line-height:1.35;
color: #000000;
font-family: "Sans Serif", "Trebuchet MS", Arial, Helvetica, san-serif;
}
}
.mehr, .zurueck {font-size:9pt;
line-height:1.35;
color: #000000;
font-family: "Sans Serif", "Trebuchet MS", Arial, Helvetica, san-serif;
}
.top {
font-size: 7pt;
line-height:0.5;
text-align:right;
color: #000066;
font-family: Arial, Helvetica, san-serif;
}
.anmerkung {
font-size: 10pt;
font-style:italic;
line-height:1.35;
color: #4D65A0;
font-family: Sans-serif, Trebuchet MS, Arial, Helvetica;
}
.noprint {margin-top:12px; margin-bottom:12px;
font-size:10pt;
line-height:1.35;
color: #4D65A0;
font-family: "Sans Serif", "Trebuchet MS", Arial, Helvetica, san-serif;
}
.images {
float:left;}
img {margin-right:10px;
margin-bottom:10px;
margin-top:10px;
font-size:10pt;
line-height:1.35;
color: #4D65A0;
font-family: "Sans Serif", "Trebuchet MS", Arial, Helvetica, san-serif;
}
img_alt {padding:20px align=bottom}
h1 {font-size:12pt; margin-bottom:14px; line-height:1.2;color: #000000}
h2 {font-size:11pt; margin-bottom:13px; margin-top:26px; line-height:1.2;color: #000000}
h3 {font-size:10pt; margin-bottom:12px; margin-top:24px; line-height:1.2;color: #000000; margin-top:0;}
h4 {font-size:10pt; margin-bottom:6px; margin-top:11px; line-height:1.2;color: #000000; text-decoration:underline}
h5 {font-size:10pt; margin-bottom:0px; margin-top:0px; line-height:1.2;color: #000000;font-style:italic}
li {font-size:10pt; line-height:1.35;color: #000000}
ol {font-size:10pt; line-height:1.35;color: #000000;style="margin-right:2em";style="margin-left:2em"}
a {text-decoration:none; font-weight:none; font-size:9pt; line-height:1.2;}
hr{
size:5px;
color:#FF0000;
width:75%;
align:center;}
a.info {text-decoration:none;color:red;font-weight:normal;}
a.info:hover {text-decoration:none; color:red;}
a.info span {visibility:hidden;position:absolute;padding:3px;font-weight:normal;text-decoration:none;width:550px;}
a.info:hover span {visibility:visible;background-color:#CFCFCF;font-size:10pt;color:#000000;text-decoration:none;}
________________________________________________
Es wäre schön, wenn mir jemand mal sanft auf den Hinterkopf hauen könnten, vielleicht fällt dann der Groschen!