Archivlink: javarea.de Forum > (X)HTML & CSS (allgemein) > Design ohne <table> Tag mit CSS
Vollständigen Link anzeigen: javarea.de Forum > (X)HTML & CSS (allgemein) > Design ohne <table> Tag mit CSS

Pages: [1]
geschrieben von Klaush am 30.08.2006 - 08:46
Hallo Leute,

damit ich nicht ganz einroste, wollte ich mich ein wenig in das Gebiet CSS einarbeiten, stoße dabei allerdings auf ein paar Hindernisse.

Das Grundprinzip ist mir klar und vielleicht fehlen mir auch die notwendigen Commandos um das umzusetzen was ich vorhabe. Das Design sollte wie in den Grafiken aussehen und das ist momentan alles in <table> gepackt. Nun möchte ich den alten Code CSS freundlich machen .

Der Aufbau mit Containern alla <div></div> gestaltet sich doch schwerer als gedacht. Ich habe mir dazu ein kleines Testprojekt angelegt.

Vielleicht könnte einer der Profis mal drüberschauen?

geschrieben von Matneu am 30.08.2006 - 11:38
Sieht für mich schon recht gut aus. Ein paar kleine Dinge sind mir noch aufgefallen:
- IDs dürfen nur einmal vergeben werden. Also einfach aus der ID "border" eine Class machen.
- Sowas wie "<br /><br />" ist nicht schön. Das lieber mit Margin machen. Gerade beim Footer bietet sich das an.
- Ich würde contFirst noch mit relativer Breite angeben, dann kann man die Seite ohne Probleme vergrössern.
- Soll contSecond neben oder wirklich unter contFirst sein? Falls ersteres musst Du #containHeader1 {clear:both;} mitgeben und #contFirst {float:left}. Dann sollte das funktionieren. Ggf. noch die Hintergrundfarbe der Tabelle anpassen.

Jetzt noch ein paar kleine W3C-Schnitzer (fehlendes Encoding) beheben und das Ding ist perfekt.

So far...
Matthias

geschrieben von Klaush am 30.08.2006 - 12:30
Hallo Matneu,

danke für dein Feedback......

contFirst und contSecond sollen nebeneinander liegen .... aber scheinar bin ich zum blöd dazu

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 

<!-- Contain -->
	<div class="border">
		<div id="containHeader1">Forum </div>
		<div id="containHeader2"> Kategorie </div>
		<div id="contFirst"><div class="floatLeft">Autor<br />Profil<br />EMail</div></div>	
		<div id="contSecond">Comment</div>
   	<div id="containHeader1"><div class="clearBoth">Footer</div></div>	
	</div>

geschrieben von Klaush am 30.08.2006 - 14:25
Habs fast geschafft ..... lag wohl an den Ids.
Jetzt habe ich nur noch das Problem das die

border-top:1px solid #ff0000;
border-left:1px solid #ff0000;

noch nicht richtig umgesetzt werden, das contSecond rutscht etwas in den contFirst Bereich.... woran das noch liegt?

Ich tu mich etwas schwer, da ich mich erst jetzt so richtig mit dem Thema beschäftige.

geschrieben von Micha am 30.08.2006 - 15:59
Hi,

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 

.contFirst{ {
...
margin: 0px;
...
}


Sollte Dein Problem lösen.

Was mich etwas stört ist sowas:
HTML-Quelltext
1: 

<div class="floatLeft"><div class="contFirst">Autor<br />Profil<br />EMail</div></div>


Ist die Verschachtlung nötig? Klassennamen sollten nicht Ihren Eigenschaften nach beannt werden. Eine class="FontColorRed" macht keinen Sinn mehr, wenn die Schriftfarbe mal grün werden soll. Das inner DIV scheint eher eine Liste zu sein, wie ich finde. Auch die Navigation könnte mit einer solchen beglückt werden.

Hoffe ich konnte Dir noch ein paar Anregungern geben.

LG Micha

geschrieben von Danny am 30.08.2006 - 16:47
Wie Micha schon sagte, <div> sind zwar schön und praktisch aber man sollte sie nicht für Elemente benutzen für die sie nicht gedacht sind. Eine Überschrift so zu formatieren <div class="heading">Text</div> ist kompletter Quatsch dafür wurden die h1,h2,h3,h4,h5,h6 Tags erfunden die man dann per CSS formatieren kann..

Diese recht häufig auftretende Krankheit wird in Fachkreisen als Divitis bezeichnet *g*


Bye Danny

geschrieben von Klaush am 30.08.2006 - 17:17
Danke für eure Hinweise!

Ich habe nur das Gefühl das bei aller Liebe zu CSS die Entwicklerfreundlichkeit leidet.

Bei Tabellen reichen 2 bis 3 Handgriffe und schon ist alles in Position und ausgerichtet. Bei CSS müssen nun Tonnen von quellcode in CSS gepackt werden um das zu realisieren, dennoch, ich werde mich weiter daran versuchen.

Das Verschachteln hat 2'erlei Gründe:
Wenn ich ein Text der jetzt links ausgerichtet ist, später nach belieben rechts ausrichten möchte

Szenario:
<h3>Test</h3> --> steht ganz normal links

Jetzt möchte ich einen Text in Größe <h3> ganz rechts am Bildschirmrand an einer anderen Stelle der Seite positionen. In CSS müsste ich doch <h3> die Eigenschaft float:right mitgeben. Pech nur, dass jetzt alle anderen <h3> ebenfalls rechts stehen. Ich müsste also für jede Kleinigkeit die CSS um einen Selektor erweitern um genau für diesen einen Fall den Text rechts zu positionen, ohne das die Anderen in Mitleidenschaft gezogen werden.

Ich sehe noch keine wesentlichen Vorteile gegenüber der alten <table>s. Ehrlicherweise bin ich auch neu auf diesem Gebiet und muss mich noch einlesen. Den nächsten angestrepten Relounch des Forums werde ich dann doch wieder in <table> packen müssen, da die Gestaltung der CSS Struktur nur schleppend voran geht und zu lange dauert.

Oder stelle ich mir das nur so schwer vor?

Ps.: bei dieser Klasse <div class="floatLeft"> würde sich nichts ändern, aber die Namensgebung ist alles andere als schlau gewählt, da stimm ich dir zu. Es handelt sich auch nur um ein Test, bitte daher um Rücksicht

geschrieben von Micha am 30.08.2006 - 17:51
Hi,

es sollte nicht als lediglich als Tipp aufgefasst werden

Zu Deinem Beispil mit der H3. Wenn Du willst, das sie rechts steht (der Text) dann sollte ein text-align reichen.

Zum anderen "Problem". Teile Deine Seite in Sinnvolle Bereiche: Head,Navi,Body,Foot. Hier ist sicher nichts verweflich und Du kannst dies gruppieren mit DIVs.

Nehmen wir weiter an, Du hast sowohl H3 in Head als auch in Foot, dann mach folgendes:

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 

div#head h3 {
  float:right;
  text-color: red;
}
div#foot h3 {
  color: blue;
}


