Anfänger - korrekte schreibweise der Boxen?

[Bazinga]

Guten Nabend,

ich habe vor einigen Tage damit angefangen HTML mit der hilfe von little-boxes zu lernen.
Nun habe ich mir eine kleine Seite gestaltet mit momentan 3 boxen neben einander und jeweils ein Box darunter.

Es sieht alles gut aus und es Funktioniert auch, nun möchte ich jedoch mal Erfahrende User drüber schauen lassen, ob der Code so Optimal ist, damit ich mir keine schlechten Eigenschaften angewöhne :)

p.boxtext { padding: 13px 0 10px 10px; }

.boxtitel
{
    background: linear-gradient(to bottom,#dfdfdf 0%,#117191 100%);
    border-radius: 2px;
    color: #333;
    font-size: 16px;
    font-weight: normal;
    line-height: 21px;
    margin: 0;
    padding: 0 0 0 10px;

}

div#box1
{
    width: 300px;      /*Box breite*/
    height: 20px auto;  /*Box höhe*/
    float: left;        /*Box position*/
    margin-top: 90px;  /*Box abstand oben*/
    margin: 90px auto 20px 32px; /*oben,rechts,unten,links*/
    background-color: #E6E7F9;
    border: 1px solid black;
}   
div#box2
{
    width: 300px;
    height: 20px auto;
    float: left;
    margin: 90px auto 20px 20px; /*oben,rechts,unten,links*/
    background-color: #E6E7F9;
    border: 1px solid black;
}
div#box3
{
    width: 300px;      /*Box breite*/
    height: 20px auto;  /*Box höhe*/
    float: left;      /*Box position*/
    margin: 90px auto 20px 20px; /*oben,rechts,unten,links*/
    background-color: #E6E7F9;
    border: 1px solid black;
}

div#box4
{
    width: 300px;      /*Box breite*/
    height: 20px auto;  /*Box höhe*/
    float: left;        /*Box position*/
    margin-top: 90px;  /*Box abstand oben*/
    margin: 0 auto 20px 32px; /*oben,rechts,unten,links*/
    background-color: #E6E7F9;
    border: 1px solid black;
}   
div#box5
{
    width: 300px;
    height: 20px auto;
    float: left;
    margin: 0 auto 20px 20px; /*oben,rechts,unten,links*/
    background-color: #E6E7F9;
    border: 1px solid black;
}
div#box6
{
    width: 300px;      /*Box breite*/
    height: 20px auto;  /*Box höhe*/
    float: left;      /*Box position*/
    margin: 0 auto 20px 20px; /*oben,rechts,unten,links*/
    background-color: #E6E7F9;
    border: 1px solid black;
}

<!-- erste reihe -->
<div id="box1"><div class="boxtitel"><strong>Box 1</strong></div>
<p class="boxtext">
<img src="img/lang/de.gif">&nbsp;<a href="http://web.de/" rel="external" title=" Beschreibung ">die Website</a>
</p>
</div>

<div id="box2"><div class="boxtitel"><strong>Box 2</strong></div>
<p class="boxtext">
<img src="img/lang/de.gif">&nbsp;<a href="http://web.de/" rel="external" title=" Beschreibung ">die Website</a>
</p>
</div>

<div id="box3"><div class="boxtitel"><strong>Box 3</strong></div>
<p class="boxtext">
<img src="img/lang/de.gif">&nbsp;<a href="http://web.de/" rel="external" title=" Beschreibung ">die Website</a>
</p>
</div>

<div id="box4"><div class="boxtitel"><strong>Box 4</strong></div>
<p class="boxtext">
<img src="img/lang/de.gif">&nbsp;<a href="http://web.de/" rel="external" title=" Beschreibung ">die Website</a>
</p>
</div>

<div id="box5"><div class="boxtitel"><strong>Box 5</strong></div>
<p class="boxtext">
<img src="img/lang/de.gif">&nbsp;<a href="http://web.de/" rel="external" title=" Beschreibung ">die Website</a>
</p>
</div>

<div id="box6"><div class="boxtitel"><strong>Box 6</strong></div>
<p class="boxtext">
<img src="img/lang/de.gif">&nbsp;<a href="http://web.de/" rel="external" title=" Beschreibung ">die Website</a>
</p>
</div>

 

[MrMurphy]

Hallo,

zum Üben ganz nett, mit der Praxis hat das natürlich noch nichts zu tun und kann deshalb kaum beurteilt werden.

Gruss

MrMurphy

 

[Tronjer]

Zum CSS:
- Du benötigst das div vor der ID nicht
- Gemeinsame Attribute wie margin lassen sich zusammenfassen, also bsw:

#foo, #bar, .foobar {
  margin: 10px 20px;
}

Zum HTML:
- Für die Elemente mit der Klasse .boxtitel lieber eine <h1> statt div und <strong>
- Wozu das &nbsp; ?
- Wozu das rel-Attribut im img-Tag?
- Die Whitespaces im title-Attribut sind unschön.

Aber im Großen und Ganzen ist dein Code für einen Einsteiger schon ok. Da sind wir hier Schlimmeres gewohnt.

 

[Bazinga]

Vielen Dank für die Antworten.

Das mit dem nicht benötigtem "div" ist mir neu, denn in Little-Boxes wird dies auch durchgehend verwendet, was mich gerade ein wenig irritiert!!!

Also reicht bei id's und classen die Angabe in der css "#idtext"

Wozu das &nbsp; ?

Für den leerzeichen zwischen Bild und Link Text

Wozu das rel-Attribut im img-Tag?

Danke für den hin weiß, ist ja eigl. unnötig.

Die Whitespaces im title-Attribut sind unschön.

Wenn ich das jetzt richtig verstehe, ist das der Abstand des Titel von der linken Seite der Box?
Finde es unschön wenn es zur sehr am Boxrand ist.

 

[Tronjer]

Das mit dem nicht benötigtem "div" ist mir neu, denn in Little-Boxes wird dies auch durchgehend verwendet, was mich gerade ein wenig irritiert!!!

Im Gegensatz zu einer CSS-Klasse kann eine ID nur einmal pro Seite verwendet werden. Eine Ausdifferenzierung mit einleitendem Tag ist unnötig.

Für den leerzeichen zwischen Bild und Link Text

&nbsp; ist ein geschütztes Leerzeichen, welches einen Zeilenumbruch verhindert. Falls das dein Anliegen ist, schau nach CSS-Lösungen.

Wenn ich das jetzt richtig verstehe, ist das der Abstand des Titel von der linken Seite der Box?

Damit meinte ich die Leerzeichen nach den double quotes.

btw. ist Little Boxes auch nicht mehr state-of-the-start, aber für einen Einsteiger immer noch besser als selfhtml. Wenn du dich daran orientieren willst, mache das ruhig

 

[Bazinga]

Fällt mir gerade auf, dass &nbsp; ist natürlich unnötig, denn ich kann ja auch einfach so ein Leerzeichen machen. Da war ich wohl gerade wo anders :)

Dann weiß ich ja dass ich momentan in die richtige Richtung Steuer. Danke für die hinweise.

Bin leider etwas Bücher-faul, daher viel meine Wahl auf Little-Boxes von Videp2Brain. HTML und PHP sind ja Ständig im Wandel daher ist es schwer Aktuelles Lehrmaterial zu finden.

 

[MrMurphy]

Hallo

ich habe das auch durchgearbeitet, aber kann mich an kein Beispiel wie an deines erinnern.

Das hast du entweder selbst kreiert oder Little Boxes falsch verstanden.

Dort wird zum Beispiel direkt am Beginn auf das Grundgerüst von HTML eingegangen, welches danach grundsätzlich benutzt werden soll. Das fehlt bei dir ja komplett.

Auch an so eine "Divitis" kann ich mich nicht erinnern. Als Grundlage für eine HMTL-Seite schon gar nicht. Wenn überhaupt, dann als theoretisches Beispiel, aber nicht als Beispiel für die Praxis. Das sollte man schon unterscheiden können.

In Little Boxes wird als Beispiel eine "richtige" Seite begonnen, die dann immer weiter ausgebaut und um weitere ergänzt wird. Das sind die Vorgaben, nach denen du dich in der Praxis richten solltest.

Ich war davon ausgegangen, das dir das eigentlich klar war und deine Beispiele nur eine theoretische Fingerübung sein sollen.

Gruss

MrMurphy

 

[Bazinga]

Hey,

Klar fehlt hier der größte teil, ich habe hier auch nur ein teil Code rein gestellt. Mir ging hier nur um Übungen meiner Seids Tabellen zu erstellen mit Titel, da ich das Boxen Modell richtig verstehen wollte. Die div werden am Anfang nicht nur als theoretisches Beispiel genannt, sondern werden auch eingesetzt! Bin erst in der Mitte der Kapitel, ich konnte anhand der Beispiel Dateien erkennen dass diese "div" bald in der CSS verschwinden, zu diesem Kapitel komme ich wohl noch. evtl. sollte ich mir erst mal alles anschauen bevor ich übe....