3 spaltiges Design (Floating und Mitte)?

Status
Nicht offen für weitere Antworten.
josDesign

josDesign

Erfahrenes Mitglied
Ich habe folgenden Code vor einiger Zeit geschrieben. Nun aber, da ich mich nicht so gut auskenne bei CSS-Design, möchte ich diese Seite so umkonfigurieren das ich ein Design herausbekomme, welches dieser Seite hier vom Aufbau ähnelt. Ich möchte diese Seite nämlich mit CSS realisieren und nicht mit dem Tabellendesign.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title>Dreispaltig F&uuml;llend</title>
		<style type="text/css">
<!--	
	body {
			margin:0px;
			padding:0px;
			
			color: navy;
			background-color: orange;
			
		}
	
	#rechts {
		width:33%;
		float:left;
		color: inherit;
		background:white;
		border: 2px solid black;
		}
	
	#content {
		width:32%;
		
		float:left;
		
		color: inherit;
		background:white;
		
		border: 2px solid black;

		}
	
	#links {
		width:33%;
		float:left;
		color: inherit;
		background:white;
		border: 2px solid black;
		}	
-->	
</style>
	</head>

	<body>
		<div id="links">
			Links
</div>
		<div id="content">
			Mitte

</div>
		<div id="rechts">
			rechts
</div>
	</body>

</html>

Mit diesem Code bekomme ich ein Seitenfüllendes Template. Nun möchte ich es aber so haben wie auf dieser Seite hier.

Ich habe schon etliche Dinge probiert, aber ich denke, ich bin vom Grundgedanken her schon falsch. Vielleicht kann mir jemand einen Tipp geben?

Mit freundlichen Grüßen und bestem Dank im Vorraus,
jos
 
Mein Lösungsvorschlag:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

        <head>
                <meta http-equiv="content-type" content="text/html;charset=utf-8" />
                <title>Dreispaltig Füllend</title>
                <style type="text/css">
<!--
        body {
                        margin:0px;
                        padding:0px;
                        color: navy;
                        background-color: orange;
                }

        #wrapper {
                 width: 800px;
                 margin: 0 auto;
                 }

        #rechts {
                width:200px;
                float:right;
                color: inherit;
                background:white;
                border: 2px solid black;
                }

        #content {
                color: inherit;
                background:white;
                border: 2px solid black;
                margin: 0 204px;
                }

        #links {
                width:200px;
                float:left;
                color: inherit;
                background:white;
                border: 2px solid black;
                }

        .clear {
               clear: both;
        }
-->
</style>
        </head>

        <body>
                <div id="wrapper">
                     <div id="links">Links</div>
                     <div id="rechts">rechts</div>
                     <div id="content">Mitte</div>

                     <div class="clear"></div>
                </div>
        </body>

</html>
 
Hey cool Danke!

Aber einige Fragen hab ich da noch:

Was passiert wenn man bei der ID "wrapper" den margin, so wie du nur durch 2 Variablen definiert? Gilt das dann auch für die gegenüberliegenden Seiten? (Also: "margin: 0 auto;" = "margin: 0, auto, 0, auto;")


Wieso bekommt die ID "content" keine Breite zugewiesen? Kann man die einfach frei lassen und ist diese dann w3c konform?

".clear" ? Ich habe mir das in der Selfhtml gerade angesehen aber ich check nicht was damit gemeint ist.



Ansonsten hat mir wirklich der Grundgedanke bereits in die Irre geführt. Einen Wrapper für all die DIV's... auf das wäre ich nicht gekommen. :(
 
Die zwei Werte in der margin-Eigenschaft gelten immer für die jeweils gegenüberliegenden Seiten.

Der mittleren Spalte wird keine Breite zugewiesen, da sich sich ja von selbst ergibt und ggfs. durch die margin-Eigenschaft "nachjustiert" (verkleinert) werden kann.

Mit der clear-Eigenschaft wird nach den floatenden Boxen wieder der normale Textfluss im Dokument hergestellt.
 
michaelsinterface hat gesagt.:
Die zwei Werte in der margin-Eigenschaft gelten immer für die jeweils gegenüberliegenden Seiten.

Der mittleren Spalte wird keine Breite zugewiesen, da sich sich ja von selbst ergibt und ggfs. durch die margin-Eigenschaft "nachjustiert" (verkleinert) werden kann.

Mit der clear-Eigenschaft wird nach den floatenden Boxen wieder der normale Textfluss im Dokument hergestellt.
Zum Vergrößern anklicken....


Super. Danke vielmals.

Ich sehs schon... Tabellenbasierte Homepages sind wirklich out. Mit der heutigen CSS-Version 2.1 kann man schon sehr viel realisieren.
 
OK, ich habe das Ganze nun etwas abgeändert und angepasst.

Wie kann ich es nun aber machen, das die Seite, wenn der Inhalt nicht die ganze Fensterhöhe benötigt trotzdem die Seite auf 100% Höhe ausgedeht wird? (wholetop Höhe bleibt aber auf 166px)

Das heißt:

ID wholetop > bleibt gleich
ID wholeleft, wholecontent, wholereight > höhe passt sich an damit die Seite füllend angezeigt wird.
ID wholebottom > bleibt von der Höhe her gleich aber muss am unteren Rand sein.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<meta name="generator" content="Adobe GoLive" />
		<title>Templatebuilding: bike the bugles.at</title>
		<style>
			<!--
				/* Standard Stile */
				body {
							background-color: white;
							background-image: url(fileadmin/template/bg.gif)
							font-family: Verdana, Arial, Helvetica, san-serif;
							color: black;
							
							margin: 0px 0px 0px 0px;
							padding: 0px 0px 0px 0px;
							
							text-align: center; /* Zwecks Hack */
				}
				
				
				/* Grundgeruest */
				#wholesite {							/* Wrapper für Seitendesign */
							width: 801px;				/* Gesamte Seitenbreite */
							height: 100%;				/*Höhe des Wrappers */
							margin: 0px auto;	/*Standart: margin: 0px auto 0px auto; */
				}
				
				#wholetop {								/* Header */
							width: 801px;
							height: 166px;
							margin: 0px 0px 5px 0px;
							padding: 0px;
							background-color: magenta;
							
				}
				#wholeright {							/*Rechte Spalte */
							width: 150px;
							float: right;
							color: inherit;
							background: orange;
							margin: 0px 0px 0px 0px;
							position: absolut;
							top: 171px;
							height: 100%;
							
				}
				#wholecontent {							/* quasi der Hauptteil: Content */
							color: inherit;
							background-color: grey;
							margin: 0px 155px 0px 155px;
							padding: 0px 10px 20px 10px;
							height: 100%;
				}
				#wholeleft {							/*linker Bereich*/
							width: 150px;
							float: left;
							color: inherit;
							background-color: yellow;
							margin: 0px 0px 0px 0px;
							position: absolut;
							top: 171px;
							height: 100%;
							
				}
				#wholebottom {							/*Footer-Bereich*/
							width: 801px;
							float: left;
							margin: 5px 0px 0px 0px;
							
							background-color: red;
							color: inherit;
							position: absolute;
							bottom: 0px;
				}
				.clear {								/* Um den Textfluss danach wiederherzustellen */
							clear: both;
				}
			-->
		</style>
	</head>

	<body>
		<div id="wholesite">
			<div id="wholetop">TOP</div>
			<div id="wholeleft">LEFT</div>
			<div id="wholeright">RIGHT</div>
			<div id="wholecontent">CONTENT</div>
			<div id="wholebottom">BOTTOM</div>
			<div class="clear"></div>
		</div>
	</body>

</html>

Ich habe schon mit diversen Höhen herumprobiert... aber da kam nichts heraus?

Gibts hierfür einen Trick?


EDIT: HTML ausgetauscht
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück