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

Status
Nicht offen für weitere Antworten.

RaPhNiX

Mitglied
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
 
Bei "YAML" kommen ausschliesslich div-Elemente zum Einsatz, die mit Hilfe der float-Eigenschaft nebeneinander (spaltenweise) angeordnet werden.
 
Mehr oder Wenigter schon. Innerhalb der Tabelle sind dann <div>-Layers:

HTML:
<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>
 
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?
 
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.
 
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!
 
HTML:
<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>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück