✔ Text länger als DIV-Container

Status
Nicht offen für weitere Antworten.
C

coral

Mitglied
Hi Leute,

ich habe folgendes Problem:::
Ich versuche gerade eine Seite nur mit CSS, also ohne Tabellen, zu erstellen.
Die Höhe der Seite sollte dem Bereich des Browserfensters entsprechen (also 100%).
Soweit habe ich das auch hin bekommen.
Aber sobald ich nun Text in den entsprechenden DIV einfüge, ändert dieser sich leider nicht dynamisch, d.h. der Text läuft einfach über den DIV hinaus. So ist das bei Firefox, Netscape und Mozilla. Bei IE und Opera vergrössert er zwar den DIV und zeigt etwas mehr Text an, schneidet aber irgendwo mittendrin trotzdem einfach den Text ab.
Ich habe schon einige Dinge ausgetestet, aber nichts scheint mit allen Browsern zu funken...

Hier mein Code:::

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Der Versuch, eine Website ausschliesslich mit CSS zu gestalten . . . </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>

    <div id="wrapper">
    
        <div id="header">
        header
        </div>
        
        <br style="clear: left;" />
        
        <div id="nav">
            <div align="center">            
            Navigation
            </div>
        </div>
        
        <div id="content">
        
            <script language="JavaScript">
            <!--
            for (i=1; i<7; i++ ) {
                document.write("<p>Achtung! Dieser Blindtext wird gerade durch 130 Millionen Rezeptoren Ihrer Netzhaut erfasst. Die Zellen werden dadurch in einen Erregungszustand versetzt, der sich über den Sehnerv in dem hinteren Teil Ihres Gehirns ausbreitet. Von dort aus überträgt sich die Erregung in Sekundenbruchteilen auch in andere Bereiche Ihres Grosshirns. Ihr Stirnlappen wird stimuliert. Von dort aus gehen jetzt Willensimpulse aus, die Ihr zentrales Nervensystem in konkrete Handlungen umsetzt. Kopf und Augen reagieren bereits. Sie folgen dem Text, nehmen die darin enthaltenen Informationen auf wie ein Schwamm. Nicht auszudenken, was mit Ihnen hätte passieren können, wenn dieser Blindtext durch einen echten Text ersetzt worden wäre.</p><br />");
            }
            //-->
            </script>
        
        </div>
        
        <br style="clear: left;" />
        
        <div id="footer">
        footer 
        </div>
    
    </div>

</body>
</html>
Code: 
/* Basics */
html, body {
    font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; 
    font-size: 62.5%;
    background-color: #fff;
    color: #000;
    height: 100%;
    min-height: 100%;
    margin: auto auto;
    padding: 0px;
}

h1, h2, h3, h4, h5, h6, div, p, table, td, ul, ol, li, dd, dt, dl, blockquote, address, hr, pre {
    margin: 0px;
    padding: 0px;
}

p, li, h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    font-size: 1em;
}

/* Container */
#wrapper {
    width: 800px;
    min-height: 100%; 
    margin: auto auto;
    padding: 0px;
    position: relative;
    background: #eee url(images/twocol.png) 0 0;
}

* html #wrapper {
    height: 100%;
}

#header {
    position: relative;
    width: 800px;
    height: 100px;
    margin: 0px;
    padding: 0px;
    text-align: center;
    background-color: #ddd;
    float: left;
}

#nav {
    position: relative;
    width: 200px;
    margin: 0px;
    padding: 0px;
    text-align: center;
    float: left;
}

#content {
    position: relative;
    width: 600px;
    margin: 0px;
    padding: 0px;
    text-align: left;
    float: right;
}

#footer {
    position: absolute; 
    bottom: 0px;
    left: 0px;
    width: 800px;
    height: 50px;
    margin: 0px;
    padding: 0px;
    text-align: left;
    background-color: #aaa;
    float: left;
}

