Info-Boxen

Alic3M

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

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?

Alic3M

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

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

synaptic

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>

Kämpfer

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.

sejuma

Teaser, Infoboxen

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

Alic3M

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?

synaptic

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

Hat alles funktioniert

Merci!!!

Tags