nicht angemeldet
Layout mit fixer Breite und horizontal zentriert
Hallo,
ich hatte bisher ein Tabellenlayout (fixe Breite) der Form Logo 800px, darunter Menü 150px sowie Inhalt 650 px. Das Layout war horizontal zentriert.
Dieses Layout möchte ich nun gerne per CSS umsetzen.
Wie ich das Logo zentrieren kann ist soweit klar, nur wie sieht es mit den 2 darunterliegenden CSS-Layern/Spalten aus???
Danke schonmal für Eure Hilfe.
Marco Hügel
-
Hallo Marco,
Wie ich das Logo zentrieren kann ist soweit klar, nur wie sieht es mit den 2 darunterliegenden CSS-Layern/Spalten aus???
Variante 1: Du könntest eine Box drum herum zentrieren und dann mit float arbeiten.
Variante 2: Du positionierst absolut, setzt left: auf 50% und setzt margin-left: auf einen negativen Wert. (für die Navigation wären es -400px, für den Inhalt -250px)
Viele Grüße,
Christian-
Hallo Christian,
Variante 2: Du positionierst absolut, setzt left: auf 50% und setzt margin-left: auf einen negativen Wert. (für die Navigation wären es -400px, für den Inhalt -250px)
Habe es muit dieser Variante versucht und nach einer gewissen Zeit hinbekommen.
<div style="width:800px; margin:auto;"><img src="logo.jpg"></div>
<div style="position: absolute;width:150px; height: 500px;background-color: #e91210;left: 50%; margin-left: -400px;font-family:verdana, helvetica, sans-serif;">Menue</div>
<div style="position: absolute;width:650px; height: 500px;background-color: #FFFFFF;left: 50%;margin-left: -250px;font-family:verdana, helvetica, sans-serif;">Inhalt</div>Sollte ich hier noch etwas beachten/ändern oder ist der Code soweit OK? (Außer, dass ich den Code auslagern sollte)
Marco Hügel
-
Hallo Marco,
Sollte ich hier noch etwas beachten/ändern oder ist der Code soweit OK?
Ja, ich vergaß: Wenn die Breite des Browserfensters kleiner als 800 Pixel wird, dann bekommst Du ein Problem. (schaus Dir selbst an, Links wird etwas abgeschnitten)
Eine weitere Alternative wäre:
<div style="width:800px; margin:auto; position: relative;">
<img src="logo.jpg" alt="">
<div style="position: absolute; left: 0; top: ...; width: 150px; ..."></div>
<div style="position: absolute; left: 150px; top: ...; width: 550px; ..."></div>
</div>Wobei mir in diesem Zusammenhang (mit Container-<div>) die float-Lösung (linkes div float: left;, rechtes div margin-left: ...;) besser gefiele.
Was ich nicht so ganz verstehe ist Dein "height: 500px;" - wenn der Inhalt größer wird, wird nach CSS2 die Box nicht automatisch mitvergrößert. (auch wenn es der IE macht, andere Browser machen es korrekterweise nicht)
Viele Grüße,
Christian-
Hallo Christian,
Ja, ich vergaß: Wenn die Breite des Browserfensters kleiner als 800 Pixel wird, dann bekommst Du ein Problem. (schaus Dir selbst an, Links wird etwas abgeschnitten)
Ist mir klar gewesen! Vielleicht muss ich das Logo doch noch ein wenig verkleiner, sodaß es zumindest auch bei 800x600 korrekt dargestellt wird.
Wobei mir in diesem Zusammenhang (mit Container-<div>) die float-Lösung (linkes div float: left;, rechtes div margin-left: ...;) besser gefiele.
Wie würde die Lösung aussehen, kenne mich mit float nicht so aus?
Was ich nicht so ganz verstehe ist Dein "height: 500px;" - wenn der Inhalt größer wird, wird nach CSS2 die Box nicht automatisch mitvergrößert. (auch wenn es der IE macht, andere Browser machen es korrekterweise nicht)
Ich wollte das ganze eigentlich mit "min-height: 500px;" lösen, hat aber irgendwie nicht funktioniert. Kannst Du mir da auf die Sprünge helfen?
Danke und Gruß
Marco
-
Hallo Marco,
Wie würde die Lösung aussehen, kenne mich mit float nicht so aus?
Jetzt mal so aus dem Stehgreif:
<div style="margin: auto; width: 800px;">
<img... style="display: block;">
<div style="float: left; width: 150px;"></div>
<div style="margin-left: 150px;"></div>
<br style="clear: both;">
</div>Was ich nicht so ganz verstehe ist Dein "height: 500px;" - wenn der Inhalt größer wird, wird nach CSS2 die Box nicht automatisch mitvergrößert. (auch wenn es der IE macht, andere Browser machen es korrekterweise nicht)
Ich wollte das ganze eigentlich mit "min-height: 500px;" lösen, hat aber irgendwie nicht funktioniert. Kannst Du mir da auf die Sprünge helfen?
Das ganze ist ein Problem. Denn der IE kapiert min-height: 500px; nicht, anderer Browser dagegen schon.
Evtl. kannst Du zusätzlich ein separates Stylesheet für den IE einbinden, das height: zusätzlich noch setzt. (Beim IE ist height kein Problem)
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css">
<![endif]-->Viele Grüße,
Christian-
Hallo Christian,
danke schonmal für Deine Bemühungen! Werde mir das ganze heute Mittag genau zu Gemüte führen.
Evtl. kannst Du zusätzlich ein separates Stylesheet für den IE einbinden, das height: zusätzlich noch setzt. (Beim IE ist height kein Problem)
Und wenn ich einfach zusätzlich zu min-height noch height im Stylesheet einfüge?
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css">
<![endif]-->Den Code einfach so übernehmen oder benötige ich da noch eine JS-Abfrage?
Gruß
Marco :-)-
Hallo Marco,
Evtl. kannst Du zusätzlich ein separates Stylesheet für den IE einbinden, das height: zusätzlich noch setzt. (Beim IE ist height kein Problem)
Und wenn ich einfach zusätzlich zu min-height noch height im Stylesheet einfüge?
Dann macht es der IE so, wie Du es willst, alle Browser, die CSS korrekt umsetzen, bei mehr Inhalt, machen jedoch:
+----------------------+ ^
| Text | |
| Text | |
| Text | |
| Text | | 500px
| Text | |
| Text | |
| Text | |
+-Text-----------------+ v
Text
Text<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css">
<![endif]-->Den Code einfach so übernehmen
Ja, das sind sog. "conditional comments". Siehe http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp
oder benötige ich da noch eine JS-Abfrage?
Nein. Der Vorteil von "conditional comments" ist, dass sie ohne JS funktionieren.
Viele Grüße,
Christian-
Hallo Christian,
danke für Deine Hilfe. Werde mich jetzt mal ransetzen und hoffe, dass ich alleine zurechtkomme.
Ansonsten werde ich mich hier nochmals melden.
Gruß
Marco :-) -
Hallo Christian,
hat alles weitestgehend funktioniert. Ich habe 2 Style-Dateien mit folgenden Inhalten:
style.css:
#logo {margin: auto; width: 800px;min-height:608px;background-color: #FFFFFF;}
#menu {float: left; width: 150px; min-height: 500px; background-color: #e91210;}
#inhalt {margin-left: 150px; min-height: 500px;}ie.css:
#logo {margin: auto; width: 800px;min-height:608px;background-color: #FFFFFF;}
#menu {float: left; width: 150px; height: 500px; background-color: #e91210;}
#inhalt {margin-left: 150px; height: 500px;}Meine HTML-Datei hat folgenden Inhalt:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS-Layout</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css">
<![endif]-->
</head>
<body background="background.png">
<div id="logo"><img src="logo.jpg" style="display: block;">
<div id="menu">Menü1<br>Menü2</div>
<div id="inhalt">
</div>
</div></body>
</html>Wenn nun der Inhalt über die Höhe von 500px hinausgeht ändert sich die Hintergrundfarbe des Menübereichs auf weiß.
Irgendetwas scheint hier noch nicht korrekt zu sein? Könntest Du das nochmals prüfen?
Danke und Gruß
Marco :-)-
Hallo Marco,
Wenn nun der Inhalt über die Höhe von 500px hinausgeht ändert sich die Hintergrundfarbe des Menübereichs auf weiß.
Klar. Du kannst mit CSS den Spalteneffekt nur simulieren: http://css.fractatulum.net/sample/layout6format.htm
Viele Grüße,
Christian-
Hallo Christian,
Klar. Du kannst mit CSS den Spalteneffekt nur simulieren: http://css.fractatulum.net/sample/layout6format.htm
Hab mir das jetzt mehrmals angeschaut und werde einfach nicht ganz schlau daraus?!?!
Wenn ich es richtig verstehe muss ich hinter Menü und Inhalt bzw. hinter meinem ganzen Layout noch eine weitere "box" legen, die die Hintergrundfarbe meines Menüs beinhaltet.
Nur wie kriege ich das gebacken? Habe schon verschiedenes ausgetestet, komme aber einfach nicht auf die richtige Lösung?!? :-(
Gruß
Marco-
Hallo.
Nur wie kriege ich das gebacken? Habe schon verschiedenes ausgetestet, komme aber einfach nicht auf die richtige Lösung?!? :-(
Die von dir besuchte Seite hat auch einen Quelltext, von dem man sich inspirieren lassen kann.
MfG, at-
Hallo at,
Die von dir besuchte Seite hat auch einen Quelltext, von dem man sich inspirieren lassen kann.
Danke für den Hinweis. Natürlich habe ich mir die Seite genauer angesehen. Da ich jedoch kein Experte in Sachen CSS bin war ich ein wenig verwirrt, da auf der angesprochenen Seite einmal von IDs die Rede ist, aber dann Klassen verwendet werden.
Desweiteren habe ich ja noch ein Logo über diesen zwei Spalten, ich musste also erst mal überlegen wie ich Layer übereinander legen muss!
Danke nochmals an Christian der mir sehr geholfen hat.
Gruß
Marco
-
-
-
Ich glaube ich hab's nun doch raus.
Könntest Du nochmals prüfen, ob das so passt?
IE.CSS:
#logo {margin: auto; width: 800px;height:108px;}
#hintergrund {margin: auto; width: 800px; height: 500px;background-color: #e91210;}
#menu {float: left; width: 150px; height: 500px; background-color: #e91210;}
#inhalt {margin-left: 150px; height: 500px;background-color: #FFFFFF;}STYLE.CSS s.o. außer min-height bei hintergrund, menu u. inhalt
HTML-Bereich:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>zentrieren</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css">
<![endif]-->
</head>
<body background="background.png">
<div id="logo"><img src="logo.png" style="display: block;"></div>
<div id="back">
<div id="menu">Menü1<br>Menü2</div>
<div id="inhalt">Inhalt</div>
</div>
</body>
</html>Danke und Gruß
Marco :-)-
Hallo Marco,
Könntest Du nochmals prüfen, ob das so passt?
Ja, das sieht gut aus, wenn Du mit #hintergrund #back meinst. ;-)
Viele Grüße,
Christian
-
-
-
-
-
-
-
-
-
-