ilch Forum » Ilch Clan 1.1 » Design und Templates » Design Footer Problem

Geschlossen
  1. #1
    User Pic
    Zeisig Mitglied
    Registriert seit
    05.03.2013
    Beitrge
    229
    Beitragswertungen
    2 Beitragspunkte
    Hallo liebe Designer,
    hab jetzt schon einiges ausprobiert aber ich brauch jemanden der mir weiterhilft. Möchte gerne meinen Footer anders platzieren so das ich am Footer unten noch ein wenig Platz (Transparent) habe.
    Würde mich sehr freuen über Hilfe.

    Ich poste mal die Codes:

    index.htm
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <title>{TITLE}</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="include/designs/Zeisigwald/style.css">
    <script type="text/javascript">
    function oeffnefenster (url) {
     fenster = window.open(url, "fenster1", "width=450,height=150,status=yes,scrollbars=no,resizable=no");
     fenster.focus();
    }
    </script>
    
    <style type="text/css">
    #bildseite
    {
     position:relative;
     float: left;
     width: 215px;
     left:605px; top:222px;
     border-bottom: 0px solid #000000;
     border-right: 0px solid #000000;
    }
    </style>
    
    <link rel="stylesheet" href="include/includes/css/slide.css" type="text/css" media="screen" />
    
                    <!-- Sliding effect -->
                    <script type="text/javascript"
                            src="include/includes/js/slide.js" >
                    </script>
    <script type="text/javascript" src="include/includes/js/messenger.js"></script>
    
    <link type="text/css" rel="stylesheet" media="all" href="include/includes/css/messenger/chat.css" />
    <link type="text/css" rel="stylesheet" media="all" href="include/includes/css/messenger/screen.css" />
    
    <!--[if lte IE 7]>
    <link type="text/css" rel="stylesheet" media="all" href="include/includes/css/messenger/screen_ie.css" />
    <![endif]-->
    <style type="text/css">
    .facebook        {display:inline-block;background:transparent  url('include/images/icons_comm6/facebook.png') no-repeat top left;width: 46px; height: 40px;border: none;}
    .facebook:hover  {display:inline-block;background:transparent  url('include/images/icons_comm6/facebook.png') no-repeat  bottom right;width: 46px; height: 40px;border: none;}
    .rss             {display:inline-block;background:transparent  url('include/images/icons_comm6/rss.png') no-repeat top left;width: 46px; height: 40px;border: none;}
    .rss:hover       {display:inline-block;background:transparent  url('include/images/icons_comm6/rss.png') no-repeat  bottom right;width: 46px; height: 40px;border: none;}
    .ts              {display:inline-block;background:transparent  url('include/images/icons_comm6/ts.png') no-repeat top left;width: 46px; height: 40px;border: none;}
    .ts:hover        {display:inline-block;background:transparent  url('include/images/icons_comm6/ts.png') no-repeat  bottom right;width: 46px; height: 40px;border: none;}
    .closed          {float:left;display:block;width: 16px;height: 16px;background-image: url('include/images/icons_comm6/closed.png');background-repeat: no-repeat;}
    .black_overlay{
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color:#000;
    z-index:1001;
    -moz-opacity: 0.6;
    opacity:.60;
    filter: alpha(opacity=60);
    }
    .white_content {
    display: none;
    position: fixed;
    -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
    -webkit-box-shadow:8px 8px 8px #000;-moz--box-shadow:8px 8px 8px #000;box-shadow:8px 8px 8px #000;
    left:50%; top:50%;
    margin-left:-200px; margin-top:-250px;
    width: 500px;
    height: 500px;
    padding: 4px;
    border: 1px solid #bbbbbb;
    background-color: #ffffff;
    color: #000000;
    z-index:1002;
    overflow: auto;
    }
    </style>
     <link rel="stylesheet" type="text/css" href="include/extras/fancybox/jquery.fancybox.css" media="screen" />
      <script type="text/javascript" src="include/extras/fancybox/jquery.fancybox.pack.js"></script>
      <script type="text/javascript" src="include/extras/fancybox/jquery.easing.1.3.js"></script>
      <script type="text/javascript" src="include/extras/fancybox/jquery.mousewheel-3.0.6.pack.js"></script>
      <script type="text/javascript">
            $(document).ready(function() {
                    $("table#galimages a").fancybox(
                    {
                    'zoomSpeedIn': 800,
                    'zoomSpeedOut': 500,
                    'zoomSpeedChange': 300,
                    'zoomOpacity': 0.5,
                    'overlayOpacity': 0.5,
                    'easingIn' : 'easeOutBack',
                    'easingOut'        : 'easeInBack',
                    'overlayShow': true
                    }
                    );
    
                    $("div#bbvideo a").fancybox(
                    {
                    'zoomSpeedIn': 800,
                    'zoomSpeedOut': 500,
                    'zoomSpeedChange': 800,
                    'zoomOpacity': 0.5,
                    'overlayOpacity': 0.5,
                    'overlayShow': true
                    }
                    );
            });
       </script>
    
    
    </head>
    
    <body>
    <div id="icon_button" style="left:0px;position:fixed;top:19px;" >
    <a class="facebook" target="_blank" href="https://www.facebook.com/pages/Briten-vom-Zeisigwald/419188498172246" title="Besuch uns bei Facebook"></a><br/>
    <a class="rss" title="News abonieren" href="index.php?news-rss" target="_blank"></a><br/>
    <a class="ts" href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'" title="Kontaktiere uns"></a></div>
    <div id="light" class="white_content"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'" class="closed" title="Fenster schlieen"></a><br><br>
    <!-- Anfang TS Code -->
    <a href="index.php?contact"><img src="http://www.vomzeisigwald.de/include/downs/upload/Zeisigwald/kontakt.png" alt="Kontakt" border="0"> </a>
    <!-- Ende TS Code -->
    </div><div id="fade" class="black_overlay"></div>
    <table cellpadding="0" cellspacing="0" width="100%">
      <tr>
        <td align="center">
    
    <div id="top">
      <div id="header"> <div style="float:left;" id="tagcloud"><?/div>
    <div id="bildseite">{_if_{SESSION_AUTHRIGHT}<='-1'} <b><font size="-2"></font></b>{_boxes_tagcloud} {_else_} {_boxes_tagcloud} {/_endif}</div> </div></div>
    
    </div>
    
      <div id="center">
        <div id="left_col"><input type="button" name="Livecam" value="Webcam" onclick="window.open('http://doyo26.ddns-instar.de/main.htm','Webcam','width=880, height=680, toolbar=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes');"><input type="button" name="showchat" value="Webchat" onclick="window.open('index.php?ajaxchat&iframe=false','Chat','width=720, height=520, toolbar=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes');"><br><br>
            {_list_menunr1@
        <table cellpadding="0" cellspacing="0" border="0" width="160">
    
              <tr>
                      <td style="height: 31px; background: url(include/designs/Zeisigwald/img/box_left_top.jpg) top left no-repeat;"><b class="menu_heading">%1</b></td>
            </tr>
          <tr>
            <td style="background: url(include/designs/Zeisigwald/img/box_left_middle.jpg) top left repeat-y; padding: 5px; align="left">%2</td>
          </tr>
              <tr>
                      <td style="height: 8px; background: url(include/designs/Zeisigwald/img/box_left_bottom.jpg) bottom left no-repeat;"></td>
            </tr>
        </table>
    
        }
    
      </div>
        <div id="main_col">
    
                <table width="715" cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td style="min-height:-30px;padding: 0px;" colspan="5"><b><p align="center"><div align="center">{_boxes_freunde}</div><center></center></div></div></div>
    
    </p><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="20%"></td>
        </tr>
    
    
    </table><br></b>{EXPLODE}<br></td>
              </tr>
            </table>
                    <div align="center">
    
    
    
    </div>
    
        </div>
    
    
    
     <div id="footer"><br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#ffffff"><font size="-2">Copyright  2013 vomzeisigwald.de Britisch Kurz und Langhaar Katzen aus Sachsen.<a href="/index.php?rules"><b><font size="-2"><font color="#ffffff">Impressum</font></font></b></a>
    </div>
    </div>
    </div>
        </td>
      </tr>
    </table>
    
    
    
    
             <!--
                                            {_list_DDDmenupoint@
                                              <strong><big>&middot;</big></strong>
                <a %1 class="box" href="%2">%3</a>
                <br />
                                            }
              //-->
    
              <!--
                [null, '%3', '%2', '%1', null|],|,
              -->
              <!--           anfang        +     link                |ende |teilende|teilee  -->
              <!-- horizontaler menupunkt -->
              {_list_hmenupoint@<li><a target="%1" class="box" href="%2">%3</a>|</li>|<br />|</ul></li>}
              <!-- horizontaler menupunkt anfang -->
              {_list_hmenubegi@<ul>}
              <!-- horizontaler menupunkt ende -->
              {_list_hmenuende@</ul>}
    
              <!-- vertikaler menupunkt -->
              {_list_vmenupoint@<li><a target="%1" class="box" href="%2">%3</a>|</li>|<br /><ul>|</ul></li>}
              <!-- vertikaler menupunkt anfang -->
              {_list_vmenubegi@<ul>}
              <!-- vertikaler menupunkt ende -->
              {_list_vmenuende@</ul>}
    
    
    <script type="text/javascript">
    var state = 0;
    var wait = false;
    
    function changeSlider2()
    {
    if(state==1){
    $('#game_slid').animate({width: 335 }, "slow", function(){state = 0;}
    );
    }
    else
    $('#game_slid').animate({width: 556 }, "slow", function(){state = 0;}
    );
    }
    
    $('#game_slid').click(function(){
    changeSlider2();
    });
          </script>
    
        </body>
    </html>


    style.css

    body {
        margin                : 0;
        padding               : 0;
        background            : url(img/bg.jpg);
        background-repeat     : repeat;
        background-attachment : scroll;
        background-color      : #294141;
        font                  : 10px Verdana, Helvetica, sans-serif;
        text-decoration       : none
    
        }
    #tagcloud {
        margin-left : 150px;
        margin-top  : 12px;
        }
    #bildseite {
        float       : left;
        margin-top  : -220px;
        margin-left : -125px;
        }
    #iframe_1 {
        text-align : center;
        width      : 0px;
        height     : 0px;
        background : #000000;
    
        }
    input.farbig {
        background-color : #294141;
        color            : #eaddbc;
        padding          : 1px;
        font-size        : 11px;
        border-color     : #eaddbc;
    
        }
    #rekrutieren {
        margin        : auto !important;
        text-align    : left;
        width         : 120px;
        padding       : 2px;
        margin-bottom : 1px !important;
    
        }
    .tableBorder {
        border : 1px solid #158484;
    
        }
    
    .abstand_iframe {
        padding : 10px;
        }
    
    .scrollbereich {
        overflow : hidden;
        width    : 180px;
        height   : 180px;
        }
    #top {
        margin  : 0 auto;
        padding : 0;
        width   : 1100px
        }
    #footer_menu {
        color   : #9d8a68;
        width   : 200px;
        float   : left;
        margin  : 65px 0px 0px 350px;
        display : inline;
        }
    #header {
        background-image    : url(img/header.png);
        background-repeat   : no-repeat;
        background-position : center bottom;
        width               : 1100px;
        height              : 268px
        }
    
    #center {
        background-image    : url(img/center.png);
    
        background-position : center;
        margin              : 0 auto;
        padding             : 0;
        width               : 1100px;
    
        }
    #footer {
        background-image    : url(img/footer.png);
        background-repeat   : no-repeat;
        background-position : center;
        text-align          : center;
    
        width               : 1100px;
        height              : 86px;
        clear               : both
        }
    
    #left_col {
        width       : 150px;
        color       : #8f7a30;
        float       : left;
        margin-left : 86px;
        }
    
    #left_col .Cmite, #left_col .Cnorm, #left_col .Cdark {
        color : #333333;
        }
    #left_col .menu_heading {
        color          : #F7FFFF;
        display        : block;
        letter-spacing : 2px;
        font-size      : 10px;
        padding-top    : 0px;
        padding-left   : 30px;
        padding-right  : 5px;
        padding-bottom : 10px;
        }
    #left_col ul {
        padding    : 0;
        margin     : 0;
        list-style : inside url(img/box_menu_pfeil.png);
        width      : 145px;
        }
    
    #left_col li ul {
        width      : 145px;
        background : url(img/box_menu_trennlinie.gif) no-repeat top;
        }
    
    #left_col li li {
        padding-left : 0px;
        }
    #left_col li a {
        color           : #333333;
        padding-left    : 0px;
        font-size       : 13px;
        font-weight     : bold;
        text-decoration : none;
        }
    #left_col li a:hover {
        color           : #3299A7;
        padding-left    : 0px;
        font-size       : 13px;
        font-weight     : bold;
        text-decoration : none;
        }
    #main_col {
        width       : 500px;
        float       : left;
        margin-left : 41px;
        clear       : none;
        min-height  : 100px;
    
        }
    #right_col1 {
        width          : 182px;
        float          : right;
        padding-top    : 0px;
        padding-left   : 8px;
        padding-right  : 10px;
        padding-bottom : 0px;
    
        }
    
    #right_col1 .menu_heading {
        color          : #d4c7b5;
        display        : block;
        letter-spacing : 1px;
        font-size      : 10px;
        padding-top    : 15px;
        padding-left   : 15px;
        padding-right  : 5px;
        padding-bottom : 0px;
        }
    
    #search_box {
        color   : #6E9797;
    
        float   : right;
        margin  : 15px 20px 0px 0px;
        display : inline;
        }
    img {
        border : 0px;
        }
    
    td {
        font-family : Verdana;
        font-size   : 12px;
        }
    
    a, #left_col .Cmite a, #left_col .Cnorm a, #left_col .Cdark a {
        color           : #104848;
        font-family     : Verdana;
        font-size       : 11px;
        text-decoration : none;
        }
    
    a:hover {
        color           : #3299A7;
        text-decoration : none;
        font-size       : 11px;
        }
    
    a.box {
        color           : #154C4C;
        font-family     : Verdana;
        font-size       : 11px;
        text-decoration : none;
        }
    
    a.box:hover {
        color           : #3299A7;
        text-decoration : none;
        font-size       : 11px;
        }
    
    .Chead {
        font-size  : 11px;
        background : #C3D2D4;
        color      : #1C4242;
        }
    
    .Chead td, .Chead td strong, .Chead h4, .Chead td b {
        background : #E7EEEF;
        color      : #153737;
        }
    
    .Callg {
    
        color : #153737;
        }
    
    .Callg td {
        color : #153737;
        }
    
    .Cnorm {
        background-color : #E7EEEF;
        }
    .Cmite {
        background-color : #E7EEEF;
        }
    .Cdark {
        background-color : #C6DBDE;
        }
    
    .rand {
        border : solid #AACACE 0px;
        }
    
    .smalfont {
        font-size       : 11px;
        text-decoration : none;
        }
    
    .border {
        background-color : #7F9393;
        }
    .title {
        color       : #1A4242;
        font        : 11px Verdana;
        font-weight : bold
        }
    .login {
        color            : #1A4242;
        background-color : #272727;
        font-size        : 10px;
        font-family      : verdana, arial, helvetica;
        border-style     : solid;
        border           : 2px;
        border-color     : #497D83;
        }
    hr {
        height           : 0px;
        border           : solid #804000 0px;
        border-top-width : 1px;
        }
    
    input, textarea, select {
        color            : #6A8386;
        font             : 11px Verdana;
        border-color     : #87A1A4;
        border-width     : 2px;
        border-style     : solid;
        font-weight      : none;
        text-decoration  : none;
        background-color : #FFFFFF;
        }


    irgendwo hab ich da den Wurm drinne. Sobald ich den Footer vergößere bzw verschiebe um Platz zu schaffen geht das so nicht.
    Leider weiß ich echt nicht mehr weiter.

    Danke und LG für die Helfenden

    betroffene Homepage: www.vomzeisigwald.de
    0 Mitglieder finden den Beitrag gut.
  2. #2
    User Pic
    Wizzard26 Mitglied
    Registriert seit
    05.03.2009
    Beitrge
    259
    Beitragswertungen
    33 Beitragspunkte
    #footer { margin-bottom: 30px;}
    0 Mitglieder finden den Beitrag gut.
  3. #3
    User Pic
    Zeisig Mitglied
    Registriert seit
    05.03.2013
    Beitrge
    229
    Beitragswertungen
    2 Beitragspunkte
    Danke Wizard, das hab ich schon mal probiert gehabt. Aber ich versteh derzeit noch nicht wie ich es anstellen muss das sich mein footer.png nicht wiederholt. Hab doch no-repeat drinn...



    Ich will da unten nur mehr Platz das ich den Shadow um die Page schließen kann.

    PS: Nach Änderunge sieht meine css so aus

    body {
        margin                : 0;
        padding               : 0;
        background            : url(img/bg.jpg);
        background-repeat     : repeat;
        background-attachment : scroll;
        background-color      : #294141;
        font                  : 10px Verdana, Helvetica, sans-serif;
        text-decoration       : none
    
        }
    #tagcloud {
        margin-left : 150px;
        margin-top  : 12px;
        }
    #bildseite {
        float       : left;
        margin-top  : -220px;
        margin-left : -125px;
        }
    #iframe_1 {
        text-align : center;
        width      : 0px;
        height     : 0px;
        background : #000000;
    
        }
    input.farbig {
        background-color : #294141;
        color            : #eaddbc;
        padding          : 1px;
        font-size        : 11px;
        border-color     : #eaddbc;
    
        }
    #rekrutieren {
        margin        : auto !important;
        text-align    : left;
        width         : 120px;
        padding       : 2px;
        margin-bottom : 1px !important;
    
        }
    .tableBorder {
        border : 1px solid #158484;
    
        }
    
    .abstand_iframe {
        padding : 10px;
        }
    
    .scrollbereich {
        overflow : hidden;
        width    : 180px;
        height   : 180px;
        }
    #top {
        margin  : 0 auto;
        padding : 0;
        width   : 1100px
        }
    #footer_menu {
        color   : #9d8a68;
        width   : 200px;
        float   : left;
        margin  : 65px 0px 0px 350px;
        display : inline;
        }
    #header {
        background-image    : url(img/header.png);
        background-repeat   : no-repeat;
        background-position : center bottom;
        width               : 1100px;
        height              : 268px
        }
    
    #center {
        background-image    : url(img/center.png);
    
        background-position : center;
        margin              : 0 auto;
        padding             : 0;
        width               : 1100px;
    
        }
    #footer {
        background-image    : url(img/footer.png);
        background-repeat   : no-repeat;
        background-position : center;
        text-align          : center;
        width               : 1100px;
        height              : 86px;
        margin-bottom       : 30px;
        clear               : both
        }
    
    
    #left_col {
        width       : 150px;
        color       : #8f7a30;
        float       : left;
        margin-left : 86px;
        }
    
    #left_col .Cmite, #left_col .Cnorm, #left_col .Cdark {
        color : #333333;
        }
    #left_col .menu_heading {
        color          : #F7FFFF;
        display        : block;
        letter-spacing : 2px;
        font-size      : 10px;
        padding-top    : 0px;
        padding-left   : 30px;
        padding-right  : 5px;
        padding-bottom : 10px;
        }
    #left_col ul {
        padding    : 0;
        margin     : 0;
        list-style : inside url(img/box_menu_pfeil.png);
        width      : 145px;
        }
    
    #left_col li ul {
        width      : 145px;
        background : url(img/box_menu_trennlinie.gif) no-repeat top;
        }
    
    #left_col li li {
        padding-left : 0px;
        }
    #left_col li a {
        color           : #333333;
        padding-left    : 0px;
        font-size       : 13px;
        font-weight     : bold;
        text-decoration : none;
        }
    #left_col li a:hover {
        color           : #3299A7;
        padding-left    : 0px;
        font-size       : 13px;
        font-weight     : bold;
        text-decoration : none;
        }
    #main_col {
        width       : 500px;
        float       : left;
        margin-left : 41px;
        clear       : none;
        min-height  : 100px;
    
        }
    #right_col1 {
        width          : 182px;
        float          : right;
        padding-top    : 0px;
        padding-left   : 8px;
        padding-right  : 10px;
        padding-bottom : 0px;
    
        }
    
    #right_col1 .menu_heading {
        color          : #d4c7b5;
        display        : block;
        letter-spacing : 1px;
        font-size      : 10px;
        padding-top    : 15px;
        padding-left   : 15px;
        padding-right  : 5px;
        padding-bottom : 0px;
        }
    
    #search_box {
        color   : #6E9797;
    
        float   : right;
        margin  : 15px 20px 0px 0px;
        display : inline;
        }
    img {
        border : 0px;
        }
    
    td {
        font-family : Verdana;
        font-size   : 12px;
        }
    
    a, #left_col .Cmite a, #left_col .Cnorm a, #left_col .Cdark a {
        color           : #104848;
        font-family     : Verdana;
        font-size       : 11px;
        text-decoration : none;
        }
    
    a:hover {
        color           : #3299A7;
        text-decoration : none;
        font-size       : 11px;
        }
    
    a.box {
        color           : #154C4C;
        font-family     : Verdana;
        font-size       : 11px;
        text-decoration : none;
        }
    
    a.box:hover {
        color           : #3299A7;
        text-decoration : none;
        font-size       : 11px;
        }
    
    .Chead {
        font-size  : 11px;
        background : #C3D2D4;
        color      : #1C4242;
        }
    
    .Chead td, .Chead td strong, .Chead h4, .Chead td b {
        background : #E7EEEF;
        color      : #153737;
        }
    
    .Callg {
    
        color : #153737;
        }
    
    .Callg td {
        color : #153737;
        }
    
    .Cnorm {
        background-color : #E7EEEF;
        }
    .Cmite {
        background-color : #E7EEEF;
        }
    .Cdark {
        background-color : #C6DBDE;
        }
    
    .rand {
        border : solid #AACACE 0px;
        }
    
    .smalfont {
        font-size       : 11px;
        text-decoration : none;
        }
    
    .border {
        background-color : #7F9393;
        }
    .title {
        color       : #1A4242;
        font        : 11px Verdana;
        font-weight : bold
        }
    .login {
        color            : #1A4242;
        background-color : #272727;
        font-size        : 10px;
        font-family      : verdana, arial, helvetica;
        border-style     : solid;
        border           : 2px;
        border-color     : #497D83;
        }
    hr {
        height           : 0px;
        border           : solid #804000 0px;
        border-top-width : 1px;
        }
    
    input, textarea, select {
        color            : #6A8386;
        font             : 11px Verdana;
        border-color     : #87A1A4;
        border-width     : 2px;
        border-style     : solid;
        font-weight      : none;
        text-decoration  : none;
        background-color : #FFFFFF;
        }



    Zuletzt modifiziert von Zeisig am 13.04.2013 - 16:04:10
    0 Mitglieder finden den Beitrag gut.
  4. #4
    User Pic
    Ahrtas Moderator
    Registriert seit
    17.12.2007
    Beitrge
    2.368
    Beitragswertungen
    210 Beitragspunkte
    index.htm Zeile 124
    <table cellpadding="0" cellspacing="0" width="100%">

    ändern zu
    <table class="table-layout" cellpadding="0" cellspacing="0" width="100%">


    style.css nach Zeile 11 einfügen
    .table-layout { margin-bottom: 30px; }



    Edit: Sehe gerade Thema hat sich erledigt, hast es per Grafik gemacht.


    Zuletzt modifiziert von Ahrtas am 13.04.2013 - 16:31:52
    1 Mitglieder finden den Beitrag gut.
  5. #5
    User Pic
    Zeisig Mitglied
    Registriert seit
    05.03.2013
    Beitrge
    229
    Beitragswertungen
    2 Beitragspunkte
    Hallo ja habs per Grafik gemacht aber ich werds nun wieder ändern weil das war ne dumme Idee von mir. Wenn ich den BG ändere wäre es mir lieber das ich es so mache wie du vorschlägst. Danke ich geb gleich Feedback lcheln

    PS. So habs eingebaut und es ist leider nicht anders. Ich frag mich grad selbst wie ich das noch anders lösen kann.


    Zuletzt modifiziert von Zeisig am 13.04.2013 - 19:39:40
    0 Mitglieder finden den Beitrag gut.
  6. #6
    User Pic
    Wizzard26 Mitglied
    Registriert seit
    05.03.2009
    Beitrge
    259
    Beitragswertungen
    33 Beitragspunkte
    Seh gerade das du in der #footer dem Background ein background-position: center gegeben hast. Mach da mal ein background-position :center bottom;

    Habs jetzt nur mal auf der schnelle im FF mit firebug probiert, aber da gibts dann auch keine grafikwiederholung egal wie groß ich den footer danach mach
    0 Mitglieder finden den Beitrag gut.
  7. #7
    User Pic
    Zeisig Mitglied
    Registriert seit
    05.03.2013
    Beitrge
    229
    Beitragswertungen
    2 Beitragspunkte
    ah das hört sich ja gut an werds nachher mal testen und geb Dir bescheid lcheln Danke

    PS: geht auch nicht. Sobald ich die footer Grafik mit einem transparentem Hintergrund versehe wiederholt sich der footer und nach der Wiederholung kommen die 30 px Abstand die ich eigentlich generell beim footer wg dem Schatteneffekt wollte.

    Ist es wirklich nur über die Grafik ne Lösung ?
    Ich verstehs leider auch nicht aber will mich dennoch mal bei euch recht herzlich bedanken.

    Hab den Footer mal noch so gelassen damit ihr seht wie es nun aussieht.
    Die Änderungen von background-position :center bottom; hab ich in der css vorgenommen.


    PPS: Das scheint gar net am footer zu liegen sondern an der Mitte meines Designs. OMG


    Zuletzt modifiziert von Zeisig am 14.04.2013 - 13:03:53
    0 Mitglieder finden den Beitrag gut.
  8. #8
    User Pic
    Wizzard26 Mitglied
    Registriert seit
    05.03.2009
    Beitrge
    259
    Beitragswertungen
    33 Beitragspunkte
    Stimmt, du hast nen fehler in deiner html struktur wie ich das gerade seh.

    div id Top
    <-- Top Ende

    div id center

    div id footer
    <-- footer Ende

    <--- center Ende

    Den #footer div nach dem center div dann sollte es gehen
    0 Mitglieder finden den Beitrag gut.
  9. #9
    User Pic
    Zeisig Mitglied
    Registriert seit
    05.03.2013
    Beitrge
    229
    Beitragswertungen
    2 Beitragspunkte
    Habe es mal so ausprobiert wie du sagtest aber leider auch ohne erfolg.
    Hab es jetzt 20x umgebaut und entweder war mein center weg oder der footer war noch mehr verschoben.

    kann es sein das irgendwas da dran nicht stimmt ?

    #center {
    background-image : url(img/center.png);
    background-position : center;
    margin : 0 auto;
    padding : 0;
    width : 1100px;

    }

    Danke für die unermüdliche Hilfe lcheln
    0 Mitglieder finden den Beitrag gut.
  10. #10
    User Pic
    Wizzard26 Mitglied
    Registriert seit
    05.03.2009
    Beitrge
    259
    Beitragswertungen
    33 Beitragspunkte
    Ich hätte mal nen blick in deine Index werfen sollen, bei dem Code ist es fast verwunderlich das da überhaupt was richtig angezeigt wurde.

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <title>{TITLE}</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="include/designs/Zeisigwald/style.css">
    <script type="text/javascript">
    function oeffnefenster (url) {
     fenster = window.open(url, "fenster1", "width=450,height=150,status=yes,scrollbars=no,resizable=no");
     fenster.focus();
    }
    </script>
    <!-- Sliding effect -->
    <script type="text/javascript" src="include/includes/js/slide.js" >
    </script>
    <script type="text/javascript" src="include/includes/js/messenger.js"></script> 
    <style type="text/css">
    #bildseite
    {
     position:relative;
     float: left;
     width: 215px;
     left:605px; top:222px;
     border-bottom: 0px solid #000000;
     border-right: 0px solid #000000;
    }
    </style>
     
    <link rel="stylesheet" href="include/includes/css/slide.css" type="text/css" media="screen" />
    <link type="text/css" rel="stylesheet" media="all" href="include/includes/css/messenger/chat.css" />
    <link type="text/css" rel="stylesheet" media="all" href="include/includes/css/messenger/screen.css" />
    <link rel="stylesheet" type="text/css" href="include/extras/fancybox/jquery.fancybox.css" media="screen" />
    <!--[if lte IE 7]>
    <link type="text/css" rel="stylesheet" media="all" href="include/includes/css/messenger/screen_ie.css" />
    <![endif]-->
    <style type="text/css">
    .facebook        {display:inline-block;background:transparent  url('include/images/icons_comm6/facebook.png') no-repeat top left;width: 46px; height: 40px;border: none;}
    .facebook:hover  {display:inline-block;background:transparent  url('include/images/icons_comm6/facebook.png') no-repeat  bottom right;width: 46px; height: 40px;border: none;}
    .rss             {display:inline-block;background:transparent  url('include/images/icons_comm6/rss.png') no-repeat top left;width: 46px; height: 40px;border: none;}
    .rss:hover       {display:inline-block;background:transparent  url('include/images/icons_comm6/rss.png') no-repeat  bottom right;width: 46px; height: 40px;border: none;}
    .ts              {display:inline-block;background:transparent  url('include/images/icons_comm6/ts.png') no-repeat top left;width: 46px; height: 40px;border: none;}
    .ts:hover        {display:inline-block;background:transparent  url('include/images/icons_comm6/ts.png') no-repeat  bottom right;width: 46px; height: 40px;border: none;}
    .closed          {float:left;display:block;width: 16px;height: 16px;background-image: url('include/images/icons_comm6/closed.png');background-repeat: no-repeat;}
    .black_overlay{
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color:#000;
    z-index:1001;
    -moz-opacity: 0.6;
    opacity:.60;
    filter: alpha(opacity=60);
    }
    .white_content {
    display: none;
    position: fixed;
    -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
    -webkit-box-shadow:8px 8px 8px #000;-moz--box-shadow:8px 8px 8px #000;box-shadow:8px 8px 8px #000;
    left:50%; top:50%;
    margin-left:-200px; margin-top:-250px;
    width: 500px;
    height: 500px;
    padding: 4px;
    border: 1px solid #bbbbbb;
    background-color: #ffffff;
    color: #000000;
    z-index:1002;
    overflow: auto;
    }
    </style>
    
      <script type="text/javascript" src="include/extras/fancybox/jquery.fancybox.pack.js"></script>
      <script type="text/javascript" src="include/extras/fancybox/jquery.easing.1.3.js"></script>
      <script type="text/javascript" src="include/extras/fancybox/jquery.mousewheel-3.0.6.pack.js"></script>
      <script type="text/javascript">
            $(document).ready(function() {
                    $("table#galimages a").fancybox(
                    {
                    'zoomSpeedIn': 800,
                    'zoomSpeedOut': 500,
                    'zoomSpeedChange': 300,
                    'zoomOpacity': 0.5,
                    'overlayOpacity': 0.5,
                    'easingIn' : 'easeOutBack',
                    'easingOut'        : 'easeInBack',
                    'overlayShow': true
                    }
                    );
     
                    $("div#bbvideo a").fancybox(
                    {
                    'zoomSpeedIn': 800,
                    'zoomSpeedOut': 500,
                    'zoomSpeedChange': 800,
                    'zoomOpacity': 0.5,
                    'overlayOpacity': 0.5,
                    'overlayShow': true
                    }
                    );
            });
       </script>
     
     
    </head>
     
    <body>
    <div id="icon_button" style="left:0px;position:fixed;top:19px;" >
    	<a class="facebook" target="_blank" href="https://www.facebook.com/pages/Briten-vom-Zeisigwald/419188498172246" title="Besuch uns bei Facebook"></a><br/>
    	<a class="rss" title="News abonieren" href="index.php?news-rss" target="_blank"></a><br/>
    	<a class="ts" href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'" title="Kontaktiere uns"></a>
    </div>
    <div id="light" class="white_content">
    	<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'" class="closed" title="Fenster schlieen"></a><br><br>
    	<!-- Anfang TS Code -->
    	<a href="index.php?contact"><img src="http://www.vomzeisigwald.de/include/downs/upload/Zeisigwald/kontakt.png" alt="Kontakt" border="0"> </a>
    	<!-- Ende TS Code -->
    </div>
    <div id="fade" class="black_overlay"></div>
    <table cellpadding="0" cellspacing="0" width="100%"><!-- GRUNDTABELLE ANFANG -->
    	<tr>
    		<td align="center">
    			<div id="top">
    				<div id="header">
    					<div style="float:left;" id="tagcloud"></div><!-- Hier stand "<'?'/div>" -->
    					<div id="bildseite">{_if_{SESSION_AUTHRIGHT}<='-1'} <b><font size="-2"></font></b>{_boxes_tagcloud} {_else_} {_boxes_tagcloud} {/_endif}</div>
    				</div><!-- Hier war ein geschlossener div zuviel, oder der in 128 mit dem fragezeichen gehrt da nicht hin -->
    			</div>
    	 
    			<div id="center">
    				<div id="left_col">
    					<input type="button" name="Livecam" value="Webcam" onclick="window.open('http://doyo26.ddns-instar.de/main.htm','Webcam','width=880, height=680, toolbar=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes');"><input type="button" name="showchat" value="Webchat" onclick="window.open('index.php?ajaxchat&iframe=false','Chat','width=720, height=520, toolbar=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes');">
    					<br><br>
    						{_list_menunr1@
    						<table cellpadding="0" cellspacing="0" border="0" width="160">
    							<tr>
    								<td style="height: 31px; background: url(include/designs/Zeisigwald/img/box_left_top.jpg) top left no-repeat;"><b class="menu_heading">%1</b>
    								</td>
    							</tr>
    							<tr>
    								<td style="background: url(include/designs/Zeisigwald/img/box_left_middle.jpg) top left repeat-y; padding: 5px; align="left">%2
    								</td>
    							</tr>
    							<tr>
    								<td style="height: 8px; background: url(include/designs/Zeisigwald/img/box_left_bottom.jpg) bottom left no-repeat;">
    								</td>
    							</tr>
    						</table>
    						}
    				</div><!-- Left_col ENDE -->
    				<div id="main_col">
    					<table width="715" cellpadding="0" cellspacing="0" border="0">
    						<tr>
    							<td style="min-height:-30px;padding: 0px;" colspan="5">
    							<b>
    							<p align="center">
    							<div align="center">{_boxes_freunde}</div><!-- Was das fr eine Box ?? -->
    							<center></center><!-- Wofr ein leerer Center ? -->
    							</p>
    								<table width="100%" border="0" cellspacing="0" cellpadding="0"><!-- Tabelle ohne Inhalt ?? -->
    									<tr>
    										<td width="20%"></td>
    									</tr>
    								</table><!-- Tabelle ohne Inhalt ENDE ?? -->
    								<br>
    							</b>{EXPLODE}<br>
    							</td>
    						</tr>
    					</table>
    				</div><!-- MAIN COL ENDE -->
    			</div><!-- Div CENTER ENDE -->
    			<!-- </div> ein Div zuviel geschlossen -->
    			  <div align="center"></div><!-- Noch ein Div ohen Inhalt -->
    			<!-- </div> Geschlossen aber was ?? Zuviel -->
    			<div id="footer"><br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#ffffff"><font size="-2">Copyright  2013 vomzeisigwald.de Britisch Kurz und Langhaar Katzen aus Sachsen.<a href="/index.php?rules"><b><font size="-2"><font color="#ffffff">Impressum</font></font></b></a>
    			</div><!-- FOOTER ENDE -->
    			<!--
    			</div>
    			</div>   2 geschlossene divs ohne das es ein anfang gibt -->
    		</td>
    	</tr>
    </table><!-- GRUNDTABELLE ENDE -->
     
    <script type="text/javascript">
    var state = 0;
    var wait = false;
     
    function changeSlider2()
    {
    if(state==1){
    $('#game_slid').animate({width: 335 }, "slow", function(){state = 0;}
    );
    }
    else
    $('#game_slid').animate({width: 556 }, "slow", function(){state = 0;}
    );
    }
     
    $('#game_slid').click(function(){
    changeSlider2();
    });
    </script>
     
    </body>
    </html> 
     
    		<!-- Die Menanweisung gehrt hinter dem </html> ---->
             <!--
                                            {_list_DDDmenupoint@
                                              <strong><big>&middot;</big></strong>
                <a %1 class="box" href="%2">%3</a>
                <br />
                                            }
              //-->
     
              <!--
                [null, '%3', '%2', '%1', null|],|,
              -->
              <!--           anfang        +     link                |ende |teilende|teilee  -->
              <!-- horizontaler menupunkt -->
              {_list_hmenupoint@<li><a target="%1" class="box" href="%2">%3</a>|</li>|<br />|</ul></li>}
              <!-- horizontaler menupunkt anfang -->
              {_list_hmenubegi@<ul>}
              <!-- horizontaler menupunkt ende -->
              {_list_hmenuende@</ul>}
     
              <!-- vertikaler menupunkt -->
              {_list_vmenupoint@<li><a target="%1" class="box" href="%2">%3</a>|</li>|<br /><ul>|</ul></li>}
              <!-- vertikaler menupunkt anfang -->
              {_list_vmenubegi@<ul>}
              <!-- vertikaler menupunkt ende -->
              {_list_vmenuende@</ul>}


    Ich hab dir jetzt mal versucht die index nach zu arbeiten, alte sichern und mal die neue ausprobieren.
    In dem Code befinden sich kommentare was ich geändert hab, was ausskommentiert wurde oder auch fragwürdig ist.

    Als anmerkung noch nebenbei, du nutzt html4.1 anstatt xhtml, du nutzt tabellen sowie divs als layout mittel und html tags die so nicht mehr verwendet werden.

    Vernünftig wäre das Layout nochmal von der Pike an neu zu schreiben und auf nen sauberen Code zu achten.

    Greetz Wizz
    0 Mitglieder finden den Beitrag gut.
  11. #11
    User Pic
    Zeisig Mitglied
    Registriert seit
    05.03.2013
    Beitrge
    229
    Beitragswertungen
    2 Beitragspunkte
    habs mal ausprobiert aber leider fehlt dann die ganze mitte. Hab das vor Jahren mal gebastelt und mich da wieder rein zu finden das muss ich mal sehen ob ich das noch auf die Reihe bringe. Hab schon schwierigkeiten genug so lcheln
    0 Mitglieder finden den Beitrag gut.
  12. #12
    User Pic
    Wizzard26 Mitglied
    Registriert seit
    05.03.2009
    Beitrge
    259
    Beitragswertungen
    33 Beitragspunkte
    Da scheint dann wo ganz anders noch ein problem zu sein.
    Hab gerade nur mal die index mit css auf 2 testsystemen ausprobiert. Von der Grundstruktur passt es, wie es mit hintergrundbildern aussieht kann ich so natürlich nicht sagen.

    Wenn du im Design noch irgendwelche abgeänderte template dateien hast kann das auch zu fehlern führen, genauso wenn die box die im Contentbereich mit drinn ist ein fehler hat.

    Da gibts dann also nur zwei möglichkeiten, entwederdu packst alles einmal zusammen und lässt jemanden drüber sehen oder nen zugriff auf dem Server um das zu Kontrollieren.
    0 Mitglieder finden den Beitrag gut.
  13. #13
    User Pic
    Zeisig Mitglied
    Registriert seit
    05.03.2013
    Beitrge
    229
    Beitragswertungen
    2 Beitragspunkte
    Danke Wizard für Deine Mühen. Ich werd das über die Grafik direkt machen. Aber wenn Du meinst das Du es schaffen würdest und wirklich Lust und Laune und zeit hast geb ich Dir auch gerne Zugriff auf den ftp. Kannst mich gerne anschreiben. lcheln
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurck zu Design und Templates

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten