bombastiiclayout24

Home

Ja .. Jetzt wieder ein Layout von mir. Es ist etwas schlecht gehalten (grau/weiß/schwarz) und das Bild sieht auch ziemlich seriös aus =D.

Das ist deine Ueberschrift

Der Code

Text über dem Design:

var fadeimages=new Array()
//Arrayerzeugung
fadeimages[0]=["http://s14.directupload.net/images/111006/gujadf92.jpg", "", ""]
fadeimages[1]=["http://s14.directupload.net/images/111006/owz3bbvw.jpg", "", ""]

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>

<a href=http:// class=navi>About me</a>

</td><td>

</td><td>

<a href=http:// class=navi>Stuff</a>

</td><td>

<a href=http:// class=navi>Gästebuch</a>

</td><td>

</td></tr></table>
<div id="tabledescription">
</div></div>

<div style="overflow: visible; position: absolute; width: 191px;  left: 189px; top:535px"> 
<div class=box>
<p class=bombastiic1>Stuff </p>
<font>

lest euch vorher die Regeln durch !
</br>
<table id="table1" width="100%" border="0"><tbody>
<tr valign="top">
<td style="width: 50%">

<a href=http://  class=navi3>Icons</a>
<a href=http://  class=navi3>Wallies</a>
<a href=http:// class=navi3>Layouts</a>
</td>
<td>

<a href=http:// class=navi3>Material</a>
<a href=http:// class=navi3>PNGs</a>
<a href=http:// class=navi3>Textures</a>

</td>
</tr>
</tbody></table>

</center>
</font>
</div>

<div class=box>
<p class=bombastiic1>Cuties </p>
<font>

Cuties werden noch gesucht.
</br>
<table id="table1" width="100%" border="0"><tbody>
<tr valign="top">
<td style="width: 50%">

</td>
<td>

</td>
</tr>
</tbody></table>

</center>
</font>
</div>

<div class=box>
<p class=bombastiic1> Credits </p>
<a href="http://bombastiic.de.tl" class=navi3 target=blank> Designer </a> 
<a href="http://hab-die-seite-vergessen-sorrrry-falls-sie-jemand-findet-kann-er-was-sagen.de" class=navi3 target=blank> Bilder </a> 
<a href="http://browse.deviantart.com/?q=white%20light%20texture&order=9&offset=24#/d2obxc6" class=navi3 target=blank> Textur</a> 
</div>
</div>

<div  style="position: absolute; margin-left:502px;; top:316px ; width: 100; height: 150;">
<script type="text/javascript">
new fadeshow (fadeimages, 339,200, 0, 3000, 1, "R")
</script>
</div>

CSS-Code ohne Style Tags:

#extraDiv1 {display: none;}
 #extraDiv2 {display: none;}
 #extraDiv3 {display: none;}
 #extraDiv4 {display: none;}
 #extraDiv5 {display: none;}
 #extraDiv6 {display: none;}
 #pre_header {display: none;}
 #post_header {display: none;}
 #pre_content {display: none;}
#nav{display:none;}
 #bombastiic_content {display: none;}
 div.header{display: none;}
h2#title{display: none;}

a:link {
color: #9c0000;
font-family: tahoma, arial;
text-decoration: none;}

a:visited {
color: #5c0000;
font-family: tahoma, arial;
text-decoration: none;}

a:hover {
color: #5c0000;
font-family: tahoma, arial;
border-bottom: 0px dotted #bababa;}

body {
overflow-x: hidden;
background-image: url(http://s14.directupload.net/images/111006/s364ap2v.gif);
}

#Background {
margin-top: -130px;
margin-left: 0px;
width:1720px;
height:350px;
border:0px;
background-image: url(xxxx);
}

#content {
position: absolute;
top:516px;
margin-left:371px;
width: 454px;
padding: 8px;
color:#333333;
font-family: tahoma,arial;
font-size:  11px;
text-align: justify;
word-spacing: px;
letter-spacing: 1px;
overflow:auto;
border-top: 3px solid #818181;
background-color: #ffffff;
}

#Laybox2 {
position: absolute;
top:213px;
margin-left:191px;
width: 648px;
height: 100px;
background-color: #c0c0c0;
border-bottom: 3px solid #818181;
border-left: 1px solid #818181;
border-right: 1px solid #818181;
}

