03.10.2005, 12:58
|
|||
|
|||
CCS Problem mit <div>s
Hi Leute,
eigentlich möchte ich nur ein <div id="1">, dass ein weiteres <div id="2"> enthält, welches noch ein <div id="3"> enthällt. div 3 enthält den text und soll rechts einen Scrollbalken anzeigen, fals der Text zu lang ist. Mein problem ist dabei, dass die inneren divs immer aus dem äußeren "ausbrechen". Wie kann ich denn sagen, dass z.b. div 2 nicht über div 1 hinausragen darf??? Kann mir jemand helfen???? thx, MFG dope_dope 
|
| Sponsored Links |
|
03.10.2005, 13:16
|
|||
|
|||
|
Soweit ich weiß dürfen IDs und Klassen nicht mit Zahlen beginnen.
Die Browser sollten die IDs also ignorieren. Versuch mal IDs die mit einem Buchstaben beginnen, ev. klappts dann.
|
| Sponsored Links |
|
03.10.2005, 13:26
|
|||
|
|||
|
Zitat:
http://www.xhtmlforum.de/viewtopic.php?t=1399 Grüße fricca
|
|
03.10.2005, 13:41
|
|||
|
|||
|
Also noch mal von vorne:
Das ist meine HTML-Datei: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/XHTML-1.0-Transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <title>Titel</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" media="screen, projection, print" href="style.css" /> </head> <body> <div id="header"> </div> <div id="main"> <div id="main-left"> Menu </div> <div id="main-content"> <div id="inner-border"> ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text </div> </div> </div> </body> </html> Und das ist die CSS-Datei: Code:
body {
font-family: verdana, geneva, arial, sans-serif;
font-size: 0.7em;
color: #5c5c5c;
line-height: 1.7em; }
div#header { /* Header */
font-size: 28px;
text-align: center;
color: #000000;
border: 2px solid red;
height: 91px;
padding: 3px;
margin-bottom: 10px;
clear: both; }
div#main { /* Main */
position: absolute;
background-color: #ffffff;
border: 1px solid green;
padding: 2px;
height: 75%;
margin-top: 5px;
width: 98%; }
div#main-left { /* Linke Leiste */
background-color: #ffffff;
border-right: 5px solid red;
float: left;
padding: 5px;
width: 16%;
height: 85%;
padding-top: 25px;
padding-bottom: 35px;
padding-right: 0px; }
div#main-content { /* Rechte Seiste */
position: relative;
background-color: #ffffff;
border: 5px solid red;
float: right;
padding: 2px;
width: 80%;
height: 96%; }
div#inner-border { /* Main-Content innerer Rahmen */
background-color: #ffffff;
border: 2px solid red;
padding: 10px;
margin: 0px;
height: 94%;
overflow: auto; }
Was ich möchte: 1.) div#main soll 75% der gesamten Seite hoch sein, egal was drin steht! 2.) div#main-left und div#main-content dürfen nicht über den unteren Rand von div#main hinausragen 3.) div#inner-border darf nicht über den unteren Rand von div#main-content hinauragen 4.) bei div#inner-border sollen scrollbalken angezeigt werden, anstatt den gesamten div#main einfach nach unten zu vergrößern wie es im Moment im IE der Fall ist (siehe auch 1.) --> Was muss ich machen, damit z.B. div#main-content weiss, dass es nen Teil von div#main ist und da drinnen bleibt anstatt sich drüber zu legen??? Und damit es auch die Größe von div#main nicht einfach vergrößert sondern so lässt wie sie ist? Kann ich das mit position machen oder wie geht das??? Ist das jetzt besser erklärt???
|
|
03.10.2005, 13:48
|
|||
|
|||
|
Zitat:
Welchen Doctype verwendest du? Hast du alle relevanten CSS-Angaben für die Elternelemente von #main gemacht? Das kann man an deinen Ausschnitten nicht sehen.
|
|
03.10.2005, 14:02
|
|||
|
|||
|
Ich habe den obigen Code jetzt um die entsprechenden Punkte ergänzt. Wenn du dir diesen kopierst, dann wirst du merken, dass "ganz langer Text (...)" nicht eine absolute größe hat und mit Scrollbalken angezeigt wird wie ich es haben möchte, sondern die divs einfach immer weiter nach unten vergrößert werden umso mehr text es wird.
Was kann ich denn nun dagegen machen???
|
|
03.10.2005, 19:17
|
|||
|
|||
|
Ich vermute, du testest im IE? Schlechte Wahl, nimm lieber Firefox.
Der IE braucht: html, body {height:100%} Setz außerdem mit * {margin:0; padding:0;} alle Default-Randabstände auf 0. Warum positionierst du #main absolut? Pixel und Prozentwerte mischen (so wie du es tust) kann nicht gutgehen. Pixelhöhe von #header + Prozenthöhe von #main erzeugt irgenwann doppelte Scrollleisten. Nicht schön. Außerdem mischt du prozentuale Höhen und Breitenangaben mit padding/border/margin in Pixel. Das Box-Modell ist dir bekannt? Hier gibt's eine "100% + Rest"-Lösung: http://www.xhtmlforum.de/viewtopic.php?t=4465 Grüße fricca
|
|
03.10.2005, 20:32
|
|||
|
|||
|
Hier die Lösung für mein Beispiel:
IE braucht: body { height: 100%;} Firefox braucht zusätzlich: html { height: 100%;} Jetzt kann ich auch endlich das position: absolute was da eh nichts verloren hatte entfernen! THX an fricca !!!
|
| Sponsored Links |
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Design CCS Problem bei Joomla Template KITN | Alomaman | CSS | 4 | 07.01.2008 16:43 |
| Design zu CSS/HTML verarbeiten - Problem häufen sich. | Grafikamateur | CSS | 2 | 06.08.2007 10:57 |
| Problem mit WordPress und dem Bilder Upload | Maxefix | Serveradministration und serverseitige Scripte | 0 | 19.12.2006 15:58 |
| Problem bei Div's - zwei mal das gleiche und doch nicht ... | Niriel | CSS | 10 | 09.06.2005 18:39 |
| Problem mit einem CSS Layout | nARC | CSS | 20 | 21.05.2005 07:28 |
Linear-Darstellung
