Forum
Tipps
News
Menu-Icon

Problem mit CSS Position

Hallo Leute :-)

Ich arbeite mich gerade in Layouts auf CSS Basis ein (Tabellen haben bei mir nun ausgedient), habe aber ein Problem.

Meine Seite ist in zwei Bereiche unterteilt. Links die Navigation, rechts der Inhalt. Nun soll aber, egal wie lang der Inhalt nach unten reicht, der Hintergrund des Menüs "mitwachsen".

Zwar sieht zu Angang mit "height: 100%;" alles gut aus, doch wächst der Inhalt und ein Scrollbalken erscheint, ist alles unter dem Menü weiß.

Zwar könnte ich mit "position: static;" dafür sorgen, dass das Menü immer so an der Stelle ist, wie ich das möchte, doch öffnet man zu viele Menüs kommt natürlich kein Scrollbalken.

Ich hoffe mein Problem ist irgendwie verständlich geworden :D

Stylesheet sieht in etwa so aus:

div.menu {
position:absolute;
top:0px;
height:auto;
min-height:100%;
width:200px;
background-image:url(img/menubg.png);
color:#FFFFFF;
}

div.content {
position: absolute;
left:210px;
right:10px;
top:10px;
width:auto;
height:auto;
background-color:#000099;
color:#FFFFFF;
}


Antworten zu Problem mit CSS Position:

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

ist jetzt mal nen Schuss ins Blaue, aber ich mein das funktioniert so:

div.menu{
position:absolute;
top:0px;
bottom:0px;
}

ungetestet, aber ich meine mich erinnern zu können dass es so klappt. Sorry, wenns falsch sein sollte.

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Hi :-)

ne die Variante hatte ich auch schon probiert das funktioniert nicht. Das Problem ist ja, dass das Div-Element bei einer absoluten Positionierung am Browserfenster "orientiert" und nicht am Div mit dem Inhalt der Seite *gg*

Also die zwei Varianten die ich mir als Lösung vorstellen könnte wären entweder das irgendwie relativ zum Content-Div zu setzen ooooder aber es gibt eine Möglichkeit bei "position: fixed" irgendwie einen Scrollbalken zu erzwingen falls das erforderlich ist ;-)

Ich bin für jeden Ratschlag dankbar! :-)

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

leg nen div "drumherum" und geb dem die hintergrundgrafik
(1 px height, dann repeat-y, soweit die seite geht)

so ersparst dir auch viel krempel den sonst in der navi + contentbereich noch mal seperat notieren müsstest.

(das drumrumding zieht sich soweit in die länge wie halt der längste der parts ist => sollte dein problem lösen)

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

also das mit dem Scrollbalken dürfte mit overflow:scroll; zu machen sein. Dass mein Tip nicht funktioniert, wundert mich ein bisschen. Vielleicht klappt der nur, wenn Du noch ein Div um die ganze Seite herum machst, damit sich die Position am äußeren Div orientiert. 

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Das mit dem zweiten Div "drumherum" hatte ich auch schon ausprobiert, klappt bei mir nicht. Folgenden Code hatte ich für das Div benutzt:

.menu_bg{
position:absolute;
height:auto;
min-height:100%;
width:200px;
background-color:#000000;
}

Leider reicht auch das Div nicht bis zum Ende der Seite :-( Das liegt an der %-Angabe bei der Höhe. Wähle ich eine Pixelangabe wird das Menü lang genug allerdings müsste ich das Ganze dann über Javascript realisieren um die Pixelangabe passend berechnen zu lassen.

Es muss doch was geben, was ich übersehe ^^

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Kannst Du vllt. noch den HTML-Teil einstellen, dann kommen wir sicher besser zum Schluss.

Werte mit Null sind ohne Einheit (px) anzugeben.

Warum alles absolute setzen?

Ich löse das meist so hier:

body {
   margin: 0 auto;
    padding: 0;
   height: 100%;
}

#page {
   width: 960px;
   margin: 0 auto;
   padding: 0;
   background-color: #FFFFFF;
}

die absolute Positionierung würde ich weglassen.

Setze Dein Menu und die Inhaltbox in einen leeren Div-Bereich und löse die Positionierung mit float.

Sollte besser sein. Denke immer auch daran, dass jeder Besucher Deiner Seite unterschiedliche Auflösungen verwendet. Da bringt es nichts, alles auf seine eigene zu konzepieren!

gruß saffi

@edit: Der Tag #page sollte als div alles umschliesen. Wenn Du in Deiner Seite einen Kopfbereich hast, dann sollte zusätzlich das menu und der inhalt in einem div stehen.

« Letzte Änderung: 23.08.10, 11:12:35 von saffi »

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Hi Saffi,

das mit Float zu lösen führt bei meinem Problem zu nichts.
Ich habe es mal gerade so probiert wie du es beschrieben hast.

Bei der absoluten Positionierung kommt es zu keinen Anzeigefehlern bei verschiedenen Auflösungen das habe ich schon ausprobiert. Liegt ja daran, dass ich mit %-Werten arbeite.

Gruß
Marcel

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

% angaben sind tricky
evlt. hilft dir ja der link weiter:
http://carsten-protsch.de/zwischennetz/doctype/prozent.html
(deshalb nutz ich nix was nciht überall reibungslos funktioniert)
absolute positionierung halte ich übrigens auch für nen schlechten ansatz, oder du bastelst für jede mögliche auflösung eine separate css datei. nervig.

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Ich habe jetzt mein Problem lösen können. Auch wenn es nicht gerade eine "saubere" Lösung ist, funktioniert sie in meinem Fall jedoch.

Meine Navigation befindet sich ganz links am Rand ohne padding und margin. Ich hab nun einfach die Hintergrundgrafik der Menüs als body-background gesetzt mit repeat-y ;-)

Wie gesagt nicht die sauberste Lösung, aber in meinem Fall funktioniert es. Die absoluten Positionierungen lasse ich auf euer Anraten nun auch weg.

Vielen Dank für eure Hilfe!

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Jetzt taucht gerade ein weitere Problem auf.
Wenn ich zwei Divs nebeneinander habe mit float, wie bekomme ich das Content Div dazu,sich bis zum rechten Browserrand zu strecken?

bei height: 100% knallt mir das Div natürlich erstmal Scrolltbalken rein weil er die ganze Browserbreite nimmt.

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button
.
Wenn ich zwei Divs nebeneinander habe mit float, wie bekomme ich das Content Div dazu,sich bis zum rechten Browserrand zu strecken?
gibst dem ne feste breite, anhand der fixen breite der page.
bei height: 100% knallt mir das Div natürlich erstmal Scrolltbalken rein weil er die ganze Browserbreite nimmt.
%angaben sind tricky (link eigentlich gelesen? da waren tipps zu drin) wenns dennoch nicht funzt hilft dir evtl. "overflow:hidden;"? 

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Hi :-)

doch die Seite hatte ich durchgelesen, aber das hat mich nicht weitergebracht. Das Content-Div soll kann ja in der Breite ruhig variabel sein, soll es sogar in meinem Fall.

Ich denke für so einen Fall muss ich auf eine absolute Positionierung des Elements setzen um ans Ziel zu gelangen.

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

wow, also jetzt check ich glaub gar nix mehr^^
das streckt sich doch sowieso so breit wie der inhalt ist?
ansonsten könnte dir glaub min-width helfen. weiss jetzt aber aus dem stehgreif nicht inwiefern da welcher browser probleme machen könnte.
die aktuelle breite vom browserfenster sowie auflösung bekommst ohnehin nur mti javascript raus. ansonsten müsste das mit 100% funktionieren sofern

html, body {
height:100%;
width:100%;
}
notiert hast o.O
*absolutverwirrt bin

edit: wenn links daneben ein div hast, dürfen natürlich beide keine 100% haben. gibst dem einen halt 20% dem anderen 80% das sind auch 100 dann...
(ich halte dich NICHT für doof, nur manchmal sinds echt so kleine lächerlichkeiten auf die man nicht achtet, passiert mir auch öfters das mich eine banalität zum verzweifeln bringt^^)
« Letzte Änderung: 24.08.10, 16:25:31 von strough »

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Das ist ja nett, dass du mich nicht für doof hälst :-D
Das nicht beide Divs 100% haben dürfen und können ist mir klar nur in meinem Fall auch nicht relevant, weil das Menü eine fixe Breite von 200px hat ;-)

Ich hab also links ein Div 200px breit und 100% hoch und rechts daneben ein Div mit 100% Breite und 100% Höhe (rechts div mit position: absolute gelöst). Ich bin jetzt bei dem Ergebnis, dass ich haben wollte :-) Hab's mit viel Zeit und Geduld geschafft, ohne JavaScript und vor Allem ohne Tabellen ^^

Der Einstieg in CSS-Layouts war jetzt nicht ganz einfach aber immerhin hat's geklappt :-D

Ich danke euch für eure Hilfe ;-)


« Programm für Textänderungen auf HTML-Sitewie kann ich ein Gästebuch und einen Chat einrichten?? »
 

Schnelle Hilfe: Hier nach ähnlichen Fragen und passenden Tipps suchen!

Fremdwörter? Erklärungen im Lexikon!
CSS
CSS ist die Abkürzung für Cascading Style Sheets, eine Beschreibungssprache im Internets, die für die visuelle Gestaltung von Webseiten verantwortlich ist....

Pulldown Menü
  Der Begriff "Pull-down-Menü", oder "Dropdown-Menü" bezeichnet eine bestimmte Art von Menü in Benutzeroberflächen, das eine Liste von Funktio...

AGP Schnittstelle
Die AGP (Accelerated Graphics Port) - Schnittstelle wurde in den 1990er Jahren eingeführt und war speziell für Grafikkarten in PCs konzipiert. Sie bot eine dire...