bombastiiclayout19

Home

Deine Große Ueberschrift

So nun habe ich es doch geschaft so ein Layout zu machen. Ich hoffe es ist mir ein wenig gelungen, weil ich gerade sehr sehr unkreativ bin. Aber ich hoffe jemanden gefällt es und er/sie kann was damit anfangen

.

Das besondere an dem Layout ist diese Box von dem Conten. Dazu mehr unten.

So sieht dein Text Fett Kursiv Unterstrichen ~~Durchstrichen~~ und als Link aus.

das ist deine Ueberschrift

der Layout-Code

Text über dem Design:

var fadeimages=new Array()
//Arrayerzeugung
fadeimages[0]=["http://i52.tinypic.com/68zqm1.jpg", "", ""]
fadeimages[1]=["http://i52.tinypic.com/jrtt6r.jpg", "", ""]
fadeimages[2]=["http://i53.tinypic.com/205dume.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>

</td><td>

<a href="http://URL" class="navi2">About Me</a>

</td><td>

<a href="http://URL" class="navi2">Gästebuch</a>

</td><td>

<a href="http://URL" class="navi2">Outlet</a>

</td><td>

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

<div  style="position: absolute; left:120px ; top:588px ;">
<p class="ueberschrift"> Sidebar </p></div>
<div id="navibox">
<p class="bombastiic">Stuff</p>

<table id="table1" width="100%" border="0"><tbody>
<td style="width: 50%">
<a href="http://URL" class="navi">Tutorials</a>
<a href="http://URL" class="navi">Layouts</a>
<a href="http://URL" class="navi">Icons</a>
</td>

<td style="width: 50%">
<a href="http://URL" class="navi">Material</a>
<a href="http://URL" class="navi">Wallpaper</a>
<a href="http://URL" class="navi">Icon-bases</a>

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

<p class="bombastiic">Affiliates</p>

<td style="width: 50%">
<a href="http://AFFI" target="_blank"><img src="http://i51.tinypic.com/282f6ro.jpg" border="0"></a> 
<a href="http://AFFI" target="_blank"><img src="http://i51.tinypic.com/282f6ro.jpg" border="0"></a> 
<a href="http://AFFI" target="_blank"><img src="http://i51.tinypic.com/282f6ro.jpg" border="0"></a> 
<a href="http://AFFI" target="_blank"><img src="http://i51.tinypic.com/282f6ro.jpg" border="0"></a> 
</center>
</td>
</tr>
</tbody></table><br /><center>
<a href="http://URL"><span style="font-size: 10px;">Alle Partner ?</span></a><span style="font-size: 10px;"><br />
</span><a href="http://URL"><span style="font-size: 10px;"><span style="font-size: 10px;">Ich will auch Partner werden ?</span></span></a></center>
<br><br>

<p class="bombastiic">the Site</p>
<img src="http://i53.tinypic.com/10r90r6.jpg" _fcksavedurl="http://i53.tinypic.com/10r90r6.jpg" ; border="0" align="left">
<span style="color: rgb(255, 255, 255);"><span style="font-size: 11px;">Das Lay ist am besten geeignet für Firefox , das Model ist die Sängerin Beyonce die Bilder im Header sind aus ihrem Video "Run the world (Girls)"  <a href="http://URL"><span style="font-size: 10px;"><span style="font-size: 12px;">  ....Mehr?</span></span></span></a></span>
<br><br><br><br>

<p class="bombastiic">About me</p>
<center><span style="color: rgb(255, 255, 255);"><span style="font-size: 12px;">Mein name ist kathi  ich liebe hunde und hasse katzen, weil ich denke das katzen böse sind und sie die welt übernehmen wollen .. jah hier könnt ihr etwas über euch schreiben <img src="http://theme.webme.com/smiles/cheesy.gif" border="0"><a href="http://URL"><span style="font-size: 10px;"><span style="font-size: 12px;"> Mehr?</a></span></span></span>
</center><br><br>

<p class="bombastiic">Credits</p>

<table id="table1" width="100%" border="0"><tbody>
<td style="width: 50%">
<a href="http://bombastiic.de.tl" class="navi">Layout</a>

<td style="width: 50%">
<a href="http://www.sweetandtalented.com/duffphoto.php" class="navi">Bilder</a>

</td>
</tr>
</tbody></table>
<br><br></div></div>

<div  style="position: absolute; left:298px ; top:113px ; width: 100; height: 150;">
<script type="text/javascript">
new fadeshow (fadeimages, 600, 388, 0, 4000,2, "R")
</script>
</div>

</div>

CSS-Code ohne Style Tags:

.ueberschrift{
display: block;
padding-top: 5px;
margin-left: 27px;
padding-left: 5px;
padding-right: 5px;
border-left: 20px solid transparent;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
font-family: Arial;
font-size: 20px;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 1px;
height: 34px;
border: 1px solid #FFB6C1;
color: #FFB6C1;
text-align: center;
background-color: #FFffff;}

.bombastiic{
display: block;
font-family: tahoma;
font-weight: bold;
font-style: italic;
text-shadow: #ffffff 0px 0px 6px;
 font-size: 11pt;
padding-left: 5px;
color: #FFFFFF;
-moz-border-radius: 10px;
text-decoration: bold;
text-align: center;
margin-bottom: 6px;
margin-right: 1px;
line-height: 26px;
letter-spacing: 1px;
background-image: url(http://i54.tinypic.com/2wg9nqr.jpg)}

#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: #da00da;
font-family: tahoma, arial;
text-decoration: none;}

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

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

body {
overflow-x: hidden;
background-image: url('http://i52.tinypic.com/f1i1ee.png');
}

*{ padding: 0; margin: 0; }

#content {
position: absolute;
top:630px;
margin-left:335px;
width: 520px;
padding: 13px;
font-size:  11px;
text-align: center;
background-color: transparent;}

.contentbox {
width:520px;
padding: 13px;
font-size:  12px;
text-align: left;
background-color: #FFB6C1;
-moz-border-radius: 15px;
border: 3px solid #ffffff;}

#navibox {
position: absolute; 
width:150px;
top: 630px;
left: 70px ; 
margin-left:35px;
padding: 13px;
font-size:  12px;
text-align: left;
background-color: #FFB6C1;
-moz-border-radius: 15px;
border: 3px solid #ffffff;}

.naviueberschrift {
position: absolute;
width:150px;
font-size:  12px;
text-align: center;
hight: 45px;
background-color: #FFB6C1;
-moz-border-radius: 15px;
border-left: 3px solid #ffffff;
border-right: 3px solid #ffffff;
border-top: 3px solid #ffffff;
}

ul#nav{
width: 20px;
padding: 5px;
margin: 5px;}

li.nav_element{
list-style-type: none;
position: relative;
padding:1px;
color: #ffffff;
width: 100px;}

li.nav_element a{
display: block;
-moz-border-radius: 3px;
width: 100px;
height: 15px;
padding: -2px;
font-weight:;
text-decoration:;
text-align: justify;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: center;
word-spacing: 0px;
letter-spacing: 0px;
color: #ffffff;
background-color:#ececec;
background-image:url(xx);  
border-bottom: 0px solid color:#ffffff; }

li.nav_element a:hover{
color: #ffffff;
background-color: #ececec;
background-image:url(xx);}

A.navi:link, A.navi:active, A.navi:visited {
display: block;
padding-left: 2px;
padding-bottom: 3px;
font-family: tahoma, arial;
font-size: 11px;
height: 10px;
margin-bottom: 2px;
border-left: 1px solid #680068;
border-right: 0px dotted #7C757B;
border-top: 0px dotted #7C757B;
letter-spacing: 1px;
margin-right: 3px;
color: #ffffff;
padding-top: 5px;
background-color: transparent;
text-align: center;
margin-top: 7px;
line-height: 10px;}

A.navi:hover {
display: block;
padding-left: 2px;
padding-bottom: 3px;
font-family: tahoma, arial;
font-size: 11px;
height: 10px;
margin-bottom: 2px;
border-left: 1px solid #ffffff;
border-right: 0px dotted #7C757B;
border-top: 0px dotted #7C757B;
letter-spacing: 1px;
margin-right: 3px;
color: #680068;
text-shadow: #ffffff 0px 0px 10px;
background-color:tranparent;
text-align: center;
line-height: 10px;}

A.navi2:link, A.navi2:active, A.navi2:visited {
display: block;
padding-top: 7px;
padding-left: 5px;
-moz-border-radius: 0px;
font-family: Arial;
margin-left: 2px;
margin-top: 2px;
font-size: 20px;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 1px;
height: 34px;
border: 1px solid #ffffff;
-moz-border-radius: 5px;
color: #ffffff;
background-color: #FFB6C1;}

A.navi2:hover {
display: block;
padding-top: 7px;
padding-left: 5px;
-moz-border-radius: 5px;
font-family: Arial;
margin-left: 2px;
margin-top: 2px;
font-size: 20px;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 1px;
height: 34px;
border: 1px solid #FFB6C1;
color: #FFB6C1;
text-align: left;
background-color: #FFffff;}

So eine Box benutzt ihr als euren Content. Das heißt ihr schreibt euer ganzes zeugs in eine Box rein. Das gute ist das es besser aussieht aber es ist halt schwieriger.

Und das it der Code für eure Box:

Euren Text schreibt ihr zwischen den Div tags.

Deine Große Ueberschrift

Diese Grosse Überschrift macht ihr einfach über eurem Box-Code:

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