• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Brauche gutes Tutorial!

H

HabbBOX

New member
Hallo..
So, muss wieder mal anfangen euch mit meinen Fragen zu nerven*gg*
Also, ich brauche ein Tutorial, wo geschrieben ist wie man Boxen zusammenbaut..
Hab hier:
Habborator | Archive :: Boxes

Boxen, aber keine ahnung wie man in die oberen, unteren Boxen Reinschreibt
und wie man die unteren zusammenstellt..

Hoffe ihr habt ein lehrreiches Tutorial für mich.

glg
 
Hab mal ein kleines Beispiel gebastelt und Text in eine Box geschrieben.
PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head >
<head>
  <title>Boxes</title>
<style type="text/css">
#box1 {
background: url(http://www.habborator.org/archive/blocks/box200/016.gif) no-repeat;
padding: 50px 0 0 5px;
height: 150px;
width: 150px;
color:#fff;
}
</style>
</head>
<body>
<div id="box1">
Der Text steht in der Box.
</div>
</body>
</html>
Ohne Kenntnisse über den Einsatz von Divs und ein wenig CSS wird das allerdings schwer.
 
Und was für ein Grafikprogramm köntest du mir empfehlen?
Muss ich bei Selfhtml einfach nach Boxen zusammenstellen suchen oder so etwas in der Art?
 
@HabbBOX: anna55 hat Dir ein perfektes Beispiel geliefert.
Als kostenloses Grafikprogramm empfehle ich "The Gimp".
Ansonsten liegen allerdings "Photoshop" oder "Photoshop Elements" vorne.
 
Oh sry, hab in der Zeit als Anna geschrieben hat den Post gemacht. :)
Nicht gesehen sry..
Wow anna vielen dank das du dir Zeit genommen hast für das. Und was ist den mit den Bildern die die Box braucht?! Oder braucht die keine? S:
 
HabbBOX schrieb:
.. aber wie mach ich das bei den unteren Boxen?
Zum Vergrößern anklicken....
Du meinst, die verschiedenen Rahmen einsetzen?
Wie Herr Denz schon sagte, ein Grafikprogramm kann helfen.

Die große fertige Grafik kann dann als Hintergrundbild dem Body zugewiesen werden. Darauf platzierst Du dann Deine kleinen Boxen (falls das so vorgesehen ist).
 
Wie Herr Denz schon sagte, ein Grafikprogramm kann helfen.

Die große fertige Grafik kann dann als Hintergrundbild dem Body zugewiesen werden. Darauf platzierst Du dann Deine kleinen Boxen (falls das so vorgesehen ist).
Zum Vergrößern anklicken....

Gimp check ich voll nicht :S
Und was muss ich dann bei Gimp genau machen?
dort steht ja nicht den Code dafür..?
 
*Ohne Worte*

So'n bißchen Selbstinitiative solltest Du selbstverständlich schon mitbringen!
 
Zuletzt bearbeitet:
:D Nein aber ich weiss nicht was ich dort anfangen soll?!
Ich kann ja auch die Bilder einfach abspeichern..
Aber ich weiss nicht wie ich den Code machen muss, für die unteren Boxen mit den Rahmen..
 
Für die unteren Boxen, die man zuerst zusammenstellen muss, wie das Beispiel das du mir am Anfang gemacht hast, dank dem komm ich jetzt mit den kleinen Boxen klar :)
 
Sieh Dir an wie anna55 das in dem obigen Beispiel gemacht hat und dann ziehe Schlüsse daraus.
Denn bei den großen Boxen funktioniert es wie mit den kleinen, nur eben mit anderen Werten.
Wenn Du das nicht ableiten kannst, dann ist Hopfen und Malz wohl verloren...
 
Konkret etwas zu sagen, ist deshalb auch schwer, weil wir gar nicht wissen, was Du vorhast. Was soll denn mit den großen Boxen geschehen? Sind die als Hintergrund gedacht. Zu Hintergrundgrafiken kannst Du Dich hier mal informieren.

Außerdem habe ich nochmal ein kleines Beispiel gebastelt:
PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de"> 
<head> 
<title>Boxen</title> 
<style type="text/css"> 
body, html {
margin: 0;
padding: 0;
}
#seite {
background:url(http://www.habborator.org/archive/blocks/homes/h03.gif) top center no-repeat;
margin: 0 auto;
text-align: center;
height:545px;
width:545px;
}
#leftcontent {
margin-left: -20px;
padding-top:30px;
width: 130px;
float: left;
}

/* speziell für IE6 */
*html #leftcontent {
padding-top:55px;
}

/* speziell für IE7 */
*+html #leftcontent {
padding-top:55px;
}
#box1 {
background:url(http://www.habborator.org/archive/blocks/box100/029.gif) no-repeat;
padding-top: 0px;
margin-left: 70px;
margin-bottom: 20px;
height: 100px;
width: 100px;
}
#box1 h4, #box2 h4, #box3 h4 {
text-align: center;
color: green;
padding-top: 5px
}
#box1 p, #box2 p, #box3 p {
margin: -12px 5px 0;
text-align: left;
}
#box2 {
background:url(http://www.habborator.org/archive/blocks/box100/029.gif) no-repeat;
margin-top: 0px;
margin-left: 70px;
margin-bottom: 20px;
height: 100px;
width: 100px;
}
#box3 {
background:url(http://www.habborator.org/archive/blocks/box100/029.gif) no-repeat;
margin-top: 0px;
margin-left: 70px;
margin-bottom: 20px;
height: 100px;
width: 100px;
}
#mitte {
overflow: auto;
width: 330px;
margin-left: 180px;
padding-top: 40px;
}
/* speziell für IE6 */
*html #mitte {
padding-top: 60px;
}
/* speziell für IE7 */
*+html #mitte {
padding-top: 60px;
}
</style>
</head>
<body>
<div id="seite">
<div id="leftcontent">
<div id="box1">
<h4>Überschrift</h4>
<p>Das ist der Text in der ersten Box. :-)</p> 
</div>
<div id="box2">
<h4>Überschrift</h4>
<p>Das ist der Text in der zweiten Box.</p> 
</div>
<div id="box3">
<h4>Überschrift</h4>
<p>Das ist der Text in der dritten Box. :-)</p> 
</div>
</div> <!-- Ende Div leftcontent -->
<div id="mitte">
<p>Hier kommt ganz viel Text in die Mitte - vielleicht auch mal ein Bild?!</p>
<p>Hier kommt ganz viel Text in die Mitte - vielleicht auch mal ein Bild?!</p>
<p>Hier kommt ganz viel Text in die Mitte - vielleicht auch mal ein Bild?!</p>
<p>Hier kommt ganz viel Text in die Mitte - vielleicht auch mal ein Bild?!</p>
</div>
</div> <!-- Ende Div seite -->
</body>
</html>
 
Keine Ahnung! Was sollen denn die Bilder anzeigen?
Bei Rot über die Ampel oder bei A&C 'ne Hose geklaut?
 
Bei deinem 2. Beispiel..


Keine Ahnung! Was sollen denn die Bilder anzeigen?
Bei Rot über die Ampel oder bei A&C 'ne Hose geklaut?
Zum Vergrößern anklicken....

Also..

1. Bringst du die Witze nicht wirklich.. :sleepy:
2. Wenn du antwortest, bitte etwas sinnvolles..
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben