Antworten zum Thema „kleines div problem“

rey · 22.11.2007

hi,
habe folgendes Problem ich habe via javascript registerkarten erstellt.
Diese funktionieren auch ohne jegliche Probleme .Allerdngs ist die Seite dann nicht mehr auf 100% höhe. wenn ich die divs einfüge mit den divs werden die registerelemente eingebunden. Ist die Seite immer 3000Meter lang wenn ich diese aber entferne ist sie so zusammen geschoben wie es sich gehört also es passt sich alles an.
der html code schaut so aus

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body {
	background-color: #000000;
	margin-bottom:0px;
	margin-top:0px;
	width:100%;
	height:100%;
}
-->
/* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */

/*--------------------------------------------------
  REQUIRED to hide the non-active tab content.
  But do not hide them in the print stylesheet!
  --------------------------------------------------*/
.tabberlive .tabbertabhide {
 display:none;
}

/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
.tabber {
}
.tabberlive {
 margin-top:1em;
}

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
ul.tabbernav
{
 margin:0;
 padding: 3px 0;
 border-bottom: 1px solid #778;
 font: bold 12px Verdana, sans-serif;
}

ul.tabbernav li
{
 list-style: none;
 margin: 0;
 display: inline;
}

ul.tabbernav li a
{
 padding: 3px 0.5em;
 margin-left: 3px;
 border: 1px solid #778;
 border-bottom: none;
 background: #DDE;
 text-decoration: none;
}

ul.tabbernav li a:link { color: #448; }
ul.tabbernav li a:visited { color: #667; }

ul.tabbernav li a:hover
{
 color: #000;
 background: #AAE;
 border-color: #227;
}

ul.tabbernav li.tabberactive a
{
 background-color: #fff;
 border-bottom: 1px solid #fff;
}

ul.tabbernav li.tabberactive a:hover
{
 color: #000;
 background: white;
 border-bottom: 1px solid white;
}

/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab {
 padding:5px;
 border:1px solid #aaa;
 border-top:0;

 /* If you don't want the tab size changing whenever a tab is changed
    you can set a fixed height */

 /* height:200px; */

 /* If you set a fix height set overflow to auto and you will get a
    scrollbar when necessary */

 /* overflow:auto; */
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
 display:none;
}
.tabberlive .tabbertab h3 {
 display:none;
}

/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
width:300px;
padding-left:10px;
}
.tabberlive#latest {
width:300px;
padding-left:10px;
}
.tabberlive#ekas {
width:300px;
padding-left:10px;
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
 height:200px;
 overflow:auto;

}
#bgrechts {
background:url(Bilder/bgrechts_11.png) no-repeat;
height:100%;
}
#bglinks {
background:url(Bilder/linksbg_09.png) no-repeat;
}
#mainmenunav{
background:url(MAINnavi.png) no-repeat;
height:52px;
width:152px;
}
#mainmenunav2{
background: url(community.png) no-repeat;
height:34px;
width:152px;
}
#mainmenunav3{
background: url(media.png) no-repeat;
height:34px;
width:152px;
}
#mainmenunav4{
background:url(loginpanel.png) no-repeat;
height:34px;
width:152px;
}
#tdlinksunten{
background:url(Bilder/bguntenlinks_13.png) repeat-y;
width:152px;
}
#tdlinksunten2{
background:url(Bilder/bguntenlinks_13.png) repeat-y;
width:152px;
}
#tdrechtsunten{
background:url(Bilder/CoC-Layout-V62_22.png) repeat-y;
width:316;
}
#tdrechtsunten2{
background:url(Bilder/CoC-Layout-V62_22.png) repeat-y;
width:316;
}
#contenttd{
height:100%;
width:100%;
}
#tdobenrechtsbanner{
width:100%;
}
</style>
<script type="text/javascript" src="tabber.js">
</script></head>

<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">

  <tr>
    <td height="143" colspan="3" align="left" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
 
      <tr>
        <td width="700" height="143" align="left" valign="top" background="Bilder/CoC-Layout-V62_06.png"><table width="700" border="0" cellpadding="0" cellspacing="0">
    
          <tr>
            <td width="166" height="90" align="left" valign="top"><img src="Bilder/CoC-Layout-V62_01.png" width="166" height="90" alt="" /></td>
                <td width="95" align="left" valign="top"><img src="Bilder/CoC-Layout-V62_02.png" width="95" height="90" alt="" /></td>
                <td width="93" align="left" valign="top"><img src="Bilder/CoC-Layout-V62_03.png" width="93" height="90" alt="" /></td>
                <td width="85" align="left" valign="top"><img src="Bilder/CoC-Layout-V62_04.png" width="85" height="90" alt="" /></td>
                <td width="261" align="left" valign="top"><img src="Bilder/CoC-Layout-V62_05.png" width="261" height="90" alt="" /></td>
              </tr>
          <tr>
            <td height="53" colspan="5" align="left" valign="top"><img src="Bilder/CoC-Layout-V62_08.png" width="700" height="53" alt="" /></td>
              </tr>
          
          
          
          
          
          </table></td>
          <td width="129" align="left" valign="top" background="Bilder/CoC-Layout-V62_06.png"><table width="100%" border="0" cellpadding="0" cellspacing="0">
      
              <tr>
                <td width="129" height="143" align="left" valign="top" background="Bilder/CoC-Layout-V62_06.png">&nbsp;</td>
              </tr>
          </table></td>
          <td  align="left" valign="top" background="Bilder/CoC-Layout-V62_06.png" id="tdobenrechtsbanner"><table width="100%" border="0" cellpadding="0" cellspacing="0" id="tdobenrechtsbanner">
            
              <tr>
                <td height="143" align="left" valign="top"><div align="right"><img src="Bilder/CoC-Layout-V62_07.png" width="317" height="143" alt="" /></div></td>
              </tr>
          </table></td>
        </tr>
      
      
      
    </table></td>
  </tr>
  <tr>
    <td width="179" align="left" valign="top" id="tdlinksunten"><div id="bglinks">
      <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">

      <tr>
        <td width="100%" height="85" align="left" valign="top"><div id="bglinks"><div id="mainmenunav"></div>          </tr>
      <tr>
        <td height="37" align="left" valign="top"></td>
      </tr>
      <tr>
        <td height="52" align="left" valign="top"><div id="mainmenunav2"></div></td>
      </tr>
      <tr>
        <td height="37" align="left" valign="top">&nbsp;</td>
      </tr>
      <tr>
        <td height="52" align="left" valign="top"><div id="mainmenunav3"></div></td>
      </tr>
      <tr>
        <td height="37" align="left" valign="top"></td>
      </tr>
      <tr>
        <td height="52" align="left" valign="top"><div id="mainmenunav4"></div></td>
      </tr>
      <tr>
        <td height="100%" align="left" valign="top"></td>
        </tr>
      </table>
    </div></td>
  <td width="1240" align="left" valign="top" id="contenttd">&nbsp;</td>
  <td width="343" align="left" valign="top" id="tdrechtsunten">
  <div id="bgrechts">
    <table width="317" height="100%" border="0" cellpadding="0" cellspacing="0">

    <tr>
      <td width="317" height="391" valign="top"><table width="317" border="0" cellpadding="0" cellspacing="0">

        <tr>
          <td width="317" height="52" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
    
            <tr>
              <td width="317" height="52" align="left" valign="top" background="latestactions.png">&nbsp;</td>
              </tr>
          </table></td>
          </tr>
        <tr>
          <td height="37" align="left" valign="top"><div class="tabber" id="tab1">
            <div class="tabbertab">
              <h2><a name="tab1" id="tab1">Tab <em>1</em></a></h2>
              <p>Tab 1 content.</p>
            </div>
            <div class="tabbertab">
              <h2>Tab 2</h2>
              <p>Tab 2 content.</p>
            </div>
            <div class="tabbertab">
              <h2>Tab 3</h2>
              <p>Tab 3 content.</p>
            </div>
            <div class="tabbertab">
              <h2>Tab4</h2>
              <p>Tab4content.</p>
            </div>
          </div></td>
        </tr>
        <tr>
          <td height="36" align="left" valign="top" background="warupdate.png">&nbsp;</td>
        </tr>
        <tr>
          <td height="37" align="left" valign="top"><div class="tabber" id="latest">
           <div class="tabbertab">
              <h2><a name="tab1" id="tab1">Tab <em>1</em></a></h2>
              <p>Tab 1 content.</p>
            </div>
            <div class="tabbertab">
              <h2>Tab 2</h2>
              <p>Tab 2 content.</p>
            </div>

          </div></td>
        </tr>
        <tr>
          <td height="36" align="left" valign="top" background="ICCUP.png">&nbsp;</td>
        </tr>
        <tr>
          <td height="37" align="left" valign="top">&nbsp;</td>
        </tr>
        <tr>
          <td height="36" align="left" valign="top" background="PARTNER.png">&nbsp;</td>
        </tr>
        <tr>
          <td height="37" align="left" valign="top"><div class="tabber" id="ekas">
           <div class="tabbertab">
              <h2><a name="tab1" id="tab1">Tab <em>1</em></a></h2>
              <p>Tab 1 content.</p>
            </div>
            <div class="tabbertab">
              <h2>Tab 2</h2>
              <p>Tab 2 content.</p>
            </div>

          </div></td>
        </tr>
        
      </table></td>
        </tr>
  </table></div></td>
  </tr>
  
  
  
  <tr>
    <td height="113" align="left" valign="top" id="tdlinksunten2"><table width="100%" border="0" cellpadding="0" cellspacing="0">
 
      <tr>
        <td width="152" height="69" align="left" valign="top"></td>
        </tr>
    </table></td>
    <td valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
    
      <tr>
        <td width="552" height="69" align="left" valign="top"><div align="center"><img src="Bilder/footer_14.png" width="678" height="69" align="bottom" /></div></td>
        </tr>
    </table></td>
    <td align="left" valign="top" id="tdrechtsunten2"><table width="100%" border="0" cellpadding="0" cellspacing="0">
  
      <tr>
        <td width="317" height="69" align="left" valign="top"></td>
        </tr>
    </table></td>
  </tr>
</table>
</body>
</html>

woran könnte das liegen?

thrillhouse · 22.11.2007

AW: kleines div problem

Hast du die Site irgendwo online?
Kann sein, dass es an meinem Schlafmangel liegt, aber ich kann dir nicht so ganz folgen ;-)

rey · 22.11.2007

AW: kleines div problem

hier is der link zur index mit den divs

und hier ohne

daddaa · 22.11.2007

AW: kleines div problem

also bei mir schaut es ganz normal aus (FF 2 und IE7)
halt rechts in den kategorien die Tabs drinne, lassen sich alle wunderbar anklicken

shadow85 · 22.11.2007

AW: kleines div problem

ich kann auch nichts ungewöhliches entdecken (opera)!

redmanM3 · 22.11.2007

AW: kleines div problem

Habe zwar keine Ahnung, wie ich dir bei deinem Problem helfen könnte, doch die Seite ist bei mir ein wenig zu weit nach rechts verschoben wenn du das meinst. Benutze 1280x800 - hier ein kleines Bildchen davon:

Vielleicht kann dir ja nun jemand weiterhelfen..

rey · 23.11.2007

AW: kleines div problem

habe sie auf 100% eingestellt.
nunja villeicht kommt es mir ja auch nur so vor weil sie noch nicht gefüllt ist.

rey · 26.11.2007

AW: kleines div problem

Es hat sich ein neues Problem eingeschlichen und zwar sobald php codes in den einzelnen tabs sind geht es nicht mehr.
das heißt wenn es vorher so aus sah

Tab1 Tab2
...

dann jeweils der text wenn man auf ein tab geklickt hat.
nun ist es aber so

Tab1
text
tab2
text

es wird alles angezeigt.
Also nicht erst wenn man auf tab 2 klickt das dann der inhalt angezeigt wird nein die tabs werden gleich angezeigt.

rey · 06.12.2007

AW: kleines div problem

keiner eine idee warum es nicht mit php geht? hier auf psd-tutorials wird doch auch so etwas auf der startseite verwendet

Tim · 06.12.2007

AW: kleines div problem

Wo baust du den PHP-Code ein? Zeig da bitte mal die entsprechende Quelltextstelle.

shaolinshowdon · 06.12.2007

AW: kleines div problem

Also bei mir wird das im ff zu weit angezeigt. ca. 100 bis 150px.

Entweder ist die rechte navi zu weit oder Header ist zu groß.

Ich denke einfach das du es optmieren solltest auf eine einheitsgröße die sich nach zoll monitor direckt anpasst.

Habe einen 15" TFT

Aber das Design ist nicht mal schlecht

LG

Shaolin

rey · 06.12.2007

AW: kleines div problem

so schaut der quelltext aus für das Tab menu Latest actions

PHP:

<div class="tabber" id="tab1">
            <div class="tabbertab">
              <h2><a name="tab1" id="tab1">Latest News</a></h2>
            <?php mosLoadModules (  'user1', -2 ); ?>
            </div>
            <div class="tabbertab">
              <h2>Latest Downloads</h2>
             <?php mosLoadModules (  'user8', -2 ); ?>
            </div>
            <div class="tabbertab">
              <h2>Latest Replays</h2>
			  
			  
              <!-- Replay Code --->
			  
			  
            </div>
            </div>