XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Div-Anordnung unterschiedlich - Warum? (http://xhtmlforum.de/showthread.php?t=63262)

AndMei 15.12.2010 19:42

Div-Anordnung unterschiedlich - Warum?
 
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..

threadi 15.12.2010 21:05

Relevant ist der HTML-Code der im Browser ankommt, nicht deine Template-Datei.

Aber soweit ich sehe ist dein HTML-Code selbst bereits sehr fehlerhaft. Sowas

Code:

<table width="90%">
<center><blink><img src="http://www.spielearena.com/arena/img/buotd/uod.gif"></blink></center>
 <tr>

geht ja mal gar nicht. Korrigiere deinen HTML-Code, so dass er valide ist. Wenn es dann noch Probleme gibt kann man weitersehen.

AndMei 15.12.2010 21:22

Zitat:

Zitat von threadi (Beitrag 483116)
geht ja mal gar nicht. Korrigiere deinen HTML-Code, so dass er valide ist. Wenn es dann noch Probleme gibt kann man weitersehen.

Danke erstmal für deine Antwort.

Ja wie schon geschrieben, ist es nicht meine Page und ich habe den Code auch nicht geschrieben. Aber werd es gleich beheben.

Nur wenn ich ne Umsetzung mache, schaue ich mir nicht jede einzelne Datei von dem Script an, sondern arbeite mit der css und den entsprechenden Template-Dateien.

Verstehe nur halt nicht, warums im eingeloggten Zustand korrekt angezeigt wird und im ausgeloggtem nicht.

Danke für deinen Hinweis.


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:37 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2021, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020