http://www.dsfc.ch/montre/css-design/
Ich habe Schwierigkeiten bei der Umsetzung dieses Designs in CSS.
css:
IE
firefox
Wie es aussehen sollte
3 Probleme beschäftigen mich:
1. Mir ist es nicht möglich das grüne Menu oben im Header zu platzieren.
2. Der Content ist im Firefox zu wenig hoch.
3. Der Footer ist zu hoch und ist nicht mit bündig mit dem Content.
Ich hoffe, dass mir jemand ein paar gute Hinweise geben kann.
Ich habe Schwierigkeiten bei der Umsetzung dieses Designs in CSS.
css:
Code:
body { background-color: #000; text-align: center; margin: 0px }
#content { background-color: #fff; text-align: left; margin: auto; position: relative; z-index: 2; top: 150px; width: 716px; height: auto }
#contentmiddle { background-color: #fff; text-align: left; float: left; margin-top: 0px; position: relative; z-index: 2; width: 416px; height: auto }
#contentleft { background-color: #00c; float: left; margin-top: 0px; margin-left: 0px; position: relative; z-index: 2; width: 150px; height: 250px }
#contentright { background-color: #900; float: right; margin-top: 0px; margin-right: 0px; position: relative; z-index: 2; width: 150px; height: 250px }
#header { background-color: #ff0; position: absolute; top: 0px; left: 0px; width: 100%; height: 150px }
#menu { background-color: #0f0; text-align: left; clear: both; margin-top: 120px; margin-right: auto; margin-left: auto; position: relative; z-index: 6; top: 0px; width: 548px; height: 12px }
#footer { background-color: #0c9; margin-bottom: 0px; position: relative; width: 100%; height: 100% }
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>css-design</title>
<link rel="stylesheet" type="text/css" href="screen.css" media="screen">
</head>
<body>
<div id="content">
<div id="contentleft"></div>
<div id="contentmiddle">
Dies ist eion Blindtext. Er dient nur als Platzhalter und sollte nicht gelesen werden weil es viele Rechtschreibefehler hat. Dafür lehne ich jede Verantwortung ab, denn wer jetzt immer noch am lesen ist, bei dem ist mindestens eine schraube Locker. Ich denke es wäre das beste wenn man den Text nicht beachten würde und sich mit wichtigeren Dingen beschöftigen würde. Ab jetzt Wiederholt sich der Text nur noch und kann daher auch nicht mehr als interessant angesehen werden.Dies ist eion Blindtext. Er dient nur als Platzhalter und sollte nicht gelesen werden weil es viele Rechtschreibefehler hat.
</div>
<div id="contentright"></div>
</div>
<div id="menu"></div>
<div id="footer"></div>
<div id="header"></div>
</body>
</html>IE
firefox
Wie es aussehen sollte
3 Probleme beschäftigen mich:
1. Mir ist es nicht möglich das grüne Menu oben im Header zu platzieren.
2. Der Content ist im Firefox zu wenig hoch.
3. Der Footer ist zu hoch und ist nicht mit bündig mit dem Content.
Ich hoffe, dass mir jemand ein paar gute Hinweise geben kann.
Zuletzt bearbeitet:
