Frage stellen
ich habe ein Problem das mir die Nerven raubt. Ich versuche ein drei Spalten Layout nach:
Three columns: three colors zu adaptieren für meine Ziele. Im IE sieht das auch sehr gut aus, allerdings im FF (1.5) und im Opera (9.10) rutsch das div id="colboxnews" rechts aus dem Bild raus. Man muß erst ewig rüber scrollen bis es zum Vorschein kommt. Ich weiß echt nicht wo der Fehler liegt, jemand nen Tip? Ich wäre sehr dankbar.
Hier der Code:
- Code: Alles auswählen
<html>
<head>
<link>
</head>
<body>
<div>
<div>
<h2> Unternehmen</h2>
<ul>
<li><a>Geschichte</a></li>
<li><a>Firma</a></li>
<li><a>Standort</a></li>
<li><a>Anfahrtskizze</a></li>
</ul>
</div>
<div>
<div>
<h1>Herzlich Willkommen!</h1><img><h2>Willkommen bei uns</h2>
<p>Hallo und herzlich willkommen.</p>
Wir sind Ihr Partner für ...
<p><img></p><br><br><br><br><br>
</div>
adjakjdsak dja <br>
adjakjdsak dja <br>
adjakjdsak dja <br>
adjakjdsak dja <br>
adjakjdsak dja <br>
adjakjdsak dja <br>
adjakjdsak dja <br>
adjakjdsak dja <br>
adjakjdsak dja <br>
adjakjdsak dja <br>
adjakjdsak dja <br>
<div>
<a>Sitemap</a> | <a>Impressum</a> | © 2006</div>
</div>
<div>
<h2>AKTUELLES</h2>
<div>
<h4>VERANSTALTUNGEN</h4>
<dl>
<dt><strong>MONTAG, 14.9. - </strong>Eintrag für Veranstaltung</dt>
<dd>€ 12, Einlass 10 Uhr</dd>
<dt><strong>MONTAG, 20.9. - </strong>Eintrag für Schulung</dt>
<dd>€ 100, Einlass 10 Uhr</dd>
</dl>
<h4>PRODUKTNEUHEITEN</h4>
<dl>
<dt><strong>Produkt 1</strong> Total toll</dt>
<dd>Behalten Sie den Ünerblick über System.</dd>
<dt><strong>Produkt 2</strong> Software</dt>
<dd>Analysieren Sie die Daten .</dd>
</dl>
</div>
</div>
</div>
</body>
</html>
Und das zugehörige CSS Stylesheet:
- Code: Alles auswählen
#contente{
background-color: #ebebeb;
float:left;
width:100%;
margin-top: 5px;
border-left:200px solid #e0e0e0; /* The width and color of the left rail */
border-right:250px solid #e0e0e0; /* The width and color of the right rail */
}
#colboxnav{
float:left;
width:200px;
margin-left:-200px;
margin-top:0px;
margin-bottom: 0px;
position:relative;
}
#colarticle{
float:left;
padding-left: 10px;
padding-right: 10px;
}
#colboxnews{
float:right;
margin-left: 10px;
width:240px;
margin-right:-250px;
position:relative;
}
body {
font-family: Verdana, "Verdana CE", Arial, "Arial CE", "Lucida Grande CE", lucida, "Helvetica CE", sans-serif;
font-size: x-small;
color: #666;
margin: 0px;
padding: 0px;
background-color: #ebebeb;
}
p {
font-size: small;
}
h2.leftCol,
h3.leftCol,
h4.leftCol,
h5.leftCol,
h6.leftCol{
font-size: medium;
font-weight: bold;
color: #fff;
background-color: #336699;
padding: 0 10px 0 5px;
margin: 0 0 1px 0;
}
#colboxnews h2 {
font-size: medium;
font-weight: bold;
color: #fff;
background-color: #336699;
padding: 0 10px 0 5px;
margin: 0 0 1px 0;
}
#listings h4 {
font-size: small;
font-weight: bold;
background-color: #e0e0e0;
color: #336699;
margin: 5px 0 5px 10px;
padding: 0 0 0 0;
}
#colboxnews h2 a,
#colboxnews h2 a:hover,
#listings h4 a,
#listings h4 a:hover
.articel a:hover,
.articel a:visited {
color: #336699;
text-decoration: none;
}
#listings dt {
background-color: #fff;
color: #666;
font-size: x-small;
padding-left: 5px;
margin: 0 0 0 5px;
}
#listings dd {
background-color: #fff;
color: #666;
font-size: x-small;
padding-left: 5px;
margin: 0 0 10px 5px;
}
.articel {
width: 100%;
font-size: small;
margin-bottom: 10px;
}
.articel h1{
font-size: medium;
font-weight: bold;
color: #fff;
background-color: #336699;
padding: 0 10px 0 5px;
margin: 0 0 1px 0;
}
.articel h2,
.articel h3,
.articel h4,
.articel h5,
.articel h6 {
font-size: larger;
font-weight: bold;
margin-bottom:5px;
border-bottom:1px solid #D1d1d1;
text-align:left;
}
.footer {
background-color: #336699;
padding: 3px 10px 3px 0;
margin-top: 5px;
margin-bottom: 10px;
text-align: right;
font-size: x-small;
color: #fff;
}
.footer a {
color: #fff;
text-decoration: underline;
}
Vielen Dank für die Hilfe.
