Ich bin am umbauen!

HTML

hey wie gehts?

CSS

hey wie gehts?
hey wie gehts?

Bildstyling

ihr koennt Bilder auf der Seite http://img32.imageshack.us/ hochladen

Bild einfügen

<img src="URL DEINES BILDES">

Größe ändern

width: Breite

height: Hoehe

 

<img src="URL DEINES BILDES" width="150" height="150">

 

Text mit Bild verbinden

Rechts schreiben

blubb das
ist ein Text
rechts neben
dem Bild^^









<img src="URL" align="left">TEXT

das "left" im Bildcode gibt an, dass das Bild links ausgerichtet ist

Links schreiben

blubb das
links neben
dem Bild^^










<img src="URL" align="right">TEXT

das "right" im Bildcode gibt an, dass das Bild rechts ausgerichtet ist

 

Abstand zwischen Bild & Text

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

<img align="left" src="BILDURL" style="padding:0px 20px 5px 0px;">

mit padding gebt ihr dem Bild einen Abstand zum, in diesem Falle, einem Text (den roten Rahmen habe ich gemacht, damit man das besser sieht)

1. Wert = obere Abstand

2. Wert = rechter Abstand

3. Wert = unterer Abstand

4. Wert = linker Abstand

(wie im Uhrzeigersinn)

Das Floating (Umfließen von Objekten)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

wie ihr seht, kann man mit floating Objekte (wie hier die beiden Bilder) mit zB. Text umfliessen lassen

dazu müsst ihr euer Objekt, das umfließt werden soll mit diesem Code belegen:

<img src="BILDURL" style="float:right;">

das ist der Code für das große rechte Bild, denn es ist rechts (right), und wird dann umflossen, wenn ihr das Bild links haben wollt müsst ihr right mit left ersetzen (ich habe noch padding:10px; mit eingefügt damit Abstand zwischen Bild & Text ensteht)

Wichtig ist, dass ihr am Ende, nachdem ihr gefloatet habt auch cleared (das heißt ihr löst dieses Umfliessen auf und es ist wieder normal)

dazu nimmt ihr diesen Code:

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

 



Bildwechsel

<span onMouseOver="imagechange.src='URL2'" onMouseOut="imagechange.src='URL1'">
<img src="URL1" border="0" id="imagechange" name="imagechange"></span>

bei URL1 fügt ihr die Grafikadresse eures ersten Bildes ein und bei URL2 die Adresse eures 2. Bildes (welches erscheint, wenn man mit der Maus über das Bild geht)

Bild verschwindet bei Mousover

<span onmouseover="meinbild1.style.visibility='hidden'" onmouseout="meinbild1.style.visibility='visible'"><img src="URL" id="meinbild1" alt="" name="meinbild1" /></span>

Fadebild

Fade-Bild

<script type="text/javascript">
//<![CDATA[
var baseopacity=30

function slowhigh(which2){
imgobj=which2
browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity)
highlighting=setInterval("gradualfade(imgobj)",50)
}

function slowlow(which2){
cleartimer()
instantset(baseopacity)
}

function instantset(degree){
if (browserdetect=="mozilla")
imgobj.style.MozOpacity=degree/100
else if (browserdetect=="ie")
imgobj.filters.alpha.opacity=degree
}

function cleartimer(){
if (window.highlighting) clearInterval(highlighting)
}

function gradualfade(cur2){
if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}

//]]>
</script><img class="gradualshine" onmouseover="slowhigh(this)" onmouseout="slowlow(this)" src="BILDURL" alt="" />

Bilderrahmen

border:solid - solid steht fuer die Art des Rahmens (doppeltgestrichelt - double,einzel... )

5px - px steht fuer die Groeße des Rahmens (zB bei 6px wird er groeßer)

#FF6A6A - FF6A6A steht fuer die Farbe des Rahmens (FFFFFF wäre zB ein weißer Rahmen)

padding:10px - die px stehen fuer den abstand des Rahmens zum Bild (0px - kein Abstand)

<img src="URL" style="border:solid 5px #FF6A6A; padding:10px;" alt="" />

veränderter Code (Beispiel):

<img src="URL" style="border:double 10px #FF6A6A; padding:10px;" alt="" />

<img src="URL" style="border:inset 10px #ff6a6a; padding:10px;" alt="" />

<img src="URL" style="border:outset 10px #ff6a6a; padding:10px;" alt="" />

<img src="URL" style="border:dotted 4px #ff6a6a; padding:10px;" alt="" />

<img src="URL" style="border:dashed 3px #ff6a6a; padding:10px;">