Div anstelle von Tabellen mit 3 Zellen

Boardster · #2 22.12.2004, 11:11

Ich habe dein Konstrukt nur kurz überflogen, aber versuche es doch einmal mit zusätzlichen float-Angaben für "top" und "body".

TRS · #3 22.12.2004, 12:15

Code:

<div id="header"></div>
<div id="navigation"></div>
<div id="content"></div>

Code:

#header {
height: 100px;
left: 100px;
position: absolute;
top: 0;
}

#navigation {
left: 0;
position: absolute;
top: 0;
width: 100px;
}

#content {
left: 100px;
position: absolute;
top: 100px;
}

Dies ist das Grundgerüst für das Layout. Alle weiteren CSS Angaben, insbesonders Befehle wie Margin und Padding sollten innerhalb einer weitere Klasse oder ID definiert werden um Problemen des IEs zu entgehen.

Code:

<div id="header"><div class="header"></div></div>
<div id="navigation"><div class="navigation"></div></div>
<div id="content"><div class="content"></div></div>

fabian · #4 24.12.2004, 12:01

Tag,

Danke schon mal fuer die Tipps.

@Reimer:
Deine Variante geht eigentlich. Eigentlich. Mein Problem ist, und dies hab ich in meinem ersten Posting wohl nicht erwaehnt, dass dieses Konstrukt mehr als 1x auf der gleichen Seite vorkommt.
Daher dachte ich, ich sei ein ganz cleverer und aendere einfach die ID auf CLASSes um. Naja, der Effekt war dann nicht so toll. Hab dann versucht mit float:left und right zu spielen, aber irgendwie bin ich einfach nicht fuer dies geboren.
Vielleicht weiss Jemand noch weiter und sonst hoffe ich, dass mir Jemand ein CSS Buch unter den Weihnachtsbaum legt.

PS: Frohe Festtage an Alle

TRS · #5 24.12.2004, 12:48

Wandel ID in Klassen um. Danach muss du um jedes Element einen Wrapper bauen, der die Elemente einschließt.

Code:

<div class="wrapper"><div class="header"></div>
<div class="navigation"></div>
<div class="content"></div></div>

<div class="wrapper"><div class="header"></div>
<div class="navigation"></div>
<div class="content"></div></div>

<div class="wrapper"><div class="header"></div>
<div class="navigation"></div>
<div class="content"></div></div>

Für margin, padding und border der Klassen header, navigation und content würde ich noch weitere Klassen anlegen.

MrNase · #6 24.12.2004, 16:52

Und was erreichst du damit?

TRS · #7 24.12.2004, 17:15

position:absolute bezieht sich immer auf das Mutter Element, daher der Wrapper. Die Klassen für margin, padding und border umgehen die Probleme bezüglich der Boxmodel unter dem Internet Explorer. Die erste Box gibt die breite an, die innere Box gibt die Formatierung der Box an.

fabian · #8 26.12.2004, 21:28

Abend,

hmmm, es wollte mir niemand ein CSS Buch schenken.
Also, ich hab es jetzt mal mit dem Wrappter (Container) versucht.

1:1 uebernommen und noch mit einem float:left und Farben ausgestattet, sieht es wie auf dem zweiten Bild aus.
Code:

Code:

<style>
   .container
   		  {
   			
   			  width:100%;
   		  }
   	
   .header {
   height: 100px;
   left: 100px;
   position: absolute;
   top: 0;
   background-color: blue;
   }
   
   .navigation {
   float: left;
   left: 0;
   position: absolute;
   top: 0;
   width: 100px;
   background-color: red;
   }
   
   .content {
   left: 100px;
   position: absolute;
   top: 100px;
   background-color: yellow;
   }
   
   </style>
   
   </head>
   
   <body>
   <div id="container">
   
   
   	<div class="header">
 		 	<strong>Wir wollen an die Macht</strong><br />Date: December 8, 2004 04:04PM		</div>
   	<div class="navigation">
   		        <strong>Bruzzelteeschluerfer</strong><br />
   		<br /><br />
   
 					</div>
   	<div class="content">
 		 Ja, auch wir wollen Einfluss auf das Weltgeschehen haben, ob es euch passt oder nicht ist mir eigentlich Schnuppe. Keine Sternschnuppe. Mehr das Verb, aber dann muesste ich es ja auch klein schreiben. hmmmmm ?<br />
   				</div>
   
   	
   </div>
   <br /><br />
   <div id="container">
   
   
   	<div class="header">
 		 	<strong>Re: Wir wollen an die Macht</strong><br />Date: December 8, 2004 04:06PM		</div>
   	<div class="navigation">
  		 <strong>jetztkommteinnochviellaengername</strong><br />
   		<br /><br />
 					</div>
   	<div class="content">
   
   		 Jetzt wird es mir sicher das Design verhauen, aber was soll<br />
   				</div>
   
   	
   </div>
   
   
   
   </body>

