Antworten auf deine Fragen:
Neues Thema erstellen

Zeilenumbruch

F

Frank158

Guest

Hallo,

ich bin neu hier und hoffe, das mir jemand helfen kann.

Folgendes Problem: Ich habe ein Layout fertig mit html und Css. Im Div-Tag "inhalt" möchte ich, daß der Textfluss am Ende der Zeile wie bei "Word" automatisch in die nächste Zeile springt. Ich habe schon alles ausprobiert, aber noch zu keinem Ergebnis gekommen.
Code: 
body{
    text-align:center;
    margin:0;
    padding:0;
    background-color: #def181;
}
#container{
    width:955px;
    margin:0 auto;
    text-align:left;
    height: auto;
}
#banner{
    width: 955px;
    background-color: #FFFFCC;
    height: 266px;
}
#inhalt{
    width:735px;
    background-color: #FFFFFF;
    float:left;
    margin-bottom: 10px;
    margin-top: 10px;
    margin-left: 10px;
}
#navigation{
    width:200px;
    background-color: #def181;
    float:left;
    margin-bottom: 10px;
    margin-top: 10px;    
}
.mainmenu{
    width: 200px;
    padding: 0;
    float: left;

}
.mainmenu ul {
    float: left;
    width: 100%;
    list-style: none;
    line-height: 1;
    color:#000000;
    background: #FFFFEB;

    padding: 0;
    border: solid #A0A0A4;
    border-width: 1px 1px;
    margin: 0 0 0 0;
}

.mainmenu a, .mainmenu a:visited {
    display: block;
    width: 100%;
font-family:Verdana, Arial, Helvetica, sans-serif;font-size:14px;font-weight:bolder;font-style:normal;text-decoration:none;
    color: #000000;
    text-decoration: none;
    padding: 1em 0em;
    text-indent:1em;
    margin: 0;    

}
.mainmenu li li a{padding:1em;text-indent:0;}
.mainmenu ul ul a{
    width:100%;
    height:100%;
}
.mainmenu ul a{
        width: 100%;
}


.mainmenu li  {
    float: left;
    width:100%;
    margin:0;
    padding:0;
}

.mainmenu ul li {float:left; position:relative; }
.mainmenu ul li  {width:100%;} /* !!!!! */
    
.mainmenu li ul {
    position: absolute;
    left: -999em;
    height: auto;
    width:15em;    
    background: #FFFFEB;
    font-weight: normal;
    border-width: 1px;
    margin: 0;
}

.mainmenu li li {
    width: 100% ; 
}
.mainmenu li a{width: 100% ; }
.mainmenu li li a{
    width: 100%;
}

.mainmenu li ul  {
    margin: -2.1em 0 0 -0.3em;
}
.mainmenu li ul ul {
    margin: -2.1em 0 0 -0.3em;
}
.ul_ch, 
.mainmenu li:hover ul ul,
.mainmenu li li:hover ul ul,
.mainmenu li li li:hover ul ul,
.mainmenu li li li li:hover ul ul,
.mainmenu li li li li li:hover ul ul
{
    left: -999em;
}
.mainmenu li:hover ul,
.mainmenu li li:hover ul,
.mainmenu li li li:hover ul,
.mainmenu li li li li:hover ul,
.mainmenu li li li li li:hover ul
{
    left: 100%; /* !!! */
}
.mainmenu li:hover ul.ul_ch   
{
    left: 100%; /* !!! */
}

.mainmenu li:hover{
    background: #F6F552;
}

.mainmenu li:hover a,.mainmenu li:hover a:visited,.mainmenu li:hover a:hover,.mainmenu li a:hover{
    color:#000000;
}
.mainmenu li:hover li a, .mainmenu li li:hover li a, 
.mainmenu li li li:hover li a, .mainmenu li li li li:hover li a,
.mainmenu li:hover li a:visited, .mainmenu li li:hover li a:visited, 
.mainmenu li li li:hover li a:visited, .mainmenu li li li li:hover li a:visited
{
    color:#000000;
}
.mainmenu li li:hover, .mainmenu li li li:hover, 
.mainmenu li li li li:hover , .mainmenu li li li li li:hover , .mainmenu li li li li li li:hover 
{
    background: #F6F552;
    z-index:9999;
}
.mainmenu li li:hover a,.mainmenu li li li:hover a, 
.mainmenu li li li li:hover a, .mainmenu li li li li li:hover a
{
    color: #000000; 
}

.mainmenu ul ul a, .mainmenu ul ul a:visited,
.mainmenu li li a, .mainmenu li li a:visited
{
    color: #000000;
}
.mainmenu ul ul a:hover,
.mainmenu li:hover li:hover a,.mainmenu li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a:visited{
    color: #000000;
}
.mainmenu li:hover li:hover li a,.mainmenu li:hover li:hover li a:visited ,
.mainmenu li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li:hover li a:visited{
    color: #000000;
}
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title>Tierschutz-aktiv-Friesland und Umzu e. V.</title>
<!-- TemplateEndEditable -->
<link href="../styles/main.css" rel="stylesheet" type="text/css" />
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>
<body>
<div id="container">
<div id="banner"><img src="../images/Bannerneu.jpg" width="955" height="266" /></div>
<div id="navigation">
  <div class="mainmenu">

<ul>
      <li class="li_nc"><a href="../index" target="_self" >Startseite</a></li>
      <li class="li_hc"><a href="../tiervermittlung.html" target="_self" >Tiervermittlung</a>
        <ul class="ul_ch">
         <li class="li_nc"><a href="../hunde.html" target="_self" >Hunde</a></li>
         <li class="li_nc"><a href="../katzen.html" target="_self" >Katzen</a></li>
         <li class="li_nc"><a href="../kleintiere.html" target="_self" >Kleintiere</a></li>
         <li class="li_nc"><a href="../voegel.html"  >Voegel</a></li>
<li class="li_nc"><a href="../private_vermittlung.html" target="_self" >private Vermittlung</a></li>
      </ul></li>
      <li class="li_hc"><a href="#" target="_self" >Happy End</a><ul class="ul_ch">
         <li class="li_nc"><a href="../vermittelt.html" target="_self" >vermittelt</a></li>
         <li class="li_nc"><a href="../stories.html" target="_self" >Stories</a></li>
      </ul></li>
      <li class="li_nc"><a href="../gesucht.html"  >gesucht</a></li>
      <li class="li_hc"><a href="../tiere_helfen_menschen.html"  >Tiere helfen Menschen</a>
        <ul class="ul_ch">
         <li class="li_nc"><a href="../t_h_m_a_infos.html"  >Allg. Informationen</a></li>
         <li class="li_nc"><a href="../t_h_m_ausbildung.html"  >ausbildung</a></li>
         <li class="li_nc"><a href="../t_h_m_besuchshunde.html"  >Besuchshunde</a></li>
         <li class="li_nc"><a href="../t_h_m_staetten.html"  >Besuchsstaetten</a></li>
         <li class="li_nc"><a href="../t_h_m_konzept.html"  >Konzept</a></li>
      </ul></li>
      <li class="li_hc"><a href="#"  >Aktuell</a><ul class="ul_ch">
         <li class="li_nc"><a href="../neuigkeiten.html"  >Neuigkeiten</a></li>
         <li class="li_nc"><a href="../archiv.html"  >Archiv</a></li>
         <li class="li_hc"><a href="#"  >Veranstaltungen</a><ul class="ul_ch">
            <li class="li_nc"><a href="../kalender.html"  >Kalender</a></li>
            <li class="li_nc"><a href="../projekte.html"  >Projekte</a></li>
         </ul></li>
      </ul></li>
      <li class="li_nc"><a href="../geschichten.html"  >Geschichten</a></li>
      <li class="li_hc"><a href="#"  >Umwelt und Natur</a><ul class="ul_ch">
         <li class="li_nc"><a href="../umwelt.html"  >Umwelt</a></li>
         <li class="li_nc"><a href="../tiere_natur.html"  >Tiere in der Natur</a></li>
      </ul></li>
      <li class="li_hc"><a href="../ueber_uns.html"  >Ueber uns</a>
        <ul class="ul_ch">
         <li class="li_nc"><a href="../vorstand.html"  >Vorstand</a></li>
         <li class="li_nc"><a href="../gruendung.html"  >Gruendung</a></li>
         <li class="li_nc"><a href="../gebuehren.html"  >Gebuehren</a></li>
         <li class="li_nc"><a href="../download.html"  >Download</a></li>
         <li class="li_nc"><a href="../pressemitteilung.html"  >Pressemitteilungen</a></li>
      </ul></li>
      <li class="li_nc"><a href="../links.html"  >Links</a></li>
        <li class="li_nc"><a href="../impressum.html"  >Impressum</a></li>
        <li class="li_nc"><a href="../haftungsausschluss.html"  >Haftungsausschluß</a></li>
</ul>


</div>

</div>

<!-- TemplateBeginEditable name="Inhalt" -->
<div class="mainmenu" id="inhalt">dein inhalt </div>
<!-- TemplateEndEditable --></div>
</body>
</html>
Ich freue mich schon auf Eure Antworten.

Gruß Frank
 
Zuletzt bearbeitet von einem Moderator:

cebito

cebito

undefined

AW: Zeilenumbruch

2.Zeile? Verteh ich nicht, bei nur 2 Worten Text. Im Übrigen hat dein Div gleichzeitig die class "mainmenu" und die ID "inhalt". Wozu die class? Brauchst du die dort? Eher nicht, oder?

Und bitte, benutze unbedingt die Codewerkzeuge im Editor, das kann sonst kein Mensch lesen :hmpf:
 
F

Frank158

Guest

AW: Zeilenumbruch

Hallo,

ich meine: wenn ich eine WORD-Datei schreibe, ist der Zeilenumbruch am Ende einer Zeile automatisch, das heißt, ich brauche nicht "ENTER" zu drücken. Wenn ich aber in diesen TAG schreibe, und das Ende einer Zeile erreiche, springt der Textfluss nicht automatisch in die nächste Zeile, um dort weiter schreiben zu können. Der TAG wird immer breiter, und irgendwann ist er nicht mehr an de jetzigen Position, sondern unten unter der Menüleiste.

Ich lerne noch, versuche mir die Site zusammen zu basteln. Ist auch noch nicht fertig;).

Gruß Frank
 
cebito

cebito

undefined

AW: Zeilenumbruch

Ich weiß nicht, wo dein Problem liegt, dein div hat 735px Breite, und die behält er auch. Hab mal 5000 Worte Lorem Ipsum reingemacht, da verschiebt sich nichts, nicht im FF und auch nicht im IE von 5.5 aufwärts bis 8 getestet.
Wenn das Prob weiter besteht, musst du die Seite irgendwo hochladen, damit wir uns das ansehen können.
 
F

Frank158

Guest

AW: Zeilenumbruch

Danke für Deinen Test,

ich hatte was anderes eingegeben, und da hatte sich das Problem ergeben. Ich glaub, ich werde es erst mal auf sich beruhen lassen, um beim Eingeben der einzelnen Seiten zu sehen, was passiert.

Gruß Frank
 
chacki

chacki

Ihre Werbung hier

AW: Zeilenumbruch

Kann dein Problem auch nicht nachvollziehen jedoch sollte

overflow:scroll

etwas klarheit in dein Problem bringen :)
 
sokie

sokie

Mod | Web

AW: Zeilenumbruch

chacki schrieb:
Kann dein Problem auch nicht nachvollziehen jedoch sollte

overflow:scroll

etwas klarheit in dein Problem bringen :)
Zum Vergrößern anklicken....
overflow:scroll bringtkeine Klarheit, sondern (unnötigerweise) zusätzlich unschöne Scrolleisten.

Der fehlende Umbruch ist dann der Fall, wenn eine Zeile ohne leerzeichen länger ist als die Breite des Containers. Vielleicht hast du beim Testen so etwas in den Container gesetzt.

blindtexte, wie von cebito erwähnt machen die Sache einfacher Lorem ipsum - Generator and Information
 
F

Frank158

Guest

AW: Zeilenumbruch

Hallo,

ja, genau, einfach mal in die Tasten gehauen um zu testen, ohne Leerzeichen. Alles klar, danke nochmal für die Antworten, wieder was dazu gelernt.

Gruß Frank
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 146 (Mitglieder: 2, Gäste: 144)
Robots: 350

Statistik des Forums

Themen
118.640
Beiträge
1.538.508
Mitglieder
67.557
Neuestes Mitglied
azmostbethaot
Oben