• Intern
  • Grafiken&Designs
  • CSS &HTML Codes
    • News
    Rechtebox

    All 4 your Page

    Navioben

    Beispiele:

     

    -N-for-S.de.tl
    -http://porsche-stuttgart.de.tl/

    Schritt 1:
    Mit diesem Code das Design Iceblue transparent machen:
    Die #XXXXXX sind für Text-und Linkfarben. Diese solltet Ihr an
    Euer Hintergrund-Bild anpassen.
    Zitat:
    <style type="text/css">
    <!--
    /*Design verbreitern */
    table.edit_main_table{width: 100% !important;}
    td.edit_main_tr{width: 100% !important;}
    table.edit_second_table{width: 100% !important;}
    td.edit_header_full{width: 100% !important;}
    td.edit_header_full table{width: 100% !important;}
    table.edit_third_table{width: 100% !important;}
    td.edit_navi_headbg{width: 15% !important;}
    table.edit_rechts_tabelle{width: 100% !important;}
    td.edit_rechts_bottom{width: 15% !important;}
    td.edit_rechts_cbg{width:100%;}
    -->
    </style>

    <style type="text/css">
    <!--
    /*Text-und Link-Formatierung */
    p, div, b{color: #000000;}
    td.nav a{color: #XXXXXX;font-size: 13px;text-decoration: none;}
    a:hover {color: #XXXXXX;font-size: 13px;text-decoration: none;}
    a: link {color: #XXXXXX;font-size: 13px;text-decoration: none;}
    a:active {color: #XXXXXX;font-size: 13px;text-decoration: none;}
    a:visited {color: #XXXXXX;font-size: 13px;text-decoration: none;}

    /* Header unsichtbar*/
    td.edit_header_full{visibility: hidden;}

    /*Titel im Header */
    td.headline{visibility:hidden;}

    /*Navigation linke Seite unsichtbar */
    td.nav a{visibility:hidden;}
    td.nav{visibility:hidden;}
    td.nav:hover{visibility:hidden;}
    td.nav_heading{background-image:url(URL);}
    td.edit_below_nav{visibility:hidden;}
    td.edit_navi_headbg{background-image:url(URL);}

    /*Hintergrund-Bild fixiert */
    body{background-image:url(http://HIER HINTERGRUND-BILD-ADRESSE.jpg);background-repeat:no-repeat;background-attachment: fixed;}

    /*Textfeld-Bereiche */
    td.headline2{visibility:hidden;}
    td.edit_content a{color:#XXXXXX;font-size: 13px;text-decoration: none;}
    td.edit_content a:hover {color: #XXXXXX;font-size: 13px;text-decoration: none;}
    td.edit_content_top{visibility:hidden;}
    td.edit_content{background-image:url(URL);background-color:transparent;}
    td.edit_content_bottom{visibility:hidden;}
    td.edit_content_bottom2{background-image: none;background-color:transparent;}

    /*Rechte Boxen */
    td.edit_rechts_sbg{visibility:hidden;}
    td.edit_rechts_cbg{background-image: url(URL);}
    td.edit_rechts_bottom{background-image: url(URL);}
    td.edit_rb_footer{visibility:hidden;}
    td.sidebar_heading{visibility:hidden;}
    td.shouty, .shouty2, .shouty3, .shouty4, .shouty5{background-image: none;background-color:transparent;border:0px dotted black;}
    td.shouty2{;}
    td.shouty3{;}
    td.shouty4{;}
    td.shouty5{;}
    --></style>


    Beispiel-Code für Navigation oben:
    Die Werte top und margin-left sind die wichtigsten zum positionieren der Navigation oben.
    Der Wert width: 200px; bestimmt 2 mal die BREITE der Navi-Buttons.
    Bei background-color (Hintergrund-Farbe Navi-Menü) könnt Ihr auch eigene Buttons einfügen.
    Dann statt background-color einfach background-image:url(HIER BILD-ADRESSE.jpg); einfügen.
    Zitat:
    <style type="text/css" media="screen">
    <!--
    body
    {
    font-family: Arial, sans-serif;
    font-size: 11px;
    overflow: auto;
    padding: 13px;
    margin: 0px;
    }

    ul, li
    {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    }

    div.menu
    {
    position: absolute;
    z-index: 3;
    top: 80px;
    left: 50%;
    margin-left:-290px;
    width: 100%;
    }

    .menu li
    {
    width: 200px;
    float: left;
    }

    .menu a
    {
    border: 1px solid #F2F2F2;
    background-color:#000C32;
    padding-top: 9px;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    margin: 0px 10px;
    display: block;
    height: 25px;
    color: #FFFFFF;
    }

    .menu a:hover
    {
    background-color: #000C32;
    }

    #smenu1, #smenu2, #smenu3
    {
    font-size: 13px;
    display: none;
    width: 200px;
    float: left;
    }

    #smenu1 a, #smenu2 a, #smenu3 a
    {
    font-size: 13px;
    font-weight: bold;
    padding-top: 9px;
    border-top: 0px;
    cursor: pointer;
    }
    //-->

    </style>

    <script type="text/javascript">
    <!--
    function montre(id)
    {
    with (document)
    {
    if (getElementById)
    getElementById(id).style.display = 'block';
    else if (all)
    all[id].style.display = 'block';
    else
    layers[id].display = 'block';
    }
    }

    function cache(id)
    {
    with (document)
    {
    if (getElementById)
    getElementById(id).style.display = 'none';
    else if (all)
    all[id].style.display = 'none';
    else
    layers[id].display = 'none';
    }
    }
    //-->
    </script>

    <div class="menu">
    <li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">TITEL Navi-Button 1</a>
    <ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
    <li><a href="http://HIER SEITE 1.htm" target="_self">Seiten-Name 1</a></li>
    <li><a href="http://HIER SEITE 2.htm" target="_self">Seiten-Name 2</a></li>
    <li><a href="http://HIER SEITE 3.htm" target="_self">Seiten-Name 3</a></li>
    </ul>
    </li>

    <li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">TITEL NAVI-Button 2</a>
    <ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
    <li><a href="http://HIER SEITE 1.htm" target="_self">Seiten-Name 1</a></li>
    <li><a href="http://HIER SEITE 2.htm" target="_self">Seiten-Name 2</a></li>
    <li><a href="http://HIER SEITE 3.htm" target="_self">Seiten-Name 3</a></li>
    </ul>
    </li>

    <li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">TITEL NAVI-BUTTON 3</a>
    <ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
    <li><a href="http://HIER SEITE 1.htm" target="_self">Seiten-Name 1</a></li>
    <li><a href="http://HIER SEITE 2.htm" target="_self">Seiten-Name 2</a></li>
    <li><a href="http://HIER SEITE 3.htm" target="_self">Seiten-Name 3</a></li>
    </ul>
    </li>
    </ul>
    </div>


    Ihr könnt den Code natürlich beliebig erweitern.
     
    Heute waren schon 4 Besucherhier!
    Design by Porsche-Stuttgart
    Diese Webseite wurde kostenlos mit Homepage-Baukasten.de erstellt. Willst du auch eine eigene Webseite?
    Gratis anmelden