/* Text */
p {
    font-size: 2em;
    line-height: 120%;
    padding-left: 75px;
    width: 450px;
    text-align: justify;
}
Umgebung::: WinXP | Firefox 1.5.0.3 | IE 6.x | Opera 7.54 | Mozilla 1.7.3 | Netscape 7.1

Wäre schön, wenn jemand einen Lösungsansatz hätte...

Einen schönen Tag noch wünscht
coral
 
Entferne mal die Positionierung des Footers aus dem CSS-Code, dann werden die letzten Textzeilen auch sichtbar.

Code: 
#footer {
    /*position: absolute;*/
    /*bottom: 0px;*/
    /*left: 0px;*/
    width: 800px;
    height: 50px;
    margin: 0px;
    padding: 0px;
    text-align: left;
    background-color: #aaa;
    float: left;
}

P.S. Und bitte gewöhne dir diese inflationäre Zeichensetzung ab ;)
 
Alternativ zu meinem letzten Vorschlag könntest du auch folgende CSS-Regel für das DIV #content anwenden:

Code: 
padding: 0 0 50px 0;
 
Hi Maik,

vielen Dank für Deine Lösungsvorschläge.
Leider funktionieren sie beide nur in IE und Opera.
Beim Mozilla passiert gar nichts - also der Text läuft wie bisher über das DIV hinaus.
Firefox vergrössert wohl nun das DIV, aber dafür wird die Hintergrundgrafik aus dem DIV #wrapper mittendrin einfach nicht mehr wiederholt.

Einen schönen Tag noch wünscht
coral

P.S.: Ich werde es versuchen... ;-)
 
Hi Maik,

So sieht es bei mir auch aus. Nur die Hintergrundgrafik zickt herum.
Die Hintergrundgrafik wird durchaus wiederholt, allerdings nur bis zum vierten Absatz.
Dort irgendwo hört sie plötzlich auf (siehe Screenshot).
Auch nachdem ich ein "background-repeat: repeat;" in den #wrapper DIV eingefügt habe, hat sich daran nichts geändert.
Mozilla stellt das Ganze übrigens so dar wie Firefox (ich musste den Cache leeren).

http://img91.imageshack.us/my.php?image=shot6gx.png

Einen schönen Tag noch wünscht
coral
 
Setze die Hintergrundgrafik doch mal testweise im body-Element ein:

Code: 
body {
background: url(images/twocol.png) 50% 0 repeat-y;
}
 
Hi Maik,

auf den ersten Blick sah das Ganze wirklich sehr gut aus!
Hat in allen Browsern gepasst!
Dann habe ich die Textlänge reduziert und... (Verzeihung!) Da hatte ich wieder ein Problem!
Nun schiebt sich der Footer direkt unter den Text DIV und das sieht natürlich jetzt hässlich aus, weil die Hintergrundgrafik ja bis unten wiederholt wird und der Footer eigentlich auch ganz unten sitzen sollte.
Immerhin sind sich nun alle Browser mal einig und stellen die Seite alle so da. ;-)
So langsam ahne ich, warum die Leute lieber weiterhin Tabellen benutzen.

http://img91.imageshack.us/my.php?image=shot1qw.png

Einen schönen Tag noch wünscht
coral

// edit

Okay, ich habe die Lösung!
War in gewisser Weise ein Flüchtigkeitsfehler. Und zwar habe ich dem DIV #content den float right zugewiesen, aber in der HTML-Datei left gecleart.
Danach habe ich ich noch Maiks zweiten Lösungsansatz befolgt und im #content DIV das padding entsprechend der Höhe des Footers angepasst ( padding: 0 0 50px 0; ), da er mir sonst unten Text abgeschnitten hat.
Aber nun sieht es in allen mir zur Verfügung stehenden Browsern gleich aus und damit ist eine solide Basis geschaffen.

Nochmal vielen Dank für Deine Hilfe, Maik!

Einen schönen Tag noch wünscht
coral
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück