[CSS] Content-Ausrichtung

Krain · 19. Januar 2005

Hallo zusammen,

Es geht bei mir um folgenden Code:


<style type="text/css">

<!--

#container {

 margin:0 auto;

 padding:5px;

 text-align:center;

 width:700px;

 height:100%;

 border:5px solid #86AABF;

}


#menu {

 float:left;

 clear:none;

 text-align:left;

 margin:0;

 padding:10 0;

}


#menu li {

 margin:3px;

 padding:1px 10px;

 display:block;

 background-color:#86AABF;

}


#menu li a {

 display:block;

 color:white;

}


#content {

	clear:none;

          }

-->

</style>


<div id="container">

<ul id="menu">

 <li><a href="">HOME</a></li>

 <li><a href="">Chat</a></li>

 <li><a href="">Webmailer</a></li>

 <li><a href="">Gästebuch</a></li>

 <li><a href="">Links</a></li>

</ul>


<div id="content">

<h2>Überschrift 1</h2>

<p>testjksdbfka dshf sdfjdksf dskfhjkasdhfsd fhasdhf vjkdsfakasdhfknsdakvc dhf sdfnjdksfnsd afasdf fjsdhafsd afhuiasdhfsdcvksdkahfkas</p>

<p>testjksdbfka dshf sdfjdksf dskfhjkasdhfsd fhasdhf vjkdsfakasdhfknsdakvc dhf sdfnjdksfnsd afasdf fjsdhafsd afhuiasdhfsdcvksdkahfkas</p>

<p>testjksdbfka dshf sdfjdksf dskfhjkasdhfsd fhasdhf vjkdsfakasdhfknsdakvc dhf sdfnjdksfnsd afasdf fjsdhafsd afhuiasdhfsdcvksdkahfkas</p>

</div>


</div>

Das Problem ist, dass der Content-Text um das Menü herum fließt, ich möchte aber, dass der Text rechts vom Menü bleibt. Ich hatte das schonmal gelesen wie es geht, aber ich finde es nicht mehr!

Kann mir einer helfen?

gruss

markus

tobias-digital · 19. Januar 2005

Hi!

So geht 's:


<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>

		<title></title>

		<style type="text/css">

		body {

		 margin: 0px auto;

		 text-align: center;

		 width: 700px;

		}

		div#container {

		 text-align: left;

		 padding: 5px;

		 border: 5px solid #86aabf;

		}

		ul#menu {

		 float: left;

		 width: 80px;

		 padding: 10px 0px;

		 margin: 0px;

		}

		ul#menu li {

		 margin: 3px;

		 padding: 1px 10px;

		 list-style-type: none;

		 background-color: #86aabf;

		}

		ul#menu li a {

		 display: block;

		 color: white;

		}


		div#content {

			float: left;

			width: 600px;

		}

		</style>

	</head>

	<body>

		<div id="container">

			<ul id="menu">

			 	<li><a href="">HOME</a></li>

			 	<li><a href="">Chat</a></li>

			 	<li><a href="">Webmailer</a></li>

				<li><a href="">Gästebuch</a></li>

				<li><a href="">Links</a></li>

			</ul>

			<div id="content">

				<h2>Überschrift 1</h2>

				<p>testjksdbfka dshf sdfjdksf dskfhjkasdhfsd fhasdhf vjkdsfakasdhfknsdakvc dhf sdfnjdksfnsd afasdf fjsdhafsd afhuiasdhfsdcvksdkahfkas</p>

				<p>testjksdbfka dshf sdfjdksf dskfhjkasdhfsd fhasdhf vjkdsfakasdhfknsdakvc dhf sdfnjdksfnsd afasdf fjsdhafsd afhuiasdhfsdcvksdkahfkas</p>

				<p>testjksdbfka dshf sdfjdksf dskfhjkasdhfsd fhasdhf vjkdsfakasdhfknsdakvc dhf sdfnjdksfnsd afasdf fjsdhafsd afhuiasdhfsdcvksdkahfkas</p>

			</div>

		</div>

	</body>

