Supportnet / Forum / Webseiten/HTML
CSS-Problem
Frage
Ich bin gerade dabei mich in Webdesign mit CSS-Layouts einzuarbeiten und habe ein Problem.
Damit ihr wißt, worüber ich spreche hier mal ein [url=http://home.arcor.de/f_braun/conceptX/index_css.htm]Link[/url]. (guckt nicht auf den Inhalt, ist alles nur Übung ;-) und meiner ist das auch nicht)
Ich möchte das Layout der Seite gern flexibel gestalten, so dass bei hoher Auflösung mehr von der Bildschirmfläche genutzt wird. ([code]width: 90%[/code] für das container-div)
Das Menü ist ein [code]float: left;[/code] vor dem content-div.
Problem dabei ist, dass bei kleiner Fenstergröße das Bild unter die Navigation rutscht.
Aktuell ist die Breite des Containers fest eingestellt - das Problem tritt also nicht auf. Der Container wird aber auch bei größerer Auflösung nicht breiter.
Mit [code]min-width: 900px; [/code] könnte ich das Problem ja in den Griff bekommen. Nur ignoriert der IE6 diese Angabe. :-(
Gehts auch anders?
Gruß Flupo
Antwort 1 von Flupo
Ich habe jetzt die css-Datei nochmal ausgetauscht.
Das Bild springt jetzt nur noch im IE nach unten. Dafür zeigt er Bildlaufleisten, wenns zu klein wird. (overflow: auto;)
Im Firefox springt nichts mehr, dafür wird das Bild abgeschnitten.
Wer hilft mir zu einem einigermaßen gleichen Erscheinungsbild?
Gruß Flupo
Das Bild springt jetzt nur noch im IE nach unten. Dafür zeigt er Bildlaufleisten, wenns zu klein wird. (overflow: auto;)
Im Firefox springt nichts mehr, dafür wird das Bild abgeschnitten.
Wer hilft mir zu einem einigermaßen gleichen Erscheinungsbild?
Gruß Flupo
Antwort 2 von Flupo
Leute lasst mich nicht so hängen!
Eine Aussage wie "Nee, das geht nicht anders." würde mir auch schon helfen.
Gruß Flupo
Eine Aussage wie "Nee, das geht nicht anders." würde mir auch schon helfen.
Gruß Flupo
Antwort 3 von 007
Hi, ich bin zwar nicht der Profi für dein Problem, aber poste mal den css-Code hier ins Forum, um einen besseren Einblick zu bekommen.
Versuch mal den Container in der Seiten-Höhe mittig zu zentrieren. Vielleicht hilft das schon.
Versuch mal den Container in der Seiten-Höhe mittig zu zentrieren. Vielleicht hilft das schon.
Antwort 4 von Flupo
Hier der CSS-Code (auf die wesentlichen Werte beschränkt, dh. Farben, Ränder, Schrift fehlt):
Die Notation der Div´s in der HTML-Datei sieht dann so aus:
#container {
MARGIN: 1em auto;
WIDTH: 90%;
min-width: 900px
}
#header {
WIDTH: 100%;
}
#menu{
MARGIN-TOP: 10px;
FLOAT: left;
WIDTH: 20%;
HEIGHT: 200px
}
#contents {
OVERFLOW: auto;
MARGIN-LEFT: 200px;
MARGIN-RIGHT: 20px;
}
#footer {
CLEAR: both;
WIDTH: 100%;
HEIGHT: 20px;
}
Die Notation der Div´s in der HTML-Datei sieht dann so aus:
<BODY>
<DIV id=container>
<DIV id=header></DIV>
<DIV id=menu></DIV>
<DIV id=contents></DIV>
<DIV id=footer></DIV>
</DIV>
</BODY>
Antwort 5 von web1
Benutz doch Tabellen!
Irgendein Browser wird die Seite immer verkehrt anzeigen.
Irgendein Browser wird die Seite immer verkehrt anzeigen.
Antwort 6 von Flupo
Mir geht es ja gerade darum, vom Tabellen-Layout wegzukommen.
Ich finde die Idee hinter dem CSS-Layout (Trennung von Content und Layout) Klasse. Das Tolle daran ist ja, dass selbst Browser ohne CSS-Unterstützung solche Seiten noch halbwegs sinnvoll darstellen.
Man kann spezielle Layouts für den Druck oder bestimmte Ausgabegeräte (z.B. PDA´s) einbauen.
Und wenn das Layout erstmal steht, ist die Pflege des Contents ein Kinderspiel da man bei einer neuen Seite mit der Formatierung nicht wieder von vorn anfangen muss.
Gruß Flupo
Ich finde die Idee hinter dem CSS-Layout (Trennung von Content und Layout) Klasse. Das Tolle daran ist ja, dass selbst Browser ohne CSS-Unterstützung solche Seiten noch halbwegs sinnvoll darstellen.
Man kann spezielle Layouts für den Druck oder bestimmte Ausgabegeräte (z.B. PDA´s) einbauen.
Und wenn das Layout erstmal steht, ist die Pflege des Contents ein Kinderspiel da man bei einer neuen Seite mit der Formatierung nicht wieder von vorn anfangen muss.
Gruß Flupo
Antwort 7 von web1
Oder du setzt auf CMS, das ist ja die einfachste Möglichkeit, erst musst du zware alles anpassen, aber später brauchst dann nur neuen Text hinzufügen.
Antwort 8 von Flupo
@web1: Sorry, aber deine Antworten sind leider nicht sehr hilfreich. Auch mit einem CMS muss man das Layout einer Seite definieren. Es treten dabei also die selben Probleme auf. Der Inhalt ist dabei von eher untergeordneter Bedeutung.
Danke aber trotzdem, dass du dich mit meinem Problem beschäftigt hast.
Das CSS-Design ist an sich auch nicht schwierig. Problem ist nur die unterschiedliche Interpretation durch die Browser. Ich will aber eine Seite bauen, die wenigstens die drei "Großen" (IE, FF und Opera) halbwegs gleich darstellen.
Gruß Flupo
Danke aber trotzdem, dass du dich mit meinem Problem beschäftigt hast.
Das CSS-Design ist an sich auch nicht schwierig. Problem ist nur die unterschiedliche Interpretation durch die Browser. Ich will aber eine Seite bauen, die wenigstens die drei "Großen" (IE, FF und Opera) halbwegs gleich darstellen.
Gruß Flupo
Antwort 9 von 007
Solang keiner eine andere idee als ich hat, versuchs doch mal mit meiner Antwort3.
Den ganzen Container in zwei div packen etwa so, musst du noch etwas anpssen.
css-Code:
div.aussen { width:100%; height:100%; }
div.container { margin-left:auto;
margin-right:auto;
vertical-align:middle; }
Deine Seite:
<body>
<div id="aussen">
<div id="container">
<div id="header"><h1>C O N C E P T - X</h1></div>
<div id="menu">
<ul>
<li><a href="index_css.htm">Home</a></li>
<li><a href="3bg_css.htm">Der 3BG</a></li>
<li><a href="mein_3bg_css.htm">Mein 3BG</a></li>
</ul>
</div>
<div id="contents"> <br><br>
<p style="text-align:center"><img src="images/passat_500.jpg" width="550" height="412" border="0" alt=""></p>
<br><br>
<p style="text-align:center">Ein ehemaliges Mitglied von <a href="www.drive4fun.ag.vu" target="_blank">www.drive4fun.ag.vu</a></p><br>
<br>
</div>
<div id="footer"><p>© Copyright by Flupo 2006</p></div>
</div>
</div>
</body>
</html>
Ich kann es leider nicht ausprobieren, da ich nur IE verwende.
Den ganzen Container in zwei div packen etwa so, musst du noch etwas anpssen.
css-Code:
div.aussen { width:100%; height:100%; }
div.container { margin-left:auto;
margin-right:auto;
vertical-align:middle; }
Deine Seite:
<body>
<div id="aussen">
<div id="container">
<div id="header"><h1>C O N C E P T - X</h1></div>
<div id="menu">
<ul>
<li><a href="index_css.htm">Home</a></li>
<li><a href="3bg_css.htm">Der 3BG</a></li>
<li><a href="mein_3bg_css.htm">Mein 3BG</a></li>
</ul>
</div>
<div id="contents"> <br><br>
<p style="text-align:center"><img src="images/passat_500.jpg" width="550" height="412" border="0" alt=""></p>
<br><br>
<p style="text-align:center">Ein ehemaliges Mitglied von <a href="www.drive4fun.ag.vu" target="_blank">www.drive4fun.ag.vu</a></p><br>
<br>
</div>
<div id="footer"><p>© Copyright by Flupo 2006</p></div>
</div>
</div>
</body>
</html>
Ich kann es leider nicht ausprobieren, da ich nur IE verwende.
Antwort 10 von 007
Nachtrag:
Ich glaube, nach nochmaligen lesen deiner Frage, dass ich dich falschverstanden habe. Mein Beispiel bezieht sich nur auf den Bereich ausserhalb des Containers. Aber du möchtest den Containerinhalt richtig anordnen. Da bin ich im Moment etwas überfragt. Vielleicht fällt mir dazu noch etwas ein.
Ich glaube, nach nochmaligen lesen deiner Frage, dass ich dich falschverstanden habe. Mein Beispiel bezieht sich nur auf den Bereich ausserhalb des Containers. Aber du möchtest den Containerinhalt richtig anordnen. Da bin ich im Moment etwas überfragt. Vielleicht fällt mir dazu noch etwas ein.
Antwort 11 von Flupo
Zitat:
Nachtrag:
Ich glaube, nach nochmaligen lesen deiner Frage, dass ich dich falschverstanden habe. Mein Beispiel bezieht sich nur auf den Bereich ausserhalb des Containers. Aber du möchtest den Containerinhalt richtig anordnen. Da bin ich im Moment etwas überfragt. Vielleicht fällt mir dazu noch etwas ein.
Nachtrag:
Ich glaube, nach nochmaligen lesen deiner Frage, dass ich dich falschverstanden habe. Mein Beispiel bezieht sich nur auf den Bereich ausserhalb des Containers. Aber du möchtest den Containerinhalt richtig anordnen. Da bin ich im Moment etwas überfragt. Vielleicht fällt mir dazu noch etwas ein.
Schön, dass du selbst drauf gekommen bist. ;-)
Ich werd wohl doch eine feste Breite für den Container nehmen müssen. Hab auch noch andere Quellen ohne Erfolg angezapft. :-(
Gruß Flupo