Sie sind nicht angemeldet.

Von der Tabelle zum Div

beete

Anfänger

  • »beete« ist der Autor dieses Themas

Beiträge: 36

  • Nachricht senden

1

Sonntag, 8. März 2009, 16:19

Von der Tabelle zum Div

Hi
ich habe jetzt eine Tabelle gemacht, die so aussieht:

Quellcode

 
1
2
3
4
5
6
7

<table>
  <tr>
	<td width="33%">1</td>
	<td width="33%">2</td>
	<td width="33%">3</td>
  </tr>
</table>

Wie kann ich darus nun Divs machen, die genauso aussehen?

Sorry für die dumme Frage aber ich fange erst an HTMl zu lernen.

Gruß
beete

seeker99

Anfänger

Beiträge: 11

Wohnort: Zwischen Köln und Düsseldorf

Beruf: Schüler

  • Nachricht senden

2

Sonntag, 8. März 2009, 23:23

Ich persönlich würde das so machen:

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<html>
<head>

<style type="text/css" media="screen">
<!--
#bsp{float:left;width:33%}
-->
</style>
</head>
<body>
<div>
  <div id="bsp">1</div>
  <div id="bsp">2</div>
  <div id="bsp">3</div>
</div>
</body>
</html>


Ich weiß, das Beispiel ist benutzt CSS, aber ich denke, dass Grundprinzip sollte gut verständlich sein. Wenn nicht, einfach fragen ;)

beete

Anfänger

  • »beete« ist der Autor dieses Themas

Beiträge: 36

  • Nachricht senden

3

Montag, 9. März 2009, 14:26

Danke genauso meinte ich das. Ich habe nur entscheinend immer float:left; vergessen, sodass er es nicht mehr gemacht hat. Ich melde mich sobald ich wieder Probleme habe.

Gruß
beete

Phillipp

Anfänger

Beiträge: 24

Wohnort: Münster

Beruf: Fachinformatiker

  • Nachricht senden

4

Mittwoch, 11. März 2009, 08:43

Zitat von »seeker99«

Ich persönlich würde das so machen:

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<html>
<head>

<style type="text/css" media="screen">
<!--
#bsp{float:left;width:33%}
-->
</style>
</head>
<body>
<div>
  <div id="bsp">1</div>
  <div id="bsp">2</div>
  <div id="bsp">3</div>
</div>
</body>
</html>


Ich weiß, das Beispiel ist benutzt CSS, aber ich denke, dass Grundprinzip sollte gut verständlich sein. Wenn nicht, einfach fragen ;)
Vorsicht!
Ein Element kann immer nur EINE ID haben!
Du musst bei CSS in 3 "Rubriken" denken.
1) Normale HTML-Elemente (body, input, div)
Eigenschaften die du im CSS definierst, sind dann global für alle Elemente gesetzt.

Quellcode

 
1

body { width: 90%; }

2) Eigenschaften auf Klassenbasis
Man definiert eine Klasse, die man unterschiedlichen Elementen zuweisen kann.

Quellcode

 
1
2
3
4
5

<div class="myClass"></div>

.myClass {
background-color: green;
}

3) Code auf ID Basis
Man kann einzelne Elemente verändern, ohne style anzugeben.

Quellcode

 
1
2
3
4
5

<div id="myId"></div>
 
 #myID {
 background-color: red;
 }
Mediarge.de : Mein Blog rund um Web-Entwicklung und Security

seeker99

Anfänger

Beiträge: 11

Wohnort: Zwischen Köln und Düsseldorf

Beruf: Schüler

  • Nachricht senden

5

Mittwoch, 11. März 2009, 15:02

Zitat von »Phillipp«

Zitat von »seeker99«

Ich persönlich würde das so machen:

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<html>
<head>

<style type="text/css" media="screen">
<!--
#bsp{float:left;width:33%}
-->
</style>
</head>
<body>
<div>
  <div id="bsp">1</div>
  <div id="bsp">2</div>
  <div id="bsp">3</div>
</div>
</body>
</html>


Ich weiß, das Beispiel ist benutzt CSS, aber ich denke, dass Grundprinzip sollte gut verständlich sein. Wenn nicht, einfach fragen ;)
Vorsicht!
Ein Element kann immer nur EINE ID haben!

3) Code auf ID Basis
Man kann einzelne Elemente verändern, ohne style anzugeben.

Quellcode

 
1
2
3
4
5

<div id="myId"></div>
 
 #myID {
 background-color: red;
 }

Ich sehe um ehrlich zu sein nicht, was du meinst. Jedes Elemenent hat eine ID. Und nichts ist global festgelegt.
Oder übersehe ich da etwas?
Oder war eine allgemeine Anmerkung?

Phillipp

Anfänger

Beiträge: 24

Wohnort: Münster

Beruf: Fachinformatiker

  • Nachricht senden

6

Montag, 16. März 2009, 13:01

Es war eine allgemein Anmerkung in Kombination mit einer Korrektur von deinem Beitrag :)

In deinem Beispiel schreibst du:

Quellcode

 
1
2
3
4
5

<div>
  <div id="bsp">1</div>
  <div id="bsp">2</div>
  <div id="bsp">3</div>
</div>

Hier haben alle deine Elemente die ID "bsp".
Das ist nicht HTML konform, daher der Hinweis.

Zeitgleich sollte es etwas mehr Infos über CSS enthalten, daher auch etwas allgemeiner gehalten ;)
Mediarge.de : Mein Blog rund um Web-Entwicklung und Security

Ähnliche Themen

Thema bewerten