</html>

Allerdings wirst du mit dem Rahmen und den 100% Probleme bekommen. IMHO würde das nur mit einer Tabellenzelle oder fester Höhe hinhauen.

Noch was. Mein Code ist standardkonform, das bedeutet, das der IE* ihn nicht korrekt darstellen wird. Um ihn dort auch richtig anzuzeigen muss du Tantek's Box Model Hack anwenden: http://tantek.com/CSS/Examples/boxmodelhack.html

Gruß, Tobias

kills · 19. Januar 2005

Noch was. Mein Code ist standardkonform, das bedeutet, das der IE* ihn nicht korrekt darstellen wird.

Gruß, Tobias

[OT]

Ich liebe es....

IE for da world

[/OT]

geloescht_JesterDay · 19. Januar 2005

Noch was. Mein Code ist standardkonform, das bedeutet, das der IE* ihn nicht korrekt darstellen wird.

Dein code ist standardkonform, aber ich habe gestern bei meinen Nachforschungen zu CSS herausgefunden (irgendwo gelesen), dass der IE nur dann in den standards-compliance-mode geht, wenn die erste Zeile im Dokument die Zeile <!DOCTYPE> ist. Wenn du also die Zeile <?xml version="1.0" encoding="UTF-8"?> weglässt, validiert deine Seite beim w3c Validator immernoch als korrekte Seite, der IE stellt sie aber u.U. anders (richtiger) dar.

Ansonsten ist der IE immer im Quirks-mode. Bei mir stellte der IE es im Quirksmode eigentlich "richtig" dar, das Problem war nur, dass es ansich (nach dem Standard) so nicht richtig war. Nach dem entfernen der ersten Zeile war die Darstellung dieselbe wie im FF.

EDIT: Habs wieder gefunden:

Browser-Bugs

Der Internet Explorer 6 hat, wie war es anders zu erwarten, zwei Probleme mit der <!DOCTYPE>-Angabe. Wird vor dem <!DOCTYPE> ein Kommentar oder eine xml-Angabe eingefügt, so schaltet der IE immer in den Quirks-Modus:

http://www.css4you.de/wsdoctypeswitch/index.html

tobias-digital · 19. Januar 2005

Ich kenne die Problematik. Allerdings sehe ich garnicht ein, die Zeichensatzdeklaration wegzulassen, nur weil es die größte Softwarefirma der Welt es nicht schafft, die von eigenen Experten mitentwickelten Standards einzuhalten.

Klar, muss man bei kommerziellen Projekten darauf achten, dass der Internet Explorer die Seite auch richtig anzeigt, deswegen fahre ich mit Tantek's Hack eigentlich ganz gut.

Vorgehensweise: Seite Standard konform entwerfen --> mit Tantek's Hack die Seite so hinbiegen, dass der IE sie richtig interpretiert.

Übrigens nutzen nur noch ca. 80% der Internetuser den IE --> http://www.webhits.de/?http://www.webhits.de/cgi/browshow.pl

Auf heise.de nutzen nicht mal mehr 40% den IE http://www.heise.de/newsticker/result.xhtml?url=/newsticker/meldung/53548

Anmelden

[CSS] Content-Ausrichtung

Empfohlene Beiträge

Krain

Link zu diesem Kommentar

Auf anderen Seiten teilen

tobias-digital

Link zu diesem Kommentar

Auf anderen Seiten teilen

kills

Link zu diesem Kommentar

Auf anderen Seiten teilen

geloescht_JesterDay

Link zu diesem Kommentar

Auf anderen Seiten teilen

tobias-digital

Link zu diesem Kommentar

Auf anderen Seiten teilen

Dein Kommentar

Fachinformatiker Jobs

Fachinformatiker.de, 2024 by SE Internet Services

Links

Fachinformatiker.de App

Kontakt

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

Umsehen

Aktivitäten

Stellenanzeigen

Blog

Über Fachinformatiker.de