Div über anderes Div mit Tabelle...

    Hallo,

    hab folgendes Problem:

    Ich habe eine Seite mit 3 Divs, die in einem Haupt-Div liegen. Nun wollte ich über den oberen ein weiteres legen, dass genauso groß ist mit einer Tabelle, indem später das Menü auftauchen soll.
    Also in dem einen Div mein Hintergrundbild, darüber Tabelle mit Menü. Habs mit z-index versucht.. komm da irgendwie nich weiter :(
    Das Div wird immer wieder runtergeschoben.. Hab mir auch schon Beiträge angeguckt.. verstehs da nicht wo der Fehler ist..

    Hier mein Code:

    HTML:

    Bin dankbar über jeden Tipp... :idea:

    Erstmal schönen Tag

    -Netvizion-

    Einmal editiert, zuletzt von Netvizion (19. Oktober 2009 um 12:17)

    <img> tag löschen, Tabelle in dein ersten Div rein, in CSS dann ein background: url(); einstellen für dein Div.

    wie wäre es nur mit divs, dein doctype ist auch fast schon veraltet. Und nimm nur divs, bzw ul li für menüs

    Zitat

    <img> tag löschen, Tabelle in dein ersten Div rein, in CSS dann ein background: url(); einstellen für dein Div.


    Hab ich probiert.. Jetzt ist das Problem, dass mein background-image unten abgeschnitten wird, was beim <img> nicht der fall war..

    p.s.: was sollte ich denn für einen doctype nehmen?

    Ich würde es so lösen:
    Das Logo weist du einem Div als Hintergrundgrafik zu (z.B. #header) und gibst diesem eine bestimmte Höhe und Breite.
    Innerhalb dieses #headers fügst du eine ul-Liste mit den Navi-Links ein. Dieser ul-Liste kannst du den gelben Balken zuweisen und sie per margin-top entsprechend positionieren. Durch einen padding-left-Wert bei ul erreichst du die Einrücklung des ersten Links.

    Beispiel:

    Code
    <div id="header">
<ul id="menu">
<li><a href="#">Link1</a>
<li><a href="#">Link2</a>
</ul>
</div>
    Code
    #menu {background: yellow; margin: 30px 0 0 0; padding: 0 0 0 200px;}
#menu li {float: left;}

    Den Doctype kannst du lassen. Der hat auch viele Vorteile, weil er nicht so streng ist.

    So hab zwischen den almählig kommenden kopfschmerzen nochmal ein Zeitfenster der Klarheit gefunden ^^

    Wird wohl das einfachste sein, wenn ich das Menü oben in den Inhalt per <ul> nehme und das Logo per <img> einfüge, dann wird es wenigstens nicht abgeschnitten oder verzogen...
    Muss ich wohl in Kauf nehmen das ich das Menü nicht oben auf den gelben Streifen bekomme.
    (das hatte ich nur in Flash hinbekommen; das Problem dabei ist, das dies von Google nicht ausgelesen wird (=keine Linkverfolgung).

    Unten ist es easy, da sollte auch ein zweites Menü auf den gelben Streifen, das kann ich ja mit <ul> und gelben hintergrund machen, dann bg-color vom div = grau...

    Hab schon zu viel rumgebastelt, dass ich auch nicht mehr weiß was ich noch testen sollte.. :?

    Nochmal eine andere Frage: Sollte man wirklich keine <tables> mehr nehmen? Weil die <ul> Liste verändert sich ja nicht proportional, bleibt auch wenn das Logo kleiner wird an einer festen Stelle... oder kann man für <ul> %-Werte nehmen?

    Tabellen sollten grundsätzlich nur für Tabellarische Inhalte verwendet werden, deshalb auch Tabellen. da dein Doctype aber noch mehr erlaubt, wird dies nicht zu deinem Hauptproblem. Selbstverständlich kannst du % auch ul zuweisen, das kannst du jedem Element zuweisen, wie du es halt brauchst

    Zitat von Netvizion

    das is ja gut^^

    Versteh nur nicht wie ich mein Logo ins <div> als background-image einbinde, so dass dies nicht abgeschnitten wird, sondern voll angezeigt wird...

    Gaaaanz easy... Du gibst deinem Div wo dein Hintergrund hinsoll die größe des Bildes (x px, y px). Dann wird schonmal nichts verschoben, verzerrt sonstwas.

    Wegen dem verschiebeproblem.. Du musst ein wrapper machen,
    also so funktioniert das:

    HTML
    <div id="mainbox">
	<div id="wrapper">
		<div id="navi">
			...
		</div>
	</div>
</div>


    Dem wrapper musst du ein padding verpassen, ist dein innerer margin sozusagen. Den Rest darfst dir jetzt selbst überlegen, da ich wieder weg muss ^^

    interessant :)

    hab nun noch folgendes:

    Bin grad beim menübau..
    Wie bekomme ich das hin, dass zwischen <li> immer der gleiche Abstand ist, egal wie groß die Wörter sind?
    Und das <ul>... </ul> mittig auf der Seite liegt?

    Menü sollte eigentlich so aussehen:
    ....test....testt....testtest....test....testte.... [ ....=free space

    Leider sieht das bei mir so aus, dass sich einige Menüpunkte überlappen und ich das nicht mittig bekomme.

    margin:0 auto ... margin-left:auto; margin-right:auto... klappt irgendwie nicht

    Einmal editiert, zuletzt von Netvizion (19. Oktober 2009 um 16:50)

    Kannst du nicht mal einen Link zur Seite posten?
    Das ist ungefähr so, wie wenn ein Arzt eine Ferndiagnose stellen sollte.
    Besorg dir notfalls kostenlosen Webspace, z.b. bei bplaced oder funpic.

    Da gibt es sicher eine vernünftige Lösung. Nur muss man eben auch mal alles im Gesamtzusammenhang einschließlich der verwendeten Grafiken sehen.

    Hab grad margin-left:25px getestet.. sieht schon besser aus
    Aber dadurch ist es nicht zentriert und ab 30px spring die li. in die zweite Zeile, was nicht so schön ist...
    Könnt man das mit position:fixed machen? (festpinnen?^^)

    Denk mal wenn jemand eine kleinere Auflösung hat, springt das wohl automatisch um...