nicht angemeldet
XHTML BOXEN
Hallo Zusammen,
ich habe folgende HTML Seite und CSS. Leider verstehe ich nicht, warum die "contentBox" einfach aufhört, obwohl diese mit 100% im CSS definiert ist.
HTML:
<!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=iso-8859-1" />
<title></title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="bigBox">
<!-- Header -->
<div id="headerBox"></div>
<!-- /Header -->
<!-- leftBoxTop -->
<div id="leftBoxTop">
<p class="boxHeading">Navigation</p>
</div>
<!-- /leftBoxTop -->
<!-- boxHeading -->
<div id="mainTop">
<p class="boxHeading">Aktuelles</p>
</div>
<!-- /boxHeading -->
<!-- contentBox -->
<div id="contentBox">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulr in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolveniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
</div>
<!-- /contentBox -->
</div>
</body>
</html>
CSS:
html {
height:100%;
}
body {
background-color: #6666cc;
font-family: Arial;
font-size: 10pt;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
height:100%;
}
#bigBox {
background-color: #6666cc;
height: 100%;
width: 700px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
padding:0px;
}
#headerBox {
background-color: #EFEFEF;
height: 115px;
width: 700px;
margin:0px;
padding:0px;
text-align: right;
}
#leftBoxTop {
background-color: #313063;
padding-top:5px;
padding-left:13px;
padding-right:0px;
padding-bottom:0px;
width: 135px;
height: 21px;
float:left;
}
#mainTop{
background-color: #313063;
padding-top:5px;
padding-left:13px;
padding-right:10px;
padding-bottom:0px;
width: 522px;
height: 21px;
float:right;
}
#contentBox {
background-color: #FFEFDE;
float:left;
height:100%;
width: 100%;
}
Vielen Dank für eure Hilfe
-
hallo,
Leider verstehe ich nicht, warum die "contentBox" einfach aufhört, obwohl diese mit 100% im CSS definiert ist.
Ich verstehe das auch nicht. Du gibst Höhen- und Breiten-Prozente für etwas ein, was keinen Inhalt hat. "Wovon" sollen denn deiner Ansicht nach deine hundert Prozente hergenommen werden? Und was bedeutet deiner Ansicht nach das "Aufhören", wo es doch eigentlich gar kein "Anfangen" gegeben haben dürfte? Gibt es irgendeinen Browser, mit dem du nachgeschaut hast (bei mir zeigen Internet Explorer und Opera das, was du vermutlich darstellen möchtest)?
Deine Lateinkenntnisse sind übrigens mangelhaft. Der Text strotzt von Wiederholungen und enthält Unmengen an Tippfehlern. "duis dolore te feugait nulla" ist zwar falsch geschrieben, zugleich aber eine ziemlich empörende Aussage. Sowas möchte ich mir nicht von einer Webseite sagen lassen, die ich eventuell freiwillig aufsuche ...
Grüße aus Berlin
Christoph S.
-
Hallo Christoph!
Ach... dieses ganze Lorem ipsum-Gehabe ist doch für die Katz. Richtiges Latein ist es nicht, das angebliche Zitat, von dem keiner genau weiß, wo es herkommen sollte, steckt voller Fehler.
Keine Ahnung, wer mit dem Unsinn angefangen hat, schon "volutpat" regt mich dermaßen auf, wo es doch "voluptat" heißen sollte, und ich oute mich hier als der absolute Lorem Ipsum-Hasser, lieber schreibe ich:
Viel Text viel Text viel Text (...) wer bis zum Ende liest hat ein Lolly verdient - und setz vielleicht mal einen Link zum nächsten Süßwarengeschäft...
Letztens hat aber jemand (ich glaube, es war eine jemandin), einen Code-Schnipsel vorgestellt, in wessen Textteil auch Lorem Ipsum vorkam, am Ende aber eher Esperanto-Sätze den fraglichen Abschnitt beendeten. Ich kann zwar kein Esperanto, aber da meine Muttersprache eine romanische ist, hatte ich nicht allzu viele Schwierigkeiten, den Inhalt zu verstehen (Latein ist da schon schwieriger): es ging um europäische Sprachen... wer das immer gewesen sein mag, mich würde es interessieren, wo er/sie den Text her hat.
Viele Grüße aus Frankfurt/Main,
Patrick--
_ - jenseits vom delirium - _
<hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash>-
hallo Patrick,
Ach... dieses ganze Lorem ipsum-Gehabe ist doch für die Katz. Richtiges Latein ist es nicht
Hastu ja recht. Aber es macht soviel Spaß, das irgendjemand mal wieder um die Ohren zu hauen (der dann wahrscheinlich höchst verblüfft ist, welche Sprachen außerhalb von PHP und Perl usw. in diesem Forum auch "verstanden" werden), daß ich es mir nicht verkneifen konnte.
Was zum Thema selbst wichtig war, habe ich ja _zuerst_ zu benennen versucht.
Keine Ahnung, wer mit dem Unsinn angefangen hat, schon "volutpat" regt mich dermaßen auf, wo es doch "voluptat" heißen sollte
Ach, Bruderherz, ich habe grade mal meine alten Schulhefte wieder vorgekramt und festgestellt, daß ich "voluptare" tatsächlich mal in einer Leistungskontrolle durchkonjugieren mußte - immerhin kommt das Verb bei Caesar häufiger vor. Mein Griechisch-/Lateinlehrer ist leider vor drei Jahren im Alter von knapp 100 Jahren verstorben und konnte am Klassentreffen für 35 Jahre Abitur nicht mehr teilnehmen.
und ich oute mich hier als der absolute Lorem Ipsum-Hasser
Damit du nicht alleine dastehen mußt, oute ich mich ebenfalls auf gleiche Art.
Grüße aus Berlin
Christoph S.
-
Hallo!
Keine Ahnung, wer mit dem Unsinn angefangen hat, schon "volutpat" regt mich dermaßen auf, wo es doch "voluptat"
Wikipedia liefert Erläuterungen über Beides: darüber, seit wann der Fülltext eingesetzt wird, und warum er absichtlich Fehler enthält...
Viele Grüße aus Frankfurt/Main,
Patrick--
_ - jenseits vom delirium - _
<hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash>
-
-
-
Hi,
ich habe folgende HTML Seite und CSS. Leider verstehe ich nicht, warum die "contentBox" einfach aufhört, obwohl diese mit 100% im CSS definiert ist.
wieso einfach aufhört? Die sollte genauso hoch sein wie das Fenster - das hast Du ja angegeben.
freundliche Grüße
Ingo -
Hallo,
verstehe nicht was du meinst. In meinem Firefox sieht das ganze exakt so aus, wie ich erwarten würde.
Aber was anderes:
Die meisten divs, die du verwendest brauchst du eigentlich nicht. Wenn du nur ein anderes Blockelement in einem div hast, kannst du auf das div verzichten und das Blockelement direkt formatieren und positionieren. div-Tags sollte man nur zum Gruppieren mehrerer Blockelemente verwenden.
Die <p> in den divs schauen außerdem noch ein wenig so aus, als wollten sie sagen: Ich bin eigentlich eine Überschrift! Ich will <hx> heißen.
Gruß
Stareagle
-
Hallo,
vielen Dank für deine Antwort.
Die meisten divs, die du verwendest brauchst du eigentlich nicht. Wenn du nur ein anderes Blockelement in einem div hast, kannst du auf das div verzichten und das Blockelement direkt formatieren und positionieren. div-Tags sollte man nur zum Gruppieren mehrerer Blockelemente verwenden.
Du hast recht, dass werde ich noch einmal überarbeiten.
Generell, wenn ich von der contentBox die height:100% entferne, dann
passt sich die Box dem Inhalt dynamisch an. Wie definiere ich den
jetzt die contentBox Höhe das sie bei weniger Text 100% des Browserfenster ausfüllt?Grüße,
Simon-
Hallo Simon,
hab mir das ganze noch mal angeschaut. Ich denke ich habe das Problem erkannt:
Du packst den ganzen Inhalt in einen Div-Container mit 100% Höhe. D.h. dieser Div-Container ist genauso hoch wie der Viewport des Browers. Dann hast du oben einen weiteren Div-Container mit 115px Höhe. Darunter kommt dann die contentBox mit 100% Höhe. Dadurch ist das ganze insgesamt höher als 100%, da 115px + 100%. Wenn du für die Content-Box eine Höhe von z.B. 80% angibst und für den Header eine Höhe 20%, solltest du das erreichen, was du erreichen willst.
Gruß
Stareagle
-
-