• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Kein Automatischer Zeilenumbruch

Reboot21

Neues Mitglied
Moin liebe html Community

im vorraus muss ich schoneinmal sagen, dass ich eigentlich noch ein ziemlicher Anfänger bin. (Ich mache html erst seit 3 Tagen :) ) Auf jeden Fall habe ich das Problem, dass der Text keinen automatischen Zeilenumbruch machen will, trotz, dass ich ihn mit den Tag <p> versehe.. Ich habe auch schon alles mögliche in CSS ausprobiert (Padding, margin etc.), jedoch kam ich zu keinem Ergebnis und längerer Text wurde somit über die ganze Seite angezeigt. Zudem sollte ich sagen, dass diese Seite selbstverständlich zum Üben ist und die dort genannte fiktive Firma nicht in echt existiert.

Quelltext (HTML):

HTML:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" type="text/css">
        <title>Mehri Solutions - Startseite</title>
        <link rel="icon" href="favicon.ico" type="image/x-icon">
    </head>
    <body>
        <div id="header">
            <p>Ihr Dienstleister für<br/> Informationstechnik</p> 
        </div>
            <div id="nav">
                <a href="#">Startseite</a>
                <a href="#">Unsere Dienstleistungen</a>
                <a href="#">Über Uns</a>         
            </div>
        <div id="inhalt">
            <h1>Test-Überschrift</h1>
            <hr/>
            <p>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>
        </div>
        <div id="footer">
        <p>© Copyright Mehri Solutions GmbH. Alle Rechte vorbehalten</p>
        <img src="img/facebook.png" alt="Besuchen Sie uns auf Facebook" style="margin-left: 435px" height="32" width="32">
        <img src="img/twitter.png" alt="Besuchen Sie uns auf Twitter" height="32" width="32">
        </div>
    </body>
</html>

Quelltext (CSS):

Code:
@font-face { font-family: 'fedservice'; src: url('fonts/fedservice.ttf') format('truetype'); }
@font-face { font-family: 'fedservicelight'; src: url('fonts/fedservicelightcondital.ttf') format('truetype'); }

* {
    margin: 0 auto;
    padding: 0;
}

html, body {
    width: 900px;
    font: 100% Arial, Helvetica, sans-serif;
}

#header{
    margin-top: 5px;
    background:url(img/logo.png) no-repeat;
    height: 145px;
}

#header p{
    font-family: fedservice;
    padding: 40px 0 0 270px;
    font-size: 2.5em;
    color: #DB0021;
}

#nav{
    margin: 18px 0 18px 0;
    padding-top: 5px;
    background-color: #545454;
    border-radius: 20px;
    height: 30px;
    text-align: center;
}

#nav a{
    font-family: fedservicelight;
    font-size: 20px;
    padding: 0px 10px 0px 10px;
    border: solid white 3px;
    border-top-style: hidden;
    border-bottom-style: hidden;
    color: white;
    font-weight: bold;
}

#inhalt{
    padding: 10px 10px 10px 10px;
    color: white;
    background-color: #545454;
    border-radius: 20px;
}

hr{
    height: 20px;
    visibility: hidden;
}

#inhalt h1{
    text-align: center;
}

#inhalt p{
    font-weight: bold;
}

    #footer{
    border-radius: 20px;
    margin-top: 18px;
    padding-top: 7px;
    padding-bottom: 7px;
    background-color: #545454;
}

#footer p{
    height: 30px;
    text-align: center;
    font-weight: bold;
    color: white;
}

Ich hoffe das ist in Ordnung, dass ich den Code hier gepostet habe.


Ich bedanke mich schoneinmal für jede Antwort und vorallem für Verbesserungvorschläge! :)

Reboot21
 
<p>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>

Das Stichwort ist nicht Zeilenumbruch sondern Silbentrennung. Woher soll der Browser nun wissen, an welcher Stelle er trennen muss? Zumal das je nach Sprache unterschiedlich sein kann.

Die dafür zuständigen CSS-Attribute heißen word-break und hyphens. Ich würde dir allerdings empfehlen, dich zu Anfang nicht in Detailfragen zu verlieren.
 
Ups. Stimmt ja :) Hätte mir ja klar sein müssen, dass der nach jeder Silbe trennt! Jetzt funktioniert es auch. Ich Schussel ;)

Danke!
 
Zurück
Oben