Supportnet Computer
Planet of Tech

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

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

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.

Antwort 4 von Flupo

Hier der CSS-Code (auf die wesentlichen Werte beschränkt, dh. Farben, Ränder, Schrift fehlt):

#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.

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

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

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>&copy; 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.

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.


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

Ich möchte kostenlos eine Frage an die Mitglieder stellen:


Ähnliche Themen:


Suche in allen vorhandenen Beiträgen: