Background und z-index Problem(?)

[veNom]

Hi,
ich arbeite gerade an dieser Seite und hänge einfach fest...
http://www.venom-media.at/jobs/hunde/

Um gleich auf die Fehler zukommen:
1. Der Menü Hintergrund verlängert sich im FireFox und Opera nicht da anscheinden "backround-repeat: repeat-y;" von diesen Browsern nicht akzeptiert wird. Muss den Hintergrund aber da hinbekommen
2. Der Hund der ganz unten auf der Seite ist, der steht im Content hinein, soll so sein (im IE ist dieser falsch positionier *noch* ist rechts vom text), dieser soll Hinter dem text liegen was er nicht macht.

Die HTML könnt ihr aus der index.htm rauslesen und die CSS ist hier zu finden
CSS-File

Die Seite muss bis morgen funktionieren

[sadcrow]

wegen dem hintergrund muss du halt mit height="100%" arbeiten. nimm ein stück aus dem unteren teil des hintergrunds das gleichmässig ist damits nicht die grafik verzieht.


....menu_bg.jpg" height="100%" align="top">

und im table nimm ebenfalls für die ganze seite 100%

[Matthias]

Kenn mich da nicht so super aus, komm immer durch rumprobieren weiter, aber ich hab des gefühl als würde die Grafik durch das Menu_bottom aufhören. Da ja als Height-Angabe 100% steht und da das Menu ja dann vorbei ist.

[sadcrow]

ne wenns ja nur ein kleines stück unter dem bestehende menu ist nicht.

[veNom]

Also das mit Hintergrund habe ich gelöst, habe es jetzt im Root anstatt im Main layer gegeben, aber das Problem mit dem Hund unten habe ich noch der will noch nicht so ganz.

[sadcrow]

wär nicht schlecht wenn ich das als codeschnipsel sehen würd

[veNom]

Klar doch, hab jetzt auch das mit dem Hund gerafft 10 min Pause und man hat sofort wieder den durch Blick, komisch... naja

hier für den Conten habe für das Oben einen extra layer gemacht und im anderen den Hund hinein gesetzt als GB unten links

Code: Alles auswählen

#content {
   width: 586px;
   height: 100%;
   float: right;
   clear: right;
   background-image: url(images/bottom.jpg);
   background-position: bottom left;
   background-repeat: no-repeat;
   
   padding-top: 0px;
   padding-left: 10px;
   padding-right: 10px;
   padding-bottom: 25px;
   z-index: 3;
   
   font-size: 10px;
   color:#000000;
   font-family: Verdana, Arial, Helvetica, sans-serif;
}

#content_top {
   width: 606px;
   height: 44px;
   background-image: url(images/content_top.jpg);
   background-repeat: no-repeat;
   float: right;
}

Für das Menü ist es einfach der Hintergrund anstatt in meinen Main-layer der nur Menü und Content umfasst im Root der alle umfasst mit diesen Code:

Code: Alles auswählen

#root {
   width: 830px;
   height: auto;
   
   position: absolute;
   left: 50%;
   margin-left: -415px;
   
   background: url(images/menu_bg.jpg) repeat-y 22px;
}

Weiters bin ich stolz darauf das alles dem W3C-Standard entspricht

[sadcrow]

omg wo lernt man so kompliziert zu programmieren wenns doch 100mal einfacher geht?

ist nicht bös gemeint. schlussendlich ist es ja dasselbe resultat. aber warum machst dir das so schwierig?

[Matthias]

@sadcrow
Meinst du z.B., dass er die 4 padding-Sachen in vier anstatt in eine Zeile schreibt?

[veNom]

Das mit dem Padding mach ich so weils übersichtlicher ist, ich merk mir bei der anderen methode wo man alle 4 Werte in einen Befehl schreibt nie.