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
  1. HTML - Webmaster Forum
  2. HTML / Webmaster Forum
  3. HTML & CSS Forum

Info-Boxen

  • Alic3M
  • 4. Oktober 2009 um 23:02
  • Alic3M
    Teeny
    Beiträge
    21
    • 4. Oktober 2009 um 23:02
    • #1

    Hallo,

    ich bin ziemlicher Anfänger und hab folgendes Problem:

    Hab als Aufgabe für mein Studium ein dreispaltiges Layout gemacht (links Navi, Mitte Inhalt, rechts Info). In die rechte Spalte (Info) sollen nun Info-Boxen (Info-Box 1, Info-Box 2, Info-Box 3).

    Die Aufgabenstellung ist folgende:

    "Erzeugen Sie die einzelnen Info-Boxen in der rechten Spalte. Die Höhe der Boxen soll sich an ihren Inhalt anpassen und es soll möglich sein, beliebig viele dieser Boxen zu erzeugen."

    Kann mit dieser Aufgabenstellung jemand was anfangen??

    Hab ne rechte Spalte mit float:right erzeugt, aber weiß nicht, wie ich da Info-Boxen reinbekomme :roll:

    LG, Alic3M

  • synaptic
    Forum Guru
    Reaktionen
    11
    Beiträge
    10.917
    • 4. Oktober 2009 um 23:17
    • #2

    also ich find des schreit nach javascript :)
    damit musste halt die einzelnen zusatz-elemente erzeugen
    wobei.. was soll denn in die info-boxen rein? nen kruzer text oder wat längeres?

  • Alic3M
    Teeny
    Beiträge
    21
    • 4. Oktober 2009 um 23:53
    • #3
    Zitat von synaptic

    also ich find des schreit nach javascript :)
    damit musste halt die einzelnen zusatz-elemente erzeugen
    wobei.. was soll denn in die info-boxen rein? nen kruzer text oder wat längeres?


    Javascript hatten wir noch nicht, d.h. ich darf das auch nicht anwenden :lol:

    Also in die boxen soll ne überschrift und darunter ein kurzer text. Sieht dann ungefähr so aus wie in der Anlage.

    Bilder

    • Unbenannt-2.jpg
      • 92,93 kB
      • 454 × 340
  • synaptic
    Forum Guru
    Reaktionen
    11
    Beiträge
    10.917
    • 5. Oktober 2009 um 00:11
    • #4
    HTML
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
    
    
    <head>
    <title></title>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
    <script type="text/javascript">
    /* <![CDATA[ */ 
    $(document).ready(function(){
        $('.infolink').click(function(yourtext){
            $('#infos').html($('#infos').html()+'<div class='infobox'>das is ne info</div>');
        });
    });
    /* ]]> */ 
    </script>
    
    
    <style type="text/css">
    #wrapper{
    width:910px;
    margin:0 auto;
    overflow:hidden;
    border:2px dotted green;
    }
    #content{
    width:600px;
    float:left;
    margin:20px;
    padding:5px;
    border:2px dashed black;
    }
    #infos{
    width:200px;
    float:left;
    margin:20px;
    border:2px dashed red;
    padding:5px;
    }
    .infobox{
    width:100%;
    border 1px solid blue;
    background:#cccccc;
    }
    </style>
    </head>
    <body>
    
    
    
    
        <div id="wrapper">
            <div id="content">
               content<br />
               <a href="#" class="infolink" id="link1">das hier is link</a>
            </div>
    
    
            <div id="infos">
              infodiv<br />
            </div> 
        </div> 
    </body>
    </html>
    Alles anzeigen

    also das wäre die javascipt-variante gewesen...(in einfachster form, ohne nen speziellen text und eben dynamisch- für mehr fehlt grad die zeit, ich muss pennen, da morgen wieder ne fette woche anfängt)
    und das hier muste in die entsprechende spalte reinstopfen und via css die überschrift noch gestalten

    Code
    <div id="infos">       
    <br/>
        <div class="infobox">
       <h1>überschrift</h1>
       <p>das is ne info</p>
       </div>
    </div>

    Einmal editiert, zuletzt von synaptic (5. Oktober 2009 um 00:14)

  • Kämpfer
    Gast
    • 5. Oktober 2009 um 05:31
    • #5
    Code
    <div class="info">
    Info<p>Information anzeigen</p>
    </div>
     
    css
     
    .info p {
    display: none;
    position: absolute;
    top: 25px;
    left: 0;
    width: 315px;
    height: auto;
    background: #000000;
    border: 4px inset #C0C0C0;
    font-size: 13px;
    font-family: candara;
    padding: 7px;
    }
    .info:hover p {
    display: block;
    }
    Alles anzeigen



    Sorry sowas wolltest ja gar nicht. Hatte den Thread nur überflogen und deinen Anhang übersehen.

    2 Mal editiert, zuletzt von Kämpfer (7. Oktober 2009 um 08:39)

  • sejuma
    Kaiser(in)
    Reaktionen
    5
    Beiträge
    2.720
    • 5. Oktober 2009 um 07:21
    • #6

    Teaser, Infoboxen

    Da hier eine "Klasse" verwendet wird, kannst du von denen dann dann mehrere in deine rechte Spalte setzen.

    [Blockierte Grafik: http://www.ohne-css.gehts-gar.net/img/banner/banner350x20.png]
    sejuma's CSS-Einsteigerkurs

  • Alic3M
    Teeny
    Beiträge
    21
    • 6. Oktober 2009 um 09:57
    • #7

    Vielen Tausend Dank erstmal für Eure Antworten. Also das Javascript kann ich ja leider nicht verwenden aber irgendwann lernen wir das auch und dann guck ich mir das mal genauer an ;)

    sejuma: Das müsste genau das sein, wonach ich gesucht hab. Ich probier das heute abend mal aus! Bin ja echt froh, hier Unterstützung zu bekommen. Danke !!!

    PS: Ich muss die Boxen in der Spalte untereinander setzen. Muss ich da noch was bestimmtes beachten?

    Einmal editiert, zuletzt von synaptic (6. Oktober 2009 um 10:38) aus folgendem Grund: beiträge zusammengeführt vermeide bitte doppelposts und benutz die edit-funktion, danke -synaptic-

  • synaptic
    Forum Guru
    Reaktionen
    11
    Beiträge
    10.917
    • 6. Oktober 2009 um 10:44
    • #8

    an sich net, wenn du die boxen so gross machst, dass sie grad in deine spalte passen, dann sollten die automatisch untereinander sein, ebenso wenn sie nen display:block haben (was bei divs standard is)
    also stopf sei rein und schau was passiert :)

  • Alic3M
    Teeny
    Beiträge
    21
    • 8. Oktober 2009 um 09:14
    • #9

    Hat alles funktioniert :)

    Merci!!!

Tags

  • www
  • html
  • http
  • klasse
  • style
  • text
  • anzeige
  • code
  • php
  • auto
  • thread
  • div
  • javascript
  • script
  • absolute
  • css
  • info
  • unterstützung
  • px
  • information
  • boxen
  • set
  • w3c
  • hover
  1. Datenschutzerklärung
  2. Impressum
Community-Software: WoltLab Suite™
  • Alles
  • Dieses Thema
  • Dieses Forum
  • Artikel
  • Seiten
  • Forum
  • Erweiterte Suche
Zitat speichern