Solche dynamischen Boxen erstellen für die Sitebar?

[deflox]

Ich bin gerade daran eine neue Homepage zu erstellen und lerne immer mehr dazu :) Ich bin natürlich auch schon auf WordPress gestossen und habe auch schon Websites mit dem CMS System besucht.

Bei WordPress gibt es immer solche Infoboxen auf der Sitebar, welche echt cool aussehen. (Hier ein Bild dazu; in blau)

Wie kann man die mit HTML und CSS erstellen? Ich würde diese nämlich sehr gerne in meine Homepage einbauen, und darin verschiedene Informationen wie zum Beispiel Soziale Netzwerke etc...

Danke für die Hilfe.

deflox

 

[Cheffchen]

Na mit div und h1 für die überschrieft, rest ist css.

Zeige mal was bis jetzt hast.

Cheffchen

 

[deflox]

Ich habe bis jetzt noch gar nichts! Ich habe eine Sitebar erstellt. Aber geht das, dass man einen div auf einen div container legen kann?

 

[Cheffchen]

Hallo,

na in dem die verschachtelst

ca. so

<div class="box">
<h1>Überschrift</h1>
text bla bla
</div>

mehr brauchst nicht, der rest ist einfaches css.

Cheffchen

 

[CSSEXPRESS]

So sollte es beispielsweiße funktionieren:

<div id="sidebar">
<div class="sidebar-class">
<h3>Letzte Beiträge</h3>
Willkommen auf der Webseite
</div>
</div>

.sidebar-class {
width: 200px;
}
h3 {
display: block;
width: 100%;
background-color: blue;
color: #fff;
margin: 0 0 5px 0;
}

Mal als grobes Beispiel :idea:

Edit: float: left; rausgenommen

 

[Banana_Jones]

[...]

Das <h3> zu floaten macht hier keinen Sinn. Zusätzlich bräuchte es, wenn es dem Beispiel nachempfunden sein soll, noch ein <p> um den Text (um die doppelte Border unten darzustellen). Außerdem würde ich die box in der Breite nicht auf 200px begrenzen, sondern auf die volle Breite des Elternelements gehen (die Sidebar). Aber das ist sicher anwendungsbezogen.

Natürlich fehlen dann noch die CSS-Spielereien wie Gradient im <h3>, die abgerundeten Ecken und der Dropshadow

Klar hast du hier nur ein grobes Beispiel ohne Anspruch auf Vollständigkeit geschrieben, aber da hier gern ohne nachzudenken kopiert wird, wollte ich nochmal meine Korrekturen anhängen.

edit: Natürlich sollten die CSS-Angaben für <h3> auch nur für <h3>s innerhalb der Sidebarbox gelten...

 

[CSSEXPRESS]

Das <h3> zu floaten macht hier keinen Sinn. Zusätzlich bräuchte es, wenn es dem Beispiel nachempfunden sein soll, noch ein <p> um den Text (um die doppelte Border unten darzustellen). Außerdem würde ich die box in der Breite nicht auf 200px begrenzen, sondern auf die volle Breite des Elternelements gehen (die Sidebar). Aber das ist sicher anwendungsbezogen.

Natürlich fehlen dann noch die CSS-Spielereien wie Gradient im <h3>, die abgerundeten Ecken und der Dropshadow

Klar hast du hier nur ein grobes Beispiel ohne Anspruch auf Vollständigkeit geschrieben, aber da hier gern ohne nachzudenken kopiert wird, wollte ich nochmal meine Korrekturen anhängen.

edit: Natürlich sollten die CSS-Angaben für <h3> auch nur für <h3>s innerhalb der Sidebarbox gelten...

Stimmt das floaten ist natürlich Blödsinn. Wo ich da wohl war? :-?
Zudem wäre es auch besser, wenn man der Sidebar die feste Breite gibt, um eventuell später Änderungen schnell vornehmen zu können.

Wie Du schon sagtest war das auch nur ein Beispiel.
Ich fands halt früher immer besser, wenn mir jemand einen groben Beispiel-Code vorlegt und ich mir selber einen Kopf machen kann, warum, wieso & weshalb und was noch fehlt.