<div> Bereiche mit id & class Attributen formen

Monitsch · 25. Oktober 2011

Halli Hallo,
neues Fragezeichen, neues Thema! Dieses mal dreht es sich um das Thema:

<div>'s und den Attributen id und class

Wobei die Themen HTML und CSS hier gemischt sind.

Ich weiß, dass id gegenüber einer class Definition dominant ist! Dass heißt wenn ich sage,

Code

id=BLAU class=GELB

, kommt blau, da id stärker zählt.

Ich habe folgendes Problem:
Meine Seite habe ich mit <div> strukturiert und für den Inhalt folgenden <div> genommen:

Code

<div id="inhalt">  INHALT  </div>

Über CSS habe ich dem Inhalt Breite, Farbe und Margin mitgegeben. Innerhalb meines <div id="inhalt"> INHALT </div> habe ich natürlich TAGs wie:

Code

h1, h2, p, ol, ul, il, dl, table

und so weiter. Diese TAGs habe ich über CSS designed, Farbe Formen und so weiter mitgegeben:

Code

#inhalt  p {   blabla     }




#inhalt h1  {   blabla     }

Da ich alle TAGs so ziemlich schon CSS-definiert habe, fällt es mir nun schwer, neue Definitionen zu formen, weil mir die TAGs ausgehen!

Ich möchte folgendes:

Code

<div id="inhalt">




<h3>Überschrift</h3>
            <br />
                <p>!!!!!!!!!!!DIESER TEXT SOLL RECHTS UM DAS IFRAME FLOATEN!!!!!</p>
                <iframe> Bild mit Text </iframe>




</div>

Alles anzeigen

Nur wenn ich den Absatz mit <p> definiere, bringt der mir natürlich die CSS-Einstellung

Code

#inhalt  p {   blabla     }

und da will ich KEINEN float!

Wenn ich den <p> eine id/ class zuweise, macht der aber nix, weil der ja INNERHALB meines

Code

<div id="inhalt">

ist und gegenüber id's im Inhalt selbst dominant wirkt!

Wie mache ich es, dass ich meine h1, h2, p und dl Definitionen in CSS für den normalen Text für alle Seiten unberührt und gleich bleibt, ich aber anderen <p>'s meinetwegen eine id zuweisen kann, damit ich gezielt iframes und so was platzieren kann?!

Btw. sind iFrames nicht out oder so was? Habe ich so im Sinn...

DANKE schon mal, hoffe mein Anliegen ist deutlich geworden :?

Viele Grüße!

lauras · 25. Oktober 2011

Hey,
was macht das <br /> unter der Überschrift? Für Abstände gibts margin bzw. padding im CSS

Zu deinem Problem: Warum gibts du dem Absatz nicht einfach eine ID oder class?

Du bist hiermit "näher" an diesem p dran als durch die vergebene ID - und darum geht es, nicht ob nun ID oder class
Dafür gibt es natürlich Regeln (irgendwo da findest du natürlich auch das mit ID und class, aber es gibt noch mehr): Kaskade (Kaskade, weil es ja auch Cascading Style Sheets heißt)

Einfach mal ausprobieren - du wirst sehen, es funktioniert

Monitsch · 25. Oktober 2011

Hallo,

das <br> steht da nur, weil ich einen größeren Abstand zum <p> haben will, als bei den anderen <h3> zu <p>! Und was extra nochmal über CSS definieren, war mir zu umständlich, deswegen das <br>

Das mit dem id hab ich ja schon ausprobiert! Vielleicht ist in meiner Schreibweise ja was verkehrt:

In HTML

Code

<div id="inhalt">




<h3>Überschrift</h3>
            <br />
                <p id="textfloatright">Paragraph mit Text</p>
                <iframe> Bild mit Text </iframe>




</div>

Alles anzeigen

In CSS

Zitat

#textfloatright { float: right
}

Monitsch · 25. Oktober 2011

Uupps, zu früh gesendet

Auf jedenfall kommt da bei mir nichts?!
Ist was falsch geschrieben?!

Monitsch · 25. Oktober 2011

Ahh sehe gerade, ich hatte es falsch geschrieben in CSS.
So ist's richtig! :

Code

#inhalt p.textfloatright { float: right;




                                    }

Danke schon mal, für den Kaskaden-Link!

Nun eine Frage zu FLOAT:

Ich will, dass der iframe links ist (Bild mit Text) und rechts der Text um den iframe floatet: Wie stelle ich das an?

Dankö

Monitsch · 25. Oktober 2011

Meine Frage von eben "Ich will, dass der iframe links ist (Bild mit Text) und rechts der Text um den iframe floatet: Wie stelle ich das an?"

Habe gerade herausgefunden, dass ich nur

Code

align="left"

angeben muss! Okay selbst beantwortet

Habe eben gelesen:

Zitat

Wenn Sie das iframe-Element in einer HTML-Datei notieren, müssen Sie in dieser Datei die HTML-Variante Transitional wählen.

http://de.selfhtml.org/html/fr…ngebettete.htm#definieren

Gehen iframes auch bei dem Doctype

Code

<!DOCTYPE html>

Thanks!

webmaster3000 · 25. Oktober 2011

Hallo Monitsch!

IFrames sind in HTML 5 erlaubt.
Du kannst, um nur die erste h3 zu formatieren, folgendes in den Selektor schreiben:
Code
```
h3:first-child
```
Damit wird nur die erste h3 innerhalb eines anderen Elements formatiert.
Bei deinem Problem wäre das:
Code
```
h3:first-child{
    margin-bottom: 1em;
}
```
Siehe dazu auch SELFHTML.

Freut mich, geholfen zu haben.

Gruß,
webmaster3000

Sarkkan · 25. Oktober 2011

Zitat von "Monitsch"
Habe gerade herausgefunden, dass ich nur
Code
align="left"
angeben muss! Okay selbst beantwortet

Benutzt du auch das Border-Attribut? Oder gar das Style-Attribut? Nein? Dann verwende auch kein align.

lauras · 25. Oktober 2011

Hi Monitsch,

über deinen Beiträgen gibt es einen Button, da steht "Ändern" drauf - benutz diesen doch bitte, wenn du nach einem Post merkst, dass noch etwas fehlt. Es gehört nicht zum guten Ton, was weiß ich wie viele Beiträge direkt hintereinander zu posten, besser den einen editieren, bis jemand geantwortet hat.

Wichtig: IMMER Inhalt und Design trennen. Somit gehört das <br /> da weg und auch dein align ist eher blöd. Falls du dir nicht ganz sicher bist, wie du Elemente ansprechen kannst, gibt es hier einen sehr guten, ausführlichen Artikel zum Thema Selektoren, die spannenderen Sachen kommen erst am Ende

Zum Problem:

Wie Dustin schon gesagt hat: align ist nicht wirklich korrekt, float war da schon die richtige Wahl. Wenn du den iframe links haben willst, so mach doch folgendes:

Code

iframe {
float: left;
}

Somit sollte der Text drumherum fließen (am besten dem iframe noch Abstand mitgeben, damit es nicht so dahingeklatscht aussieht. Zum Thema float schau mal hier und hier.

Nochmal zur Auffrischung:

Code

<p id="deineid">...</p>

Diesen Absatz sprichst du im CSS mit der Raute (#) vor dem ID Namen an (# = id):

Code

#deineid {
...
}

Code

<p class="deineclass">...</p>

Diesen sprichst du im CSS mit dem Punkt (.) an (. = class):

Code

.deineclass {
...
}

Grüße
Laura

Monitsch · 25. Oktober 2011

Hallo!

Ich weiß, dass mit dem br ist nicht so dolle. Werde den first-child ausprobieren!

Mein iframe sieht so aus:

Code

<iframe src="..." style="..." scrolling="..." marginwidth="..."
                marginheight="..." frameborder="..."></iframe>

Das mit dem align="left" habe ich von http://de.selfhtml.org/html/fr…ngebettete.htm#definieren

Bin dann doch auf das float umgestiegen, wenn's besser ist als align.

Danke schon mal!

webmaster3000 · 25. Oktober 2011

MOMENT!
Monitsch, entweder du nutzt die alten HTML-Attribute oder CSS zur Formatierung, wobei ich dir ausdrücklich zu CSS rate.
Benutzt du beide, musst du aufpassen, welche Formatierung woher kommt, außerdem ist es sehr unprofessionell.
Also nimm Atrribute wie marginheight oder frameborder raus und realisier das über CSS! Ich weiß, SELFHTML ist in dieser Hinsicht etwas veraltet.
Außerdem solltest du, wann immer möglich, die Styles zentral und nicht im style-Attribut definieren.

Gruß,
webmaster3000

Monitsch · 25. Oktober 2011

Okay, vielen Dank an Euch für die Tipps!
Viele Grüße!

<div> Bereiche mit id & class Attributen formen

Jetzt mitmachen!

Teilen