✔ Positionierungsproblem

Status
Nicht offen für weitere Antworten.
P

packman

Grünschnabel
Hallo zusammen ich habe ein Problem mit der positiunierung im CSS. Ich habe meine Seite folgend aufgebaut: ein page das die ganze Seite darstelt darunter einen banner der sich der ganzen länge erstreckt und drunter sollte links ein menu sein und nebendran der der inhalt (content) der Homepage. Die Seite sollte auf Firefox und IE laufen. bei mir wird das menu immer falsch dargestellt, kann mir jemand helfen?

So solte die page aussehen:

PHP: 
|--------------------------page--|
|                                |
|----------------------banner----|
|          BANNER                |
|--------------------------------|
|                                |
|-menu--|--------content---------|
|       |                        |
| LINK1 |  TEXT...               |
| LINK2 |  ...........           |
| LINK3 |                        |
|       |                        |
|       |                        |
|       |                        |
|       |                        |
|       |                        |
|       |                        |
|       |                        |
|       |                        |
|       |                        |
|       |                        |
|-------|------------------------|
 
HTML: 
<html>
<head>
<title>CSS TestPage</title>
<style type="text/css">
body
{
	background-color:#CCCCCC;
}

#page
{
	width:760px;
	margin:0px auto;
	text-align:left;
	background-color:#bdbec6;
	border:1px solid #000000;
}

#banner
{
	font-size : 24px;
	font-weight : bold;
	background-color : #8888FF;
	margin-bottom : 20px;
	border: solid;
}

#menu
{
	float:left;
	border: solid;
	margin-right: 20px;
	width: 100px;
	
}

#content
{
	float:right;
	border: solid #FFFFFF;
}

</style>

</head>

<body>
<div id="page">
	<div id="banner">Banner</div>
	<div id="menu">Menu <br/>
		<a class="menu_link" href="http//:www.googel.ch" >Google</a> <br/>
	</div>
	<div id="content">
		<p>
		Nach Angaben von Rettungskräften war Irwin auf der Stelle tot; die mit einem Helikopter eingeflogenen Rettungskräfte konnten ihm nicht mehr helfen. Irwin sei durch Herzstillstand gestorben, sagte der Notarzt.

		Der Dokumentarfilmer hatte in der beeindruckenden Unterwasserlandschaft des Great Barrier Reef vor der Nordostküste Australiens an einem Dokumentarfilm gearbeitet. Die scheuen Stachelrochen haben an ihrer Schwanzflosse einen giftigen Stachel, den sie als Waffe einsetzen, wenn sie sich bedroht fühlen.

		Irwin habe sich mit den Dreharbeiten so nahe an Stachelrochen in höchste Gefahr begeben, sagte der australische Naturfilmer David Ireland. "Sie haben einen oder zwei Stachel am Schwanz, die nicht nur von Gift umhüllt sind, sondern auch wie ein Bajonett wirken", erläuterte Ireland.

		Der Australier, dessen Markenzeichen Khaki-farbene Shorts und Hemden waren, war über die Landesgrenzen hinweg mit Fernsehsendungen berühmt geworden, in denen er sich ohne Scheu mit wilden Tieren umgab.
		</p>
	</div>
</div>

</body>
</html>

ich habe extra paar border gemacht das ich die anordnung besser erkennen kann
 
Und hier der überarbeitete Quellcode ;)

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>CSS TestPage</title>
<style type="text/css">
body
{
        background-color:#CCCCCC;
}

#page
{
        width:760px;
        margin:0 auto;
        text-align: left;
        background-color:#bdbec6;
        border:1px solid #000000;
}

#banner
{
        font-size:24px;
        font-weight:bold;
        background-color:#8888FF;
        margin-bottom: 20px;
}

#menu
{
        float:left;
        width: 100px;
        border: 1px solid #fff;
}

#content
{
        border: 1px solid #FFFFFF;
        margin-left: 120px;
}

div.clear { /* stellt nach den floatenden Boxen wieder den normalen Textfluss her */
clear: left;
font-size: 1px;
height: 0;
line-height: 0;
margin: 0;
padding: 0;
}
</style>

</head>

<body>
<div id="page">
        <div id="banner">Banner</div>
        <div id="menu">Menu <br/>
                <a class="menu_link" href="http//:www.googel.ch" >Google</a> <br/>
        </div>
        <div id="content">
                <p>
                Nach Angaben von Rettungskräften war Irwin auf der Stelle tot; die mit einem Helikopter eingeflogenen Rettungskräfte konnten ihm nicht mehr helfen. Irwin sei durch Herzstillstand gestorben, sagte der Notarzt.

                Der Dokumentarfilmer hatte in der beeindruckenden Unterwasserlandschaft des Great Barrier Reef vor der Nordostküste Australiens an einem Dokumentarfilm gearbeitet. Die scheuen Stachelrochen haben an ihrer Schwanzflosse einen giftigen Stachel, den sie als Waffe einsetzen, wenn sie sich bedroht fühlen.

                Irwin habe sich mit den Dreharbeiten so nahe an Stachelrochen in höchste Gefahr begeben, sagte der australische Naturfilmer David Ireland. "Sie haben einen oder zwei Stachel am Schwanz, die nicht nur von Gift umhüllt sind, sondern auch wie ein Bajonett wirken", erläuterte Ireland.

                Der Australier, dessen Markenzeichen Khaki-farbene Shorts und Hemden waren, war über die Landesgrenzen hinweg mit Fernsehsendungen berühmt geworden, in denen er sich ohne Scheu mit wilden Tieren umgab.
                </p>
        </div>

        <div class="clear">&nbsp;</div>
</div>

</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück