bombastiiclayout11

Home

So endlich mal wieder ein Layout gemacht nach langer Zeit. Und ich mag es irgendwie sehr gerne.
Ich hoffe ihr mögt es auch

Die Bilder sind unter den (c) von suzythebutcher

So sieht dein Text fett kursiv unterschrichen ~~durchstrichen~~ und als link aus.

Überschrift

der Code

die Codes einfach einfügen wo es dran steht =D

Text über dem Design:

var fadeimages=new Array()
//Arrayerzeugung
fadeimages[0]=["http://i56.tinypic.com/zn80h5.png", "", ""]
fadeimages[1]=["http://i55.tinypic.com/2119w7l.png", "", ""]

var fadebgcolor="#000000"

var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers

var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all

function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) <img src="http://theme.webme.com/smiles/smiley.gif" border="0">
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}

var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2

if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')

if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}

function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}

fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}

fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}

fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}

fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==0){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}
</script>

scrollbar-face-color: #2E2D47;
scrollbar-highlight-color: #1F1D2F;
scrollbar-3dlight-color: #28263E;
scrollbar-darkshadow-color: #28263E;
scrollbar-shadow-color: #28263E;
scrollbar-arrow-color: #685E75;
scrollbar-track-color: #17172A;
overflow-x: hidden;
}                                                                 
a:link {
color: #D2691E; 
text-decoration:none; 
} 
a:visited {color: #8B4513;  
text-decoration:none;
}

a:active {color: #8B5A2B; 
text-decoration:none;
} 
a:hover {color: #AA5303;
cursor:default;

}

#content {
position: absolute;
top:411px;
margin-left:111px;
width: 410px;
padding: 8px;
color:#b6b6b6;
font-family: tahoma,arial;
font-size:  11px;
text-align: justify;
word-spacing: px;
letter-spacing: 1px;
overflow:auto;
}

A.navi:link, A.navi:active, A.navi:visited {
display: block;
padding-left: 15px;
font-family: trebuchet ms;
font-size: 10px;
margin-left: 3px;
margin-bottom: 2px;
border-right: 6px solid #8B5742; 
letter-spacing: 2px;
background-color: 33304A;
border-bottom: 1px solid #8B5742; 
text-transform: uppercase;
color: #B8B8B8;
line-height: 13px;}

A.navi:hover {
display: block;
padding-left: 15px;
font-family: trebuchet ms;
font-size: 10px;
margin-left: 3px;
margin-bottom: 2px;
border-right: 6px solid #8B4726; 
letter-spacing: 2px;
background-color: 33304A;
border-bottom: 1px solid #8B5742; 
text-transform: uppercase;
color: #E9C2A6;
line-height: 13px;}

A.navii:link, A.navii:active, A.navii:visited {
display: block;
padding-left: 15px;
font-family: trebuchet ms;
font-size: 30px;
margin-left: 3px;
margin-bottom: 2px;
letter-spacing: 2px;
background-color: 33304A;
text-transform: uppercase;
color: #E9C2A6;
line-height: 13px;}

A.navii:hover {
display: block;
padding-left: 15px;
font-family: trebuchet ms;
font-size: 30px;
margin-left: 3px;
margin-bottom: 2px;
letter-spacing: 2px;
background-color: 33304A;
text-transform: uppercase;
color: #855E42;
line-height: 13px;}

b, strong{
   color:#FF9955;

}

i, em{
   color:#FF9955;
}

u{
  color: #FF9955;
  text-decoration:underline;
}

s, strike{
   color:#D0D0D0;
}

font {				
color: #b6b6b6;			
font-family: trebuchet ms;		
font-size: 11px;	
line-height: 16px;	
}

.bombastiic{
display: block;
font-family:Trebuchet ms;
font-size: 13px;
color: #ffffff;
padding-left: 15px;
text-decoration: none;
border-bottom: 2px solid #AA5303;
background-image:url(http://i56.tinypic.com/2r4iyqg.png);
margin-bottom: 6px;
margin-right: 1px;
line-height: 11pt;
margin-top: 2px;
letter-spacing: 3px;
text-transform: uppercase;
}

TEXTAREA { Color: #292421;
width:220px;
background-color: #FFDAB9;
height:90px;
background-attachment:fixed;
Font-Family: Trebuchet ms;
Font-Size: 11px;
}

INPUT { Color: #929292;
Font-Family: Trebuchet ms;
Font-Size: 10px;
background-color: #FFDAB9;
width: 120px;
height: 20px;
border: 1px solid #333350;
}

.box {
margin-bottom: 10px;
padding-left: 3px;
padding-top: 1px;
padding-bottom: 3px;
padding-right: 3px;
background-image:url(http://i51.tinypic.com/24dhef6.png);
width:96%;
border: 1px dotted #242439;
}

.inhaltetable { width: 100%;
}
                                                             
                                                           
                                                             --> 
</style>

</head>                                                             
                 
                                                                                                                                                                           <body bgcolor=#FFFFFF background="http://i51.tinypic.com/2vbln9d.png">                                                                                                 
<IMG SRC="http://i52.tinypic.com/2nj9chg.png" WIDTH=1024 HEIGHT=700 BORDER=0

STYLE="position:absolute; top: 0; left:0" USEMAP="#seductive1_Map">

<div style="overflow: visible; position: absolute; width: 207px; left: 545px; top:50px "> 
<div class=box>
<p class=bombastiic> willkommen </p>
<font> Herzlich willkommen auf meiner kleinen aber feinen seite wo ich irgendetwas anbiete und mir so manchmal die langeweile vertreibe hoffe die sachen gefallen euch </br>
   <center><img src="http://i54.tinypic.com/ettibt.png"

border=0></center></font>
</div></div>

<div style="overflow: visible; position: absolute; width: 140px; left: 550px; top: 254px"> 
<a href="http://" class=navii>Guestbook </a>
</div>

<div style="overflow: visible; position: absolute; width: 207px; left: 545px; top: 308px"> 
<div class=box>
<p class=bombastiic> Main</p>
<a href=http:// class=navi>About Me</a>
<a href=http:// class=navi>About Site</a>
<a href=http:// class=navi>Affiliates</a>
<a href=http:/ class=navi>Contact</a>
<a href=http:// class=navi>Exit</a>
</div>
</div>

<div style="overflow: visible; position: absolute; width: 207px; left: 545px; top: 428px"> 
<div class=box>
<p class=bombastiic> Stuff</p>
<a href=http:// class=navi>Icons</a>
<a href=http:// class=navi>Blends</a>
<a href=http:// class=navi>Wallpaper</a>
<a href=http:// class=navi>Layouts</a>
<a href=http:// class=navi>Icon-Bases</a>
</div>
</div>

<div style="overflow: visible; position: absolute; width: 207px; left: 545px; top: 548px"> 
<div class=box>
<p class=bombastiic>Interactiv </p>
<a href=http:// class=navi>SOTM</a>
<a href=http:// class=navi>POTM</a>
<a href=http:// class=navi>Gewinnspiel</a>
</div>
</div>

<div style="overflow: visible; position: absolute; width: 207px; left: 545px; top:636px "> 
<div class=box>
<p class=bombastiic> Link me </p>
<font> hier gibts einen button von mir =D : </br>
   <center><img src="http://i54.tinypic.com/2ltipw1.gif"

border=0></center></font>
</div></div>

<div style="overflow: visible; position: absolute; width: 207px; left: 545px; top: 722px"> 
<div class=box>
<p class=bombastiic> Credits </p>
<a href="http://bombastiic.de.be/" class=navi target=blank> Designer </a> 
<a href="http://suzythebutcher.deviantart.com/" class=navi target=blank>Bilder </a>
</div>
</div>

<div  style="position: absolute; left:83px ; top:0px ; width: 100; height: 150;">
<script type="text/javascript">
new fadeshow (fadeimages, 360,410, 0, 3000, 1, "R")
</script>
</div>

</div>

CSS-Code ohne Style Tags: