# Wie teile ich den Inhalt-Bereich einer Website auf mit CSS?



## RaPhNiX (28. August 2007)

Hey, Leute...

Ich soll eine Website für einen Kollegen von mir machen. Nun komm ich mit der Navigation und mit dem Design gut klar. Mein Problem ist aber noch: Wie gestalte ich den Inhalt-Bereich professionel?

Ich wollte ein dreispaltiges Layout machen (siehe http://www.nokia.de/ (unter den Bildern)) aber mit Ebenen funktioniert das nicht ganz, da sie sich verschieben. Geht das mit CSS oder soll ich es mit Slices aus Photoshop machen?

Bitte um Antwort... Danke im Vorraus...

mfg RaPhNiX


----------



## nero_85 (28. August 2007)

Nimm doch einfach eine Tabelle


----------



## Maik (28. August 2007)

Hi,

schau dir mal Yet Another Multicolumn Layout | An (X)HTML/CSS Framework an.

@nero_85: Das Thema heißt: "Wie teile ich den Inhalt-Bereich einer Website auf mit *CSS*?" und nicht "Wie teile ich den Inhalt-Bereich einer Website auf mit Tabellen?"


----------



## RaPhNiX (28. August 2007)

So wie die News am unten an der Site... das wäre genau das... Ist das eine Tabelle, oder was?


----------



## Maik (28. August 2007)

Bei "YAML" kommen ausschliesslich div-Elemente zum Einsatz, die mit Hilfe der float-Eigenschaft nebeneinander (spaltenweise) angeordnet werden.


----------



## nero_85 (28. August 2007)

Mehr oder Wenigter schon. Innerhalb der Tabelle sind dann <div>-Layers:


```
<table border="0" cellspacing="0" cellpadding="0" width="534">
  
  <tr>
    <td align="left" valign="top" width="126">
    <a id="anchor294470"></a><!-- start spaPromotion -->

<div class="spa126PromotionalElement">
  <div class="spa126PromotionalContent">
    <div class="spa126PromotionalMedia">
      <!-- START Article/endlinkImage.jsp -->
<a href="http://sitestat.nokia.de/nokia/de-clickins/s?doorpage.DE.2652.113042.spa.0.nokia_akkubl5c_erklaerung&ns_type=clickin&ns_url=[http://batteryreplacement.nokia.com/batteryreplacement/de-DE/]" target="_blank" title=""><img src='/de/59/294474.data.jpg' alt='Akku BL-5C' border='0' width='126' height='63' align='left' hspace='0' vspace='0' style='margin:0px 0px 0px 0px;' /></a>
<!-- END Article/endlinkImage.jsp -->
    </div>
    <div class="spa126PromotionalHeadline" >Produkthinweis</div>
    <div class="spa126PromotionalText">
    Nokia hat einen Produkthinweis f&uuml;r <br />den Nokia Akku BL-5C bekannt gegeben. <a href="http://sitestat.nokia.de/nokia/de-clickins/s?doorpage.DE.2652.113042.spa.0.nokia_akkubl5c_erklaerung&amp;ns_type=clickin&amp;ns_url=[http://batteryreplacement.nokia.com/batteryreplacement/de-DE/]" target="_blank">Mehr Informationen &gt;&gt;</a><br />
    </div>
  </div>
<div class="spa126PromotionalFooter"><img src='/nokia/img/trans.gif' alt="" width="1" height="1" border="0" /></div></div>
<!-- // end spaPromotion -->
    </td>
  
    <td width="10"><img src='/nokia/img/trans.gif' width="10" height="1" border="0" alt="" /></td>
    <td align="left" valign="top" width="126">
    <a id="anchor294364"></a><!-- start spaPromotion -->

<div class="spa126PromotionalElement">
  <div class="spa126PromotionalContent">
    <div class="spa126PromotionalMedia">
      <!-- START Article/endlinkImage.jsp -->
<a href="http://sitestat.nokia.de/nokia/de-clickins/s?doorpage.DE.2652.113042.spa.1.nokia_7500_prism_startseite&ns_type=clickin&ns_url=[http://www.nokia.de/de/mobiltelefone/modelluebersicht/7500_prism/startseite/291018.html]" target="_self" title=""><img src='/de/54/294368.data.jpg' alt='Nokia 7500 Prism jetzt im Handel' border='0' width='126' height='63' align='left' hspace='0' vspace='0' style='margin:0px 0px 0px 0px;' /></a>
<!-- END Article/endlinkImage.jsp -->
    </div>
    <div class="spa126PromotionalHeadline" >Jetzt im Handel!</div>
    <div class="spa126PromotionalText">
    Das Nokia 7500 Prism mit raffiniertem Design und 2-Megapixel-<br />Kamera ist jetzt im <a href="http://sitestat.nokia.de/nokia/de-clickins/s?doorpage.DE.2652.113042.spa.1.nokia_7500_prism_startseite&amp;ns_type=clickin&amp;ns_url=[http://www.nokia.de/de/mobiltelefone/modelluebersicht/7500_prism/startseite/291018.html]" target="_self">Handel erh&auml;ltlich &gt;&gt;</a><br />
    </div>
  </div>
<div class="spa126PromotionalFooter"><img src='/nokia/img/trans.gif' alt="" width="1" height="1" border="0" /></div></div>
<!-- // end spaPromotion -->
    </td>
  
    <td width="10"><img src='/nokia/img/trans.gif' width="10" height="1" border="0" alt="" /></td>
    <td align="left" valign="top" width="126">
    <a id="anchor284258"></a><!-- start spaPromotion -->

<div class="spa126PromotionalElement">
  <div class="spa126PromotionalContent">
    <div class="spa126PromotionalMedia">
      <!-- START Article/endlinkImage.jsp -->
<a href="http://sitestat.nokia.de/nokia/de-clickins/s?doorpage.DE.2652.113042.spa.2.bravo_newcomer&ns_type=clickin&ns_url=[http://www.nokia.de/de/entertainment/bravo_newcomer/283682.html]" target="_self" title=""><img src='/de/46/284260.data.jpg' alt='BRAVO newcomer' border='0' width='126' height='63' align='left' hspace='0' vspace='0' style='margin:0px 0px 0px 0px;' /></a>
<!-- END Article/endlinkImage.jsp -->
    </div>
    <div class="spa126PromotionalHeadline" >BRAVO Newcomer</div>
    <div class="spa126PromotionalText">
    Wurde beim Finale am 25. August von der Jury zum besten BRAVO Newcomer gek&uuml;rt: <a href="http://sitestat.nokia.de/nokia/de-clickins/s?doorpage.DE.2652.113042.spa.2.bravo_newcomer&amp;ns_type=clickin&amp;ns_url=[http://www.nokia.de/de/entertainment/bravo_newcomer/283682.html]" target="_self">Aloha From Hell &gt;&gt;</a><br />
    </div>
  </div>
<div class="spa126PromotionalFooter"><img src='/nokia/img/trans.gif' alt="" width="1" height="1" border="0" /></div></div>
<!-- // end spaPromotion -->
    </td>
  
    <td width="10"><img src='/nokia/img/trans.gif' width="10" height="1" border="0" alt="" /></td>
    <td align="left" valign="top" width="126">
    <a id="anchor295166"></a><!-- start spaPromotion -->

<div class="spa126PromotionalElement">
  <div class="spa126PromotionalContent">
    <div class="spa126PromotionalMedia">
      <!-- START Article/endlinkImage.jsp -->
<a href="http://sitestat.nokia.de/nokia/de-clickins/s?doorpage.DE.2652.113042.spa.3.6555_startseite&ns_type=clickin&ns_url=[http://www.nokia.de/de/mobiltelefone/modelluebersicht/6555/startseite/294416.html]" target="_self" title=""><img src='/de/48/295170.data.jpg' alt='Nokia 6555' border='0' width='126' height='63' align='left' hspace='0' vspace='0' style='margin:0px 0px 0px 0px;' /></a>
<!-- END Article/endlinkImage.jsp -->
    </div>
    <div class="spa126PromotionalHeadline" >Neu: Nokia 6555</div>
    <div class="spa126PromotionalText">
    Elegantes UMTS- Mobiltelefon zum Aufklappen in attrak- tivem Design: das <br /><a href="http://sitestat.nokia.de/nokia/de-clickins/s?doorpage.DE.2652.113042.spa.3.6555_startseite&amp;ns_type=clickin&amp;ns_url=[http://www.nokia.de/de/mobiltelefone/modelluebersicht/6555/startseite/294416.html]" target="_self">neue Nokia 6555 &gt;&gt;</a><br />
    </div>
  </div>
<div class="spa126PromotionalFooter"><img src='/nokia/img/trans.gif' alt="" width="1" height="1" border="0" /></div></div>
<!-- // end spaPromotion -->
    </td>
  </tr>
  
  
</table>
```


----------



## RaPhNiX (28. August 2007)

Cool danke... es ist aber so.. mein gesammtes Layout besteht aus tabellen... beeinträchtigt da irgendwas das layout oder setz ich dann einfach den HTML-Code von dir zwischen die zwei <tr> und </tr> und fertig ist? muss ichs nurnoch für mich umformen?


----------



## Maik (28. August 2007)

Tabellen dienen semantisch nicht zum Layouten einer Website, sondern um Daten tabellarisch gegenüberzustellen - siehe hierzu auch Warum Layout mit Tabellen dumm ist.

Zudem hat das mit CSS und professionellem Webdesign nichts mehr zu tun, und somit ist der von dir gewählte Topic falsch formuliert.

Von daher schieb ich das Thema rüber ins HTML-Forum, wo ihr zwei euch die Tabellen-Codes um die Ohren schlagen könnt.


----------



## nero_85 (28. August 2007)

Moment, das war nur Anschauungsmaterial von der Nokia-Seite! 
Und zwischen den <tr>-Tags kommen NUR <td>-Tags.

Poste mal deinen Quellcode, dann kann ich dir Genaueres sagen!


----------



## RaPhNiX (28. August 2007)

```
<html>
<head>
<title>SPEED-WHEELS.NET | Felgenverkauf, Kugelpolieren & Auswuchtgewichte</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
	background-color: #FFFFFF;
}
.Stil1 {
	color: #FFFFFF;
	font-weight: bold;
	font-size: 16px;
}
a:link {
	color: #FFFFFF;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #FFFFFF;
}
a:hover {
	text-decoration: none;
	color: #2D3647;
}
a:active {
	text-decoration: none;
	color: #88898F;
}
-->
</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Layout1.psd) -->
<br>
<table width="900" height="758" border="0" align="center" cellpadding="0" cellspacing="0" id="Tabelle_01">
	<tr>
		<td rowspan="7">
			<img src="images/index_01.png" width="2" height="734" alt=""></td>
		<td colspan="3">
			<img src="images/index_02.png" width="354" height="168" alt=""></td>
		<td colspan="2">
			<img src="images/index_03.png" width="544" height="168" alt=""></td>
	</tr>
	<tr>
		<td colspan="5" background="images/index_04.png" width="898" height="26"><div align="center"><span class="Stil1"><a href="index.html">Home</a> | <a href="kugelpolieren.html">Kugelpolieren</a> | <a href="chromfelgen.html">Chromfelgen</a> | <a href="zink.html">Zink Auswuchtgewichte</a> | <a href="Unternehmen.html">Unternehmen</a> | <a href="kontakt.html">Kontakt </a>| <a href="impressum.html">AGB Impressum</a> </span></div></td>
	</tr>
	<tr>
		<td colspan="5">
			<img src="images/index_05.png" width="898" height="4" alt=""></td>
	</tr>
	<tr>
		<td rowspan="4">
			<img src="images/index_06.png" width="1" height="536" alt=""></td>
		<td colspan="4">
			<img src="images/index_07.png" width="897" height="23" alt=""></td>
	</tr>
	<tr>
		<td colspan="4">
			<img src="images/index_08.png" width="897" height="12" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/index_09.png" width="1" height="501" alt=""></td>
		<td width="891" height="492" colspan="2" align="left" valign="top" background="images/index_10.png"><blockquote>
		  <blockquote>
		    <p class="Stil1">Impressum</p>
	      </blockquote>
		</blockquote></td>
		<td rowspan="2">
			<img src="images/index_11.png" width="5" height="501" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/index_12.png" width="891" height="9" alt=""></td>
	</tr>
	<tr>
		<td colspan="6">
			<img src="images/index_13.png" width="900" height="22" alt=""></td>
	</tr>
	<tr>
		<td colspan="6">
			<img src="images/index_14.png" width="900" height="1" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/Abstandhalter.gif" width="2" height="1" alt=""></td>
		<td>
			<img src="images/Abstandhalter.gif" width="1" height="1" alt=""></td>
		<td>
			<img src="images/Abstandhalter.gif" width="1" height="1" alt=""></td>
		<td>
			<img src="images/Abstandhalter.gif" width="352" height="1" alt=""></td>
		<td>
			<img src="images/Abstandhalter.gif" width="539" height="1" alt=""></td>
		<td>
			<img src="images/Abstandhalter.gif" width="5" height="1" alt=""></td>
	</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
```


----------



## nero_85 (28. August 2007)

Ähm, dieses Seitengerüst hast du  dir von ImageReady erstellen lassen! Oder?

Wenn ja, dann ist es besser du setzt dich hin und machst das neu! Vielleicht wirklich mehr mit CSS denn hier sind ja NUR tabellen!


----------



## RaPhNiX (28. August 2007)

Nicht direkt Image Reader...
Ich habe das Design in Photoshop erstellt und dort Slices eingezogen... geht das garnicht mit den Tabellen, oder ist es nur unpraktisch... das Problem ist, dass die Website am Sonntag fertig sein muss, weil seine Firma ONLINE vertreten sein muss...

was mach ich jetzt?

mfg RaPhNiX


----------



## napsi (28. August 2007)

Definiere 3 Klassen und stelle diese mit float an die entsprechende Position.

Ich denke, dass Du mit einem reinen CSS - Design vorallem bei Änderungen vor dem Roll-Out schneller reagieren kann.

Beispiel meines Projektes


```
#shortnews1 {
	border: 0px;
	height: 75px;
	width: 328px;
	float:left;
	padding-top:5px;
	padding-right:5px;
}

#shortnews2 {
	border: 0px;
	height: 75px;
	width: 329px;
	float:left;
	padding-top:5px;
	padding-right:5px;
}

#shortnews3 {
	border: 0px;
	height: 75px;
	width:308px;
	float:left;
	padding-top:5px;
	padding-right:5px;
}
```


```
<div id="shortnews1">
  		  <p><img src="img/bilder/dummy.jpg" alt="" align="left" class="pictureshortnews"><span class="shortnews1headline">Short News 1</span>
	  		<span class="shortnews1content"><br>
  		  Hier steht die Kurzform vom News2 wir testen weiter</span>	</p>
    		<p align="right" class="shortnews1headline">&lt;&lt;<a href="#">weiter</a>&gt;&gt;</p>
		</div>
	
		<div id="shortnews2">
  		  <p><img src="img/bilder/dummy.jpg" alt="" align="left" class="pictureshortnews"><span class="shortnews2headline">Short News 2</span>
	    	<span class="shortnews1content"><br>
  		  Hier steht die Kurzform vom News2 wir testen weiter</span>	</p>
	 	 	<p align="right" class="shortnews2headline">&lt;&lt;<a href="#">weiter</a>&gt;&gt;</p>
		</div>
	
		<div id="shortnews3" style="background-color:#009037;">
 		  <p><img src="img/bilder/dummy.jpg" alt="" align="left" class="pictureshortnews"><span class="shortnews3headline">Short News 3
	 		</span><span class="shortnews1content"><br>
  		  </span><span class="shortnews3content">Hier steht die Kurzform vom News2 wir testen weiter	</span></p>
	  		<p align="right" class="shortnews3headline">dfgsdfgdfg<a href="#" class="shortnews3headline">weiter</a></p>	
		</div>
```



Ich würde an Deiner Stelle einige Nachtschichten einlegen, macht sich bezahlt.

lg.
Napsi


----------



## Maik (28. August 2007)

napsi hat gesagt.:


> Definiere 3 Klassen und stelle diese mit float an die entsprechende Position.


Womit wir wieder bei dem von mir empfohlenen Yet Another Multicolumn Layout | An (X)HTML/CSS Framework wären - siehe Post #3.


----------

