Div Blöcke sparen bei Blogeinträgen

[knowad]

Hallo Leute,

ich habe Interesse gefunden am designen und coden von Webseiten. Seit einiger Zeit versuche ich fertige Design aus dem Internet zu Coden um verständnis für den Aufbau zu kriegen und allem anderen.

Ich versuche mich zurzeit an dem Design, weiß aber nicht ganz genau wie ich es am besten einteilen sollte.
Folgendes habe ich mir überlegt.


Ich habe auch schon angefangen es zu coden, aber ich stecke bei dem Div für die Blogeinträge fest.


Ich habe gelesen, dass man so wenig Div wie möglich benutzen sollte, damit die Seite dynamisch bleibt.
Wie würdet ihr den Div Block für die Einträge gestalten ?
Sollte ich für jeden Eintrag einen neuen Div Block benutzen oder gibt es da eine andere Variante.

Wie sollte man am besten den Code für die Seitenleiste schreiben ?

Das Design ist von dieser Webseite.
Design a Professional Blog Layout in Photoshop | Webdesigntuts+

 

[threadi]

Ich versuche mich zurzeit an dem Design, weiß aber nicht ganz genau wie ich es am besten einteilen sollte.

Mit dem Design hast Du dir aber gleich einen harten Brocken ausgesucht. Hast Du schon einfachere Designs erfolgreich umgesetzt?

Ich habe gelesen, dass man so wenig Div wie möglich benutzen sollte, damit die Seite dynamisch bleibt.

Stimmt nicht ganz. <div>-Elemente sind semantisch bedeutungslose Elemente. Daher sollte man diese höchstens zur Gruppierung von Elementen nutzen, nicht aber direkt in diesen Texte einfügen.

Böse:

<div>Überschrift<br>Hier steht ein Text</div>

Gut:

<div>
 <h1>Überschrift</h1>
 <p>Hier steht ein Text</h1>
</div>

Mit HTML5 kannst Du zudem viele Aufgaben von <div>-Elementen in früheren HTML-Versionen durch neuere HTML-Elemente ausführen lassen. Für den Kopfbereich gibt es z.B. <header>, für den Fuß <footer>. Dadurch gruppiert man HTML-Elemente in semantisch korrekten umgebenden Elementen.

Wie würdet ihr den Div Block für die Einträge gestalten ?

Wenn es eine Auflistung von kurzer Anreißern sein soll, dann wäre eine <ul>-Liste passender. Wenn es komplette Artikel sein sollen bei Verwendung von HTML5 eher <section> und <article>, bei anderen HTML-Standards zur Not <div>-Elemente.

Wie sollte man am besten den Code für die Seitenleiste schreiben ?

Würde ich je nach Abschnitt anders machen. Teils <ul>, teils nur <p> - insgesamt von einem einzigen <div> umgeben um die Seite zu positionieren und die Abstände zu definieren.

 

[knowad]

Mit dem Design hast Du dir aber gleich einen harten Brocken ausgesucht. Hast Du schon einfachere Designs erfolgreich umgesetzt?

Ja würde ich schon sagen, ich habe viele Youtube Videos angeguckt und mitgeschrieben, dann experimentiert. Ja und sonst macht es keinen spaß

Stimmt nicht ganz. <div>-Elemente sind semantisch bedeutungslose Elemente. Daher sollte man diese höchstens zur Gruppierung von Elementen nutzen, nicht aber direkt in diesen Texte einfügen.

Böse:

<div>Überschrift<br>Hier steht ein Text</div>

Gut:

<div>
 <h1>Überschrift</h1>
 <p>Hier steht ein Text</h1>
</div>

Mit HTML5 kannst Du zudem viele Aufgaben von <div>-Elementen in früheren HTML-Versionen durch neuere HTML-Elemente ausführen lassen. Für den Kopfbereich gibt es z.B. <header>, für den Fuß <footer>. Dadurch gruppiert man HTML-Elemente in semantisch korrekten umgebenden Elementen.

Genau so meine ich es. Den Code semantisch zu schreiben habe ich mir durch viele Youtube Videos schnell angewöhnt.

Wenn es eine Auflistung von kurzer Anreißern sein soll, dann wäre eine <ul>-Liste passender. Wenn es komplette Artikel sein sollen bei Verwendung von HTML5 eher <section> und <article>, bei anderen HTML-Standards zur Not <div>-Elemente.

Nach langem rumprobieren bin ich mit deinem Tipp auf folgendes Ergebnis gekommen:



Der Html Code sieht so aus :

<div class="blogeinträge1">     <!-- blogeinträge -->
    <img class="Lbox" src="img/Lbox.png" width="61" height="87" />
    <blockquote>
    <ul>
    
      <p class="category"> Business > Entertainment<span class="Überschriftblog"><img class="blogbild" src="img/Lbox1.png" width="164" height="161" /></span></p>
    <p class="Überschriftblog">The Envolving Role of<br> Social Media in News Organizations</p>
    <p>Posted by Charlie 1h ago | 30 comments</p>
    <p>Des Text für den Blog .................................................................................</p>
   
    </ul></blockquote>
     <p class="tags">Tags:         <span> Envolving, bla bla</span>
       <p class="tags"><img class="Lbox" src="img/Lbox.png" width="61" height="87" />
    <blockquote>
    <ul>

Das Problem, dass ich jetzt habe ist, die Boxen auf die linke Seite zu bekommen. Ich habe es mit float:left versucht, aber es tut sich nichts
Fehlt nur noch die Trennlinie

 

[threadi]

Welche Boxen meinst Du? Kann man sich deinen Zwischenstand irgendwo auch anschauen?

Und verwende bitte Code-Tags wenn Du im Forum Quellcode postest.

 

[knowad]

Welche Boxen meinst Du? Kann man sich deinen Zwischenstand irgendwo auch anschauen?

Ich meinte die auf der linken Seite, wo drin steht wie viel Herzen der Beitrag hat.

Ich verwende ja das Design nur privat um daran zu üben. Ich könnte ein Bild machen. Hast du eine andere Idee wie ich es darstellen könnte ?

Hier erstmal ein Bild :

Und verwende bitte Code-Tags wenn Du im Forum Quellcode postest.

Alles klar hab die andere post bearbeitet.

 

[threadi]

Der Hintergrund und das Herz müssten sicherlich Grafiken sein die als Hintergrundbilder eingefügt sind. Die Zahl und "Loves" könnte aber ein Text sein. Das ganze würde ich als <p> mit darinliegendem <span> neben den Texten floaten. Da ich deinen Quellcode weiterhin nicht kenne kann ich aber nicht sagen was Du dafür wie machen müsstest.

 

[knowad]

Super danke für den Tipp, habs hinbekommen.

 

[threadi]

Ich würde hierfür keine ID verwenden. Die darf pro HTML-Dokument nur 1 Mal vorkommen. Du hast aber mehrere Einträge. Da wäre eine Klasse besser geeignet.