iceblue-test
  Infobox
 

Eine Infobox erstellen :


Hier der Titel

Hier der Inhalt für die Box. Zum Beispiel für Bilder, Beschreibungen oder Tipps.

Welchen Browser nutzen meine Besucher ? Bild anklicken:



Bildschirmauflösungen : 

/* komplette Info-Box */
.box-container {
    position: relative;
    display: inline-block;
    margin-left: 10px;
    padding: 0;
    width: auto; }

/* Box hinter dem Titel-Balken */
.box {
    position: relative;
    width: 220px;
    background: #424242;
    padding: 15px 5px 5px 5px;
    margin:10px;
    z-index: 90;
    border: 1px solid #343434;
    -webkit-border-radius. 10px;
    -moz-border-radius: 10px; }

/* Titel-Balken */
.box h3 {
    position: relative;
    left: -25px;
    width: 260px;
    color: #FFFFFF;
    font-size: 160%;
    font-family: arial;
    text-align: center;
    font-weight: bold;
    padding: 10px 5px;
    margin: 0;
    background-color: #3198dd;
    border-color: #3198dd;
    -webkit-border-radius. 10px;
    -moz-border-radius: 10px;
    z-index: 100; }

/* Inhalt unter dem Balken */
.Inhalt {
    padding: 10px;
    margin:7px;
    color: #FFFFFF;
    font-family: arial;
    font-size:13px;
    background-color: ##3198dd; }

/* Linkfarben in der Box */
.Inhalt a {
    color: #35b0ff;
    text-decoration: none;
    border-bottom: 1px dotted transparent; }

/* Linkfarben HOVER in der Box */
.Inhalt a:hover, .Inhalt a:focus {
    text-decoration: none;
    border-bottom: 1px dotted #35b0ff; }
 

  • Code rechts : CSS-Anweisungen für die Info-Box
  • Einfügen im Feld : "Text über Design"
  • vor dem letzten --></style>


  • Schritt 2:
  • Nun den HTML-Code der Box in eine Seite einfügen
  • auf "Eigene Seiten editieren"
  • Seite wählen, wo die Infobox hinein soll
  • oben Links im Editor auf "Quellcode" klicken
  • nun den HTML-Code an gewünschter Stelle im Seiteninhalt einfügen :


<div class="box-container"> 
<div class="box"> 
<h3><span>Hier der Titel</span></h3> 
<div class="Inhalt">
Hier dein Inhalt für die Box
</div>
</div>
</div>


 
  TESTTESTTEST  
 
• dies ist der Inhalt im < div id="popup1" >
• befindet sich im Feld "Text UNTER Design"
• das DIV ist nur auf einer Seite zu sehen
• und auf dieser Seite wurde das Design entfernt
• angezeigt wird also nur der Inhalt des einen DIV