Text geht über DIV hinaus?

katschipatschi · 06.07.2011

Hallo,

spiele mich seit ein paar Tage mit css.
Bei meinem div geht immer wenn ich den text mit margin left einrücke über den Div hinaus? wenn ich marign left wieder lösche, dann ist der Text wieder, wie es sein soll im div. Habe es schon mit padding versucht, oder die breite des div id zu verkleinern, funktioniert alles nicht. Vielleicht kann mir hier jemand weiterhelfen?

hier mal mein Code

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>index</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div id="banner_haus"></div>
<div id="index_haus">
    <div id="text">Test test test test test test test test Test test test test test test test test Test test test test test test test test Test test test test test test test test Test test test test test test test test Test test test test test test test test Test test test test test test test test Test test test test test test test test Test test test test test test test test Test test test test test test test test Test test test test test test test test Test test test test test test test test Test test test test test test test test  </div>


</div>

<div id="footer1">
  <div id="menu1"></div>
  <div id="menu2">Home</div>
  <div id="menu3"></div>
  <div id="menu4">Haus</div>
  <div id="menu5"></div>
  <div id="menu6">Unterkunft</div>
  <div id="menu7"></div>
  <div id="menu8">Aktivitäten</div>
  <div id="menu9"></div>
  <div id="men10">Anreise</div>
  <div id="menu11"></div>
  <div id="menu12">Preise</div>
  <div id="menu13"></div>
  <div id="menu14">Anfrage</div>
  
</div>
<div id="footer2"></div>

</div>
</body>
</html>

css:

Code:

Body {
    margin: 50px auto;
    background-image: url(../images/background.jpg);
}

#container {
    width: 1018px;
    margin: px auto;
}


#container #index_home {
    background-image: url(../slices/index.png);
    height: 572px;
    width: 1018px;
    background-repeat: no-repeat;
}


#container #footer1 #menu1 {
    float: left;
    width: 30px;
    height: 116px;
    text-align: center;
    line-height: 120px;
}
#container #footer1 #menu3 {
    float: left;
    height: 116px;
    width: 35px;
}
#container #footer1 {
    background-image: url(../slices/footer1.gif);
    height: 116px;
    width: 1018px;
    background-repeat: no-repeat;
}
#container #footer1 #menu2 {
    float: left;
    height: 116px;
    width: 103px;
    text-align: center;
    line-height: 150px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-style: italic;
    color: #663300;
}
#container #footer1 #menu8 {
    float: left;
    height: 116px;
    width: 103px;
    text-align: center;
    line-height: 167px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-style: italic;
    color: #630;
}
#container #footer1 #menu6 {
    float: left;
    height: 116px;
    width: 103px;
    text-align: center;
    line-height: 160px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-style: italic;
    color: #630;
}
#container #footer1 #menu11 {
    float: left;
    height: 116px;
    width: 33px;
}
#container #footer1 #menu9 {
    float: left;
    height: 116px;
    width: 40px;
}
#container #footer1 #men10 {
    float: left;
    height: 116px;
    width: 105px;
    text-align: center;
    line-height: 160px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-style: italic;
    color: #630;
}
#container #footer1 #menu7 {
    float: left;
    height: 116px;
    width: 38px;
}
#container #footer1 #menu5 {
    float: left;
    height: 116px;
    width: 35px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-style: italic;
    color: #630;
}
#container #footer1 #menu14 {
    float: left;
    height: 116px;
    width: 106px;
    text-align: center;
    line-height: 155px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-style: italic;
    color: #630;
}
#container #footer2 {
    height: 20px;
    width: 1018px;
    background-color: #630;
}
#container #footer1 #menu13 {
    float: left;
    height: 103px;
    width: 33px;
}
#container #footer1 #menu4 {
    float: left;
    height: 116px;
    width: 103px;
    text-align: center;
    line-height: 160px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-style: italic;
    color: #630;
}
#container #footer1 #menu12 {
    float: left;
    height: 116px;
    width: 103px;
    text-align: center;
    line-height: 155px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-style: italic;
    color: #630;
}
#container #footer1 #menu15 {
    float: right;
    height: 116px;
    width: 43px;
}
#container #index_haus #text2 {
    float: left;
    height: 300px;
    width: 900px;
}
#container #index_haus #textmitte {
    height: 100px;
    width: 100px;
}
#container #banner_haus {
    background-image: url(../slices/guesthausbanner.png);
    background-repeat: no-repeat;
    height: 221px;
    width: 1021px;
}
#container #index_haus #textinhalt {
    float: left;
    height: 100px;
    width: 200px;
}
#container #index_haus {
    background-image: url(../slices/guesthausmiddle.jpg);
    background-repeat: no-repeat;
    height: 352px;
    width: 1021px;
}
#container #index_haus #text {
    height: 352px;
    width: 970px;
    margin-left: 460px;
}

fexx · 06.07.2011

AW: Text geht über DIV hinaus?

Du solltest dir mal das Box-Modell mal anschauen ...

margin + padding + width = breite

Myhar · 06.07.2011

AW: Text geht über DIV hinaus?

Um welches div geht es denn genau?
Und warum verwendest du ausschließlich divs? Du könntest die Seite von Haus aus mit semantisch korrektem Markup erstellen. Meiner Meinung nach hat es wenig Sinn hier nach einem Fehler zu suchen, wenn das Grundgerüst noch viel Verbesserungspotential beinhaltet.
Und wieso weist du deinen "Menüpunkten" (die sollten ja eigentlich in einer Liste stehen) und diversen anderen Elementen eine fixe Breite + Höhe zu? Für Containerelemente ist eine Breitenangabe ja noch sinnvoll, aber wieso nicht die Höhe des Elements selber bestimmen lassen? Eventuell mit min-height arbeiten, damit die Elemente nicht zu klein werden.
Auch frage ich mich, was dieser CSS Befehl bewirken soll?

