verschachteltes div an Fensterbreite anpassen

madmax · #1 (**permalink**) 13.02.2010, 17:22

Hi,

ich habe ein Problem mit einem Menü.
Der Hintergrund ist eine Art Balken der über die ganze Seitenbreite gehen soll.
Über dem Balken liegen Menüpunkte.

Die eigentliche Seite in der das Menü integriert ist, ist 1000px breit und in der Höhe variabel,
ergo muss sich auch der Balken in der Höhe verschieben lassen.

Mein Problem ist jetzt, dass ich nicht weiß wie ich den Balken an die Seitenbreite anpassen kann,
da er ja innerhalb dieses 1000px Rahmens liegt.
mit margin und so komm ich zwar über die 1000px aber erstens habe ich dann eine fixe Breite und das schlimmere Problem,
ich habe dann einen horizontalen
Scrollbalken!

Hat wer einen Tipp wie ich das Problem angehen könnte?

lg max

mgutt · #2 (**permalink**) 13.02.2010, 21:34

width:100% und overflow:hidden helfen nicht?

madmax · #3 (**permalink**) 13.02.2010, 22:16

Nein hilft nix, der Balken ist dann eben nur die 1000px breit.

mgutt · #4 (**permalink**) 13.02.2010, 22:19

Du kannst nicht das vorherige Element beenden und danach wieder beginnen, um die width des body zu erreichen?

Was ist wenn Du position:absolute mit width:100% einsetzt? Könnte aber in verschiedenen Browsern unterschiedliche Resultate geben. ^^

madmax · #5 (**permalink**) 14.02.2010, 10:32

Zitat:

Zitat von mgutt

Du kannst nicht das vorherige Element beenden und danach wieder beginnen, um die width des body zu erreichen?

Versteh leider nicht ganz was du meinst.

Mit position:absolute gehts auch nicht. Zerhaut mir das Design und der Balken fangt nicht am linken Rand an sondern erst im Content-Bereich.

Gibts vielleicht eine Lösung mit Javascript?
zb.: Mit margin-left: 200px; und width:1200px; kann ichs links und rechts über den Content-Bereich strecken, nur müsste ich die Werte irgendwie dynamisch reinschreiben können damits für alle Bildschirmbreiten passt.

mgutt · #6 (**permalink**) 14.02.2010, 10:48

Nun die width:100% orientiert sich am vorherigen Element, dass 1000px hat. Wenn Du nun dieses vorherige Element beendest die width:100% dann zum body beziehst, kannst Du danach wieder ein neues Element mit 1000px beginnen.

Wenn allerdings position:absolute das Design zertrümmert, scheint mir das innere Element maßgeblich für die Äußeren zu sein. Oder hast du position:absolute vererbend und nicht per id übergeben?

madmax · #7 (**permalink**) 14.02.2010, 11:20

Glaub nicht dass das so einfach wird einfach das vorige Element zu beenden.
Es handelt sich um einen Webshop und da sind ziemlich viele Ebenen ineinenader verschachtelt...

Zeig dir amal den Link:
Problembalken

mgutt · #8 (**permalink**) 14.02.2010, 15:23

Die Seite ist buggy. Im Kopf befinden sich <div>'s

Code:

<div style="position:relative; border:1px dotted red; margin:6px 2px; padding:18px 2px 2px 2px; zoom:1;"><div style="position:absolute; left:0; top:0; padding:2px 5px; background:red; color:white; font:normal 11px Arial; text-align:left !important; z-index:998;" onmouseover="this.style.zIndex='999'" onmouseout="this.style.zIndex='998'" title="frontend/default/blank/template/page/1column.phtml">frontend/default/blank/template/page/1column.phtml</div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<div style="position:relative; border:1px dotted red; margin:6px 2px; padding:18px 2px 2px 2px; zoom:1;"><div style="position:absolute; left:0; top:0; padding:2px 5px; background:red; color:white; font:normal 11px Arial; text-align:left !important; z-index:998;" onmouseover="this.style.zIndex='999'" onmouseout="this.style.zIndex='998'" title="frontend/default/blank/template/page/html/head.phtml">frontend/default/blank/template/page/html/head.phtml</div><title> Home page </title>

Und diese ganzen Auslagerungen der css-Dateien ist extrem nachteilig. Warum macht man sowas?

madmax · #9 (**permalink**) 14.02.2010, 17:18

Ja die divs weiß ich jetzt auch nicht recht wieso die da sind...

Edit: Die divs finde ich aber nicht wenn ich mir den Quelltext anschaue ... Mit was schaust du dir den Quelltext an?

Aber bei CSS ist es doch normal die über externe Files einzubinden, oder was meinst du genau? Sind ja ca. 1500 Zeilen Code drin, alles zusammen...
Aber das hilft bei meinem Problem leider auch nicht weiter.

mgutt · #10 (**permalink**) 14.02.2010, 18:09

Zitat:

Zitat von madmax

Edit: Die divs finde ich aber nicht wenn ich mir den Quelltext anschaue ... Mit was schaust du dir den Quelltext an?

Egal welcher Browser. In der 1. Zeile des Quelltextes. Bist Du vielleicht eingeloggt und siehst daher was anderes als ich?

Zitat:

Aber bei CSS ist es doch normal die über externe Files einzubinden, oder was meinst du genau? Sind ja ca. 1500 Zeilen Code drin, alles zusammen...

Damit meine ich, dass auf der Seite 11 verschiedene css-Dateien eingebunden werden. 11 Dateien = 11 HTTP-Prozesse die alle abgearbeitet werden müssen bevor die Seite ausgegeben werden kann. Dazu kommen dann noch die 9 JS-Dateien, die auch noch vor Ausgabe der Seite geladen werden müssen und der Prozess der HTML-Seite selbst.

In Firefox sind z.B. 8 parallele Verbindungen Standard. D.h. die Seite wird solange nicht ausgegeben und kommt ins Stocken.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Fragen zu CSS und Joomla	DOKTOR	CSS	2	23.05.2011 19:29
Brauche Hilfe: Schwarzes Nichts	Zwox	CSS	10	19.11.2010 16:53
Header entfernen	tripple	CSS	17	15.06.2010 15:41
Schriftfarbe in den Eintragungsfeldern von jforms	Steveislucky	CSS	2	16.03.2010 10:59
CSS Text nebeinander?	carstiee09	CSS	13	13.11.2009 19:18