ilch Forum » Ilch Clan 1.1 » Design und Templates » Überlagerter Header

Geschlossen
  1. Di. 21.12.2010 08:38 Uhr #1
    User Pic
    avee030 Mitglied
    Registriert seit
    07.09.2008
    Beiträge
    59
    Beitragswertungen
    0 Beitragspunkte
    Guten Morgen ,

    ich bin grad dabei mein erstes Design zu basteln
    (fast ausschließlich mit Infos aus diesem Forum --- Danke lächelnlächeln

    Jetzt hab ich allerdings mein erstes Problem
    Als Header habe ich ein Flash mit einem PNG überlagert und die buttons verlinkt , läauft auch fast alles wie geünscht

    (schaut nicht so auf den Quelltext , das ist die erste Fassung
    und sind jede menge Fehler drin :S)

    wenn ich allerdings das Browserfenster verkleiner dann verschiebt sich das Design ( der Bereich unter dem Header wird automatisch angepasst , der Header bleibt jedoch groß )

    wie bekomme ich das hin das die gesamte Seite sich automatisch anpasst ?

    Danke für die Hilfe .

    Avee

    hier mal die Index : 
    </head>

<body background="include/designs/avee/bilder/bg-body.gif" style=margin:0  >






<!-- platzhalter -->

 <table width="1024" border="0" align="center" cellpadding="0" cellspacing="0">
   <tr>
    <td>
    <table width="50" height="25" border="0" align="center" valign="top">
    </table>
    </td>
   </tr>


<!-- neu -->

   <table width="1024" border="0" align="center" cellpadding="0" cellspacing="0">



<!-- flash header  -->
     <table border="0" align="center">
     <tr>
     <td width="1024" high="336" align="center">

      <div id="flashContent">
                        <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="1024" height="336" id="header" align="middle">
                                <param name="movie" value="header.swf" />
                                <param name="quality" value="high" />
                                <param name="bgcolor" value="#ffffff" />
                                <param name="play" value="true" />
                                <param name="loop" value="true" />
                                <param name="wmode" value="transparent" />
                                <param name="scale" value="showall" />
                                <param name="menu" value="true" />
                                <param name="devicefont" value="false" />
                                <param name="salign" value="" />
                                <param name="allowScriptAccess" value="sameDomain" />
                                <!--[if !IE]>-->
                                <object type="application/x-shockwave-flash" data="header.swf" width="1024" height="336">
                                        <param name="movie" value="header.swf" />
                                        <param name="quality" value="high" />
                                        <param name="bgcolor" value="#ffffff" />
                                        <param name="play" value="true" />
                                        <param name="loop" value="true" />
                                        <param name="wmode" value="transparent" />
                                        <param name="scale" value="showall" />
                                        <param name="menu" value="true" />
                                        <param name="devicefont" value="false" />
                                        <param name="salign" value="" />
                                        <param name="allowScriptAccess" value="sameDomain" />
                                <!--<![endif]-->
                                        <a href="http://www.adobe.com/go/getflash">
                                                <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash Player" />
                                        </a>
                                <!--[if !IE]>-->
                                </object>
                                <!--<![endif]-->
                        </object>

                </div>

 <img src="include/designs/avee/bilder/test.png" alt"" id="menu" usemap="#Map1" />

   <map name="Map1" id="Map1">
        <area shape="rect" coords="75,290,160,325" href="index.php?user-regist" />
         <area shape="rect" coords="195,290,260,325" href="index.php?user-3" />
          <area shape="rect" coords="290,290,350,325" href="index.php?news"  />
           <area shape="rect" coords="380,290,455,325" href="index.php?forum" />
            <area shape="rect" coords="495,290,555,325" href="index.php?groups" />
             <area shape="rect" coords="585,290,655,325" href="index.php?gbook" />
              <area shape="rect" coords="700,290,770,325" href="index.php?gallery" />
               <area shape="rect" coords="790,290,870,325" href="index.php?joinus" />
                <area shape="rect" coords="780,325,890,400" href="index.php?joinus" />  </map>







</td>
</tr>


         <table>
                 <tr>
                 <td width="200" high="27"></td>
                      </tr>
                       <table  style="background-image:url(include/designs/avee/bilder/bg_content.gif)" align="center">

<!-- linke tabelle seite anfang -->
<tr> <td> <table width="10" height="10" border="0" align="center" valign="top"> </table> </td>
<!-- linke tabelle seite ende -->




<!-- menu 1 links anfang  -->



                                 <td width="193" height="57" align="center" valign="top">{_list_menunr1@
                                         <table width="100%" border="0" cellspacing="0" cellpadding="0">

                               <tr><td> <table width="10" height="25" border="0" align="center" valign="top"> </table></tr>

                                         <tr>
                                          <td height="30" align="center" valign="middle"</td> </tr>
                                          <tr>
                                         <td height="69" align="center" valign="middle" background="include/designs/avee/bilder/header_linke_box.jpg">%1</td>
                                         </tr>
                                         <tr>
                                         <td align="center" valign="top" background="include/designs/avee/bilder/mitte_linke_box.jpg"><table width="90%" border="0" cellspacing="0" cellpadding="0">
                                         <tr>
                                         <td>%2</td>
                                         </tr>
                                 </table></td>
                                 </tr>
                                 <tr>
                                 <td height="10" background="include/designs/avee/bilder/footer_linke_box.jpg">&nbsp;</td>
                                 </tr>
                         </table>
                         }</td>


<!-- menu 1 links ende  -->


<!-- content anfang  -->




                         <td width="718" align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">



                         <tr>




                          <td> <table width="10" height="70" border="0" align="center" valign="top"> </table>  </tr>


                                 <td height="55" align="center" valign="middle" background="include/designs/avee/bilder/header_content.jpg"><table width="90%" border="0" cellspacing="0" cellpadding="0">
                                 <tr>
                                 <td>{HMENU}</td>
                         </tr>
                 </table></td>
                 </tr>
                 <tr>
                 <td align="center" valign="top" background="include/designs/avee/bilder/mitte_content.jpg"><table width="95%" border="0" cellspacing="0" cellpadding="0">
                 <tr>
                 <td align="left" valign="top">{EXPLODE}</td>
                 </tr>
         </table></td>
         </tr>
         <tr>
        <td height="10" background="include/designs/avee/bilder/footer_content.jpg">&nbsp;</td>
         </tr>
         </table>
<!-- content ende -->

<!-- rechte tabelle seite anfang -->
<td><table width="10" height="57" border="0" align="center" valign="top"></table> </td><tr>
<!-- rechte tabelle seite ende -->



<!-- uebergang anfang -->

  <table width="949" height="55" border="0" style="background-image:url(include/designs/avee/bilder/stripe.jpg)" align="center" valign="top"></table>

<!-- uebergang ende -->   </tr>




  </td>




  <tr>



<!-- menu 2 links anfang -->


<table width="949"  style="background-image:url(include/designs/avee/bilder/bg_unten.jpg)" valign="top" align="center">



        <td width="300" height="57" align="center" valign="top">{_list_menunr2@
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td height="20" align="center" valign="middle" background="include/designs/avee/bilder/header_linke_boxu.jpg">%1</td>
        </tr>

    <tr>
        <td align="center" valign="top" background="include/designs/avee/bilder/mitte_linke_boxu.jpg">
        <table width="90%" border="0" cellspacing="0" cellpadding="0">
         <tr>
                 <td>%2</td>
         </tr>
         </table></td>
        </tr>
    <tr>
      <td height="20" background="include/designs/avee/bilder/footer_linke_boxu.jpg">&nbsp;</td>
             </tr>
                 </table>
                         }</td>


<!-- menu 2 links ende -->


<!-- unten mitte anfang -->


<!--
 <table width="980" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td align="right"><span class="button" onclick="scrollup()">Top</span>
      <map name="Map" id="Map">
        <area shape="rect" coords="809,105,928,127" href="http://www.dab-fx.de" target="_blank" />
      <area shape="rect" coords="656,107,776,125" href="http://www.blizzard.com" />
      </map></td>
  </tr>
</table>


 -->

     <td><table width="308" height="320" border="0" align="center"  valign="top" style="background-image:url(include/designs/avee/bilder/mitte.jpg)" usemap="#Map"  id="Map"  >



         <td align="top"><span class="button" onclick="scrollup()">Top</span>
      </td>








          </table> </td>




<!-- unten mitte ende -->


<!-- menu 3 rechts anfang -->


           <td width="300" height="57" align="center" valign="top">{_list_menunr3@
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td height="20" align="center" valign="middle" background="include/designs/avee/bilder/header_rechte_boxu.jpg">%1</td>
        </tr>

    <tr>
        <td align="center" valign="top" background="include/designs/avee/bilder/mitte_rechte_boxu.jpg">
        <table width="90%" border="0" cellspacing="0" cellpadding="0">
         <tr>
                 <td>%2</td>
         </tr>
         </table></td>
        </tr>
    <tr>
      <td height="10" background="include/designs/avee/bilder/footer_rechte_boxu.jpg">&nbsp;</td>
             </tr>
                 </table>
                         }</td>


<!-- menu 3 rechts ende -->


                         </tr>
                         <tr>
                         <td colspan="3" align="center" valign="top">

                            <a href="http://www.gametracker.com/server_info/85.131.247.39:28930/" target="_blank">
                  <img src="http://cache.www.gametracker.com/server_info/85.131.247.39:28930/b_560_95_1.png" border="0" width="560" height="95" alt=""/></a>


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








<!-- footer link -->


         <table width="980" border="1" align="center" cellpadding="0" cellspacing="0">
                 <tr>
                 <td align="center">


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

<!-- ueberlagerte bilder -->


  <!--<img src="include/designs/avee/bilder/soldier.gif" alt"" id="bild" />
  <img src="include/designs/avee/bilder/note.gif" alt"" id="note" />
   <img src="include/designs/avee/bilder/head.gif" alt"" id="head" />  -->
    <map name="Map" id="Map">
                 <area shape="rect" coords="809,105,928,127" href="http://" target="_blank" />
                 <area shape="rect" coords="656,107,776,125" href="http://" />
                 </map>
</body>
</html>





          <!-- beispiel:
            [null, '%3', '%2', '%1', null|],|,
          -->
          <!--           anfang        +     link                |ende |teilende|teilee  -->
          <!-- horizontaler menupunkt -->

          <!-- horizontaler menupunkt anfang -->
          {_list_hmenubegi@}
          <!-- horizontaler menupunkt ende -->
          {_list_hmenuende@}

          <!-- vertikaler menupunkt -->
          {_list_vmenupoint@<li><a target="%1" class="box" href="%2">%3</a>|</li>|<br /></li>}
          <!-- vertikaler menupunkt anfang -->
          {_list_vmenubegi@<ul>}
          <!-- vertikaler menupunkt ende -->
          {_list_vmenuende@</ul>}


    betroffene Homepage: externer Link
    0 Mitglieder finden den Beitrag gut.
  2. Di. 21.12.2010 10:20 Uhr #2
    User Pic
    kdl Mitglied
    Registriert seit
    21.08.2010
    Beiträge
    333
    Beitragswertungen
    62 Beitragspunkte
    Moin,

    das liegt wohl daran, dass sich Flash und Bilder nicht automatisch anpassen. Habe bis jetzt noch keine Seite gesehen, wo die automatisch kleiner werden.
    Wenn du die Seite mal kleiner machst, wirst du auch sehen, dass ab einer bestimmten Größe Schluss ist. Nämlich dann, wenn das Video auf eurer Seite in seiner Breite den kompletten Content Bereich einnimmt. Auch das wird nicht mehr kleiner.

    MfG, kdl
    .
    0 Mitglieder finden den Beitrag gut.
  3. Di. 21.12.2010 11:04 Uhr #3
    User Pic
    avee030 Mitglied
    Registriert seit
    07.09.2008
    Beiträge
    59
    Beitragswertungen
    0 Beitragspunkte
    kann ich die breite vom menu und content dann festlegen damit die breite einheitlich ist?

    es ist besser wenn man scrollt als das sich das design dann verzerrt .
    0 Mitglieder finden den Beitrag gut.
  4. Di. 21.12.2010 11:31 Uhr #4
    User Pic
    kdl Mitglied
    Registriert seit
    21.08.2010
    Beiträge
    333
    Beitragswertungen
    62 Beitragspunkte
    Du hast jetzt nur das Problem, dass sich deine ganzen Tabellen und divs unterschiedlich ausrichten, da sie unterschiedlich groß sind.
    Könntest versuchen, bei allen table Tags das 'align="center"' raus zu nehmen. Dafür könntest du dann alle Tabellen und divs in ein großes div packen, sodass nach dem body direkt das div kommt.
    Dem div weist du dann folgendes zu:
    style="width:1024px; text-align:center;"
    .
    0 Mitglieder finden den Beitrag gut.
  5. Mi. 22.12.2010 14:35 Uhr #5
    User Pic
    avee030 Mitglied
    Registriert seit
    07.09.2008
    Beiträge
    59
    Beitragswertungen
    0 Beitragspunkte
    die idee brachte leider nichts
    ist genau der gleiche effect

    alles passt sich an nur das überlagerte Bild nicht das verschiebt sich weiterhin

    bzw. eigentlich ist es ja genau anders rum
    das bild steht fest und der rest schiebt grumml


    Zuletzt modifiziert von avee030 am 22.12.2010 - 15:15:16
    0 Mitglieder finden den Beitrag gut.
  6. Mi. 22.12.2010 16:09 Uhr #6
    User Pic
    Lord|Schirmer Administrator
    Registriert seit
    21.03.2007
    Beiträge
    7.634
    Beitragswertungen
    1193 Beitragspunkte
    Gib mal der ID flashContent ein overflow! Siehe hier! Vielleicht hilft Dir das weiter!

    ... und Zeile 30 -> high="336" zu height
    rules :: doku :: faq :: linkus
    0 Mitglieder finden den Beitrag gut.
  7. Mi. 22.12.2010 18:49 Uhr #7
    User Pic
    avee030 Mitglied
    Registriert seit
    07.09.2008
    Beiträge
    59
    Beitragswertungen
    0 Beitragspunkte
    das flash verhält sich ja so wie es soll , das ist ok
    es geht um das PNG was darüberliegt
    das hält immer den gleichen abstand zum rand wenn das browserfenster verkleinert wird und "rutsch" dadurch weg
    0 Mitglieder finden den Beitrag gut.
  8. Mo. 27.12.2010 19:05 Uhr #8
    User Pic
    Jan Hall Of Fame
    Registriert seit
    17.01.2007
    Beiträge
    3.646
    Beitragswertungen
    54 Beitragspunkte
    Schreib in der CSS-Datei bei body mal min-width:1180px; .
    0 Mitglieder finden den Beitrag gut.
  9. Di. 28.12.2010 14:29 Uhr #9
    User Pic
    avee030 Mitglied
    Registriert seit
    07.09.2008
    Beiträge
    59
    Beitragswertungen
    0 Beitragspunkte
    grazie, dank u wel, merci, thank you, gratias ago
    .... oder einfach nur =DANKE=

    das wars, min auf 1140 gesetzt, jetzt gehts
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu Design und Templates

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten