Supportnet / Forum / Webseiten/HTML

Hallo, habe mal wieder ein Problem ;-). Habe schon bei Google und diversen anderen Forern gesucht, aber nichts gefunden (immer nur, wie man das äußere an das innere DIV ausrichten kann - ich brauch's umgekehrt). Also ich möchte bei meiner Homepage in 2tes Menü machen, welches sich in der rechten Hälfte des div's "[i]inhalt[/i]"befinden soll. Mein Problem ist, dass ich nicht weiß, wie man es macht, dass das innere div (Menü) immer genauso hoch ist, wie das äußere div (inhalt). Oder soll ich das ganz anders lösen? [url=http://www.chip.de/c1_navseite_12430122.html?tid1=20432&tid2=0]Beispiel (linkes Menü)[/url] Vielen Dank und sry, dass ich dauernd so viel frage... [u]Quellcode:[/u] [code]#inhalt { width : 750px; height : 65%; border : 1px solid black; border-top:none; padding : 8px; margin: auto; background-color:#FFFFFF; overflow:auto; } .menuri { width:20%; height:100%; float:right; background-color:#CCCCCC; overflow:auto; } <!-- Stelle mit Menü --> <div id="inhalt"> <div class="menuri"><p>TEST</p></div> <?php include ("../../inhalte/tipps.htm") ?> </div> [/code]

wie? was? welches Menü? In dem Seitenchaos find ich nix!

ist diese Verschachtelung inhaltlich sinnvoll? Und wieso ist menuri eine Klasse statt einer ID - gibts da noch mehr von?

Als Einführung in die Problematik empfehle ich folgenden Artikel: Mehrspaltige CSS-basierte Layouts

Danke rfb


Habe bei Chip.de das linke Menü gemeint (dunkelblau).


Weiß ich auch nicht ;-) Wäre vielleicht geschickter, mit CSS einfach 2 getrennte Spalten zu bauen. Manchmal seh ich den Wald vor lauter Bäumen nicht.....
Dann ist es wahrscheinlich schon möglich, dass beide Spalten gleich hoch sind, oder? (habe mir SelfHTML noch nicht duchgelesen.



Stimmt, hast natürlich recht. Mein Fehler.


Gruß und thx

sorry, da ist ein Menü mit weißer Schrift auf weißem Grund, nur wenn das Nachladen von HG-Bildern erlaubt ist (auf meiner Kiste geschieht das noch manuell), ist das sichtbar. Kein gutes Beispiel, eher ein Grund den Layouter in die Arbeitslosigkeit freizusetzen.

Vermutlich (hab mir das CSS nicht angetan) arbeitet CHIP einfach mit absoluten Werten. Dafür spricht auch die mangelhafte Anpassung ans Fenster-Resizen. Kundenfreundlich ist das nicht.

Mit einer Verschachtelung ist es glaube ich doch besser.
Denn dann reicht float:right und das Menü ist rechts im div "inhalt" (weißer Hintergrund) und weight:20% sind dann 20% von "inhalt"

Wenn ich es nicht verschachtel wird das Menü bei float:right an den rechten Bildschirmrand gabracht und die 20% beziehen sich dann auch nicht mehr auf "inhalt" sondern auf die komplette Seite.

Ich habe ich mal einen Screenshot gemacht, anhand ich euch nocheinmal veranschaulichen möchte, was ich "erreichen" will:
>> Zum Screenshot

Positionierung und Breite sind in Ordnung. Im Beispiel habe ich mit height:500px gearbeitet.
Ich möchte allerdings, dass der graue Bereich immer so hoch ist, wie der weiße "inhalt". Sich also praktisch an "inhalt" anpasst (inhalt hoch - menuri hoch; inhalt niedrig - menuri niedrig).
Wie mache ich das?


Vielen Dank
Gruß

Schreibe ich etwa zu viel?? ;-)

Warum sollte sich die Größe eines Elements nach der variablen Größe eines umgebenden Elements richten?

Also: geht nicht!

eine nicht besonders sinnige Lösung: bette den Inhalt in den Menü-Block! Dann richtet sich die Größe des Menüs natürlich nach dem in ihm enthaltenen Inhalt.

1000 mal besser: gib dem beide umgebenden Element (sprich: Menü und Inhalt neben- und nicht ineinander) den gleichen Hintergrund wie dem Menü und dem Inhalt einen anderen. Dann sieht es immer so aus, als wäre das Menü so hoch wie das beide umgebende Element.

Ok, danke. Werde es dann so machen.
Habe mir schon gedacht, dass es nicht geht.

Habe jetzt für den Inhalt und das Menü 2 verschiedene Container (so nennt man die div's doch, oder?)

Jetzt bekomme ich die 2 Elemente aber nicht nebeneinander. Das Menü klebt am rechten Bildschirmrand und der Inhalt-div ist auch nicht ganz an in der richtigen Position.

Kannst es dir ja mal anschauen:
>> Zur Seite

#inhaltleft {
	width : 600px;
	border : 1px solid black;
	border-top:none;
	padding : 8px;
	margin: auto;
	background-color:#FFFFFF;
	overflow:auto;
}	

#menuright {
	width:150px;
	float:right;
	overflow:hidden;
	border: 1px dashed #CCCCCC;
	padding:5px;
	background-color:#FFFFFF;
}

- - - - - -

<div id="menuright"><p>TEST</p></div>

<div id="inhaltleft">
<?php include ("../../inhalte/tipps.htm") ?>
</div>

Gruß

dein CSS besagt zu den beiden DIVs folgendes:

Menü: häng dich mit dem margin-right-Default-Wert rechts an den Fensterrand (sprich: kein margin angegeben)

Inhalt: setz dich in die Mitte des verbliebenen Platzes (sprich margin:auto)

Das sieht in der Tat Sch... aus.

Arbeite an den margin-Werten!

Das habe ich mir gedacht.

Ich muss dann mit Variablen, also % , arbeiten, damit das Layout bei jeder Fenstergröße passt, oder?


Gruß

Variablen? Nö, relative Einheiten heißt sowas, dazu gehören %, em, ex.

Natürlich nicht Variablen (das ist ja x, y, x²,...). War wohl schon ein wenig müde.... ;-)

Was soll ich da dann aber als margin-Wert angeben? Weil die Breite des Randes (den ich ja dann angebe) hängt ja von der Auflösung des Bildschirms ab. Je größer die Auflösung, desto kleiner der Rand. Da kann ich ja dann nicht sagen: 10%.

Wie würdest du / ihr das lösen?

Vielen Dank
Gruß

konnte die vergangen Tagen nichts ausprobieren. Gerade eben allerdings - leider ohne Erfolg.



Wenn ich mit relativen Marging-Werten arbeite passt das Ganze zwar bei einer bestimmten Auflösung, dann aber nicht mehr.

Oder soll ich verschachteln?

Gruß

und wie sehen die entsprechenden margin-Werte bei den anderen Seitenelementen aus? Außer den beiden DIVs gibts da doch noch mehr - und derenwegen siehts doch besch... aus weil die Seitenränder unterschiedlich sind.

danke rfb.

ich verstehe allerdings nicht so ganz was du meinst.



Die habe margin=auto


Könntest du mir vielleicht mal sagen, wie du das machen würdest? Ggf. mit Quellcode.

Wäre echt klasse!!

Vielen Dank
Gruß

und darunter versuchst du 2 Elemente nebeneinander mit verschiedenen margin-Werten zu setzen. Das kann ja nicht klappen.

Wenn die gesamte Seite in einem Kasten sitzen soll, der im Anzeigefenster zentriert ist, musst du die Elemente entsprechend strukturieren oder mit fixen Werten arbeiten.
Beides ist nur schwer mit Barrierefreiheit und semantisch korrektem HTML zu vereinbaren, da du damit Layout über Inhalt stellst.

aha..
muss das so kompliziert gemacht werden?

Ich möchte ja eigentlich nur 2 div's nebeneinander, welche zusammen auf der Seit vertikal zentriert ausgerichtet sein sollen.


Soll sie aber gar nicht.

Gruß

Diese Lösung irgendwie an deine Ziele anpassen....?

wenn ich mir deien Seite so ansehe ist genau das aber der Eindruck den ich bekomme!

Du hast einen zentrierten Head-Bereich mit bestimmter Breite und darunter 2 DIVs die sich dier Breite und Lage anpassen sollen -> das ergibt zusammen einen Kasten!

Habe es fast hinbekommen. Einmal ging es sogar - dann habe ich etwas blöderweise geändert und jetzt funktioniert es nicht mehr richtig.

Ich habe um alle Kästen einen div (id="wrapper") gebaut.
Das "submenu" soll 20% und der "inhaltright" 80% von "wrapper" (750px) breit sein.
Leider funktioniert das irgendwie nicht ganz: "submenu" wird unter "inhaltright" gesetzt.

Hier ein paar Quellcodeschnippsel:

- - - - - - - - - - - - - - - - - - - - - Stylesheet - - - - - - - - - - - - - - - - - - - - -

#wrapper {
	width:750px;
	margin: 0 auto;
	background-color:#FFFFFFF;
	border: 1px solid black;
	border-left:none;
	background-image:url(../bilder/submenu/back_submenu.jpg);
	background-position:left;
	background-repeat:repeat-y;
}

#inhaltright {
	width:80%;
	float:right;
	border-right: 1px solid black;
	padding: 8px;
	background-color:#FFFFFF;
	overflow:auto;
}	

#submenu {
	width:20%;
	float:left;
	overflow:hidden;
	border: 1px dashed #333333;
	padding:5px;
	background-color:#FFFFFF;
	background-image:url(../bilder/submenu/back_submenu.jpg);
	background-repeat:repeat-y;
}

- - - - - - - - - - - - - - - - - - - - - PHP-Datei - - - - - - - - - - - - - - - - - - - - -

<body>

<div id="wrapper">

<div id="kopfzeile"></div>

<div id="menutop">
<?php include("../../elemente/menutop.htm") ?>
</div>

<div id="ort">
&gt; <a href="/index.php">Home</a> &gt; <a href="/seiten/tipps/tipps.php">Tipps &amp; Tricks </a>
</div>

<div id="submenu">
<?php include("../../elemente/menuright.htm") ?>
</div>
		
<div id="inhaltright">
<?php include ("../../inhalte/tipps.htm") ?>
</div>

<div id="footer">
<?php include("../../elemente/footer.htm") ?>
</div>
</div>

</body>

Es wäre seht nett von euch wenn ihr mir nochmals helfen würdet.

Vielen Dank
Gruß

ohne das vollständige Dokument zu kennen nicht zu beantworten!

PS1:
das ist sicherlich keine HTML-Datei, daher solltest du ihr eine andere Dateiendung geben (üblich ist inc für INClude)
Und wenn die includierte Datei selbst kein PHP enthält ist die PHP-Funktion

readfile

sinnvoller als

include

.

PS2: deine Seite scheint an DIVitis zu leiden.

PS3: Ist das CSS valide? Gibts Warnungen?

Dane für deine Antwort!


Was willst du? Soll ich den kompletten Quellcode hier posten? Mit dem Firefox kann man sich den ja sowieso anschauen.
Die CSS-Datei gibts [x] hier (klick).



Ich weiß, hatte ich ursprüglich auch so. Aber leider kann Dreamweaver .inc nicht vollständig, sodass die Seite etwas schwieriger zu bearbeiten ist (da der komplette Code schwarz geschrieben ist, und keine Tools wie z.B. für die Farbe eingeblendet werden).
Meinst du ich soll das trotzdem ändern? Weil eigentlich ändert es am Endergebnis ja nichts, ob ich jetzt .htm und .inc habe.



Was wäre die Alternative? Ich dachte es wäre am Besten, eine Seite komplett mit CSS zu formatieren. Irgendwie habe ich das Gefühl, es sei alles falsch was ich mache (Frames falsch - ok akzeptiert!; Quellcode mist, Div's schlecht).



Es war ein kleiner Fehler drinne, der aber sicherlich nicht für die falsche Darstellung verantwortlich war (Tippfehler bei einer Farbbezeichnung).


Wäre es vielleicht möglich mir konkret zu sagen, was falsch ist, oder geht das nicht? Ich kann, wenn erwünscht, auch den kompletten Code posten. Dachte mir allerdings, das wäre dann zu viel und schlecht für den Überblick ;-)

Vielen Dank und noch einen schönen Samstag!
Gruß Strg+Alt+Entf

Am besten wäre ein Onlinebeispiel.

zu DIVitis:
du wirst doch wohl kaum für jeden Block ein Extra-DIV brauchen. Wenn darin zB sowieso nur eine Liste steckt, kannst du die CSS-Eigenschaften gleich dieser geben.

zu INC:
egal wie du die Datei nennst - du musst dafür sorgen, dass die includierten Dateien nicht direkt erreichbar sind. Die Auslieferung von HTMs lässt sich nicht so leicht blockieren wie die bei anderen Dateiendungen.

Kann ich machen: Um diese Seite geht's.

Gruß

was mir mein Browser sofort moniert: es gibt kein <html>

Habe es ergänzt. Es fehlt glaube ich auf allen meinen Seiten...

Gruß

Was soll ich noch anders machen?

Gruß

Ich weiß nicht, ob ich richtig liege, aber ich habe irgendwie so das Gefühl, dass ihr mir nicht mehr helfen wollt.
Entschuldigt dies bitte, falls ich daneben liege.


Hab jetzt etwas entdeckt:
Wenn ich "inhaltright" keinen float-Wert gebe, dann wird die Seite im Firefox richtig angezeigt - jedoch nicht im InternteExplorer.
Wenn ich "inhaltright" den float-Wert "float=right" dann geht's im InternetExplorer - jedoch nicht im Firefox.

Vielleicht habt ihr ja noch einen nützlichen Tipp für mich. Ich würde mich darüber sehr freuen.


Gruß

Es funktioniert jetzt.

Schuld waren die Breitenangaben. Ich wusste nicht, dass Rahmen und Padding-Werte zur Breite addiert werden. Daher waren die Container zu breit.


Gruß

Das ist aber
- in den hier oder in einem deiner anderen Threads verlinkten Infos zum CSS-Boxmodell erwähnt
- beim IE 5.5 immer sowie beim IE6/7 und Opera 8/9 im Quirksmodus anders, da wird nicht addiert sondern subtrahiert (geht auf einen Fehler der MS-Programierer-Elite zurück). Wenn du daher margin, padding und border derartig nutzt achte unbeding darauf nicht in den Quirksmodus zu kommen (IE 5 kannst du weitgehend ignorieren oder du musst irgendeinen CSS-Hack nutzen).

Das heißt doch, dass ich schauen muss, dass der Code valide und der Doctype korrekt ist, oder?

Gruß und Danke
Strg+Alt+Entf

tendenzmäßig schon.

Aber es gibt browsermäßige Besonderheiten: Der IE6 geht zB in den Quirksmodus wenn du in eine XHTML1.0-Seite vor die Doctype die - eigentlich genau dort vorgesehene - xml-Deklaration setzt. Eine Übersicht, wie welcher Browser auf was reagiert findest du unter dem Stichwort Doctype Switching

ok, vielen Dank rfb! Ich denke diese Infos reichen mir fürs Erste... ;-)

Falls ich etwas unhöflich / ungeduldig / faul / nervig herüberkam, bitte ich euch hiermit nochmals um Entschuldigung.

Gruß
Strg+Alt+Entf

PS: Wollte diese Nachricht schon vor 2 Tagen schreiben. Das ging allerdings nicht. SN-Bug wahrscheinlich...

• document.all.+variable+.style
• CSS Container
• scrollbarer Div Container mit scrollbalken nur rechts am Fenster