Hallo zusammen,
Ich suche seit einer längeren Zeit einen Weg wie ich so eine Box erstellen kann :
Ich sehe das es ein Rahmen mit Links ist, aber nicht wie ich das genau erstellen kann.
Würde mir da einer sagen wie genau ich das machen kann ???
Danke und Gruss aus CH
Versteh die Frage nicht ganz, erstellen wie? Meinst du in CSS umsetzen für eine Website? Oder wie du das Ganze in einem Grafikprogramm angehst?
Hi,
Sry, ja ich möchte das in eine Webseite einbauen.
Also wie müsste ich den CSS Code und HTML Code aufbauen das es danach dann so aussieht ...
Und wie müsste ich dann wenn gebraucht das in einem Grafikprogramm machen ?
Genau so war das gemeint ... Danke 
Das geht recht einfach, dü kannst es über mehrere Hintergrundbilder lösen:
Als erstes erstellst du die Box so wie du sie gerne möchtest im Grafikprogramm deiner Wahl. Danach zerteilst du sie in 3 einzelne Bilder, eines für den oberen Rand, eines für die Mitte und eines für den unteren Rand (siehe Anhang). Da die Box ja wohl eine Variable Höhe haben soll, sollte der Mittelteil nur 1px hoch sein und dann mit repeat-y wiederholt werden.
Hier ein genaues Beispiel, erstellt anhand deines Beispielbildes, die Schrift ist nur angenähert ;). Ich hab hier leider keinen Zugang zu meinem Server, kann dir also kein Livebeispiel geben, aber du kannst es ja zuhause nachmachen.
Das Markup ist einfach:
<div class="linkbox">
<h3>Mitglieder</h3>
<ul>
<li><a href="#">Anmelden</a></li>
<li><a href="#">Login</a></li>
<li><a href="#">Regeln</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Gästebuch</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Datenschutzerklärung</a></li>
</ul>
</div>
Und das CSS dazu eigentlich auch
* { /*Global Reset und ungefähre Annäherung der Schrift*/
margin: 0;
padding: 0;
border: 0;
color: white;
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: bold;
}
.linkbox {
width: 180px; /*Fixe Breite ist zwingend nötig bei der Methode.*/
background: url('box_bg_bottom.jpg') bottom right no-repeat;
padding-bottom: 16px; /*genaue Höhe des Hintergrundbildes, hiermit wird
vermieden, dass die ul den Hintergrund verdeckt*/
}
.linkbox h3 {
width: 100%;
height: 24px; /*genaue Höhe des Hintergrundbildes minus das Padding-Top von 6px*/
background: url('box_bg_top.jpg') no-repeat;
padding: 6px 0 0 48px; /*Positionierung des Textes*/
}
.linkbox ul { /*Der Hintergrund wird über die gesammte Höhe der ul wiederholt,
dadurch ist eine beliebig lange Liste möglich*/
width: 100%;
background: url('box_bg_gradient.jpg') repeat-y;
}
.linkbox li {
margin-left: 22px; /*Einrücken der Listenelemente, kann auch anders gelöst werden*/
}
Wenn du eigene Aufzählungszeichen für die Listenelemente brauchst, kannst du das entweder über list-style-image oder ein Hintergrundbild für li lösen, wobei die zweite Methode mehr Freiheit lässt.
EDIT: Konnte das ding doch noch Hochladen, guckst du hier: http://dev.hsonline.ch/forumhilfe/linkbox.html
Gruss,
-Lukas
HAMMER ...
So einfach hätte ich mir das nun nicht vorgestellt
Danke dir viel viel mal ... nun bin ich ein mega stück weiter gekommen.
Gruss aus CH
Charly
Kein Problem, wenn du weitere Fragen hast nur her damit
Grüess us Basel,
-Lukas
So klein ist dann die Welt
Komme aus Amriswil und du aus Basel ;););)
Hab nun nur noch das Problem das ich den vorgebenen Style komplett umbauen muss.
Der hat schon ein CSS usw., muss nun sehen das ich alle Boxen die da sind an den anpasse