Code:

#container #index_home {
    background-image: url(../slices/index.png);
    height: 572px;
    width: 1018px;
    background-repeat: no-repeat;
}

#index_home kann ich nirgends in deinem HTML File finden?

L. G.

kleeaar · 06.07.2011

AW: Text geht über DIV hinaus?

aaaalso:
du solltest den textabstand nicht durch einen zweiten container erstellen, sondern einfach dem übergeordneten Container #index_haus einen padding-left:460px;
geben.
und jetzt musst du auch einfach noch overflow:hidden; reinschreiben...
So kann nichts über den container raus gehen...

Grüße

katschipatschi · 06.07.2011

AW: Text geht über DIV hinaus?

Hallo,

vielen Dank für eure Antworten. Aber was für euch logisch erscheint ruft bei mir nur Fragezeichen auf

was ist z.b. das Box-Modell?
@kleeaar: das habe ich versucht, funktioniert aber leider nicht, der text geht trotzde über mein div hinaus?
@myar: dieses div ist gemeint:

<div id="index_haus"> <div id="text">Test test test test test test test test Test test test test test test test test Test test test test test test test test Test test test test test test test test Test test test test test test test test Test test test test test test test test Test test test test test test test test Test test test test test test test test Test test test test test test test test Test test test test test test test test Test test test test test test test test Test test test test test test test test Test test test test test test test test </div>

fexx · 06.07.2011

AW: Text geht über DIV hinaus?

katschipatschi schrieb:
was ist z.b. das Box-Modell?

http://tinyurl.com/mdnrrb ;-)

Myhar schrieb:
Um welches div geht es denn genau?
Und warum verwendest du ausschließlich divs? Du könntest die Seite von Haus aus mit semantisch korrektem Markup erstellen. Meiner Meinung nach hat es wenig Sinn hier nach einem Fehler zu suchen, wenn das Grundgerüst noch viel Verbesserungspotential beinhaltet.

Das waren auch meine ersten Gedanken.

Myhar · 06.07.2011

AW: Text geht über DIV hinaus?

katschipatschi schrieb:
Hallo,

@myar: dieses div ist gemeint:

<div id="index_haus"> <div id="text">Test test test test test test test test Test test test test test test test test Test test test test test test test test Test test test test test test test test Test test test test test test test test Test test test test test test test test Test test test test test test test test Test test test test test test test test Test test test test test test test test Test test test test test test test test Test test test test test test test test Test test test test test test test test Test test test test test test test test </div>

Das ist aber das div #index_haus und nicht #index_home. Ja, CSS Selektoren können nicht riechen, welches div du meinst ;-)
Und anstatt das Wort test x-mal zu wiederholen könntest du auch einen Blindtext verwenden (zB Lorem Ipsum) Der Sinn eines Blindtextes ist, dass unterschiedliche Wortlängen verwendet werden, was einem Text, wie er in der Praxis verwendet wird, am nächsten kommt und man so etwaige Fehler in der Darstellung schon im Vorfeld korrigieren kann.

L. G.

katschipatschi · 06.07.2011

AW: Text geht über DIV hinaus?

@myhar: vielen dank für die ausführliche Erklärung zum Thema Blindtext, das hilft mir leider auch nix weiter.

Wäre euch echt dankbar, wenn ihr mir weiterhelfen könnt!
Vl. könnt mir hier auch jemand anhand meines codes den richtigen code posten, bzw. sagen, was an meinem code falsch ist.

Vielen Dank!
Lg

Myhar · 06.07.2011

AW: Text geht über DIV hinaus?

Du könntest dir am Besten weiterhelfen, wenn du dir, wie von fexx vorgeschlagen, das Box Modell ansiehst.
Du könntest auch meinen Ratschlag befolgen und nicht jedem Element fixe Höhen und Breiten zuweisen...
Was soll denn deiner Meinung nach passieren, wenn ein Element, welches zB 10px breit und 10px hoch ist und darin ein Text mit 10000 Zeichen steht? (Um dir dein Problem mit extremen Zahlen vor Augen zu führen)
Ich hoffe, das reicht als Denkanstoß aus um das Problem eigenständig zu lösen

L. G.

krid2873 · 07.07.2011

AW: Text geht über DIV hinaus?

Moin,

katschipatschi:
Vl. könnt mir hier auch jemand anhand meines codes den richtigen code posten, bzw. sagen, was an meinem code falsch ist.

Du könntest z.B. die Weitenangabe

Code:

#container #index_haus #text {
    height: 352px;
    [COLOR=Red]width: 970px; 
[/COLOR]     margin-left: 460px;

des betreffende DIV entfernen.

Linktipps:
Du solltest dir unbedingt Grundwissen aneigenen:
http://little-boxes.de/little-boxes-teil1-online.html

Nachschlagewerk:

hubspe · 07.07.2011

AW: Text geht über DIV hinaus?

fexx schrieb:
http://tinyurl.com/mdnrrb ;-)
Das waren auch meine ersten Gedanken.

jep meiner auch.

kleeaar schrieb:
und jetzt musst du auch einfach noch overflow:hidden; reinschreiben...

sach mal hast du auch nur eine Sekunde nachgedacht bevor du das gepostet hast??
Nicht wirklich, oder?

Wenn der Fragesteller irgendwo Text hineinschreibt, warum sollte ihm daran gelegen sein, denselben einfach irgendwo abzuschneiden und das Überstehende zu verstecken??

Außerdem ist overflow:hidden fast nie eine gute Idee, weil dadurch auch in modernen Browsern gerne Fehldarstellungen ausgelöst werden.