XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   CCS Problem mit <div>s (http://xhtmlforum.de/showthread.php?t=37064)

dope_dope 03.10.2005 12:58

CCS Problem mit <div>s
 
Hi Leute,

eigentlich möchte ich nur ein <div id="1">, dass ein weiteres <div id="2"> enthält, welches noch ein <div id="3"> enthällt.

div 3 enthält den text und soll rechts einen Scrollbalken anzeigen, fals der Text zu lang ist.

Mein problem ist dabei, dass die inneren divs immer aus dem äußeren "ausbrechen". Wie kann ich denn sagen, dass z.b. div 2 nicht über div 1 hinausragen darf???

Kann mir jemand helfen????
thx, MFG
dope_dope

Cyberman 03.10.2005 13:16

Soweit ich weiß dürfen IDs und Klassen nicht mit Zahlen beginnen.

Die Browser sollten die IDs also ignorieren. Versuch mal IDs die mit einem Buchstaben beginnen, ev. klappts dann.

dope_dope 03.10.2005 13:24

Das ist nur ein Beispiel, die Klassen haben eigentlich Namen anstatt zahlen!

Hat jemand eine andere Idee??

fricca 03.10.2005 13:26

Zitat:

Zitat von dope_dope
Das ist nur ein Beispiel, die Klassen haben eigentlich Namen anstatt zahlen

Erstell doch bitte einen Beispielcode, der dein Problem nachvollziehbar macht:
http://www.xhtmlforum.de/viewtopic.php?t=1399

Grüße
fricca

dope_dope 03.10.2005 13:41

Also noch mal von vorne:

Das ist meine HTML-Datei:

Code:

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

<head>
        <title>Titel</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
       
        <link rel="stylesheet" type="text/css" media="screen, projection, print" href="style.css" />
</head>

<body>

<div id="header">
</div>

<div id="main">

        <div id="main-left">
                Menu
        </div>
               
        <div id="main-content">
                <div id="inner-border">
                        ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
                ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
                ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
                ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
                ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
                ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
                ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
                ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
                ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
                ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
                ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
                ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
                ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
                ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
                ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
                ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
                ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
                ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
                ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
                ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
                ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
                ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
                ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
                ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
                ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
                ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
                ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
                </div>
        </div>

</div>

</body>
</html>


Und das ist die CSS-Datei:
Code:

body {
        font-family: verdana, geneva, arial, sans-serif;
        font-size: 0.7em;
        color: #5c5c5c;
        line-height: 1.7em;        }

div#header {        /* Header */
        font-size: 28px;       
        text-align: center;
        color: #000000;
        border: 2px solid red;
        height: 91px;
        padding: 3px;
        margin-bottom: 10px;
        clear: both;        }

div#main {        /* Main */
        position: absolute;
        background-color: #ffffff;
        border: 1px solid green;
        padding: 2px;
        height: 75%;
        margin-top: 5px;
        width: 98%;        }

div#main-left {        /* Linke Leiste */
        background-color: #ffffff;
        border-right: 5px solid red;
        float: left;
        padding: 5px;
        width: 16%;
        height: 85%;
        padding-top: 25px;
        padding-bottom: 35px;
        padding-right: 0px;        }

div#main-content {        /* Rechte Seiste */
        position: relative;
        background-color: #ffffff;
        border: 5px solid red;
        float: right;
        padding: 2px;
        width: 80%;
        height: 96%;        }

div#inner-border {        /* Main-Content innerer Rahmen */
        background-color: #ffffff;
        border: 2px solid red;
        padding: 10px;
        margin: 0px;
        height: 94%;
        overflow: auto;        }


Was ich möchte:
1.) div#main soll 75% der gesamten Seite hoch sein, egal was drin steht!
2.) div#main-left und div#main-content dürfen nicht über den unteren Rand von div#main hinausragen
3.) div#inner-border darf nicht über den unteren Rand von div#main-content hinauragen
4.) bei div#inner-border sollen scrollbalken angezeigt werden, anstatt den gesamten div#main einfach nach unten zu vergrößern wie es im Moment im IE der Fall ist (siehe auch 1.)

--> Was muss ich machen, damit z.B. div#main-content weiss, dass es nen Teil von div#main ist und da drinnen bleibt anstatt sich drüber zu legen??? Und damit es auch die Größe von div#main nicht einfach vergrößert sondern so lässt wie sie ist? Kann ich das mit position machen oder wie geht das???

Ist das jetzt besser erklärt???

fricca 03.10.2005 13:48

Zitat:

Zitat von dope_dope
Ist das jetzt besser erklärt?

Es geht nicht um die Erklärung, sondern um die Beschaffenheit der Codeauschnitts. Folge bitte dem Link!!!11!1

Welchen Doctype verwendest du?
Hast du alle relevanten CSS-Angaben für die Elternelemente von #main gemacht?
Das kann man an deinen Ausschnitten nicht sehen.

dope_dope 03.10.2005 14:02

Ich habe den obigen Code jetzt um die entsprechenden Punkte ergänzt. Wenn du dir diesen kopierst, dann wirst du merken, dass "ganz langer Text (...)" nicht eine absolute größe hat und mit Scrollbalken angezeigt wird wie ich es haben möchte, sondern die divs einfach immer weiter nach unten vergrößert werden umso mehr text es wird.

Was kann ich denn nun dagegen machen???

fricca 03.10.2005 19:17

Ich vermute, du testest im IE? Schlechte Wahl, nimm lieber Firefox.

Der IE braucht:
html, body {height:100%}

Setz außerdem mit
* {margin:0; padding:0;} alle Default-Randabstände auf 0.

Warum positionierst du #main absolut?

Pixel und Prozentwerte mischen (so wie du es tust) kann nicht gutgehen. Pixelhöhe von #header + Prozenthöhe von #main erzeugt irgenwann doppelte Scrollleisten. Nicht schön.
Außerdem mischt du prozentuale Höhen und Breitenangaben mit padding/border/margin in Pixel.
Das Box-Modell ist dir bekannt?

Hier gibt's eine "100% + Rest"-Lösung:
http://www.xhtmlforum.de/viewtopic.php?t=4465

Grüße
fricca

dope_dope 03.10.2005 20:32

Hier die Lösung für mein Beispiel:

IE braucht:
body { height: 100%;}

Firefox braucht zusätzlich:
html { height: 100%;}

Jetzt kann ich auch endlich das position: absolute was da eh nichts verloren hatte entfernen!

THX an fricca !!!


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:43 Uhr.

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

© Dirk H. 2003 - 2023