zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Dreispaltiges Layout: divs verrutschen + Höhen-Anpassung

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.02.2013, 16:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.02.2013
Beiträge: 13
alexcss befindet sich auf einem aufstrebenden Ast
Standard Dreispaltiges Layout: divs verrutschen + Höhen-Anpassung

Hallo,

Ich bastel grad an einer Website. Da ich das nur in meiner knapp bemessenen Freizeit mache, vermutlich auch mehr schlecht als recht. Was soll's, es muss 'ne neue her und ich muss mich nun einarbeiten, nachdem die letzte nach aktuellen Maßstäben eine ziemliche Katastrophe ist . Ich hab mich für ein dreispaltiges Layout entschieden. Dabei soll das mittlere div ("inhalt") sich automatisch der Textlänge anpassen in der Höhe. Die beiden divs links und rechts ("linkeseite" und "rechteseite" sollen sich dann dieser Höhe ebenfalls anpassen. Und das ist jetzt schon das Problem.

Google wirft zu dem Thema ungefähr tausend Ergebnisse aus, ich hab auch schon zig durch, die FAQ in diesen und allen möglichen CSS-Seiten mehrfach gelesen und sitz jetzt seit Tagen dran und nicht mehr seit Stunden. Ich komm immer wieder auf "das geht überhaupt nicht..." zurück... Momentan hat das mittlere div ("inhalt") keine float-Eigenschaft mehr zugewiesen, weil es sonst - warum keine Ahnung - einen ominösen Abstand zum rechten div einhielt und bei Verkleinern des Browserfensters ganz unter die beiden Seiten-divs verschwand. Jetzt liegt es halt einfach "dahinter", aber dadurch wandert der Text auch links und rechts unter "linkeseite" und "rechteseite" - wo er nicht hinsoll. Ist der Text länger, verliert er sich inzwischen sogar unter das Fußteil ganz unten. Da soll der Text natürlich auch nicht hin.

Faux columns helfen hier leider gar nicht, weil die Spalten nicht nur aus einer einzelnen reproduzierbaren Grafik oder Farbe bestehen sollen. Linkes div löschen und einfach die Grafik mit in den Hintergrund des mittleren stecken sieht besch*** aus und löst das Problem für die rechte Seite nicht. Und dann gibt's da noch das Problem, dass height 100% eigentlich doch auch nicht ganz richtig ist? Die Seite hat ja Kopfteil + Fußteil + 100 %.

Wer kann helfen, wo ist das grundlegende Problem? Und vor allem: Wie kann man eine annehmbare Lösung draus machen?

Hier der Einfachheit halber direkt zwei Links zur Baustelle:
http://www.rottweiler-von-den-nibelu...ndex_test.html
http://www.rottweiler-von-den-nibelu...tylesheets.css

Grüße
Alex
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 23.02.2013, 17:05
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.12.2006
Beiträge: 887
threadi sorgt für eine eindrucksvolle Atmosphärethreadi sorgt für eine eindrucksvolle Atmosphäre
Standard

Im ersten Schritt solltest Du deinen HTML-Code korrigieren:
[Invalid] Markup Validation of http://www.rottweiler-von-den-nibelungen.de/test/index_test.html - W3C Markup Validator

Danach könntest Du dir mal die Beispiele hier für faux columns anschauen:
4 Methods For Creating Equal Height Columns In CSS - Vanseo Design
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 23.02.2013, 17:31
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.03.2006
Beiträge: 387
gaby sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von threadi Beitrag anzeigen
Danach könntest Du dir mal die Beispiele hier für faux columns anschauen:
4 Methods For Creating Equal Height Columns In CSS - Vanseo Design
Für eine der dort genannten Methoden, die border-Version, habe ich eine Beispieldatei.

selfhtml.de - HTML & CSS Forum: mit box-border DIVs auf gleiche Hhe und 100% bringen

Mit dem damaligen Mozilla-Browser hat es nicht 100%ig funktioniert, aber das war ein Moz-Bug, der mittlerweile längst behoben ist.

Ja, ich weiß, daß ich das bsp dringend überarbeiten müßte, aber vor 9 Jahren war ich eben auch noch ein Anfänger.
Das sollte jetzt also nur mal eine Demo sein, daß gleich-lange Spalten mit border funktionieren.
Mit Zitat antworten
  #4 (permalink)  
Alt 23.02.2013, 18:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.02.2013
Beiträge: 13
alexcss befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von threadi Beitrag anzeigen
Im ersten Schritt solltest Du deinen HTML-Code korrigieren
Das ist schonmal erledigt.

Danke für die Links, nur komm ich damit bisher sehr begrenzt weiter. Hier z.B. ist ja das, was ich gemacht habe. Jedes div soll einer Spalte entsprechen. Und float hab ich jedem einzelnen als Eigenschaft zugewiesen - nur genau das funzt ja nicht. Dann verschwindet das mittlere div nach unten. Und wenn ich dem mittleren div height auto zuweise oder ganz weglasse, liegt es statt zwischen den beiden Seiten-divs dahinter...siehe verlinktes Beispiel oben.

Grüße
Alex
Mit Zitat antworten
  #5 (permalink)  
Alt 24.02.2013, 00:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.02.2013
Beiträge: 13
alexcss befindet sich auf einem aufstrebenden Ast
Standard

Nachtrag: Hab auch versucht, den inhalt mittels position: relative auszurichten, aber das ist nicht das Gelbe vom Ei. Sobald man dann das Browserfenster verkleinert, wandert der Text wieder über den Fußteil und das inhalts-div pappt natürlich über allem anderen drüber...

Gaby, deine Version hab ich auch probiert mit dem wrapped-Teil usw. Nur irgendwas mach ich da falsch. Damit verschwinden die beiden Seitenteile komplett, obwohl sie nach wie vor als divs definiert sind, Inhalt haben usw.

Ich geb auf für heute...
Mit Zitat antworten
  #6 (permalink)  
Alt 28.02.2013, 20:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.02.2013
Beiträge: 13
alexcss befindet sich auf einem aufstrebenden Ast
Standard

...immernoch niemand eine Idee?

Hier nochmal die Codes... das menu-div wegen seiner Länge rausgelassen.
HTML-Code:
<body>
<div id="title">
<img src="logo4.png" alt="Das ist unser Zwingername ;)" id="zwingername" />
</div>
 <div id="linkeseite">
 </div> 
 
 <div id="rechteseite">
 </div>
 
<div id="inhalt"> <div id="text"> </div></div>
 <div id="fusszeile"><img src="test_logografik.jpg" alt=">Fußzeile"/></div>
</body>
Code:
html{
height:100%;}

body 
{ 
background-color: #4E4737; 
font-weight : normal; 
font-size:small;
font-family: Arial, Helvetica, Verdana; 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;}

a:link, a:visited
{ 
  text-decoration:none;
  font-weight:normal;
  color:#634142;
  font-size:small;
}
a:active, a:hover
{ 
 text-decoration:none;
 font-weight: normal; 
 
}

#title {
height:100px;
overflow:hidden;
background-image: url(kopfzeile_hintergrund.jpg);
}

#zwingername {
float:left;
width:524px; 
height:65px;
margin-left:20px;
margin-top: 25px;
}


#linkeseite, #rechteseite {
margin-left: 0px;
margin-right: 0px;
overflow:hidden;
background-color:green;
border:none;
height:100%;
}

#linkeseite {
float:left;
background-image: url(linkeseite.png);
width: 240px;
border-right: medium solid  #3B3523;
border-right-style: double;
 }

#rechteseite {
float:right;
background-image: url(rechteseite.png);
width: 100px;
border-left: medium solid  #3B3523;
border-left-style: double;
}

#inhalt {
float:right;
width: 60%;
margin-left:20px;
margin-right:20px;
margin-top:20px;
margin-bottom:20px;
background-image: url(mini_hg.png);
height:100%;
border: medium solid #3B3523;
border-style: double;
-moz-box-shadow: 0px 0px 10px 4px #000000;
-webkit-box-shadow: 0px 0px 10px 4px #000000;
box-shadow: 0px 0px 10px 4px #000000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#000000');
09.
}

#text {
float:left;
margin-left:10px;
margin-right:10px;
margin-top:10px;
margin-bottom10px;
background: #4E4737;
height:80%;
font-weight : normal; 
font-size:12px;
font-style : normal; 
font-family: Arial, Helvetica, sans-serif; 
text-align:justify; 
color: #FFF0C4;
padding: 20px;
border: 1px solid #3B3523;
}

#fusszeile {
clear: both;
margin-top:1em;
background:#efefef;
text-align:center;
padding:0px;
overflow:hidden;
height: 100px;
width: 100%;
}

.menutitle
{
font-weight:normal;
margin-top:15px;
}

.rahmen { border: 2px solid #CCB49F;}


* {
margin: 0;
padding: 0;
}

#menu {
width: 100%;
padding: 0px;
font-family: Arial, Helvetica, Verdana, sans-serif;
font-size: 13px;
float: left;
background-image: url(mini_hg.png);
 /* für den Hintegrund hinters Menü--*/
}

#menu ul {/*--definiert die einzelnen Menüpunkte--*/
float: left;
width: 115px;
list-style-type: none;

}

/*--definiert die "Drop-Down-Links" im Normalzustand--*/
#menu a {
text-decoration: none;
display: block;
border: none;
text-align: center;
background: #4E4737;
background-image: url(mini_hg.png);
height: 20px;
width: 115px;
border: medium solid #3B3523;
border-style: double;
line-height: 1.4;
/*--Hintergrundbild für normale Unterpunkte der Navi--*/
color: #FFF0C4;
}

/*--definiert die "Drop-Down-Links" im Hoverzustand--*/
#menu a:hover {
color: #FFF0C4;
background: #4E4737;
/*-- background-image: url(navi_hintergrund_hell.jpg); Hintergrundbild für Hover der Navi--*/
}

/*verhindert im Zusammenhang mit position absolute bei ul ul
*eine H&ouml;henvergr&ouml;&szlig;erung von #menu beim Hovern--
*/

#menu li {
position: relative;
}

/*--versteckt die "Drop-Down-Links", solange nicht gehovert wird--*/
#menu ul ul {
position: absolute;
z-index: 2;
display: none;
}

/*--l&auml;sst die Dropdown-Links beim Hovern erscheinen--*/
#menu ul li:hover ul {
display: block;
}

/*--nur f&uuml;r IE-Versionen &lt;=6 erkennbar--*/
* html #menu ul li {
float: left;
width: 100%;
}

/*--nur f&uuml;r IE 7 erkennbar--*/
*+ html #menu ul li {
float: left;
width: 100%;
}

/*--bewirkt Hover-Effekt f&uuml;r IE &lt;7 auch f&uuml;r ul- und li-Elemente--*/
*html body {
behavior: url(csshover3-source.htc);
font-size: 100%;
}

*html #menu ul li a {
height: 1%;
}

/*-- l&auml;sst die dritte Ebene verschwinden--*/
#menu ul li:hover ul ul {display: none;}

/*-- l&auml;sst die dritte Ebene beim Hovern &uuml;ber die zweite in Erscheinung treten--*/
div#menu ul ul li:hover ul {display: block; position: absolute; top: 0; left: 100%;}
Ich denke, das Problem liegt daran, dass die beiden äußeren divs px-Angaben haben und das mittlere %. Ab 'ner bestimmten Größe des verkleinerten Browserfensters geht das dann nicht mehr. Aaaber: Wie schon geschrieben...wenn ich dem mittleren div KEINE %-Angabe gebe, wandert es auf 100% unter oder hinter die beiden anderen.... :/

Geändert von alexcss (28.02.2013 um 21:11 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 28.02.2013, 21:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.02.2013
Beiträge: 13
alexcss befindet sich auf einem aufstrebenden Ast
Standard

Problem mehr oder minder gelöst. Die Seiten bekommen %-Angaben mit max-width. Wer dann das Browserfenster auf irgendne winzige Größe runterverkleinert oder mit ner mini Auflösung unterwegs ist, sieht dann halt weniger drumherum...Nicht so perfekt, aber ein Anfang.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
DIV Layout mit CSS: Zentrieren eines Divs und links und rechts auffüllen. darkwave CSS 5 07.04.2011 14:11
Dreispaltiges Layout, clearing-Problem mittlere Spalte akb CSS 6 21.08.2010 18:16
3 Spalten Layout mit Divs - mitte fest, Seiten dynamische Breite devnull CSS 3 02.02.2009 11:03
Dreispaltiges Layout, problem... Rasch CSS 7 11.06.2005 14:42
Layout mit 3 DIVs nebeneinander bringt IE zum abstürzen theonlyrobi CSS 6 23.05.2005 11:22


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:34 Uhr.