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ß

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>
[b]
<div id="wrapper">[/b]

<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>

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

</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