XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Problem mit 100% Background (http://xhtmlforum.de/showthread.php?t=53843)

AeroWall 29.09.2008 17:38

Problem mit 100% Background
 
Liste der Anhänge anzeigen (Anzahl: 1)
Hallo,

ich habe ein Problem mit height 100%. Ich möchte den Background im <div> #Inhalt auch auf 100% haben.

Hier der Code von der Homepage:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
        <head>
                <?php page_header(); ?>
        </head>       
        <body>       
                       
                <!-- || CONTAINER || -->
               
                <div id="container">
               
                        <!-- || HEADER || -->
                       
                        <div id="header">                               
                        </div>
                       
                        <!-- || MENU || -->
                       
                        <div id="menu">
                                <?php page_fullmenu2("0", "true", "true"); ?>
                        </div>
                       
                       
                        <!-- || INHALT || -->
                        <center>
                        <div id="inhalt">
                                <center>                               
                                <table cellspacing="0" cellpadding="0">
                                        <tr>
                                                <td class="top">                                                       
                                                </td>
                                        </tr>
                                        <tr >
                                                <td class="mid">
                                                       
                                                        <!-- || TEXT || -->
                                                       
                                                        <div id="text">                                                       
                                                               
                                                                <?php page_content(); ?>
                                                       
                                                        </div>                                       
                                                </td>
                                        </tr>
                                        <tr>
                                                <td class="bottom">                                                                       
                                                </td>
                                        </tr>
                                </table>
                                </center>                                                               
                        </div>                       
                </div>
                         
        </body>
</html>

und der CSS Code dazu:
PHP-Code:

* {

    
margin0px;
    
padding0px;

}
 
html {

    
background#161616; 
    
text-aligncenter;
    
width100%;
    
height100%;

}

body {

    
width100%;
    
background#161616;
    
font-size11px;
    
line-height18px;
    
color#CCCCCC; 
    
font-family"Verdana""Tahoma" "Arial" "MS Sans Serif";
    
margin0px auto;
    
text-alignleft;
    
height100%;

}

td {

    
font-size11px;
    
line-height18px;
    
font-family"Verdana""Tahoma" "Arial" "MS Sans Serif";

}

ul {

    
margin0px;
    
padding0px;

}

li {

    list-
stylenone;

}

form {

    
margin0px;
    
padding0px;

}

img {

    
bordernone;

}

#cleaner {

    
clearboth;
    
height0px;
    
font-size0px;
    
displayblock;
    
width100%;

}

{

    
color#545248;
    
text-decorationnone;

}

a:hover {

    
color#545248;
    
text-decorationunderline;

}

/* - LAYER + CONTAINER - */


#container {
    
width1000px;
    
backgroundurl(../images/wood_planks.jpgrepeat top center;    
    
border-rightsolid 1px #A5B5C5;
    
border-leftsolid 1px #A5B5C5;
    
positionrelative;
    
min-height100%;
    
heightauto !important;
    
height100%;
    
margin0px auto;
}


/* - HEADER - */


#header {    
    
    
width1000px;
    
height216px;
    
backgroundurl(../images/header.pngno-repeat center top;
    
margin0px 0px 0px 0px;
    
padding0px 0px 0px 0px;    
    
    
positionrelative;

}

/* - CONTENT - */

#inhalt {
    
    
min-height100%;    
    
margin0px;
    
width:1000px;
    
padding20px 0px;
    
text-aligncenter;
    
backgroundurl(../images/back.pngtop center no-repeat;
}


#inhalt td.mid {
    
backgroundurl(../images/mid_lang.pngrepeat-y;
    
width750px;
}

#inhalt td.top {
    
backgroundurl(../images/top_lang.png);
    
width750px;
    
height54px;
}

#inhalt td.bottom {
    
backgroundurl(../images/bottom_lang.png);
    
width750px;
    
height30px;
}


/* - FULL MENU - */

#menu {
    
positionrelative;
    
width1000px;
    
height38px;
    
backgroundurl(../images/menu.pngrepeat-x top left;
    
margin0px;
    
padding0px 0px;

}

#menu table {
    
positionrelative;
    
top: -2px;
    
margin0px;
    
padding0px;
}

#nav, #nav ul { /* all lists */
    
padding0;
    
margin0;
    list-
stylenone;
}

#nav a {
    
displayblock;
    
color#404040;
    
text-decorationnone;
}
#nav li.float {
    
floatleft;
    
widthauto;    
}

#nav a.header {
    
padding14px 10px 24px 10px;
}

#nav a.header:hover {
    
padding14px 10px 24px 10px;
    
backgroundurl(../images/menu_hover.pngrepeat-x top left;
    
color#FFFFFF;
}

#nav li ul li a {
    
padding6px 9px;
}

#nav li ul li a:hover {
    
padding6px 9px;    
    
color#FFFFFF;
}

#nav li { /* all list items */
    
padding0px;
    
line-height1;
    
font-size11px;
}

#nav li ul { /* second-level lists */
    
positionrelative;
    
padding0px 3px 0px 0px;
    
top: -12px;
    
left: -999em/* using left instead of display to hide menus because display: none isn't read by screen readers */
    
bordersolid 1px #A5B5C5;
    
background#D1D8DF;
}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
    
leftauto;
}

/* - TEXT - */


#text {
    
text-align:justify;
    
padding0px 40px;
    
font-family"Verdana""Tahoma" "Arial" "MS Sans Serif";
    
color#CCCCCC;



Timo 29.09.2008 18:27

Faq Punkt 4 und les mal was die letzten Tage so geschrieben wurde.

AeroWall 29.09.2008 19:08

Danke für deine schnelle Antwort.
Der Punkt 4 in den FAQ konnte mir leider nicht weiterhelfen. (Oder ich habs nicht gecheckt)

Mein Problem nochmals anders erläutert.

Ich habe ein DIV-Tag (#container) und ein Zweites (#Inhalt) in Container.

Container hat bereits eine Höhe von 100%. #Inhalt soll jetzt auch eine Höhe 100% einnehmen. Also so die restliche Höhe des Containers annehmen.

Für weitere Hilfe wäre ich sehr dankbar.

andir 29.09.2008 21:21

Nimm doch mal das height: auto !important bei #container raus - möglicherweise überschreibt das auch nachfolgende height-Angaben.
Ansonsten frag nochmal nach.

heiko_rs 29.09.2008 21:28

Dazu grundsätzlich immer interessant: FAQ Punkt 1 und 7. Aber so oder so: "Resthöhe" einnehmen geht nicht.

Bei weiteren Fragen poste bitte einen Link (siehe meine Sign.).

AeroWall 29.09.2008 21:37

Zitat:

Zitat von heiko_rs (Beitrag 404398)
Aber so oder so: "Resthöhe" einnehmen geht nicht.

Könnte man es denn so machen, dass man zwei Hintergründe übereinander macht? Das ist ja insgesamt auch mein Ziel. Der Hintergrund "back.png" soll vollständig (ohne scrollen bei wenig Inhalt angezeigt werden.

Vielleicht ist das ja realisierbar.
Super lieb von euch, wenn Ihr mir helfen würdet. Fachpersonal!

heiko_rs 29.09.2008 21:52

Die übliche Vorgehensweise: Eine Grafik nimmt vertikal den vollen Viewport ein (z.B. indem sie body zugewiesen wird), und wird z.B. von der Header-Grafik überdeckt. Dann scheint es so, als würde erstgenannte Grafik die "Resthöhe" einnehmen.


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:39 Uhr.

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

© Dirk H. 2003 - 2019