webmasterservice - Bubbleblau

Bubbleblau

CSS-Design: Bubbleblau

Zurück zu Design-Center

Bewertung dieses Designs:

Text über dem Design:

<div  id="hintergrund_feld">  <div id="bildmitte"> <div  id="logo"></div> <div id="felddrunter"> <table  width="95%" cellspacing="1" cellpadding="1" border="0"  align="center">     <tbody>         <tr>              <td><a href="http://omba.de.tl/Designs.htm" ><img  border="0" src="https://img.webme.com/pic/o/omba/bubbleblau_button1.png"  alt="" /></a></td>             <td>              <div style="text-align: center;"><img alt=""  src="https://img.webme.com/pic/o/omba/bubbleblau_strich.jpg"  /></div>             </td>             <td><a  href="http://omba.de.tl/Award.htm"><img border="0"  src="https://img.webme.com/pic/o/omba/bubbleblau_award.png" alt=""  /></a></td>             <td>             <div  style="text-align: center;"><img alt=""  src="https://img.webme.com/pic/o/omba/bubbleblau_strich.jpg"   /></div>             </td>             <td><a  href="" ><img border="0"  src="https://img.webme.com/pic/o/omba/bubbleblau_free.png" alt=""  /></a></td>             <td>             <div  style="text-align: center;"><img alt=""  src="https://img.webme.com/pic/o/omba/bubbleblau_strich.jpg"  /></div>             </td>             <td><a  href="http://omba.de.tl/AGB.htm" ><img border="0"  src="https://img.webme.com/pic/o/omba/bubbleblau_fragen.png" alt=""  /></a></td>             <td>             <div  style="text-align: center;"><img alt=""  src="https://img.webme.com/pic/o/omba/bubbleblau_strich.jpg"  /></div>             </td>             <td><a  href="www.test.de.tl"><img border="0"  src="https://img.webme.com/pic/o/omba/bubbleblau_kontakt.png" alt=""  /></a></td>             <td>             <div  style="text-align: center;"><img alt=""  src="https://img.webme.com/pic/o/omba/bubbleblau_strich.jpg"/></div>              </td>             <td><a  href="www.test.de.tl"><img border="0"  src="https://img.webme.com/pic/o/omba/bubbleblau_copy.png" alt=""  /></a></td>         </tr>     </tbody>  </table> </div>   <div id="feldobengross"><div  id="gallery">       <a href="http://omba.de.tl/Designs.htm"  class="show">     <img  src="https://img.webme.com/pic/o/omba/bubbleblau_neu.jpg" alt="Omba"  alt="" title="" width="1045" height="367"  rel="<h3>Omba</h3>Auf Omba findet ihr viele kostenlose  Homepage-Baukasten Tutorials!"/></a>     </a>            <a href="http://www.youtube.com/user/Medientipps" >          <img src="https://img.webme.com/pic/o/omba/bubbleblau_youtube.jpg"  alt="Grass Blades" alt="" title="" width="1045" height="367"  rel="<h3>YouTube</h3>Besucht doch unseren Youtube-Channel  und schaut euch Tutorials zum Thema Webdesign an!"/>     </a>       <a href="http://www.omba.de.tl/omba4.htm">         <img  src="https://img.webme.com/pic/o/omba/bubbleblau_old.jpg" alt="Altes  Design" alt="" title="" width="1045" height="367" rel="<h3>Altes  Design</h3>Holt euch jetzt unser altes Design kostenlos!"/>      </a>    <a href="#">         <img  src="https://img.webme.com/pic/o/omba/bubbleblau_iceblue.jpg" alt="Grass  Blades" alt="" title="" width="1045" height="367"  rel="<h3>Iceblue</h3>Schaut euch auch unsere schönen Iceblue  Designs an!"/>     </a>   <a href="#">         <img  src=" https://img.webme.com/pic/o/omba/bubbleblau_oben.jpg" alt="Bild zu  klein?" alt="" title="" width="1045" height="367" rel="<h3>Bild zu  klein?</h3>Wenn die Website zu klein angezeigt wird, dann drücken  Sie "Strg" und scrollen sie mit der Maus nach unten."/>      </a>      <div class="caption"><div  class="content"></div></div> </div> <div  class="clear"></div>  <style>      body{      font-family:arial }   .clear {     clear:both }   #gallery {      position:relative;     height:367px }     #gallery a {          float:left;         position:absolute;     }           #gallery a img {          border:none;     }           #gallery a.show {          z-index:500     }       #gallery .caption {         z-index:600;          background-color:#000;         color:#ffffff;         height:100px;          width:100%;         position:absolute;         bottom:0;     }        #gallery .caption .content {         margin:5px     }            #gallery .caption .content h3 {         margin:0;         padding:0;          color:#1DCCEF;     }       </style>  <script  src="http://omba.pf-control.de/js/jquery.js"></script>   <script type="text/javascript">       $(document).ready(function() {                //Execute the slideShow     slideShow();   });   function slideShow() {       //Set the opacity of all images to 0     $('#gallery a').css({opacity: 0.0});           //Get the first image and display it (set it to full opacity)     $('#gallery a:first').css({opacity: 1.0});           //Set the caption background to semi-transparent     $('#gallery .caption').css({opacity: 0.7});       //Resize the width of the caption according to the image width     $('#gallery .caption').css({width: $('#gallery  a').find('img').css('width')});           //Get the caption of the first image from REL attribute and display  it     $('#gallery .content').html($('#gallery  a:first').find('img').attr('rel'))     .animate({opacity: 0.7}, 400);           //Call the gallery function to run the slideshow, 6000 = change to  next image after 6 seconds     setInterval('gallery()',6000);       }   function gallery() {           //if no IMGs have the show class, grab the first image     var current = ($('#gallery a.show')?  $('#gallery a.show') :  $('#gallery a:first'));       //Get next image, if it reached the end of the slideshow, rotate it  back to the first image     var next = ((current.next().length) ?  ((current.next().hasClass('caption'))? $('#gallery a:first')  :current.next()) : $('#gallery a:first'));             //Get next image caption     var caption = next.find('img').attr('rel');           //Set the fade in effect for the next image, show class has higher  z-index     next.css({opacity: 0.0})     .addClass('show')     .animate({opacity: 1.0}, 1000);       //Hide the current image     current.animate({opacity: 0.0}, 1000)     .removeClass('show');           //Set the opacity to 0 and height to 1px     $('#gallery .caption').animate({opacity: 0.0}, { queue:false,  duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });           //Animate the caption, opacity to 0.7 and heigth to 100px, a slide  up effect     $('#gallery .caption').animate({opacity: 0.7},100 ).animate({height:  '100px'},500 );           //Display the content     $('#gallery .content').html(caption);           }  </script> </div>

Text unter dem Design

<div  id="werbung"><table width="100%" cellspacing="1" cellpadding="1"  border="0" align="center">     <tbody>         <tr>              <td><span style="font-weight:  bold;">>></span><span style="font-size:  larger;"><strong> Neuste  Designs</strong></span></td>              <td><span style="font-weight:  bold;">>></span><span style="font-size:  larger;"><strong> Award  Gewinner</strong></span></td>              <td><span style="font-weight:  bold;">>></span><span style="font-size:  larger;"><strong>  Partner</strong></span></td>              <td><strong>>> </strong><span  style="font-size:  larger;"><strong>Werbung</strong></span></td>          </tr>         <tr>              <td><center>             <div style="text-align: left;"  id="box"><a href="http://omba.de.tl/OrangeStyle.htm"><span  style="font-size:  medium;">OrangeStyle</span></a></div>              </center></td>             <td><center>              <div style="text-align: left;" id="box"><a  href="http://www.nothing.de.tl"><span style="font-size:  medium;">---</span></a></div>              </center></td>             <td><center>              <div style="text-align: left;" id="box"><a  href="http://www.test.de.tl"><span style="font-size:  medium;">---</span></a></div>              </center></td>             <td><center>              <div style="text-align: left;" id="box"><a  href="http://www.test.de.tl"><span style="font-size:  medium;">---</span></a></div>              </center></td>         </tr>         <tr>              <td><center>             <div style="text-align:  left;" id="box"><a  href="http://omba.de.tl/ClanDesign.htm"><span style="font-size:  medium;">ClanDesign</span></a></div>              </center></td>             <td><center>              <div style="text-align: left;" id="box"><a  href="http://www.test.de.tl"><span style="font-size:  medium;">---</span></a></div>              </center></td>             <td><center>              <div style="text-align: left;" id="box"><a  href="http://www.test.de.tl"><span style="font-size:  medium;">---</span></a></div>              </center></td>             <td><center>              <div style="text-align: left;" id="box"><a  href="http://www.test.de.tl"><span style="font-size:  medium;">---</span></a></div>              </center></td>         </tr>         <tr>              <td><center>             <div style="text-align:  left;" id="box"><a  href="http://omba.de.tl/SimpleGreen.htm"><span style="font-size:  medium;">SimpleGreen</span></a></div>              </center></td>             <td><center>              <div style="text-align: left;" id="box"><a  href="http://www.test.de.tl"><span style="font-size:  medium;">---</span></a></div>              </center></td>             <td><center>              <div style="text-align: left;" id="box"><a  href="http://www.test.de.tl"><span style="font-size:  medium;">---</span></a></div>              </center></td>             <td><center>              <div style="text-align: left;" id="box"><a  href="http://www.test.de.tl"><span style="font-size:  medium;">---</span></a></div>              </center></td>         </tr>     </tbody>  </table></div>  <div id="footer_container"> <div  id="footer"><br/> ©Copyright 2011 by DeinerSeite. All Rights  Reserved.  </br> Design by www.omba.de.tl</div> <div  id="addthis"> <script language="JavaScript"  src="http://js.stats.de/j/0000118632"></script> <script  language="JavaScript"> rapidstats(118632); </script> <noscript> <a href="http://www.stats.de" target="_blank"> <img src="http://srv1.stats.de/l/0000118632?js=0" border="0"  alt=""> </a> </noscript> <div id="addthis"> <div class="addthis_toolbox addthis_default_style "> <a  class="addthis_button_facebook_like"  fb:like:layout="button_count"></a> <a  class="addthis_button_tweet"></a> <a class="addthis_counter  addthis_pill_style"></a> </div> <script  type="text/javascript"  src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4deb8e19267e74fa"></script>   </div>

