Tutorial HTML, CSS u. PHP - Forum

[Monitsch]

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: Alles auswählen

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: Alles auswählen

<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: Alles auswählen

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: Alles auswählen

#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: Alles auswählen

<div id="inhalt">

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

</div>



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

Code: Alles auswählen

#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: Alles auswählen

<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]

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]

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: Alles auswählen

<div id="inhalt">

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

</div>


In CSS

#textfloatright { float: right
}

[Monitsch]

Uupps, zu früh gesendet

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

[Monitsch]

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

Code: Alles auswählen

#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]

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: Alles auswählen

align="left"

angeben muss! Okay selbst beantwortet

Habe eben gelesen:

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/frames/eingebettete.htm#definieren

Gehen iframes auch bei dem Doctype

Code: Alles auswählen

<!DOCTYPE html>

Thanks!

[webmaster3000]

Hallo Monitsch!

1. IFrames sind in HTML 5 erlaubt.
2. Du kannst, um nur die erste h3 zu formatieren, folgendes in den Selektor schreiben:

   Code: Alles auswählen

   h3:first-child

   Damit wird nur die erste h3 innerhalb eines anderen Elements formatiert.
   Bei deinem Problem wäre das:
   

   Code: Alles auswählen

   h3:first-child{
    margin-bottom: 1em;
}

   
   Siehe dazu auch SELFHTML.

Freut mich, geholfen zu haben.

Gruß,
webmaster3000

[Sarkkan]

Habe gerade herausgefunden, dass ich nur

Code: Alles auswählen

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]

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: Alles auswählen

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: Alles auswählen

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

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

Code: Alles auswählen

#deineid {
...
}

Code: Alles auswählen

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

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

Code: Alles auswählen

.deineclass {
...
}

Grüße
Laura

[Monitsch]

Hallo!

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

Mein iframe sieht so aus:

Code: Alles auswählen

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

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

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

Danke schon mal!

[webmaster3000]

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]

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