1. Dashboard
  2. Artikel
  3. Mitglieder
    1. Letzte Aktivitäten
    2. Benutzer online
    3. Team
    4. Mitgliedersuche
  4. Forum
    1. Unerledigte Themen
  • Anmelden
  • Registrieren
  • Suche
Dieses Thema
  • Alles
  • Dieses Thema
  • Dieses Forum
  • Artikel
  • Seiten
  • Forum
  • Erweiterte Suche
  1. HTML - Webmaster Forum
  2. HTML / Webmaster Forum
  3. HTML & CSS Forum

Abstandsproblem

  • Billbos
  • 24. Juni 2011 um 12:46
  • Billbos
    Profi
    Beiträge
    485
    • 24. Juni 2011 um 12:46
    • #1

    Hallo Leute,

    im folgenden Sceenshot könnt ihr eine Trennlinie sehen!
    [Blockierte Grafik: http://www.billbos.eu/forumbilder/trennlinie.jpg]

    Diese Trennlinie soll nun oben einen Abstand von 5px und unten einen Abstand von 5px zum Text haben.
    Margin und padding greifen funktionieren einfach nicht, wieso auch immer!!!
    Weiß jemand weiter?

    PHP
    <!-- INFO BOX LINKS -->
            <div id="infos">
                <h2>Information about</h2>
                    <?php
                        include('html/infos_inc.php')
                    ?>
    
                 <div class="infotrennlinie"><img src="images/trennlinie_280.png" /></div>
    
                <p>Hier folgt ein Text!!!!</p>
    
            </div>
    
            <!-- INFO CLIENTS -->
            <div id="clients">
                <h2>Clients</h2>
                    <?php
                        include('html/info_clients_inc.php')
                    ?>
            </div>
    
            <br clear="both" />
    
        </div>
    Alles anzeigen
    Code
    /* TRENNLINIE INFOS */
    
    
    class#trennlinie .infotrennlinie {
        width: 300px;
        height: 2px;
        margin: 5px auto;
        }

    http://www.danielsfotos.com

    MFG

    http://www.danielsfotos.com

  • DarkEmperor
    Meister(in)
    Reaktionen
    1
    Beiträge
    356
    • 24. Juni 2011 um 13:23
    • #2

    Haste ja jetzt schon selbst gelöst oder? ... zumindest finde ich auf der verlinkten Seite das Problem nicht mehr!

    MfG

    [Blockierte Grafik: http://toms-blog.bplaced.net/images/Blog-Logo4.png]

  • unknownsoldier
    Fortgeschrittene/r
    Reaktionen
    3
    Beiträge
    174
    • 24. Juni 2011 um 13:26
    • #3

    ...

    Code
    class#trennlinie .infotrennlinie


    Das ist totaler Schwachsinn.

    Code
    div.infotrennlinie


    So ist es richtig.

    Würde allerdings einfach das Bild als "background" vom <div>-Element einbinden.
    Oder das <div>-Element weglassen und dem <img /> Tag nen Abstand verpassen.
    Ps. Du hast das "alt"-Attribut beim Bild vergessen!

    EDIT:
    Wofür eigentlich das Bild? so eine Trennlinie kannst du ganz einfach mit der CSS-Eigenschaft "border" erzeugen...

  • Billbos
    Profi
    Beiträge
    485
    • 24. Juni 2011 um 16:59
    • #4

    Hey danke, aber so scheint es nicht zu gehen! Davon bin ich am Anfang auch ausgegangen, aber das Bild wird dann nicht mehr dargestellt, siehe link (danielsfotos.com).
    Ich mache es mit der Grafik, weil ich jetzt nicht wüsste, wie ich den <border> eingestanzt aussehen lassen könnte.

    LG

    http://www.danielsfotos.com

  • unknownsoldier
    Fortgeschrittene/r
    Reaktionen
    3
    Beiträge
    174
    • 24. Juni 2011 um 18:10
    • #5
    Code
    border-top: 1px solid #dunklefarbe;
    border-bottom:1px solid #hellefarbe;
  • Billbos
    Profi
    Beiträge
    485
    • 24. Juni 2011 um 18:43
    • #6

    Stimmt, wäre eine gute Idee!
    Angenommen ich würde jetzt doch die Grafik nehmen, weißt du wie ich das mit dem Abstand auf die Reihe bekommen würde?

    http://www.danielsfotos.com

  • unknownsoldier
    Fortgeschrittene/r
    Reaktionen
    3
    Beiträge
    174
    • 24. Juni 2011 um 18:50
    • #7

    einfach gar nicht machen... --> <hr />

    Dafür ist <hr /> doch da..

  • Billbos
    Profi
    Beiträge
    485
    • 24. Juni 2011 um 18:50
    • #8

    Habe es jetzt übrigens mal so gemacht, wie du es beschreibst, die Idee ist echt gut! Nur gehen tut es einfach nicht, keine Ahnung wieso, siehe Code!

    div.infotrennlinie {
    width: 200px;
    height: 2px;
    border-top: #1f1f1f;
    border-bottom: #777777;
    }

    http://www.danielsfotos.com

  • unknownsoldier
    Fortgeschrittene/r
    Reaktionen
    3
    Beiträge
    174
    • 24. Juni 2011 um 18:54
    • #9

    wie ich schon gesagt hatte:
    Benutze <hr /> mit dem CSS-Style:

    Code
    hr {
       border-top:1px solid #dunklefarbe;
       border-bottom:1px solid #hellefarbe;
    }
  • Billbos
    Profi
    Beiträge
    485
    • 24. Juni 2011 um 19:01
    • #10

    TOP! Danke!

    http://www.danielsfotos.com

Tags

  • www
  • html
  • ie
  • http
  • links
  • jpg
  • text
  • images
  • img
  • code
  • auto
  • div
  • ts
  • abstand
  • linie
  • png
  • height
  • info
  • box
  • px
  • width
  • information
  • include
  • padding
  • clients
  1. Datenschutzerklärung
  2. Impressum
Community-Software: WoltLab Suite™