Ich bin am umbauen!

HTML

hey wie gehts?

CSS

hey wie gehts?
hey wie gehts?

Kästen

Farben: FARBTABELLE

Erklärung (Kästen selbst gestalten)

für Erklärung hier klicken*

Textarea


<textarea readonly="readonly" cols="12" rows="2">TEXT</textarea>

ihr könnt die Breite bei cols ändern und die Höhe bei rows

Textarea mit wechselnden Inhalten


<form action="input_button.htm">
    <p>
        <textarea cols="20" rows="4" name="textfeld">
</textarea><br />
        <input type="button" name="Text 1" value="Text 1 anzeigen" onclick="this.form.textfeld.value='TEXT 1'" /> <input type="button" name="Text 2" value="Text 2 anzeigen" onclick=
        "this.form.textfeld.value='TEXT 2'" />
    </p>
</form>

Kästen nebeneinander

Kasten 1
Kasten 2

ihr seht hier als erstes die beiden Kästen, um die ein roter Rahmen gezogen ist - das ist in Prinzip noch ein Kasten, der die beiden zusammenhält (auch Wrap genannt)

1. definiert die Breite (width) und Höhe (height) der beiden Kästen nach Wunsch

2. danach definiert die Breite des roten Kasten (Wrap), um den Kästen einen Abstand zu geben

(am besten:

Breite von Kasten1 + Breite von Kasten2 + gewünschter Abstand zwischen Kästen = Breite des Wraps)

3. unbedingt das <div style="clear:both;"></div> stehen lassen, denn das sorgt dafür, dass das Floating der Kästen aufgelößt wird und der Wrap die beiden dann 'einhüllen' kann

 

<div style="width:420px;border:red 2px solid">
    <div style="width:200px;height:200px;float:left;background:white;border:black 1px solid;">
        Kasten 1
    </div>

    <div style="width:200px;height:200px;float:right;background:white;border:black 1px solid;">
        Kasten 2
    </div>

    <div style="clear:both;">
    </div>
</div>

Transparente Kästen

> weißer Kasten

weißer Kasten mit 50% Transparenz

Der weiße Kasten wird durch das Hintergrundbild (hier http://sienc.square7.ch/wei%C3%9F50pro.png) transparent:

 

<div style="BORDER:black 1px solid;;HEIGHT: 100px; WIDTH: 300px;background:url(http://sienc.square7.ch/wei%C3%9F50pro.png);OVERFLOW: auto">

Text

</div>

 

für 25% Transparenz: http://sienc.square7.ch/wei%C3%9F25pro.png

für 50% Transparenz: http://sienc.square7.ch/wei%C3%9F50pro.png

für 75% Transparenz: http://sienc.square7.ch/wei%C3%9F75pro.png


> schwarzer Kasten

schwarzer Kasten mit 50 Transparenz

<div style="BORDER:black 1px solid;;HEIGHT: 100px; WIDTH: 300px;background:url(http://sienc.square7.ch/schwarz50.png);OVERFLOW: auto">
Text
</div>

 

für 25% Transparenz: http://sienc.square7.ch/schwarz25.png

für 50% Transparenz: http://sienc.square7.ch/schwarz50.png

für 75% Transparenz: http://sienc.square7.ch/schwarz75.png

 

Kasten mit Schatten

Teeext.
Teeext.
Teeext.
Teeext.

<div style="BORDER: #000000 1px solid; -moz-box-shadow:#ffffff 0px 0px 15px;HEIGHT: auto; WIDTH: 650px;background:#000000;OVERFLOW: auto;">TEXT</div>

 

die 1. px-Zahl definiert die horizontale Ausrichtung des Schattens

(desto größer die Zahl desto weiter wird der Schatten nach rechts verschoben)

die 2. px-Zahl definiert die vertikale Ausrichtung des Schattens

(desto größer die Zahl desto weiter wird der Schatten nach unten verschoben)

die 3. px-Zahl definiert den Unschärferadius( das heißt, wie weit der Schatten im Hintergrund verläuft)

2. Beispielkasten mit Schatten

Teeext.
Teeext.
Teeext.
Teeext.

<div style="BORDER: #104E8B 1px dotted; -moz-box-shadow:black 10px 10px 25px;HEIGHT: auto; WIDTH: 300px;background:#1C86EE;OVERFLOW: auto">TEXT</div>

Beispielkästen

TEXTTEX TTEXTTEXTTEXT TEXTTEXTTEX TTEXTTEXTT EXTTEXTTEXT TEXTTEXTTE XTTEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT

Kasten ohne Rand, Hintergrundfarbe beliebig änderbar, Höhe und Breite auch beliebig änderbar.

 

<div style="HEIGHT: 100px; WIDTH: 650px ; background:#000000; OVERFLOW: auto;"> TEXT  </div>

KASTEN MIT GEPUNKTETEM RAND
SCDI, abbreviatio Syndromis Comparatis Defectu Immunitatis,[1] sive SIDA (Syndroma Immunodefectus Adquisiti),[2] sive AIDS (a voce Anglica),[3] est syndroma in qua ob lymphocytorum T depletionem manifestationum summa sunt inter quas normaliter non pathogenicorum microorganismorum infectiones et tumorum surrectiones, seu in generali populatione communium, seu immunocompromissarum personarum propriorum, seu eius qui talem syndromen ostendit peculiarum. Syndromes causa est Virus Immunitarii Defectus Humanae, VIDH (Anglice: HIV). Syndrome, hodierno rerum statu, est substantialiter incurabilis, sensu ne totaliter virus ex hospite eradicari possit, nihilominus hodiernae therapiae, valde melius usis in emersionis puncto in decadis 80 principio toleratae, viraemiam imminuere in minimas aut non graves libras consequuntur, lymphocyticam reinculturam et normalioris vitae prosecutionem permittentes.

 

<div style="BORDER-COLOR: #FF6A6A 6px dotted; HEIGHT: 180px;width: 200px; TEXT-ALIGN: center; OVERFLOW: auto">
<p>DEIN TEXT</p>
</div>

Ihr koennt die Groeße verändert indem ihr bei WIDTH (Breite) eine andere Pixel zahl angibt (zB 300px) und die höhe bei HIGHT verdändern (zB 200px)



KASTEN MIT GEPUNKTETEM RAND

Hier steht dann dein Text

<div style="BORDER-RIGHT: #FF6A6A 20px dotted; BORDER-TOP: #FF6A6A 20px dotted; LEFT: -51562520px; OVERFLOW: auto; BORDER-LEFT: #FF6A6A 20px dotted; WIDTH: 230px; BORDER-BOTTOM: #FF6A6A 20px dotted; HEIGHT: 180px; TEXT-ALIGN: center">DEIN TEXT</font></div>


KASTEN MIT GESTRICHELTEM RAND

<div style="BORDER: #FF6A6A 6px dashed; HEIGHT: 180px; WIDTH: 230px; TEXT-ALIGN: center; OVERFLOW: auto">

<p>DEIN TEXT</p>
</div>


>KASTEN MIT DOPPELTEM RAND


<div style="BORDER: #FF6A6A 6px double; HEIGHT: 180px; WIDTH: 230px; TEXT-ALIGN: center; OVERFLOW: auto">
<p>DEIN TEXT</p>
</div>


KASTEN MIT GANZEM RAND

<div style="BORDER: #FF6A6A 6px solid; HEIGHT: 180px; WIDTH: 230px; TEXT-ALIGN: center; OVERFLOW: auto">
<p>DEIN TEXT</p>
</div>

KASTEN MIT 3D-Rand

<div style="BORDER: #FF6A6A 6px ridge; HEIGHT: 180px;width: 230px; TEXT-ALIGN: center">
<p>DEIN TEXT</p>
</div>

KASTEN MIT 3D-Rand

<div style="BORDER: #FF6A6A 6px groove; HEIGHT: 180px;width: 230px; TEXT-ALIGN: center; OVERFLOW: auto">
<p>DEIN TEXT</p>
</div>


GEPUNKTETER KASTEN

<table bordercolor="#000000" border="1" style="BORDER-BOTTOM: 3px dotted; BORDER-LEFT: 3px dotted; BORDER-RIGHT: 3px dotted; BORDER-TOP: 3px dotted">
<tr>
<td>
<div style="OVERFLOW: auto; WIDTH: 230px; HEIGHT: 180px" align="center">DEIN TEXT</div>
</td>
</tr>
</table>

KASTEN MIT HINTERGRUND

 

<div style="BORDER: #FF6A6A 6px solid; HEIGHT: 180px; WIDTH: 230px;background: #0198c2; TEXT-ALIGN: center; OVERFLOW: auto">
<p>DEIN TEXT</p>
</div>

KASTEN MIT HINTERGRUNDBILD

bei background:url(DEINEURL) einfach eure Grafikadresse einbinden

 

<div style="BORDER: #000000 2px solid; HEIGHT: 180px; WIDTH: 230px;background:url(http://sienc.jimdo.com/s/cc_images/cache_1308068614.jpg?t=1245008278); TEXT-ALIGN: center; OVERFLOW: auto">
<p>DEIN TEXT</p>
</div>


 


KASTEN MIT HINTERGRUNDBILD UND VERBESSERTEM RAHMEN

<table border="1" style="">
<tr>
<td>
<div style="OVERFLOW: auto; WIDTH: 230px;background: url(http://sienc.jimdo.com/s/cc_images/cache_1308068614.jpg?t=1245008278); HEIGHT: 180px" align="center">
TEXT

</div>
</td>
</tr>
</table>

KASTEN MIT HINTERGRUNDBILD UND VERSCHIEDENE RAHMEN

wie ihr seht koennt ihr die Rahmen nach belieben umgestalten ;)

