Benutzt du Firefox als Browser?
Dann besorg dir mal das Addon Firebug, damit kannst du auch komplizierte Quellcodes relativ einfach auslesen und ein bisschen "spicken".
Poddi hat einfach im Content selbst noch einige Boxen eingefügt.
Ich zeig dir das Ganze mal anhand einer meiner Seiten, da ich dir dazu auch direkt den Quellcode liefern kann:
Schau dir meine Startseite von
BadWeb an.
Dir fallen sicherlich die drei Boxen in der Mitte auf. Ich habe in den Content diverse Styleanweisungen in Css geschrieben und per HTML die neuen Boxen erstellt.
Code: <style type="text/css">
<!--
#content {
height: 450px;
}
#box {
width: 150px;
height: 200px;
padding-top: 10px;
padding-right: 20px;
padding-left: 20px;
float: left;
}
#box2 {
width: 575px;
float: left;
padding-top: 10px;
}
</style>
<h2><font color="#1f88e3">W</font>illkommen bei BadWeb</h2>
Ich benutze diese Seite um zu experimentieren, zu testen und meine HTML und CSS Kenntnisse zu erweitern. Praktisch nebenbei präsentiere ich auf dieser Seite noch Themen aus meinem täglichen Leben, wie meiner Lieblingsmusik, Webseiten und und und. Schauen Sie sich einfach um, vorallem die Mediathek sollten Sie genauer unter die Lupe nehmen. <br>
<br>
<div id="box">
<h4><font color="#1f88e3">A</font>bout</h4>
<h5>Vorstellung</h5>
An dieser Stelle möchte ich mich Ihnen kurz vorstellen und Ihnen einige Eckpunkte zu meiner Persönlichkeit geben ... <a href="/About.htm"><strong>Weiterlesen</strong></a></div>
<div id="box">
<h4><font color="#1f88e3">M</font>ediathek</h4>
<h5>Musik,Bücher, Videos ...</h5>
In der Mediathek habe ich diverse Künstler und Autoren mit ihren jeweiligen Werken aufgelistet, denen ich sehr zugetan bin. Schauen Sie sich um, vielleicht trifft auch etwas ihren Geschmack ... <a href="/Media.htm"><strong>Weiterlesen</strong></a></div>
<div id="box">
<h4><font color="#1f88e3">L</font>inkliste</h4>
<h5>Webseiten, Tools & mehr</h5>
Die Linkliste beschäftigt sich mit Programmen, Anwendungen und Webseiten, die mir in der Vergangenheit nützlich waren bzw. die ich öfters besuche ... <a href="/Infos.htm"><strong>Weiterlesen</strong></a></div>
<div id="box2">
<h6><font color="#1f88e3">A</font>ktuelles</h6>
Heute am 21.6.10 habe ich ein neues Design eingefügt, dass ich auch selbst erstellt habe. Nach dem nun eine ganze Weile das dunkle Design von <a href="http://www.plekke.de">Plekke</a> zu sehen war, habe ich mich nun für eine hellere Lösung entschieden. Das Design kommt ohne auffällige Boxengestaltungen aus, was wie ich finde elegant wirkt und eine gewisse Leichtigkeit ausstrahlt. Anregungen/Bemerkungen zum Design sind selbstverständlich erwünscht. <a href="/G.ae.stebuch.htm">Zum Gästebuch</a></div>
<div id="box2">
<h5>Anmerkung</h5>
Obwohl ich in der Vergangenheit schon häufig danach gefragt wurde: Ich erstelle keine Designs für den HpBk auf Anfrage. Ich bin stehts bereit bei kleineren Problemen mit selbsterstellten Designs zu helfen, aber im Moment möchte ich noch keine "Designagentur" eröffnen.</div>
Wenn du jetzt die verschiedenen Möglichkeiten von HTML und CSS kombinierst kommst du auf ein Ergebnis wie Poddi.
______________
Rechtschreibfehler sind gewollt und erhöhen die Qualität des Beitrags.