nicht angemeldet
Hallöchen,
ich suche jetzt seit Stunden nach einer Lösung, finde aber absolut nichts, was das Problem beseitigt. Zu verrutschenden divs gibt's ja zig google-Einträge, nur hab ich jetzt langsam um die hundert Seiten und ebensoviele Versuche durch und nix hilft.
Ich bastele gerade eine Website. Da ich das nur nebenher in meiner Freizeit mache, bin ich auch nicht grad perfekt darin. Aktuelles Problem: Das Layout hat drei divs nebeneinander. Aus mir völlig unklaren Gründen hält das mittlere div ("inhalt") einen ziemlich großen Abstand zum rechten ("rechteseite") - aber die margins sind überall bei 0! Der soll also eigentlich weg. Zweites Problem: Sobald man das Browserfenster verkleinert, verschwindet das inhalts-div einfach nach unten. Soweit ich weiß, ist es quarkig, %- und px-Angaben zu mischen...das hatte ich am Anfang. Daher hat das inhalts-div jetzt keine width-Angabe mehr, damit es als Breite einfach "den Rest" einnimmt. Denn eigentlich sollen die beiden Grafiken links und rechts ihre Breite immer behalten. Aber selbst wenn ich alle width-Angaben einheitlich in % mache, bleiben sowohl das Abstands- als auch das Verrutschen-Problem bestehen.
Einzige Möglichkeit, die ich bisher gefunden habe: Dem inhalt-div einfach kein float-Verhalten mehr zuweisen. Nur... dann ist die Hintergrund-Grafik des inhalt-divs auch rechts und links unter den beiden andern Spalten zu sehn. Da soll aber die body-Hintergrund-Grafik zu sehen sein. Und dann funktioniert das padding beim Text nicht mehr, sieht auch bescheiden aus.
Hier die index.html
<body>
<div id="title">
<img src="titeltext.png" alt="Titel"/>
<h1>Zusatztext.</h1></div>
<div id="menu"> Das Dropdown-Menü hab ich wegen der Länge mal weggelassen. Und da es vermutlich nicht ursächlich am Problem beteiligt ist.
</div>
<div>
<div id="linkeseite">
</div>
<div id="rechteseite">
</div>
<div id="drumherum"> <div id="inhalt">
<p>Hier kommt Text hin.</p>
</div></div>
<div id="fusszeile"><img src="test_fussgrafik.jpg" alt=">Fußzeile"/></div>
</body>
</html>
Und dazu passende CSS:
body
{
background-image: url(body_hintergrund.jpg);
background-color: #B79C84;
font-weight : normal;
font-size:small;
font-style : normal;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-align:justify;
color: #FFF0C4;
width: 100%;
height:100%;
}
h1 {font-size:18px;color:#FFF0C4;}
h2 {font-size:16px;color:#FFF0C4;}
h3 {font-size:14px;color:#FFF0C4;}
p {margin-top:0px;}
#title {
height:100px;
overflow:hidden;
background-image: url(kopfzeile_hintergrund.jpg);
}
#linkeseite, #rechteseite {
margin-left: 0px;
margin-right: 0px;
overflow:hidden;
background-color:#000000;
border:none;
}
#linkeseite {
float:left;
background-image: url(linkeseite.jpg);
width: 197px;
min-height:512px;
}
#rechteseite {
float:right;
background-image: url(rechteseite.jpg);
width: 100px;
min-height:512px;
}
#inhalt {
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:0px;
background-image: url(innenbereich2.jpg);
font-weight : normal;
font-size:12px;
font-style : normal;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-align:justify;
color: #FFF0C4;
padding: 20px;
}
#fusszeile {
clear:left;
background:#efefef;
text-align:center;
padding:0px;
overflow:hidden;
height: 100px;
width: 100%;
}
.menutitle
{
font-weight:bold;
margin-top:15px;
}
* {
margin: 0;
padding: 0;
}
#menu {
width: 100%;
padding: 0px;
font-family: Trebuchet MS;
font-size: 13px;
line-height: 1.5;
float: left;
background-image: url(navi_hintergrund.jpg);
}
#menu ul {
float: left;
width: 100px;
list-style-type: none;
}
#menu h3 {
font-size: 1em;
text-align: center;
color: #FFFFFF;
height: 25px;
margin-top: 2px;
}
#menu a {
text-decoration: none;
display: block;
border: none;
text-align: center;
background-image: url(beispiel_navi2.png);
color: #003366;
}
#menu a:hover {
color: #ff9224;
background: #003366;
}
#menu li {
position: relative;
}
#menu ul ul {
position: absolute;
z-index: 2;
display: none;
}
#menu ul li:hover ul {
display: block;
}
* html #menu ul li {
float: left;
width: 100%;
}
*+ html #menu ul li {
float: left;
width: 100%;
}
*html body {
behavior: url(csshover3-source.htc);
font-size: 100%;
}
*html #menu ul li a {
height: 1%;
}
#menu ul li:hover ul ul {display: none;}
div#menu ul ul li:hover ul {display: block; position: absolute; top: 0; left: 100%;}
Wahrscheinlich seh ich einfach den Wald vor Bäumen nicht :(. Wo ist der Fehler? Oder wie kann ich das beheben?
Grüße
Alex
Matthias Apsel