#Header {
position: absolute;
top:316px;
margin-left:191px;
width: 650px;
height: 200px;
-moz-border-radius-bottomleft: 50px; 
background-image: url(http://s14.directupload.net/images/111006/hevwxh23.jpg);
}

A.navi:link, A.navi:active, A.navi:visited {
text-decoration: none;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
text-transform: uppercase; 
text-align: center;  
font-family: Arial; 
font-size : 18px ;  
color: #eeeeee;  
letter-spacing: 2px; 
line-height: 50px;
border-bottom: 1px solid #818181;
-moz-border-radius-topright: 5px;  
-moz-border-radius-topleft: 5px;  
background-color: #999999; 
}

A.navi:hover {  
padding-top: 8px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
text-transform: uppercase; 
text-align: center;  
font-family: Arial; 
font-size : 18px ;  
color: #eeeeee;  
letter-spacing: 2px; 
line-height: 50px;  
border-bottom: 1px solid #818181;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;  
background-color:#888888; 
}

A.navi2:link, A.navi2:active, A.navi2:visited {
text-decoration: none;
padding-top: 13px;
padding-bottom: 5px;
padding-left: 19px;
padding-right: 20px;
text-transform: uppercase; 
text-align: center;  
font-family: Arial; 
font-size : 30px ;  
color: #eeeeee;  
letter-spacing: 2px; 
line-height: 50px;
border-top: 1px solid #818181;
border-left: 1px solid #818181;
border-right: 1px solid #818181;
-moz-border-radius-topleft: 19px;  
background-color: #c0c0c0; 
}

A.navi2:hover {  
padding-top: 13px;
padding-bottom: 5px;
padding-left: 19px;
padding-right: 20px;
text-transform: uppercase; 
text-align: center;  
font-family: Arial; 
font-size : 30px ;  
color: #dddddd;  
letter-spacing: 2px; 
line-height: 50px;  
border-top: 1px solid #818181;
border-left: 1px solid #818181;
border-right: 1px solid #818181;
-moz-border-radius-topleft: 19px;  
background-color:#c0c0c0; 
}

A.navi3:link, A.navi3:active, A.navi3:visited {
display: block;
text-decoration: none;
padding-left: 9px;
font-family: Century Gothic;
font-size: 10px;
margin-bottom: 2px;
border-bottom: 1px dotted #F1F1F1;
text-transform:uppercase;
letter-spacing: 1px;
color: #818181;
text-align: left;
line-height: 10px;}

A.navi3:hover {
display: block;
padding-left: 9px;
font-family: Century Gothic;
font-size: 10px;
Background: url('http://i55.tinypic.com/29xbxuv.png');
margin-bottom: 2px;;
border-bottom: 1px dotted #F1F1F1;
text-transform:uppercase;
letter-spacing: 1px;
color: #A4A4A4;
text-align: left;
line-height: 10px;}

.bombastiic{
font-family: arial;
 font-size: 9pt;
padding-left: 16px;
padding-top: 2px;
color: #000000;
text-transform: uppercase; 
text-align: left;
margin-left: -8px;
margin-right: -8px;
margin-top: -8px;
line-height: 12 px;
letter-spacing: 1px;
border-bottom: 2px solid #c0c0c0;
background-image: url(http://s14.directupload.net/images/111006/8hmpy5l3.gif);
}

.bombastiic1{
font-family: arial;
 font-size: 9pt;
color: #ffffff;
text-transform: uppercase; 
text-align: right;
margin-left: -5px;
margin-right: -5px;
margin-top: -8px;
line-height: 12 px;
letter-spacing: 1px;
background-color: #c0c0c0;
border-top: 1px solid #aaaaaa;
border-left: 1px solid #aaaaaa;
border-right: 1px solid #aaaaaa;
-moz-border-radius-topleft: 19px; 
}

TEXTAREA { Color: #696969;
 font-size: 8pt;
margin-bottom: 10px;
padding-left: 3px;
background-color: #ffffff;
padding-top: 3px;
padding-bottom: 3px;
padding-right: 3px;
width: 200px;
height: 90px;
border: 1px dotted #1c0000;
}

.box {
 font-size: 8pt;
margin: 10px;
color: #363636;
font-family: Arial; 
font-size : 11px ;
padding: 5px;
background-color: #ffffff;
width:150;
-moz-border-radius-topleft: 19px; 
}

Fall es noch Fragen gibt könnt ihr mich HIER fragen.