Das position:absolute 3x auskommentiert und es sieht wie auf dem ersten Bild aus mit dem Code

Code:

...<style>
   .container
   		  {
   			
   			  width:100%;
   		  }
   	
   .header {
   float: right;
   height: 100px;
   left: 100px;
   /*position: absolute;*/
   top: 0;
   background-color: blue;
   }
   
   .navigation {
   float: left;
   left: 0;
   /*position: absolute;*/
   top: 0;
   width: 100px;
   background-color: red;
   }
   
   .content {
   left: 100px;
   /*position: absolute;*/
   top: 100px;
   background-color: yellow;
   }
   
   </style>
   
   </head>
   
   <body>
   <div id="container">
   
   
   	<div class="header">
 		 	<strong>Wir wollen an die Macht</strong><br />Date: December 8, 2004 04:04PM		</div>
   	<div class="navigation">
   		        <strong>Bruzzelteeschluerfer</strong><br />
   		<br /><br />
   
 					</div>
   	<div class="content">
 		 Ja, auch wir wollen Einfluss auf das Weltgeschehen haben, ob es euch passt oder nicht ist mir eigentlich Schnuppe. Keine Sternschnuppe. Mehr das Verb, aber dann muesste ich es ja auch klein schreiben. hmmmmm ?<br />
   				</div>
   
   	
   </div>
   <br /><br />
   <div id="container">
   
   
   	<div class="header">
 		 	<strong>Re: Wir wollen an die Macht</strong><br />Date: December 8, 2004 04:06PM		</div>
   	<div class="navigation">
  		 <strong>jetztkommteinnochviellaengername</strong><br />
   		<br /><br />
 					</div>
   	<div class="content">
   
   		 Jetzt wird es mir sicher das Design verhauen, aber was soll<br />
   				</div>
   
   	
   </div>
   
   
   
   </body>...

Wie verstaendnislos bin ich?

fabian · #9 05.01.2005, 10:55

hmmm, gibt es da nicht noch den Einen oder Anderen Schlaukopf in der grossen, weiten Welt?

Patrick Gotthardt · #10 05.01.2005, 13:33

XHTML:

Code:

<div class="container">
     <div class="sitebar">
     <h2>Letze News</h2>
      <ul>
   	<li><a href="#">Working on a Timemachine</a></li>
   	<li><a href="#">Some other thing</a></li>
   	<li><a href="#">Yet another headline</a></li>
   	<li><a href="#">Thats news again!</a></li>
      </ul>
     </div>
     <div class="content">
     <div class="header">Header</div>
      <h1>I am a Headline</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Vestibulum in dolor. Etiam bibendum, diam vel sagittis faucibus, tellus
      felis luctus tellus, sit amet ultricies augue nibh eu sem. Pellentesque in
      mi sed lacus dictum volutpat. Class aptent taciti sociosqu ad litora
      torquent per conubia nostra, per inceptos hymenaeos. Fusce pede. Donec
      aliquam faucibus magna. Etiam interdum massa sed augue. Vivamus blandit
      accumsan orci. Phasellus tempus. Proin faucibus. Phasellus tincidunt nulla
      et massa. Fusce erat leo, ultrices sed, mattis vel, ullamcorper sed, eros.
      Quisque quis wisi ut lacus feugiat cursus. Nam aliquet felis facilisis pede.
      Mauris ullamcorper nibh in eros. Cras accumsan magna in diam.</p>
     </div>
    </div>
    
    <div class="container">
     <div class="sitebar">
     <h2>Letze News</h2>
      <ul>
   	<li><a href="#">Working on a Timemachine</a></li>
   	<li><a href="#">Some other thing</a></li>
   	<li><a href="#">Yet another headline</a></li>
   	<li><a href="#">Thats news again!</a></li>
      </ul>
     </div>
     <div class="content">
     <div class="header">Header</div>
      <h1>I am a Headline</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Vestibulum in dolor. Etiam bibendum, diam vel sagittis faucibus, tellus
      felis luctus tellus, sit amet ultricies augue nibh eu sem. Pellentesque in
      mi sed lacus dictum volutpat. Class aptent taciti sociosqu ad litora
      torquent per conubia nostra, per inceptos hymenaeos. Fusce pede. Donec
      aliquam faucibus magna. Etiam interdum massa sed augue. Vivamus blandit
      accumsan orci. Phasellus tempus. Proin faucibus. Phasellus tincidunt nulla
      et massa. Fusce erat leo, ultrices sed, mattis vel, ullamcorper sed, eros.
      Quisque quis wisi ut lacus feugiat cursus. Nam aliquet felis facilisis pede.
      Mauris ullamcorper nibh in eros. Cras accumsan magna in diam.</p>
     </div>
    </div>