CSS-Code ohne Style-Tags:

/*Design  made by www.omba.de.tl (c) 2011*/ td[height="102"] { position:absolute;  left:50%; margin-left:-376px; }   body { background-color: #2a84b8;  background-repeat: repeat-x; background-image:  url(https://img.webme.com/pic/o/omba/bubbleblau_backround.jpg); }   #hintergrund_feld {  position: absolute;  left: 50%;  top: 392px;   margin-left: -624px; width: 1238px;  height: 265px;  background-image:  url(https://img.webme.com/pic/o/omba/bubbleblau_blasen.jpg); }    #nav_container { position: absolute;  left: 50%;  top: -10px;   margin-left: -575px; width: 1150px; height: 62px;  text-align: left;  border-top: 0px solid #ffffff;  background-image: none; }   li.nav_element { display: inline-block; text-align: center; height:22px;  margin-left: 3.55px; padding-left: 15px; padding-right: 15px;  padding-bottom: 15px; padding-top: 10px; width: 115px;  background-image: none; }  li.nav_element a { font-size:17px; color:  #000000; font-family: Tahoma;  font-weight: bold; text-decoration: none;  }  li.nav_element:hover { height: 31px; background-color: #ffffff; }   li.nav_element:hover a { font-size:17px; color: #05344d; font-family:  Tahoma;  font-weight: bold; text-decoration: none; }   li.checked_menu {  height: 31px; background-color: #ffffff; }   #bildmitte {  position:  absolute;  left: 50%;  top: -200px;  margin-left: -533px; width: 1069px;   height: 449px;  background-image:  url(https://img.webme.com/pic/o/omba/bubbleblau_sliderbg.png); }    #container { width: 1069px; height: auto; margin: auto; overflow:  hidden;  }  #content { float:right; margin-top: 440px; margin-bottom:  30px; width: 1069px; padding-top: 94px; padding-right: 0px;  padding-left: 15px; color: #ffffff; font-size: 15px; font-family: arial;  text-align: left; }  #content a { font-size: 15px; color: #0066ff;  text-decoration: none; font-family: arial;  }   #werbung { float:  center; margin-top: 0px; margin-bottom: 30px; height: auto;  width:  1069px; padding-top:0px; color: #ffffff; font-size:15px; font-family:  arial; text-align: left; background:  none; background-repeat: repeat-y;  }  #werbung a { color: #0066ff; font-size: 10px; font-family: arial;  text-decoration: none; }  #logo {  position: absolute;  left: 50%;  top:  -78px;  margin-left: -505px; width: 304px;  height: 70px;   background-image:  url(https://img.webme.com/pic/o/omba/bubbleblau_logo.png); }   #addthis {   position: absolute;  left: 50%;  top: -17px;  margin-left: 5px; width:  354px;  height: 10px;  background-image:  none; }   #felddrunter {   position: absolute;  left: 50%;  top: 458px;  margin-left: -534px;  width: 1069px;  height: 70px;  }   #feldobengross {  position: absolute;   left: 50%;  top: 67px;  margin-left: -523px; width: auto;  height:  367px;  }    #footer { clear:both; width:100%; height:60px; margin:  auto; text-align:center; font-size:12px; color:#ffffff;  background-image:  url(https://img.webme.com/pic/o/omba/bubbleblau_footer.png); }   #footer a  { color:#222222; }  #box{     width: 250px;     padding: 5px;      color: #003346;     border: 1px solid #e0e0e0;     background-image:  url(https://img.webme.com/pic/o/omba/bubbleblau_hover.png)     }   #box:hover{   background-image:  url(https://img.webme.com/pic/o/omba/bubbleblau_hoverblau.png);   }   h2#title{display:none;} h1#header {display:none;} #header-container  {display:none;} #nav_heading{display:none;} #sidebar_heading  {display:none;} #pre_content {display:none;} #pre_header {display:none;}  #post_header {display:none;} #post_content {display:none;}  #below_content{display:none;} #extraDiv2 {display:none;} #extraDiv3  {display:none;} #extraDiv4 {display:none;} #extraDiv5 {display:none;}  #extraDiv6 {display:none;} div.header{display: none;}  #counter{display:none;}

In den Header dürfen Text und Logo eingefügt werden. Copyright bitte nicht entfernen! Der Header darf ganz ausgetauscht werden!

Design by Omba