Unterschied DIV ID und DIV CLASS
0 
Jonathan
0 
Struppi
0 0 
Gunnar Bittersmann
Unterschied DIV ID und DIV CLASS
Hallo,
kann mir mal jemand erklären worin der Unterschied zwischen Div ID und Div Class liegt? Ich versuche folgenden Seiten-Kopf zu erstellen.
In dem Kopf sollen drei Breiche nebeneinander liegen. Links für ein Bild , mitte und rechts für Text.
#top div.left { margin:0px; padding:7px 0px 7px 20px; float:left;}
#top div.middle { margin:0px; padding:5px 5 5px 5px; float:none;}
#top div.right { margin:0px; padding:7px 0px 7px 0px; float:right;}
Mit dieser Einstellung bekomme ich links den Breich für die Grafik, den mittleren Bereich für den 1. Text. Da aber der mittlere Bereich bis zum rechten Seitenrand geht, wird der dritte Bereich unter dem Bereich 2 dargestellt.
Wollte "nur" eine vorhanden Seite ändern. Und da habe ich gesehen, das dort für die Festlegung der Bereiche einmal mit DIV ID und einmal DIV CLASS erfolgt.
Liegt evtl. da mein Fehler? Würde mich freuen wenn jemand mal eine guten Tip für mich hat.
Viele Grüße
6driver
-
Hallo 6driver,
Hallo,
kann mir mal jemand erklären worin der Unterschied zwischen Div ID und Div Class liegt? Ich versuche folgenden Seiten-Kopf zu erstellen.
In dem Kopf sollen drei Breiche nebeneinander liegen. Links für ein Bild , mitte und rechts für Text.Class bedeutet Klasse, ein Element kann also mehrere Klassen haben, z.B. "unwichtig", "rechts" usw. Auch können mehrere Elemente einer Klasse zugeweiesen werden. Id bedeutet Identifier, identitiziert also nur ein einzelnes Element (pro Seite).Ein Element kan nur eine einzige ID haben und mehrere Elemente können auch nicht die gleiche ID haben.
#top div.left { margin:0px; padding:7px 0px 7px 20px; float:left;}
#top div.middle { margin:0px; padding:5px 5 5px 5px; float:none;}
#top div.right { margin:0px; padding:7px 0px 7px 0px; float:right;}Mit dieser Einstellung bekomme ich links den Breich für die Grafik, den mittleren Bereich für den 1. Text. Da aber der mittlere Bereich bis zum rechten Seitenrand geht, wird der dritte Bereich unter dem Bereich 2 dargestellt.
Das dürfte wahrscheinlich eher daran liegen dass das div.right hinter dem div.middle im Quelltext steht. Ich weiß nicht genau wie das Resultat uassehen soll, aber eine Lösungsmöglichkeit wäre, das div.middle auch floaten zu lassen.
Jonathan
-
In dem Kopf sollen drei Breiche nebeneinander liegen. Links für ein Bild , mitte und rechts für Text.
Wenn Links ein Bild ist, warum....
#top div.left { margin:0px; padding:7px 0px 7px 20px; float:left;}
...sprichst du dann hier ein DIV an?
Das müßte dann eher #top img.left heißen#top div.middle { margin:0px; padding:5px 5 5px 5px; float:none;}
#top div.right { margin:0px; padding:7px 0px 7px 0px; float:right;}Mit dieser Einstellung bekomme ich links den Breich für die Grafik, den mittleren Bereich für den 1. Text. Da aber der mittlere Bereich bis zum rechten Seitenrand geht, wird der dritte Bereich unter dem Bereich 2 dargestellt.
Das dürfte an der Reihenfolge im HTML Text liegen wie Jonathan schon andeutete.
Struppi.
-
erstmal danke für Eure Antworten. Wenn ich das richtig verstanden habe definiere ich mit DIV ID einen Hauptbereich und mit Class verschiedene Unterbereiche, wobei ich die Unterbreiche auch in anderen Hauptbereichen verwenden kann.
Ich hab mal ein Bild gemacht. So sieht es gerade aus:
<img src="http://www.bildercache.de/bild/20070920-141854-12.jpg">Das der Code dazu:
<style type="text/css">
#top {border: thin solid #0000FF; margin: 0px; padding: 0px;}
#top div.left { margin:0px; padding:5px 5px 5px 5px; float:left;}
#top div.middle { margin:0px padding:5px 5px 5px 5px; float:none;}
#top div.right{ margin:0px; padding:5px 5px 5px 5px; float:right;}
</style>=====================================================
<div id=top>gesamte Kopfzeile : DIV ID TOP
<div class="left">Bild links: DIV CLASS left</div>
<div class="middle">Überschrift: DIV CLASS middle</div>
<div class="right">Text rechts: DIV CLASS right</div>
</div>Die Definition der Rahmen habe mal herausgenommen.
Und ich schaffe es einfach nicht, das alle drei Blöcken nebeneinander stehen.
Wo mache den Denkfehler?VG
6driver-
Hi!
Der Denkfehler liegt bei float:none.
Das der Code dazu:
<style type="text/css">
#top {border: thin solid #0000FF; margin: 0px; padding: 0px;}
#top div.left { margin:0px; padding:5px 5px 5px 5px; float:left;}
#top div.middle { margin:0px padding:5px 5px 5px 5px; float:none;}======
#top div.right{ margin:0px; padding:5px 5px 5px 5px; float:right;}
</style>Was sagt float? Mit float sagst Du einem Element, dass es bitte nicht mehr Platz einnehmen soll, als es benoetigt, und sich dabei auf besagter Seite (left/right) halten soll, damit nachfolgende Elemente es umfliessen koennen. Nachfolgend ist hier das Zauberwort! Du sagst dem mittleren Element deutlich, dass es nicht floaten soll. Deshalb wird es vom folgenden Element auch nicht umflossen.
Wenn Du die gesamte Breite des aeusseren Divs benutzen moechtest, wirst Du um Breitenangaben nicht herumkommen.
Erstmal solltest Du dem mittleren Element aber mal ein float:left verpassen.
-
-
Hello out there!
kann mir mal jemand erklären worin der Unterschied zwischen Div ID und Div Class liegt?
See ya up the road,
Gunnar--
„Und [dieses Forum] soll […] auch ein Fachforum bleiben und kein Psychologieforum werden.“ (Kirsten Evers)
