XHTMLforum - Einzelnen Beitrag anzeigen - Div-Anordnung unterschiedlich

AndMei · #1 (**permalink**) 15.12.2010, 19:42

Servus,

Ich habe für einen Bekannten ein Design in seine Webseite (Script) umgesetzt und eingebaut.

Wenn man die Startseite aufruft oder wenn man sich dann ausgeloggt hat, sind die Boxen verschoben. Statt nebeneinander (linkes Menu, Content, rechtes Menu) sind die Boxen untereinander.

Bild --> http://www.vm-host.de/bilder/ausgeloggt.jpg

Wenn man sich aber einloggt bzw. eingeloggt ist, so werden die Boxen richtig angezeigt.

Bild --> http://www.vm-host.de/bilder/login.jpg
Bild --> http://www.vm-host.de/bilder/login2.jpg

hier nun mal die style.css wo alles für das Script und die Seiten definiert ist.

Code:

body {
        background:url(img/spielearena/bg.png) repeat-x #370303;
        color: #c0c0c0;
        font-size: 12px;
        font-family: sans-serif;
        margin: 0;
        padding: 0;
        height:100%;

}

a {
        color: #c0c0c0;
        text-decoration: none;
}

a:hover {
        color: #c0c0c0;
        text-decoration: underline;
}

img {
        border: 0;
}

input, select, textarea, select {
        border: 1px solid black;
        background-color: #ffffff;
        font-weight: bold;
}

table {
        text-align: left;
}

#main {
        background-image:url(img/spielearena/main_bg.png);
        background-repeat: repeat-y;
        width: 1000px;
        margin: 0px auto;
        padding: 0;
        position: relative;
}

#header {
        background-image:url(img/spielearena/header_bg.jpg);
        background-repeat: no-repeat;
        position: relative;
        width: 1000px;
        height: 156px;
}

#navigation {
        width:1000px;
        clear:both;
        height: 32px;
        position: relative;
        top: 42px;
        left: 13px;
}

#contentwrap {
        position:relative;
        float:left;
        margin: 0px auto;
        width: 1000px;
        background-image:url(img/spielearena/main_bg.png);
        background-repeat: repeat-y;
        z-index:0;
}

#konto_info {
        position: relative;
        width: 256px;
        height: 116px;
        background-image: url(img/design/kontoinfo.png);
        z-index: 3;
        right: 30px;
        top: 20px;
}

#konto_text {
        position: relative;
        top: 30px;
        width: 220px;
        height: 70px;
        left: 15px;
        padding: 0;
        border-collapse: collapse;
        font-size: 10px;
}

/*#header_left {
        position: relative;
        width: 168px;
        z-index: 1;
}*/

#leftmenu_head {
        background-image: url(img/spielearena/menu_head.png);
        background-repeat: no-repeat;
        height: 48px;
        width: 168px;
        position: relative;
}

#leftmenu_middle {
        background-image: url(img/spielearena/menu_middle.png);
        background-repeat: repeat-y;
        width: 168px;
        position: relative;
}

#leftmenu_footer {
        background-image: url(img/spielearena/menu_footer.png);
        background-repeat: no-repeat;
        width: 168px;
        height: 30px;
        position: relative;
}

#rotator {
        position: relative;
        top: 40px;
        left: 225px;
        z-index: 5;
}

#pinboard {
        position: relative;
        top:1px;
        left:0px;
        width:145px;
        height:44px;
        line-height:22px;
        font-size:10px;
}


#login {
       position: relative;
       float:left;
       left: 750px;
       top:75px;
       width: 230px;
       height: 80px;
}


#pinboard_content {
        position: relative;
        height:44px;
        font-weight: bold;
        font-size: 10px;
        line-height:22px;
        color: #150185;
}

#pinboard_content a {
        color: #150185;
}



#content {
        position: relative;
        float:left;
        left: 15px;
        width: 630px;
        top: 0px;
}

*.box {
        position: relative;
        top:0px;
        width: 630px;
        left: 2px;
}

*.box_title {
        text-align: left;
        color: #e1ca69;
        position: relative;
        top: 23px;
        left: 35px;
        font-weight: bold;
}

*.box_head {
        background-image: url(img/spielearena/content_head.png);
        background-repeat: no-repeat;
        height: 48px;
}

*.box_middle {
        background-image: url(img/spielearena/content_middle.png);
        background-repeat: repeat-y;
}

*.box_content {
        text-align: center;
        width: 560px;
}

*.box_footer {
        background-image: url(img/spielearena/content_foot.png);
        background-repeat: no-repeat;
        height: 30px;
}

#leftmenu {
        position: relative;
        float:left;
        left: 13px;
        width: 168px;
}

#leftmenu_title {
        color: #e1ca69;
        text-align: left;
        position: relative;
        top: 23px;
        left: 35px;
        font-weight: bold;
}

*.menucontent {
        font-size: 14px;
        font-family: Tahoma Regular;
        line-height: 22px;
        width: 135px;
        color: #e1ca69;
}

*.submenucontent {
        position:relative;
        font-size: 14px;
        font-family: Tahoma Regular;
        line-height: 22px;
        position: relative;
        left: 20px;
        width: 145px;
        color: #e1ca69;
}

*.submenucontent a {
        display: block;
        color: #e1ca69;
        font-weight:normal;
        line-height:22px;

}

#shoutbox {
        height: 520px;
        width: 480px;
        background: url(img/design/bg.jpg) repeat-x #ffffff;
}

#rightmenu {
        position: relative;
        float: right;
        width: 168px;
        right: 13px;
}

#rightmenu_title {
        text-align: left;
        position: relative;
        top: 23px;
        left: 35px;
        font-weight: bold;
}

#rightmenu_head {
        background-image: url(img/spielearena/menu_head.png);
        background-repeat: no-repeat;
        height: 48px;
}

#rightmenu_middle {
        background-image: url(img/spielearena/menu_middle.png);
        background-repeat: repeat-y;
        width: 168px;
        line-height:22px;
}

#rightmenu_bottom {
        background-image: url(img/spielearena/menu_footer.png);
        background-repeat: no-repeat;
        width: 168px;
        height: 30px;
}

*.rightmenucontent {
        position: relative;
        width: 145px;
        top: 0px;
        left: 15px;
        text-align: left;
        font-size: 14px;
        font-family: Tahoma Regular;
        line-height: 22px;
        color: #e1ca69;
}

*.rightmenucontent a {
        display: block;
}

*.wiw_admin {
        color: #ff0000;
        font-weight: bold;
}

*.wiw_male {
        color: #429afc;
}

*.wiw_female {
        color: #f196f9;
}

#footer {
        clear:both;
        margin:0px auto;
        background-image: url(img/spielearena/footer.png);
        background-repeat: no-repeat;
        width: 1000px;
        height: 50px;
        position: relative;
}

*.footer_content {
        position: relative;
        text-align: center;
        top: 10px;
}

#nickpage_text {
        text-align: left;
        position: relative;
        left: 25px;
}
#nickpage_avatar {
        position: absolute;
        right: 50px;
        top: 50px;
}

#showpn {
        visibility: hidden;
        width: 350px;
        height: 100px;
        border: 1px solid #000;
        background-color: #ffffff;
        position: absolute;
        z-index: 5;
        top: 250px;
        left: 100px;
        padding: 10px 10px;
}
.mooquee {
        border: solid 2px #C0C0C0;
        padding: 5px;
        /* don't change */
        position: relative;
        overflow: hidden;
        white-space: nowrap;
}
.mooquee-text {
        /* don't change */
        position: relative;
}

.games_bold {
        font-weight: bold;
        color: #7CFC00;
}
.games_red {
        color: #FF0000;
        font-weight: bold;
}


#globalticker {
        top: 180px;
        left: 220px;
        z-index: 5;
        height: 20px;
        width: 500px;
}

#maxi {
        position: absolute;
        left: 508px;
        top: 77px;
}
#maxi2 {
        position: absolute;
        left: 510px;
        top: 79px;
}

hier der code für die template-datei "default.tpl"

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de" dir="ltr">
 <head>

  <script language="JavaScript" type="text/javascript">
  <!--
   function onImage(what) {
        document.images[what].src='img/design/button_'+what+'_hover.png';
   }
   function offImage(what) {
        document.images[what].src='img/design/button_'+what+'.png';
   }
  -->
  </script>
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="expires" content="Wed, 20 Feb 2000 08:30:00 GMT" />
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15"/>
  <title>%config_sitetitle%</title>
  <css>%config_style%</css>
  %popup%
 </head>
 <body>
 <div id="main">
<div id="contentwrap">
 <div id="header">
 <div id="login">
         <form name="login" action="page.php?cat=default&amp;p=login_do" method="post">
         <div style="position:absolute; top:30px; width:40px; text-align:right;"><font color="blue"><b>ID:</b></font></div>
         <div style="position:absolute; top:29px; left:57px; width:115px;"><font color="blue"><input type="text" name="u_id" lenght="10" style="background : transparent;  width:100px; border:0px;" size="30" value="Deine ID"  onclick="value=''" /></font></div>
         <div style="position:absolute; top:57px; width:40px; text-align:right;"><font color="blue"><b>PW:</b></font></div>
         <div style="position:absolute; top:55px; left:57px; width:115px; z-index: 4;"><font color="blue"><input type="password" name="u_pwd" height="10" lenght="10" style="background: transparent; width:100px; border:0px;" size="30" value="" onclick="value=''" /></font></div>
         <div style="position:absolute; top:25px; left:183px; border:0px; width:51px; height:51px; z-index: 4;"><input type="image" src="img/spielearena/go.png" alt="Go" border="0" style="background:transparent; border:0px; width:51px; height:51px;"></div>
         <div style="position:absolute; top:78px; left:105px; width:140px; z-index: 4;"><a href="page.php?cat=default&amp;p=forgotpwd"><font size="1" color="blue">Passwort vergessen?</font></a></div>
         </form>
</div>
 <div id="maxi">
<font color="#00045e" size="5"><b><format>%globalpot_big%</format></b></font>
</div>
<div id="maxi2">
<font color="#3ccd38" size="5"><b><format>%globalpot_big%</format></b></font>
</div>
         <div id="navigation">
         <a href="page.php" title="Startseite"><img src="img/spielearena/startseite.png" title="Startseite" border="0" /></a><a href="page.php?cat=games&p=home" title="Unsere Games"><img src="img/spielearena/games.png" title="Unsere Games" border="0" /></a><a href="page.php?p=media" title="Mediadaten"><img src="img/spielearena/mediadaten.png" title="Mediadaten" border="0" /></a><a href="page.php?cat=games&amp;p=jackpots" title="Gewinner"><img src="img/spielearena/gewinner.png" title="Gewinner" border="0" /></a>
         </div>
 </div>
 <if var="loggedon" value="1"><then>
 <!--
 <div id="konto_info">
  <table id="konto_text" border="0">
   <tr><td>Konto</td><td><span id="usrkonto"><format>%usrkonto%</format></span> %config_curname%</td></tr>
   <tr><td>Bonus</td><td><span id="usrbonus"><format>%usrbonus%</format></span> Bonus%config_curname%</td></tr>
   <tr><td>Aktivit&auml;t</td><td><span id="usrap"><format>%usrap%</format></span> APs<br /><span id="usrap_all"><format>%usrap_all%</format></span> APz</td></tr>
   <tr><td><a href="page.php?cat=bank&amp;p=tresor">Tresor</a></td><td><span id="usrtresor"><format>%usrtresor%</format></span> %config_curname%</td></tr>
  </table>
 </div>
 -->
</then></if>
<include>json</include>
 <!--<include>globalticker</include> -->

 <!-- HeaderNavi -->

 <!--
 <div id="nav_home"><img src="img/design/button_home.png" id="home" alt="Home"/></div>
 <div id="nav_media"><img src="img/design/button_media.png" id="media" alt="Media" /></div>
 <div id="nav_agb"><img src="img/design/button_agb.png" id="agb" alt="AGB" /></div>
 <div id="nav_faq"><img src="img/design/button_faq.png" id="faq" alt="FAQ" /></div>
 <div id="nav_impressum"><img src="img/design/button_impress.png" id="impress" alt="Impressum" /></div>
 <div id="nav_jp_winner"><img src="img/design/button_jp.png" id="jp" alt="Jackpots" /></div>
 <if var="loggedon" value="1"><then><div id="nav_login"><img src="img/design/button_logout.png" id="logout" alt="LogOut" /></div>
 </then><else><div id="nav_login"><img src="img/design/button_login.png" id="login" alt="LogIn" /></div></else></if>
 <div id="rotator"><if var="tpl_banner" value="none"><then></then><else>%tpl_banner%</else></if></div>
 -->
<!-- Making links for menu from transparent pictures -->
<!--
 <div id="home_trans"><a href="page.php" onmouseover="onImage('home');" onmouseout="offImage('home');"><img src="img/design/transparent.png" border="0" alt="Home" /></a></div>
 <div id="media_trans"><a href="page.php?p=media" onmouseover="onImage('media');" onmouseout="offImage('media');"><img src="img/design/transparent.png" border="0" alt="MediaDaten" /></a></div>
 <div id="agb_trans"><a href="page.php?p=agb" onmouseover="onImage('agb');" onmouseout="offImage('agb');"><img src="img/design/transparent.png" border="0" alt="AGB" width="80" height="55" /></a></div>
 <div id="faq_trans"><a href="page.php?p=faq" onmouseover="onImage('faq');" onmouseout="offImage('faq');"><img src="img/design/transparent.png" border="0" alt="FAQ" width="80" height="55" /></a></div>
 <div id="impressum_trans"><a href="page.php?p=about" onmouseover="onImage('impress');" onmouseout="offImage('impress');"><img src="img/design/transparent.png" border="0" alt="Impressum" /></a></div>
 <div id="jp_winner_trans"><a href="page.php?cat=games&amp;p=jackpots" onmouseover="onImage('jp');" onmouseout="offImage('jp');"><img src="img/design/transparent.png" border="0" alt="Jackpot Gewinner" /></a></div>
 <if var="loggedon" value="1"><then><div id="login_trans"><a href="page.php?p=logout" onmouseover="onImage('logout');" onmouseout="offImage('logout');"><img src="img/design/transparent.png" border="0" alt="LogOut" width="60" height="55" /></a></div>
</then><else><div id="login_trans"><a href="page.php?p=login" onmouseover="onImage('login');" onmouseout="offImage('login');"><img src="img/design/transparent.png" width="60" height="55" border="0" alt="LogIn" /></a></div></else></if>
-->
<!-- building navigation -->

  <include>leftmenu</include>
 <div id="content">
  <include>%page%</include>
 </div>
 <div id="rightmenu">
  <include>rightmenu</include>
  </div>
  </div>
 </div><include>footer</include>
 </div>
 </body>
</html>

Je nachdem, ob man eingeloggt ist, wird die Datei home_guest.tpl

HTML-Code:

<center>
<box title="Herzlich Willkommen auf Spielearena.com"><br><center>
<img src="img/design_neu/startarena.gif" alt="Startseite" height="300" width="520" />
</center><br>
<br>
</box>
</center>

oder home_user.tpl aufgerufen

HTML-Code:

<script language="JavaScript" type="text/javascript">
<!--
function addsmiley(code) {
        var m = document.forms.addshout.msg.value;
        document.forms.addshout.msg.value = m + code;
}
-->
</script>

</then id="25"></if id="25">
<if var="config_sys_mod" value="none" id="22"><then id="22"></then id="22"><else id="22">
<box title="Nachricht des Tages">%config_sys_motd%</box></else id="22"></if id="22">

<div></div>

<box title="User of SpieleArena Auszahlung um 23:45 Uhr"><br>
<table width="90%">
<center><blink><img src="http://www.spielearena.com/arena/img/buotd/uod.gif"></blink></center>
 <tr>
  <td align="left" colspan="4"><b></b></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
 </tr>
   %activ_heute%
</table><br/><br/>
<center><b><a href="page.php?cat=userof"><font color="#FFE500"><font face="Verdana" size="3">User of SpieleArena:</a></font></b></center><br /></font>
<font color="#00FF00"><font face="Verdana" size="3">Tag:  <a href="page.php?cat=nickpage&id=%uotdid%"><b>%uotd%</b></font></font></a>&nbsp&nbsp&nbsp
<font color="#FFFF00"><font face="Verdana" size="3">Woche:  <a href="page.php?cat=nickpage&id=%uotwid%"><b>%uotw%</b></font></font></a>&nbsp&nbsp&nbsp
</box>
<div></div>

<box title="Jackpots">
<div id="jpticker" style="text-align: left;">
 <marquee scrollamount="3" scrolldelay="80"><br />
   <block name="jack_item"><a style="font-size:100%; color:yellow; font-family:Verdana" href="page.php?cat=games&amp;p=%file%"></font><font face="Verdana" size="2">%name%</a></font><font face="Verdana" size="2">: %jackpot% - </block></font>
  </marquee>
 </div>
</box>


<div></div>