CSS:

Code:

      .sitebar {
   	   position: absolute;
   	width: 250px;
      }
      
      .header {
   	background: #00F;
      }
      
      .content {
   	   background: #FF0;
   	border-left: 250px solid #F00; /* könnte auch eine grafik sein */
      }

Bei mir funktioniert es, hab's aber auch nur unter Firefox 1.0/Linux getestet... Gott weiß, was IE/Windows damit macht. *g*

Oh... und ja, das mit dem .header im .content ist ein fieser, kleiner, eckliger (aber effektiver) Trick.

"

Edit: Achso... du musst natürlich wenn du die breite .sitebar anpassen willst den border vom .content ebenfalls anpassen.

Edit2: .container ist überflüssig, aber falls du nen overall-border oder sowas einbinden willst ganz praktisch.

fabian · #11 06.01.2005, 22:18

Tag,

Danke Dir schon mal dafuer, dass Dich mit mir abgibst

Hab es natuerlich gleich versucht und endlich klappt es mit dem Header und den DIV's. Fast klappt es. Wenn der linke rote Bereich sitbar laenger ist, als der Content, dann sieht es ganz ueberlappend.
Hab es jetzt mal versucht mit einem Container hinzufuegen mit height: 100%. Natuerlich kein. Erfolg ebenfalls hab ich mit height herumgespielt bei content. Naja. Macht mich alles nicht gluecklich.

Vielleicht hast noch einen Tipp fuer mich auf Lager?

Patrick Gotthardt · #12 06.01.2005, 22:38

Na ja, da bleibt wohl nichts übrig ausser tricksen.

"

Bei denen, wo das passiert gibts du einfach dem .content per inline-style ein entsprechendes padding-bottom.
Wirst etwas testen müssen, aber es sollte klappen, sofern du weißt, wie lang die rote Spalte ist.

fabian · #13 06.01.2005, 22:42

Zitat:

Zitat von TheDragonMaster

Wirst etwas testen müssen, aber es sollte klappen, sofern du weißt, wie lang die rote Spalte ist.

Und genau hier muesste die rote Alarmlampe losgehen. Es ist nicht immer klar, wie hoch die rote, linke sidebar wird...

Patrick Gotthardt · #14 06.01.2005, 23:09

Frei nach Zeldman: Nimm ne Tabelle.

Eigentlich habe ich die Lösung, aber aufgrund von Bugs in allen gängigen Browsern funktioniert das nicht (float-ende Objekte werden falsch berechnet).

fabian · #15 07.01.2005, 08:56

Zitat:

Zitat von TheDragonMaster

Frei nach Zeldman: Nimm ne Tabelle.

Eigentlich habe ich die Lösung, aber aufgrund von Bugs in allen gängigen Browsern funktioniert das nicht (float-ende Objekte werden falsch berechnet).

Dachte ich es mir doch fast, den die tausenden von Tutorials (auch zeldman) hatten immer andere Beispiele ...

Patrick Gotthardt · #16 07.01.2005, 14:04

Tja... es wird wohl noch dauern, bis die Browser solche Sachen so unterstützen, wie sie es eigentlich sollten... aber für das meiste reicht CSS aus.
In dem Fall kann man aber eine Tabelle rechtfertigen... (vorrausgesetzt dieses Layout-Konstrukt ist wirklich notwendig).

fabian · #17 07.01.2005, 14:08

Zitat:

Zitat von TheDragonMaster

...
In dem Fall kann man aber eine Tabelle rechtfertigen... (vorrausgesetzt dieses Layout-Konstrukt ist wirklich notwendig).

Ja, es rechtfertigt es

Danke euch trotzdem fuer die Hilfe.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Tipp: Tabellen richtig nutzen etc.	MaMo	Programmierung und Datenbanken	21	19.12.2004 02:17