"Nachfahren Selektor" ist das Stichwort hier. Es werden so nicht alle h3s geändert sonder nur die, die sich innerhalb der ID - als in dem Bereich - befinden. So kann man sparsam mit ID#s und Klassen umgehen und wie Du sicher erkennst, ist es auch Quellcode schonend.

Das ganze kann man viel weiter treiben. Nehemn wir an, Du hast in navi eine Liste und somit auch links. Du könntest nun so - es ist jedoch unsinnig[1] - drauf zugreifen:

HTML-Quelltext
1: 
2: 
3: 

div#navi ul li a {
/* irgendwas */
}

[1]unsinnig deshalb, weil:
HTML-Quelltext
1: 
2: 
3: 

div#navi a {
  //irgendwas
}

Bereis ausreichen wird, da alle Links in der Liste stehen werden

Darüberhinaus kann man auch Klassen verknüpfen:

HTML-Quelltext
1: 

<p class="Klasse1 Klasse2 ... KlasseN">Ein Absatz</p>

Hier ist keine Elementverschachtlung nötig...

Ist Dir damit etwas geholfen?

Ich möchte an dieser Stelle einmal betonen, das ich in CSS auch mher auf Try & error setze und von mir nicht unbedingt der Weisheits letzter Schluß kommen wird!

LG Micha

geschrieben von Klaush am 30.08.2006 - 18:42
Hallo Micha,

die Aufteilung der Seite ist mir schon klar, dass wird schon seit Jahren so gemacht.
Dennoch erlaube ich mir eine weitere Frage.

Wenn ich folgende CSS Struktur anlege und einen Navibereich anzeigen lassen möchte, der:
a) einen Text links stehen hat
b) einen Text der rechts steht
c) einen Text der mittig ist

In der alten Schreibweise alla <table> kein Problem, doch in CSS erweist sich das als Hindernis, wenn es um ein und dieselbe Schriftgröße geht.

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
	
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title></title>
</head>

<style type="text/css">
#header {
	width: 95%;
	background:	#FFFFCC;
	color: red;
}

div#header h3{
   float:right;
   color: red;
}

h3{
	text-align: center;
	color: black;
}
</style>
<body>

<div id="header"> 
<h3>Text rechts</h3>
Text Links
<h3>test</h3>
</div>

<table border="0" width="95%">
<tr bgcolor="#FFFFCC">
	<td>Text links</td>
	<td align="middle">Text mitte</td>
	<td align="right">Text rechts</td>
</tr>
</table>

</body>
</html>


Das selbige gilt bei Textfarben:
Wenn der Text in #head mit der Schrift<h3> mal blau und in der mitte <h3>grün und recht <h3>gelb sein soll, gestaltet sich der Aufbau der CSS Selektoren sehr unübersichtlich und ist keineswegs quelltextsparend.

wiederzurückgehendandenschreibtischunddasprinziptryanderrorzuversuchen

geschrieben von Micha am 30.08.2006 - 19:01
Hi,

mit einer Liste vll?

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 

ul {
	list-style-type: none;
	text-align: center;
	width: 95%;
	background:	#FFFFCC;
	color: red;
	margin:0;
	padding:0;
	
}
ul li {
	display: inline;
	border:1px solid black;
}

ul li.l {
	margin-right: 30%;
}
ul li.r {
	margin-left: 30%;
}


HTML-Quelltext
1: 
2: 
3: 
4: 
5: 

<ul>
<li class="l">Text links</li>
<li>Text mitte</li>
<li class="r">Text rechts</li>
</ul>


Ggf. könnte man auch was positionieren?!

Micha

geschrieben von Micha am 30.08.2006 - 19:14
...oder

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 

<div id="header"> 
<h3 id="left">Text Links</h3>
<h3 id="right">Text rechts</h3>
<h3 id="mitte">Text mitte Text mitte Text mitte Text mitte</h3>
</div>


und

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 

#header {
	width: 95%;
	background:	#FFFFCC;
	color: red;
}

div#header h3#left, div#header h3#right {
	width:14%;
}

div#header h3#left {
	float:left;
	clear:right;
}

div#header h3#right {
	float:right;
	text-align:right;
}

div#header h3#mitte {
	float:left;
	width:65%;
}


Micha


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.