zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden div-höhe? - Hauptcontainer über ganze Seite will nicht...

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.12.2010, 14:21
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.12.2010
Beiträge: 5
AndMei befindet sich auf einem aufstrebenden Ast
Frage div-höhe? - Hauptcontainer über ganze Seite will nicht...

Hallo an Alle !

Ich habe ein Script und möchte diesem gern ein Design verpassen, was bisher gut funktionierte.

Nur scheitere ich an einem Punkt...

Der Hauptcontainer (main) sollte mit einem Hintergrund über die ganze Seite gehen. Da die Menus sich ja in Größe verändern, muss der also mitwachsen.

Hier der Code-Anfang der Templatedatei...
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>
<link rel="shortcut icon" href="animated1_favicon.gif" type="image/x-icon">
  <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>style.css</css>
  %popup%
  </head>
 <body>
    <center>
    <div id="main">
 <include>json</include>
     <div style="background-image:url(img/design_neu/header_bg.png); background-repeat:no-repeat; height:111px; width:916px;"><div align="left"><img src="img/design_neu/headerani.gif" alt="Header"/></div></div>
     <div id="mini">
<!--<font color="#ffffff" size="3"><b><format>%globalpot_small%</format></b></font>-->
</div>
<div id="midi">
<!--<font color="#ffffff" size="3"><b><format>%globalpot_middle%</format></b></font>-->
</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>

<include>navi</include>

<!--<include>globalticker</include>-->

     <div id="leftmenu">
     <include>leftmenu</include>
     </div>


 <div id="logo"></div>
 <if var="loggedon" value="1" id="2"><then id="2"><div id="pinboard"><include>pinboard</include></div></then id="2"></if id="2">

 <div id="content">
  <include>%page%</include>
  <include>footer</include>
 </div>
hier nun der entsprechende Code aus der style.css
Code:
body {
        background: url(img/design_neu/bg.png) repeat-x #370303;
        color: #C0C0C0;
        font-size: 12px;
        font-family: sans-serif;
        margin: 0;
        padding: 0;
        height: 100%;
}

#main {
        z-index:0;
        background-image:url(img/design_neu/main_bg.png);
        background-repeat: repeat-y;
        width: 916px;
        height:100% !important;
        min-height: 100% !important;
        margin:0;
        padding:0;
        font-size: 12px;
        position: relative;
        border: 1px solid white;
}
Den Rahmen habe ich bei main nur zum überprüfen genommen.
Normalerweise müsste der Rahmen auf die vorgegebene Breite auf 100% der Seite verlaufen, oder?

Er bringt mir aber den Rahmen nur bis zur Navigationsleiste, welche nach dem Header kommt. Danach nix weiter.

Wo mache ich da denn was falsch?

Hat jemand einen Tip für mich?

Bin für jede Hilfe dankbar !
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.12.2010, 14:32
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Wie 100% Midesthöhe anzuwenden ist, steht in den [FAQ]FAQ[/FAQ].
Du gibst #main eine Höhe von 100%, keine Mindesthöhe, weil du vermutlich den important-Hack für IE6 nicht verstanden bzw. falsch kopiert hast.
Außerdem müssen alle Vorfahren des Elements mit 100%-Mindesthöhe eine 100%-Höhe haben. Bei dir fehlt die Angabe für html und das überflüssige und veraltete center-Element ist auch noch im Weg.

Noch was: Wir können mit deinen Variablen nichts anfangen und sehen auch deine Hintergrundbilder nicht. Deshalb gib bitte immer einen Link zum Problem an. Siehe dazu auch die Hinweise für Fragende.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.12.2010, 14:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.12.2010
Beiträge: 5
AndMei befindet sich auf einem aufstrebenden Ast
Standard

Danke erstmal für deinen Post...

Dann will ich doch hier gleich mal den kompletten Code posten.

hier der Code der Templatedatei...
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>
<link rel="shortcut icon" href="animated1_favicon.gif" type="image/x-icon">
  <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>style.css</css>
  %popup%
  </head>
 <body>
    <center>
    <div id="main">
 <include>json</include>
     <div style="background-image:url(img/design_neu/header_bg.png); background-repeat:no-repeat; height:111px; width:916px;"><div align="left"><img src="img/design_neu/headerani.gif" alt="Header"/></div></div>
     <div id="mini">
<!--<font color="#ffffff" size="3"><b><format>%globalpot_small%</format></b></font>-->
</div>
<div id="midi">
<!--<font color="#ffffff" size="3"><b><format>%globalpot_middle%</format></b></font>-->
</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>

<include>navi</include>

<!--<include>globalticker</include>-->

     <div id="leftmenu">
     <include>leftmenu</include>
     </div>


 <div id="logo"></div>
 <if var="loggedon" value="1" id="2"><then id="2"><div id="pinboard"><include>pinboard</include></div></then id="2"></if id="2">

 <div id="content">
  <include>%page%</include>
  <include>footer</include>
 </div>

 <div id="rightmenu">
  <include>rightmenu</include>
 </div>
          <div id="login">
  <form name="login" action="page.php?cat=default&amp;p=login_do" method="post">
  <div style="position:absolute;  top:3px; right:170px;"><font color="blue">ID:</font></div>
  <div style="position:absolute;  top:0px; right:60px;"><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:26px; right:170px;"><font color="blue">PW:</font></div>
  <div style="position:absolute;  top:24px; right:60px;"><font color="blue"><input type="password" name="u_pwd" height="10" lenght="10" style="background : transparent; width:100px; border:0px;" size="30" value="Passwort" onclick="value=''"/></font></div>
  <div style="position:absolute;  top:0px; right:0px; border:0px;"><input type="image" src="img/design_neu/go.png" alt="Go" border="0">
  <div style="position:absolute;  top:48px; right:62px; width:100px;"><font color="blue" size="1"><a href="page.php?cat=default&amp;p=forgotpwd">Passwort vergessen?</a></font></div>
</form>
</div>
</div></div></center>
 </body>
</html>
und hier die gesamte css
Code:
/* **************** cascading style sheet ******************* */

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

a:hover {
        /*color: #c0c0c0;*/
        text-decoration: underline;
        background-color: none;

}

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

img {
        border: 0;
}

table {
        font-size: 12px;
        font-family: Verdana;
        color: #c0c0c0;
}

input, textarea, select, file {
        font-size:12px;
        border: 1px solid;
        background-color: #ffffff;
        color: #000000;
}


#rotator {
        position: absolute;
        top: 60px;
        left: 450px;
}


#login {
       position: absolute;
       top: 90px;
       right: 18px;
       height: 100px;
       width: 210px;
       background-image: url(img/design_neu/login_bg.png);
       background-repeat: no-repeat;
}

#navi {
        position: absolute;
        top: 111px;
        background: url(img/design_neu/navi_bg.png);
        height: 30px;
        width: 916px;
}

*.navi_co {
        padding-top:0px;
        padding-left: 14px;
        font-size:16px;
        font-weight: bold;
}


#pinboard {
        /*background-image: url(img/design/pn_news_zettel.png); */
        position: absolute;
        left: 750px;
        top: 172px;
        width: 150px;
        height: 78px;
        z-index: 4;
}

#pinboard_content {
        position: absolute;
        top: 20px;
        left: 20px;
        font-weight: bold;
        font-size: 10px;
        color: #150185;
        border: none;
}

#pinboard_content a {
        color: #150185;
}


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

#shouts_add {
        border: 1px solid #333333;
        font: 12px bold Verdana;
        width: 480px;
}

*.shouts {
        border: 1px solid #ffffff;
}

*.shouts_head {
        background-color: #ffffff;
        font-size: 12px;
        font-weight: bold;
        margin-left: 3px;
}

*.shouts_body {
        background-color: #ffffff;
        font-size: 12px;
        margin-left: 3px;
}

*.grey {
        color: #000000;
}

#content {
        position: absolute;
        color:#c0c0c0;
        background: #581616;
        left: 180px;
        width: 555px;
        top: 141px;
        z-index: 2;
}

*.box {
        width: 550px;
}



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

*.box_head {
        height: 32px;
        background: url(img/design_neu/content_head.png);
        position: relative;
        top: 10px;
}

*.box_middle {
        background: url(img/design_neu/content_middle.png);
}

*.box_content {
        text-align: center;
        width: 500px;
        position:relative;
        top:15px;
}


*.box_footer {
        background: url(img/design_neu/content_foot.png);
        height: 20px;
}

*.jackpot_games_home {
        color: #000000;
}

#layer1 {
        color: #FFF1E0;
}

#layer2 {
        color: #000000;
}

#layer3 {
        color: #000000;
}

#layer4 {
        color: #000000;
}

#layer5 {
        color: #000000;
}

#nickpage_text {
        position: relative;
        top: 0px;
        left: 20px;
        text-align: left;
}

#nickpage_avatar {
        position: absolute;
        top: 5px;
        right: 5px;
}

#main {
        z-index:0;
        background-image:url(img/design_neu/page.png);
        background-repeat: repeat-y;
        width: 916px;
        height:100% !important;
        min-height: 100% !important;
        margin:0;
        padding:0;
        font-size: 12px;
        position: relative;
        border: 1px solid white;
}


*.menucontent {
        position: relative;
        width: 140px;
        left: 0px;
        text-align: left;
        font-family: Verdana;
        font-size: 12px;
        color: #e1ca69;
        font-weight: bold;
}

*.submenucontent a {
        display: block;
        color: #e1ca69;
        font-weight: normal;
}

*.submenucontent a:hover {
        background: none;
        display: block;
        /*color: #c0c0c0;*/
}

*.submenucontent {
        position: relative;
        width: 168px;
        top: 0px;
        left: 15px;
        text-align: left;
        font-size: 14px;
        font-family: Tahoma;
        color: #e1ca69;
        font-weight: bold;
        font-style: normal;
        line-height: 22px;
}

*.rightmenucontent a {
        display: block;
}


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

a.wiw_admin:link, a.wiw_admin:active, a.wiw_admin:visited {
 color: #ff0000;
}

*.wiw_male {
        color: #429afc;
}

a.wiw_male:link, a.wiw_male:active, a.wiw_male:visited {
 color: #429afc;
}

*.wiw_female {
        color: #f196f9;
}

a.wiw_female:link, a.wiw_female:active, a.wiw_female:visited {
 color: #f196f9;
}

*.rightmenucontent a:hover {
        background: none;
        display: block;
        /*color: #ffffff;*/
}

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

#leftmenu {
        background-image:url(img/design_neu/leftmenu_bg.png);
        background-repeat:repeat-y;
        width: 180px;
        position: absolute;
        left: 0px;
        top: 141px;
        height:auto !important; /* real browsers */
        height:100%; /* IE6: treaded as min-height*/

        min-height:100%; /* real browsers */

}


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

#leftmenu_head {
        color: #e1ca69;
        background: url(img/design_neu/menu_head.png) no-repeat;
        height: 38px;
        width: 168px;
        position: relative;
        left: 5px;
        top: 10px;
}

#leftmenu_head_middle {
        color: #e1ca69;
        background: url(img/design_neu/menu_head_middle.png) no-repeat;
        height: 30px;
        width: 168px;
        position: relative;
        left: 5px;
        top: 10px;
}

#leftmenu_middle {
        background: url(img/design_neu/menu_middle.png);
        position: relative;
        width: 168px;
        left: 5px;
        top: 10px;
}

#leftmenu_footer {
        background: url(img/design_neu/menu_footer.png);
        position: relative;
        top: 10px;
        left: 5px;
        height: 30px;
        width: 168px;
}


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

#rightmenu {
        background-image:url(img/design_neu/rightmenu_bg.png);
        background-repeat:repeat-y;
        width: 180px;
        position: absolute;
        right: 1px;
        top: 141px;
        height:auto !important; /* real browsers */
        height:100%; /* IE6: treaded as min-height*/

        min-height:100%; /* real browsers */

}

#rightmenu_head {
        background: url(img/design_neu/menu_head.png);
        height: 38px;
        width: 168px;
        position: relative;
        right: 5px;
        top:10px;
}

#rightmenu_middle {
        background: url(img/design_neu/menu_middle.png);
        position: relative;
        right: 5px;
        width: 168px;
        top:10px;
}

#rightmenu_bottom {
        background: url(img/design_neu/menu_footer.png);
        height:30px;
        position: relative;
        right: 5px;
        top:10px;
        width: 168px;
}

#rightmenu_wio_head {
        background: url(img/design/navigation_01.png);
        height: 35px;
        position: relative;
        right: 5px;
        width: 168px;
}

#rightmenu_wio_middle {
        background: url(img/design/navigation_02.png);
        position: relative;
        right: 5px;
        width: 168px;
}

