Tabellen mit CSS ?

allstar · #1 (**permalink**) 06.10.2005, 15:36

Hi,

ich bin ziemlich unerfahren und habe mich auch schon im Forum und auf
der Webseite was umgeschaut. Nun möchte ich meine Tabellen nur mit
CSS gestalten.

Hier der Code:

Code:

<table border="0" style="table-layout:fixed">
<td style="width:160px;"></td>
<td style="width:460px;"></td>
<td style="width:160px;"></td>
</tr>
</table>

Im Editor ist das breiter als ich angegeben habe, also der Gesammtwert
von 780 wird nicht eingehalten. Ich habe mal ein Bild davon upgeloadet.

Wie könnte ich die aufteilung ohne table gestalten?

allstar · #2 (**permalink**) 06.10.2005, 16:04

Ah ich habe:

cellpadding="0" cellspacing="0"

vergessen. Aber wie kann ich das ganze ohne Tables machen ?

cgdesign · #3 (**permalink**) 06.10.2005, 16:12

was kommt denn in die tds?

allstar · #4 (**permalink**) 06.10.2005, 16:24

Zitat:

Zitat von cgdesign

was kommt denn in die tds?

Also links und rechts sollen menus hin kommen,
in der Mitte kommen News hin.

cgdesign · #5 (**permalink**) 06.10.2005, 16:43

Ja dann empfiehlt sich eh ein komplettes Layout in CSS zu machen... google doch mal nach 3 Spalten Layout

http://www.stichpunkt.de/css/bereiche.html

allstar · #6 (**permalink**) 06.10.2005, 16:54

Wie würdest du denn genau das hier formatieren?

Code:

<table border="0" style="table-layout:fixed"> 
<td style="width:160px;"></td> 
<td style="width:460px;"></td> 
<td style="width:160px;"></td> 
</tr> 
</table>

cgdesign · #7 (**permalink**) 06.10.2005, 17:19

ausprobieren würde ich das mal!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head>
<title>neu</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
*
{
	margin: 0;
	padding: 0;
}
body
{
	text-align: center;
}
#align
{
	width: 780px;
}
#links
{
	float: left;
	width: 160px;
	background-color: #000;
}
#mitte
{
	float: left;
	width: 460px;
	background-color: #000;
}
#rechts
{
	float: left;
	width: 160px;
	background-color: #000;
}
</style>
</head>
<body>
<div id="align">
	<div id="links"></div>
	<div id="mitte"></div>
	<div id="rechts"></div>
</div>
</body>
</html>

allstar · #8 (**permalink**) 06.10.2005, 17:24

Danke für die Hilfe, so habe ich ein Beispiel wenn ich was suche

allstar · #9 (**permalink**) 06.10.2005, 17:38

Aber da komm ich schon zum nächsten Problem:

Code:

div.header {
background-image: url(header.jpg);
background-color: #000000;
width:780px;height:138px;
border:0px;
}

div.footer {
background-image: url(footer.jpg);
background-color: #000000;
width:780px;height:22px;
border:0px;
}

div.links {
float: left;
width: 160px;
height: 400px;
background-color: #000000;
}

div.content {
float: left;
width: 460px;
height: 400px;
background-color: #444444;
}

div.rechts {
float: left;
width: 160px;
height: 400px;
background-color: #000000;
}

Code:

<body style="text-align:center;">
<div style="width:780px;margin:0px auto;text-align:left;">

<div class="header"></div>

<div class="links"></div>
<div class="content"></div>
<div class="rechts"></div>

<div class="footer"></div>

</div>
</body>

Mein footer wird in Opera und Firefox nicht angezeigt, in IE klappt es.

cgdesign · #10 (**permalink**) 06.10.2005, 17:43

wer floatet muss auch clearen!
deswegen musst du im div.footer auch noch dazu schreiben:

Code:

clear: both;

Und bitte keine Styleangaben im HTML Code! Alles auslagern in das dazugehörige CSS

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
CSS Clearfix / CSS Reset / CSS Hacks 2016	Elma	CSS	7	14.08.2016 02:12
Problem mit CSS ohne Tabellen	omega2k	CSS	20	19.01.2010 12:11
CSS Tabellen und Barrierefrei	\|SONY\|	CSS	16	01.05.2007 16:43
CSS in verschachtelten Tabellen!	Fichte	CSS	1	20.10.2006 15:57
CSS Tabellen	Tobbe	CSS	8	04.09.2006 16:54