CSS Problem mit menü und inhalt

Computer: Software & Programmierung HTML & CSS
#1

Hallo zusammen,

ich habe mithilfe eines CSS Stylesheets vor einigen Wochen meine Seite erneuert. Jetzt, wo allerdings das Menü beim aufklapppen größer wird gibt es Probleme. Die Textbox wächst zwar wenn der Text länger wird und das Menü wächst dann auch. Allerdings wird die Textbox nicht größer, wenn das Menü länger wird.

Hier ist mein CSS

/* *** css by miss monorom www.intensivstation.ch *** */
/* css released under Creative Commons License - http://creativecommons.org/licenses/by/2.0/deed.en */

body {
background-image: url(„stripes.png“);
font-size: 11px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#C4B5B5;
padding:0px;
margin:0px;
}
a {text-decoration:none}
a {color: #E5E5E5;}
a:visited {color:#B3B3B3;}
a:hover {color: #C4B5B5;}
a:active { color:#000000;}

h1 {
font-size: 11px;
text-transform:uppercase;
background-color: #E0A3B7;
border-top:1px solid #C4B5B5;
border-bottom:1px solid #C4B5B5;
padding:5px 15px;
margin:0px }

h2 {
font-size:20px;
font-weight: normal;
padding: 5px 10px;
margin:0px;}

img.download {vertical-align:middle;}

/* ----------container to center the layout-------------- */
#container {
width: 800px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
background-color: #2E2929;
}

/* ----------banner for logo-------------- */
#banner {
background-color: #2E2929;
text-align: right;
padding: 0px;
margin: 0px;
}
#banner img {padding:10px 0px;}

/* -----------------content--------------------- */
#content {
background-color: #2E2929;
padding: 0px;
margin-left: 200px;
margin-right: 0px;
}
div#content {
min-height:600px;
height:expression(this.scrollHeight > 600 ? „auto“:„600px“);
}

p, pre{
padding: 5px 10px;
margin:0px;
}

/* --------------left navi------------- */
#left {
background-color: #2E2929;
float: left;
width: 200px;
margin: 0px;
padding: 0px;
}

/* -----------footer--------------------------- */
#footer {
margin: 0px;
padding: 0px;
text-align: right; }

Vielen Dank für eure Hilfe
HTML

#2

Es ist schwer herauszufinden, was eigentlich auf deiner Seite passiert, wenn man diese gar nicht sieht.

Du solltest eine Beispielseite anfertigen. Wegen mir mit einem Lorem-Ipsum-Text, damit man weiß, wo das Problem liegt, und damit man mal ein wenig herumprobieren kann.

Dass ich mir jetzt eine Homepage basteln muss, um zu sehen, was dein CSS anrichtet, ist schon echt viel verlangt.

Zudem würde ich gerne wissen, was folgender Eintrag soll:
height:expression(this.scrollHeight > 600 ? „auto“:„600px“);
Das scheint mir ein Java-Script Ausdruck zu sein. So was hat normalerweise nichts in einer CSS zu suchen.
Ich würde da mal nach einem Fehler suchen.

Gruß Mjchael

#3

Hi, sag mal bitte, wo das alles im Netz ist, ohne HTML kann ich dazu nix sagen, sorry. – Gruß Diedrich

#4

Hallo HTML,

kannst du bitte auch nochmal den HTML-Quellcode posten, damit man sich das besser vorstellen kann? Aber ich glaube zu wissen, was du meinst. Gib dem #container mal ein „float: left;“. Vielleicht klappt es dann schon.

Aber um sicher zu sein, benötige ich doch besser den HTML-Code, ok?

Viele Grüße,
cruisi

#5

Nochmal … also ist das Menü z.B. links neben dem Content und ergeben sich so zwei Spalten, wenn man so will? Dann müssen das Menü und der Content zusammen in einen Container gefasst werden und dieser muss die CSS-Eigenschaft „float: left;“ bekommen.

Soll allerdings eine optisch alleingestellte Textbox (Contentbereich) größer werden, der eigenständig neben dem senkrechten Menü steht, so klappt das so nicht, da keine Verbindung zwischen den beiden besteht. Dann empfehle ich, dem umfassenden Container eine Hintergrundgrafik zu verpassen, die durch die Wiederholung in Richtung Y den Eindruck erweckt, als würde die Textbox mitwachsen - dabei wächst der Container mit und nicht die Textbox.

Also alles nur basierend auf meiner Vermutung deines Layouts. Von daher ist der HTML-Code doch erstmal hilfreich.

Gruß,
cruisi

#6

hallo,

div#content {
min-height:600px;
height:expression(this.scrollHeight > 600 ? „auto“:„600px“);
}

expression ist mir unbekannt, dem browser vielleicht auch. ein kommentar wird mit /*kommentar*/ deklariert. probier da mal.

hoffe ich konnte helfen
lg

#7

Hallo!

Könntest du bitte auch die HTML-Struktur posten?
Und es wäre bequemer zu lesen, wenn du http://pastebin.com/ oder ähnliches benutzen könntest. :wink:

Cheers
Paul

#8

Hallo ,
Ich verstehe dein Problem nicht ganz. Kanst du mir mal eine Link geben bzw Screnn was du meinst bzw. auf was du hinaus willst.

Dann kann ich mich mit FireBug hinstzen und das Problem beheben nur mit CSS selbst kann ich net viel anfangen.

Grüße Syku

#9

hallo,
sorry, dass ich erst jetzt antworte, ich kann leider nicht helfen, wollte das aber wenigstens sagen.

viel erfolg, mac.

#10

Hallo zusamammen,

den HTML Code könnt Ihr auf http://paste.ubuntuusers.de/405062/ finden.

VielEN Dank für eure Hilfe
HTML

#11

Hallo D. Cruisi

Das float. left hat leider die gesamte Box verschoben nicht aber das Menü entsprechend angepasst.

#12

Hallo HTML,

wie gesagt, schick mir doch bitte mal beide Quellcodes komplett. Also HTML und CSS. Dann weiß ich auch genauer, wovon du sprichst und kann dir bestimmt weiterhelfen und den korrigierten Quellcode zurückschicken.

Viele Grüße,
cruisi

Hallo D. Cruisi

Das float. left hat leider die gesamte Box verschoben nicht
aber das Menü entsprechend angepasst.

#13

Hallo zusamammen,

den HTML Code könnt Ihr auf http://paste.ubuntuusers.de/405062/ finden.

Vielen Dank für eure Hilfe
HTML

#14

Hallo HTML,

das ist ein Problem, vor dem man oft steht und das sich so nicht lösen lässt, da nebeneinanderliegende Spalten sich nicht aneinander ausrichten bzw. mitwachsen, wenn eine andere mitwächst. Da muss man etwas tricksen, wie ich neulich schonmal beschrieben habe. Ich habe jetzt ein umfschließendes div um die menüspalte und den content gelegt. das habe ich „spaltencontainer“ genannt. Dieses div wächst nun mit der jeweils längeren Spalte mit. Zur Veranschaulichung habe ich dem div derzeit noch einen border verpasst, damit man es deutlich sieht, was geschieht. Und wenn du jetzt diesem div spaltencontainer eine Hintergrundgrafik zuordnest, die 1px hoch ist und 800px breit (im css-code schon eingefügt) dann wird es optisch so sein, als ob beide spalten sich aneinander ausrichten und mitwachsen. diese grafik sollte dann auf den linken 200px die gewünschte hintergrundfarbe der linken spalte haben und auf den rechten 600px die hintergrundfarbe der contentspalte. dann hast du den gewünschten effekt, obwohl die eigentlichen spalten gar nicht wirklich mitwachsen, sondern nur der neue container.
ich hoffe, das war es, was du erreichen wolltest.
viele grüße,
cruisi

hier der neue html-code:

Mein Code

Das hier ist der Banner

Das hier ist menü

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non
//Das wird länger als der Bereich content bei zu viel Inhalt

Dashier ist content

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Danke für eure Hilfe. Das hier ist footer

und hier das css:

/* *** css by miss monorom www.intensivstation.ch *** */
/* css released under Creative Commons License - http://creativecommons.org/licenses/by/2.0/deed.en */
* {
margin: 0;
padding: 0;
}
html, body {
background-image: url(„stripes.png“);
font-size: 11px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#C4B5B5;
padding:0px;
margin:0px;
}
a {text-decoration:none}
a {color: #E5E5E5;}
a:visited {color:#B3B3B3;}
a:hover {color: #C4B5B5;}
a:active { color:#000000;}

h1 {
font-size: 11px;
text-transform:uppercase;
background-color: #E0A3B7;
border-top:1px solid #C4B5B5;
border-bottom:1px solid #C4B5B5;
padding:5px 15px;
margin:0px }

h2 {
font-size:20px;
font-weight: normal;
padding: 5px 10px;
margin:0px;}

img.download {vertical-align:middle;}

/* ----------container to center the layout-------------- */
#container {
margin: 0 auto 10px auto;
width: 800px;
position: relative;
background-color: #2E2929;
}
/* ----------banner for logo-------------- */
#banner {
background-color: #2E2929;
text-align: right;
float: left;
width: 100%;
}
#banner img {padding:10px 0px;}

/* --------------left navi------------- */
#left {
background-color: #2E2929;
float: left;
width: 200px;
}

/* -----------------content--------------------- */
#spaltencontainer {
width: 100%;
min-height: 600px;
background: #ffffff url(…/images/spaltencontainer_bg.gif) repeat-y;
float: left;
border: 1px solid black;
}
#content {
background-color: #2E2929;
width: 600px;
float: left;
min-height: 600px;
}
* html #content, * html #contentcontainer {
height: 600px;
}

p, pre{
padding: 5px 10px;
margin:0px;
}

/* -----------footer--------------------------- */
#footer {
margin: 0 auto 0 auto;
text-align: right;
float: left;
width: 800px;
height: 30px;
background: #ccc;
color: #000; }

1 Like
#15

Bei zukünftigen Aktionen packst du deine Testseite incl. der CSS in eine Zip-Datei. Dann müssen wir die Seite nicht erst erstellen.

Das Problem liegt bei der ID #left.
Du hast da ja gar keine Höhe definiert.
Ich habe die mal auf height: 600px; gesetzt.
Der Text läuft dann aus den Ufern.
Daher musst du noch das Verhalten bei Überlauf definieren.
Hidden wird abgeschnitten. Man sieht keine Scrollleiste.
Scroll setzt immer eine Scrollleiste
Auto setzt nur dann eine Scrollleiste, wenn sie gebraucht wird. overflow: auto;

#left {
 background-color: #2E2929;
 float: left;
 height: 600px;
 margin: 0;
 overflow: auto;
 padding: 0;
 width: 200px;
}

Solltest du keine Scrolleiste wollen, dann musst du die Boxen so ineinander verschachteln, dass sich der Content automatisch vergrößert, und der Footer automatisch nach unten verschoben wird.

Ansonsten finde ich die Variante mit der Scrollbar noch die beste Lösung.

Gruß Mjchael

#16

Hallo D. Cruisi

Deine Lösung funktioniert wunderbar.

Vielen Dank
PHP