#rightmenu_wio_footer {
        background: url(img/design/navigation_03.png);
        height: 20px;
        position: relative;
        right: 5px;
        width: 168px;
}

#footer {
        background: url(img/design/footer.png);
        height: 42px;
}

*.footer_co {
        padding-top:7px;

}

*.news_subject {
        background-color: #6699cc;
}

*.tv_item {
        width: 450px;
        font-size: 10px;
        text-align: left;
        position: relative;
        left: 40px;
}

*.paid_up {
        font-size:10px;
}

*.headline {
        background-color: #6699cc;
        color: #000000;
        font-weight: bold;
}

*.explanation {
        background-color: #79a2c5;
        font-weight: bold;
}
*.coloredlink {
        color: #09bb00;
        text-decoration: none;
        font-weight: bold;
}

*.paid4 {
        background-color: #6699cc;
}
*.question {
        font-style: italic;
        color: #009900;
        text-align: left;
}
*.answer {
        color: #000000;
        text-align: left;
}

.mooquee {
        border: solid 2px #C0C0C0;
        padding: 5px;
        /* don't change */
        position: absolute;
        overflow: hidden;
        white-space: nowrap;
}
.mooquee-text {
        /* don't change */
        position: absolute;
}

#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;
}

#nav_jp_winner {
        position: absolute;
        top: 126px;
        left: 760px;
        width: 152px;
        height: 55px;
        z-index: 1;
}

#jp_winner_trans {
        position: absolute;
        top: 126px;
        left: 760px;
        width: 152px;
        height: 55px;
        z-index: 2;
}

.games_bold {
                  color: #7CFC00;

}

.games_red {
                  font-weight: bold;
        color: #FF0000;

}

#globalticker {
        top: 127px;
        left: 140px;
        z-index: 5;
        height: 10px;
        width: 500px;
}
#mini {
        position: absolute;
        left: 710px;
        top: 120px;
}

#midi {
        position: absolute;
        left: 480px;
        top: 120px;
}

#maxi {
        position: absolute;
        left: 460px;
        top: 68px;
}
#maxi2 {
        position: absolute;
        left: 462px;
        top: 70px;
}
Die Page, wo ihr auch den Rahmen seht, ist hier zu finden.

Ich habe schon hier und da gelesen, dies und jenes ausprobiert aber irgendwie schau ich hier wie ein Schwein ins Uhrwerk.

Wo hab ich da nen Fehler drin?

Danke für Eure Hilfe!
Mit Zitat antworten
  #4 (permalink)  
Alt 13.12.2010, 14:47
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von AndMei Beitrag anzeigen
Wo hab ich da nen Fehler drin?
Das steht bereits in meinem Vorposting.

edit: Und unter deinem Link jetzt sieht man auch noch, dass das umgebende Element nie mitwachsen wird, weil du die Inhalte absolut positionierst.
Da verlinke ich einfach mal in den Nachbarthread.

Geändert von fricca (13.12.2010 um 14:50 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 13.12.2010, 15:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.12.2010
Beiträge: 5
AndMei befindet sich auf einem aufstrebenden Ast
Standard

Problem ist wohl, dass das Script im Originalzustand schon im css position:absolute; verwendet. Oder?

hier mal die originale css
Code:
body {
        color: #000000;
        font-size: 12px;
        font-family: sans-serif;

}

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

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

img {
        border: 0;
}

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

table {
        text-align: left;

}

#main {
        width: 978px;
        z-index: 0;
        position: absolute;
        top: 0px;
        left: 5px;
        height: 100% !important;
            border: 1px solid blue;
}

#header {
        position: absolute;
        width: 978px;
        height: 245px;
        top: 10px;
        z-index: 2;

}

#konto_info {
        position: absolute;
        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: absolute;
        top: 253px;
        width: 168px;
        z-index: 1;
}

#header_left_top {
        background-image: url(img/design/frame_left_top.png);
        height: 20px;
        width: 168px;
}

#header_left_middle {
        background-image: url(img/design/frame_left_middle.png);
        width: 168px;
}

#header_left_bottom {
        background-image: url(img/design/frame_left_bottom.png);
        width: 168px;
        height: 32px;
}
#logo {
        background-image: url(img/design/fwx_logo.png);
        position: absolute;
        left: 12px;
        top: 25px;
        width: 231px;
        height: 212px;
        z-index: 3;
}
#rotator {
        position: absolute;
        top: 40px;
        left: 225px;
        z-index: 5;
}

#pinboard {
        background-image: url(img/design/pn_news_zettel.png);
        position: absolute;
        left: 112px;
        top: 167px;
        width: 96px;
        height: 78px;
        z-index: 4;
}

#pinboard_content {
        position: absolute;
        top: 20px;
        left: 20px;
        font-weight: bold;
        font-size: 10px;
        color: #150185;
        border: none;
}

#pinboard_content2 {
        position: absolute;
        top: 13px;
        left: 20px;
        font-weight: bold;
        font-size: 10px;
        color: #150185;
        border: none;
}

#pinboard_content a {
        color: #150185;
}

#pinboard_content2 a {
        color: #150185;
}

#nav_home {
        position: absolute;
        top: 126px;
        left: 190px;
        width: 149px;
        height: 55px;
        z-index: 1;
}

#home_trans {
        position: absolute;
        top: 126px;
        left: 190px;
        width: 149px;
        height: 55px;
        z-index: 2;
}

#nav_media {
        position: absolute;
        top: 126px;
        left: 330px;
        width: 152px;
        height: 55px;
        z-index: 1;
}

#media_trans {
        position: absolute;
        top: 126px;
        left: 330px;
        width: 152px;
        height: 55px;
        z-index: 2;
}

#nav_agb {
        position: absolute;
        top: 126px;
        left: 470px;
        width: 152px;
        height: 55px;
        z-index: 1;
}

#agb_trans {
        position: absolute;
        top: 126px;
        left: 470px;
        width: 152px;
        height: 55px;
        z-index: 2;
}

#nav_faq {
        position: absolute;
        top: 126px;
        left: 550px;
        width: 152px;
        height: 55px;
        z-index: 1;

}

#faq_trans {
        position: absolute;
        top: 126px;
        left: 550px;
        width: 152px;
        height: 55px;
        z-index: 2;
}

#nav_impressum {
        position: absolute;
        top: 126px;
        left: 625px;
        width: 152px;
        height: 55px;
        z-index: 1;
}

#impressum_trans {
        position: absolute;
        top: 126px;
        left: 625px;
        width: 152px;
        height: 55px;
        z-index: 2;
}

#nav_jp_winner {
        position: absolute;
        top: 126px;
        left: 760px;
        width: 152px;
        height: 55px;
        z-index: 1;
}

#jp_winner_trans {
        position: absolute;
        top: 126px;
        left: 760px;
        width: 152px;
        height: 55px;
        z-index: 2;
}

#nav_login {
        position: absolute;
        top: 126px;
        left: 915px;
        width: 55px;
        height: 55px;
        z-index: 1;
}

#login_trans {
        position: absolute;
        top: 126px;
        left: 915px;
        width: 55px;
        height: 55px;
        z-index: 2;
}

#content {
        position: absolute;
        left: 175px;
        width: 650px;
        top: 215px;
        z-index: 2;
}

*.box {
        width: 641px;
}

*.box_title {
        text-align: left;
        position: relative;
        top: 15px;
        left: 20px;
        font-weight: bold;
}

*.box_head {
        background-image: url(img/design/box_head.png);
        height: 51px;
}

*.box_middle {
        background-image: url(img/design/box_middle.png);
}

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

*.box_footer {
        background-image: url(img/design/box_foot.png);
        height: 44px;
}

#leftmenu {
        position: relative;
        left: 15px;
        width: 135px;
}

*.navi_left_head {
        background-image: url(img/design/navi_top.png);
        height: 38px;
        width: 135px;
}

*.navi_left_middle {
        background-image: url(img/design/navi_middle.png);
        width: 135px;
}

*.navi_left_bottom {
        background-image: url(img/design/navi_bottom.png);
        height: 36px;
        width: 135px;
}

*.menucontent {
        font-size: 10px;
        font-weight: bold;
        width: 100px;
}

*.submenucontent {
        font-size: 10px;
        position: relative;
        left: 20px;
        width: 100px;
}

*.submenucontent a {
        display: block;

}

#shoutbox {
        height: 200px;
        width: 410px;
        background-color: #ffca2f;
}

#rightmenu {
        position: absolute;
        left: 817px;
        top: 215px;
        width: 164px;
}

#rightmenu_head {
        background-image: url(img/design/wio_top.png);
        height: 59px;
}

#rightmenu_middle {
        background-image: url(img/design/wio_middle.png);
}

#rightmenu_bottom {
        background-image: url(img/design/wio_bottom.png);
        height: 41px;
}

*.rightmenucontent {
        position: relative;
        left: 25px;
        width: 120px;
}

*.rightmenucontent a {
        display: block;
}

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

*.wiw_male {
        color: #1981ec;
}

*.wiw_female {
        color: #fc32d8;
}

#footer {
        background-image: url(img/design/footer.png);
        width: 562px;
        height: 35px;
        position: relative;
        left: 40px;
}

*.footer_content {
        position: relative;
        text-align: center;
        top: 10px;
        font-weight: bold;
}
#nickpage_text {
        text-align: left;
        position: relative;
        left: 25px;
}
#nickpage_avatar {
        position: absolute;
        right: 50px;
        top: 150px;
}

#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: absolute;
        overflow: hidden;
        white-space: nowrap;
}
.mooquee-text {
        /* don't change */
        position: absolute;
}

.games_bold {
        font-weight: bold;
}
.games_red {
        color: red;
        font-weight: bold;
}


#globalticker {
        top: 180px;
        left: 220px;
        z-index: 5;
        height: 20px;
        width: 500px;
}
Und so schaut die originale Template-Datei aus...
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="header"><img src="%config_header_img%" alt="Header oben" /></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 -->
 <div id="header_left">
  <include>leftmenu</include>
 </div>

 <div id="logo"></div>
 <if var="loggedon" value="1" id="2"><then id="2"><div id="pinboard"><include>pinboard</include></div></then id="2"></if id="2">
 <div id="content">
  <include>%page%</include>
  <include>footer</include>
  <debug>
 </div>
 <div id="rightmenu">
  <include>rightmenu</include>
 </div>
</div>
 </body>
</html>
Wenn ich dort aber bei main nen rahmen nehme, so geht der komischerweise um die ganze seite.
Mit Zitat antworten
  #6 (permalink)  
Alt 13.12.2010, 15:43
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von AndMei Beitrag anzeigen
Problem ist wohl, dass das Script im Originalzustand schon im css position:absolute; verwendet. Oder?
Welches Script in welchem Originalzustand?
Was ist das, was du jetzt postest -- mit dem wir aus oben bereits genannten Gründen nichts anfangen können?
edit: Ach, jetzt verstehe ich. Was du jetzt gepostet hast nennst du "Script im Originalzustand". Ja, das ist ein Problem, denn es ist nicht tauglich. Soll vermutlich ein Design-Template sein, aus dem man erst noch etwas fürs Web verwendbares machen muss.

Zitat:
Wenn ich dort aber bei main nen rahmen nehme, so geht der komischerweise um die ganze seite.
Da ist #main abs. positioniert. Demnach wird das Element auch ohne Bezug zu Vorfahren 100% hoch. Mit "Inhalte umschließen" hat das nichts zu tun.

Mit dem, was du hier zeigst, wirst du dein Ziel nicht erreichen können. Abs. pos. Elemente haben keinen Bezug zueinander. Punkt.
Nimm Float, um deine Bereiche nebeneinander zu stellen. Wie das geht kannst du im bereits verlinkten Little Boxes lernen. Ja, du wirst Zeit benötigen, dich einzuarbeiten.
Beginnen musst du mit dem Erlernen von HTML. Du klebst bisher nur Divs aneinander. Das hat nichts mit "Webdesign" zu tun.
Es fehlt jegliche Semantik. Lesestoff: Vorsprung durch Webstandards | Retro-Coding: Semantischer Code ist der Anfang von gutem Design

Geändert von fricca (13.12.2010 um 15:48 Uhr)
Mit Zitat antworten
Antwort

Stichwörter
container, div höhe, main, wrapper

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Brauche Hilfe: Schwarzes Nichts Zwox CSS 10 19.11.2010 17:53
div container Höhe anpassen funktioniert nicht! hopaba CSS 4 21.02.2010 18:23
CSS Text nebeinander? carstiee09 CSS 13 13.11.2009 20:18
DIV in DIV IE 6 Höhe 100% BooKer CSS 0 01.04.2009 18:11
div höhe anpassen Dgx CSS 3 02.03.2007 19:02


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:45 Uhr.