Ergebnis 1 bis 7 von 7

Thema: Wie kann ich so eine Box erstellen ?

  1. #1
    HTML Newbie
    Registriert seit
    06.04.2011
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Wie kann ich so eine Box erstellen ?

    Hallo zusammen,

    Ich suche seit einer längeren Zeit einen Weg wie ich so eine Box erstellen kann :

    navi1.jpg

    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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Meister(in) Avatar von lukasn
    Registriert seit
    23.02.2008
    Ort
    Schweiz
    Alter
    27
    Beiträge
    491
    Danke
    2
    Bekam 12 mal "Danke" in 11 Postings

    Standard AW: Wie kann ich so eine Box erstellen ?

    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?

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    06.04.2011
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Wie kann ich so eine Box erstellen ?

    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

  4. #4
    Meister(in) Avatar von lukasn
    Registriert seit
    23.02.2008
    Ort
    Schweiz
    Alter
    27
    Beiträge
    491
    Danke
    2
    Bekam 12 mal "Danke" in 11 Postings

    Standard AW: Wie kann ich so eine Box erstellen ?

    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:
    HTML-Code:
    <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
    Code:
    * { /*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
    Angehängte Grafiken Angehängte Grafiken
    Geändert von lukasn (07.04.2011 um 16:38 Uhr)

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    06.04.2011
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Wie kann ich so eine Box erstellen ?

    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

  6. #6
    Meister(in) Avatar von lukasn
    Registriert seit
    23.02.2008
    Ort
    Schweiz
    Alter
    27
    Beiträge
    491
    Danke
    2
    Bekam 12 mal "Danke" in 11 Postings

    Standard AW: Wie kann ich so eine Box erstellen ?

    Kein Problem, wenn du weitere Fragen hast nur her damit

    Grüess us Basel,
    -Lukas

  7. #7
    HTML Newbie
    Themenstarter

    Registriert seit
    06.04.2011
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Wie kann ich so eine Box erstellen ?

    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

Ähnliche Themen

  1. Wie kann ich in PS eine Welt als Vektorgrafik erstellen?
    Von bodenseejenny im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 19
    Letzter Beitrag: 28.10.2009, 22:48
  2. Wer kann mir eine Webseite mit Apartmentangeboten erstellen
    Von homofaber2000 im Forum Job Forum - Jobs für Grafiker, Programmierer und Webmaster
    Antworten: 9
    Letzter Beitrag: 05.02.2009, 17:52
  3. Wer kann mir eine Homepage erstellen für 10 € ??
    Von Killer22 im Forum Job Forum - Jobs für Grafiker, Programmierer und Webmaster
    Antworten: 6
    Letzter Beitrag: 10.03.2008, 22:11
  4. Antworten: 5
    Letzter Beitrag: 08.07.2007, 04:45
  5. Wie kann man eine solche Nav-Leiste (Oben) erstellen????
    Von DidiDidi im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 23.06.2005, 08:20

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •