nicht angemeldet
Dreispaltiges Layout - div verrutscht, Lücke daneben
0 
Matthias Apsel
0 0 Matthias Apsel
0 0 Matthias Apsel
Dreispaltiges Layout - div verrutscht, Lücke daneben
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
-
Om nah hoo pez nyeetz, Alex!
Das beste ist du zeigst die Seite. Und wenn du sowieso noch am Basteln bist, kannst du auch mit der Zeit gehen und dich für HTML5-Elemente entscheiden.
Matthias
--
1/z ist kein Blatt Papier.
-
Hier mal hochgeladen: http://www.rottweiler-von-den-nibelungen.de/test/index_test.html
Inzwischen auch schon wieder dran rumprobiert, z.B. dass die Seitenteile sich automatisch der Höhe des Inhalts anpassen... auch erfolglos bisher.
Html5 schau ich grad rein.
-
Om nah hoo pez nyeetz, Alex!
Hier mal hochgeladen: http://www.rottweiler-von-den-nibelungen.de/test/index_test.html
Unabhängig davon, ob du nun HTML5 verwendest oder nicht, kannst du viele deiner div-Elemente entsorgen. Benenne sie außerdem nach dem Inhalt, nicht nach dem Aussehen.
Zum Beispiel würde sich statt <div id="titel">... folgendes anbieten
<h1>
<img>
Zusatztext
</h1>aus den vielen Listen im Menü solltest du _eine_ machen.
Das div "drumrum" kannst du dir sparen.
Schau mal mit einem Entwicklerwerkzeug wie firebug die Forumshauptseite an. Dort hast du dreispaltiges Layout.
Du solltest jedoch erst die Inhalte formulieren und dann die Gestaltung in Angriff nehmen. Schritt für Schritt ggf. ein langer Weg.
Matthias
--
1/z ist kein Blatt Papier.
-
Danke für die Hinweise schonmal. Wie ich aus den "vielen" Menülisten eine einzelne machen soll, weiß ich nicht, da ich die einzelnen <li> usw. ja zur Sortierung des Menüs bzw. der einzelnen Unterpunkte benutze.
Forumshauptseite hab ich mir angeschaut, hat mir nicht geholfen.
Inhalte sind vorhanden, aber auch mit Inhalt bleibt das Problem der sich nicht-anpassenden-Spalten. Daher versuche ich erst das zu lösen, bevor ich auch noch mit Text und Fotos auf der gleichen Seite jongliere...und da ist nach wie vor das Problem geblieben. Die Anpassungen der divs haben doch auch nix damit zu tun, wie der Inhaltstext verläuft oder nicht oder wieviel Text/Fotos/Sonstiges ich reinsetz? Komm mit dem Grundgedanken leider nicht ganz mit.
Liebe Grüße
Alex-
Om nah hoo pez nyeetz, Alex!
Danke für die Hinweise schonmal. Wie ich aus den "vielen" Menülisten eine einzelne machen soll, weiß ich nicht, da ich die einzelnen <li> usw. ja zur Sortierung des Menüs bzw. der einzelnen Unterpunkte benutze.
<ul> <li>1. Punkt <ul> <li>1.1 <ul> <li>1.1.1</li> </ul> </li> <li>1.2</li> </ul> </li> <li>2. Punkt</li> </ul>Forumshauptseite hab ich mir angeschaut, hat mir nicht geholfen.
Beispielsweise:
1. Spalte links gefloatet
2. Spalte rechts gefloatet
3. Spalte nicht gefloatetInhalte sind vorhanden, aber auch mit Inhalt bleibt das Problem der sich nicht-anpassenden-Spalten. Daher versuche ich erst das zu lösen, bevor ich auch noch mit Text und Fotos auf der gleichen Seite jongliere...und da ist nach wie vor das Problem geblieben. Die Anpassungen der divs haben doch auch nix damit zu tun, wie der Inhaltstext verläuft oder nicht oder wieviel Text/Fotos/Sonstiges ich reinsetz? Komm mit dem Grundgedanken leider nicht ganz mit.
Kümmere dich zuerst ausschließlich um den Inhalt, bevor du dein Design bearbeitest. Strukturiere diesen etwa durch nav, aside und <div class="content"> (oder main) Stör dich nicht daran, dass es nicht gut aussieht.
Matthias
--
1/z ist kein Blatt Papier.
-
Hallo mal wieder,
hab die Seite nun validiert und mal einen Beispielinhalt eingefügt. Das Problem, dass sich bei verkleinertem Browserfenster das mittlere div unter die beiden seitendivs verabschiedet, bleibt.
Zwei Spalten float-Verhalten zuweisen und der mittleren nicht habe ich doch oben schon beschrieben und probiert. Dadurch wandert nur das mittlere div hinter die beiden anderen, sieht bescheiden aus und das mittlere soll zwischen den Seiten-divs stehen, nicht dahinter ausgestreckt.
Siehe http://www.rottweiler-von-den-nibelungen.de/test/index_test.html
Grüße
Alex-
Om nah hoo pez nyeetz, Alex!
Ich würde jetzt die body-breite beschränken:
max-width: 1084px;und je nach Geschmack zentrierenmargin: 0 auto;Der Inhalt sollte nicht gefloatet sein, keine Breitenangabe haben und die Außenabstände müssen die anderen Elemente berücksichtigen.margin: 0 12% 0 24%;Die offensichtlich falsche Höhe des Inhalts kannst du durch die Verwendung des richtigen Box-Modells kompensieren.box-sizing: border-box;mit entsprechenden PräfixenMatthias
--
1/z ist kein Blatt Papier.
-
-
-
-
-
-