<box title="Klick-, Globaljackpot">
<table width="100%" style="text-align: left" border="0">
  <tr><td width="26%" align="left"><font color="#e1ca69">Klickjackpot:</font></td><td width="46%" align="right"><font color="#e1ca69">Zuwachs je Klick 100 Lose</td><td width="28%" align="right"><font color="#3ccd38"><format>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      %klickpot%</format> %config_curname%</font></td></tr>
  <tr><td width="26%" align="left"><font color="#e1ca69">Small Global:</font></td><td width="46%" align="right"><font color="#e1ca69">100&nbsp;&nbsp;Lose bis&nbsp;&nbsp; 75.000 Lose</font></td><td width="28%" align="right"><font color="#3ccd38"><format>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      &nbsp;
      %globalpot_small%</format> %config_curname%</font></td></tr>
  <tr><td width="26%" align="left"><font color="#e1ca69">Middle Global:</font></td><td width="46%" align="right"><font color="#e1ca69">100.000&nbsp;&nbsp;Lose bis 250.000 Lose</font></td><td width="28%" align="right"><font color="#3ccd38"><format>&nbsp;&nbsp;&nbsp;&nbsp;
      &nbsp;
      %globalpot_middle%</format> %config_curname%</font></td></tr>
  <tr><td width="26%" align="left"><font color="#e1ca69">Maxi Global:</font></td><td width="46%" align="right"><font color="#e1ca69">500.000&nbsp; Lose bis&nbsp;&nbsp; 10 Mio. Lose</font></td><td width="28%" align="right"><font color="#3ccd38"><format>&nbsp;&nbsp;
      %globalpot_big%</format> %config_curname%</font></td></tr>
</table>
</box>


<div></div>

<box title="Neu Radio-Funkytown">
<center>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="155" height="70">
              <param name="movie" value="http://www.spielearena.com/arena/flash/clock-22.swf" />
              <param name="quality" value="high" />
              <param name="wmode" value="transparent" />
              <embed src="http://www.spielearena.com/arena/flash/clock-22.swf" quality="high" wmode="transparent"  pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="155" height="70"></embed>
</object><br>
<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/" src="http://sc5.genuinecast.net:8068" width=350 height=70 transparentatstart="1" autostart="0" animationatstart="1" showcontrols="true" showaudiocontrols="1" showpositioncontrols="1" autosize="1" showstatusbar="1" displaysize="1"> </embed></center>
</box>

<div></div>

<box title="Hot News">
 <br>
<center>
<applet code=Vledticker.class width=480 height=30>
<param name=TextFile value="demo.txt">
<param name=ColorBack value=000000>
<param name=ColorLedOff value=444444>
<param name=ColorLeft value=FF6666>
<param name=ColorCenter value=FFFF00>
<param name=ColorRight value=33aaff>
<param name=DotSpace value=1>
<param name=DotStep value=1>
<param name=TicksPerSec value=50>
</applet>
</center>
<br>
</box>

<div></div>

<if var="config_show_shoutbox" value="on" id="25"><then id="25">
<font color="#ff0004"><box title="Support bitte nur Via PN, Hotline oder E-Mail"></font>

<br />
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="420" height="25" id="sbjackpot" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="./flash/sbjackpot.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="./flash/sbjackpot.swf" quality="high" bgcolor="#ffffff" width="420" height="25" name="sbjackpot" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
<br>
<br>
 <iframe src="page.php?cat=shoutbox&amp;p=show" name="shoutframe" id="shoutbox" marginwidth="0" marginheight="0" frameborder="0"></iframe>
 <center><br><div align="center" id="shouts_add">
 <form name="addshout" action="?cat=shoutbox&amp;u=add" method="post" target="shoutframe"><br>
  Nachricht: <input name="msg" type="text" size="60" /> <input type="submit" value="Abschicken" />
 </form><br>
 <block name="smileys">
  <a href="JavaScript:void(0);" onclick="JavaScript:addsmiley('%form%');">%url%</a>
 </block><br /><br />
 [<a href="page.php?cat=default&amp;p=shoutarchive">Archiv</a>]
</div></center>
</box>

Ich verstehe nicht, warum der mir die Boxen im eingeloggtem Zustand korrekt anzeigt/ anordnet während im ausgeloggten Zustand es nicht der Fall ist.

Kann mir jemand erklären, was da falsch läuft?

Danke für Eure Hilfe schonmal im Voraus..