Ergebnis 1 bis 9 von 9

Thema: Info-Boxen

  1. #1
    Teeny
    Registriert seit
    07.09.2009
    Alter
    38
    Beiträge
    21
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Info-Boxen

    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

    LG, Alic3M
    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
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Info-Boxen

    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?
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  3. #3
    Teeny
    Themenstarter

    Registriert seit
    07.09.2009
    Alter
    38
    Beiträge
    21
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Info-Boxen

    Zitat Zitat von synaptic Beitrag anzeigen
    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

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

  4. #4
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Info-Boxen

    Code:
    <!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>
    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>
    Geändert von synaptic (05.10.2009 um 01:14 Uhr)
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  5. #5
    Kämpfer
    Gast

    Standard AW: Info-Boxen

    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;
    }
    Sorry sowas wolltest ja gar nicht. Hatte den Thread nur überflogen und deinen Anhang übersehen.
    Geändert von Kämpfer (07.10.2009 um 09:39 Uhr)

  6. #6
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Info-Boxen

    Teaser, Infoboxen

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

  7. #7
    Teeny
    Themenstarter

    Registriert seit
    07.09.2009
    Alter
    38
    Beiträge
    21
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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?
    Geändert von synaptic (06.10.2009 um 11:38 Uhr) Grund: beiträge zusammengeführt vermeide bitte doppelposts und benutz die edit-funktion, danke -synaptic-

  8. #8
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Info-Boxen

    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
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  9. #9
    Teeny
    Themenstarter

    Registriert seit
    07.09.2009
    Alter
    38
    Beiträge
    21
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Lächeln AW: Info-Boxen

    Hat alles funktioniert

    Merci!!!

Ähnliche Themen

  1. Rauschende Boxen!?
    Von Grinf4ce im Forum Computer - Internet Forum
    Antworten: 4
    Letzter Beitrag: 13.10.2007, 16:59
  2. 100% Breite von div-boxen
    Von Gamling im Forum HTML & CSS Forum
    Antworten: 10
    Letzter Beitrag: 28.07.2007, 22:16
  3. Problem mit boxen
    Von gelöschter User im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 28.07.2007, 15:47
  4. <div> Boxen anpassen
    Von webnewcomer im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 25.02.2006, 23:49
  5. css Boxen durcheinander
    Von Tony im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 24.11.2005, 16:00

Stichworte

Berechtigungen

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