<div style="BORDER-RIGHT: #000000 5px solid; BORDER-TOP: #ff6a6a px solid; LEFT: -51562520px; OVERFLOW: auto; BORDER-LEFT: #ff6a6a 1px solid; WIDTH: 300px; BORDER-BOTTOM: #000000 5px double; TOP: -134217728px; HEIGHT: 250px; background:url(http://sienc.jimdo.com/s/cc_images/cache_1308068614.jpg?t=1245008278); TEXT-ALIGN: center; OVERFLOW: auto">
TEXT
</div>

HIER STEHT DANN DER TEXT UND EGAL WIE LANG ER IST ER BLEIBT IM KASTEN !! ( UND GEHT NICHT ÜBER DEN KASTEN HINAUS ) ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ............... .................. ........................... ............................ ................................. ............................................ ............................................. ................................................ ....................................... ........... .................................. (als Beispiel jetzt) .............................. .............................. .............................. .......................................... .................................... .................................... .................................... .............................. .................................... ................................................ .............................. ..............................

Kasten mit Scrolleffekt (Hintergrund + Farben können natürlich beliebig geändert werden )

 

<div style="overflow:auto; width:350px; height:250px; padding:0px; border:4px white solid; background-image:url(http://sienc.jimdo.com/s/cc_images/cache_1308068614.jpg?t=1245008278); background-repeat:repeat; background-attachment:fixed; color: #000;">
    <center>
            <font style="background: #fff;">Dein Text !!</font>
        </center>
    </div>

hallo hallo hallo hallo hallo hallo

<marquee onmouseover="this.stop()" onmouseout="this.start()" direction="up" scrollamount="2" height="200" width="200">DEIN TEXT</marquee>

TEXT TEXT TEXT

Der Code für den Kasten:
<div style="background-color: #ffffff; border: #000000 1px solid; padding: 5px; width: 200px; height:2000; font-family: trebuchet ms; font-size: 11;"><font face="Verdana,Geneva,Arial,Helvetica" size=
"2">TEXT TEXT TEX</font></div>

 

Informationen: Ihr könnt die Höhe und die Breite natürlich genau anpassen.

Der Kasten soll größer werden? Dann änder die px Zahl bei high, ich würde aber nichtmehr als 3000px empfehlen. Die Breite ist zu schmal, der Text, dass Bild geht drüber hinaus? Ändert die Px-Zahl bei width mehr als 2500px ist nicht empfehlenswert.

Die Hintergrundfarbe des Kasten soll schwarz, oder irgendeine andere Farbe haben? Dann änder bei background-color: #ffffff das "ffffff" auf 000000 für schwarz um.

Wichtig, dass # muss vor dem Hexcode stehen bleiben!

Bei Fragen, fragt einfach.