Div über anderes Div mit Tabelle...

Netvizion

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:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/transitional.dtd">


<html>
<head>
<title>...</title>


</head>




<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">




<div class="all">




<div class="navoben" width="100%">


<img src="nav.gif" width="100%" alt="">


</div>




<div class="navobentop" width="100%">


<table border="1" width="100%" height="100%">
<td>&nbsp;</td>
</table>


</div>




<div class="navunten" width="100%" > 


<img src="navunten.gif" width="100%" alt="">


</div>




</div>




</body>
</html>




--- CSS Code: ---


html, body {margin: 0; padding: 0; width:100%; height:100%; }




.all {width:100%; height:100%}




.navoben {height:24%; width:100%; position:absolute left top; z-index:1}




.navobentop {height:24%; width:100%; position:absolute left top; background-color: transparent; z-index:2}  




.inhalt {background: green; height:64%; width:100%; overflow:auto;}




.navunten {background-color: rgb(204,204,204); height:12%; width:100%;}

Alles anzeigen

Bin dankbar über jeden Tipp...

Erstmal schönen Tag

-Netvizion-

Unregistriert

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

Unregistriert

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

Netvizion

Das Problem ist auch, ich möchte das das Menü sich dynamisch mit der Grafik verändert und an einer bestimmten Stelle sitzt und dort bleibt.

So sollte das aussehen...

[Blockierte Grafik: http://gradeko-werbung.de/hp2divs.gif]

Netvizion

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?

sejuma

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.

Netvizion

...*verzweifel*

So ich hab das mal geändert.. aber mit dynamisch geht da gar nichts. Weiß nicht warum das Bild abgeschnitten wird oder der Scrollbalken da ist.

margin 30px schiebt das bg-image automatisch mit..
bild wird abgeschnitten
scrollbalken kommt

Ich poste das hier mal als *.zip und zum anschauen...

Netvizion

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?

Unregistriert

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

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...

Grevas @ !home

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

Netvizion

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

Code

....bla


<div class="navunten" width="100%" > 
<ul id="menue">
<li><a href="#">12312332312132123</a>
<li><a href="#">1232312</a>
<li><a href="#">1233132</a>
<li><a href="#">21331231232133123</a>
<li><a href="#">12312332133</a>
<li><a href="#">12212121221</a>
<li><a href="#">312232132</a>
</ul>
</div>




Css:


#menue {margin: 0 0 0 0; padding: 7px 0 0 0; }


#menue li {float: left; width:12%; margin-left:auto; margin-right:auto;}




.navunten {margin:0 auto; height:12%; width:100%; background-image: url(navunten.gif); background-repeat: no-repeat; background-color: rgb(204,204,204)}

Alles anzeigen

sejuma

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.

sejuma

zu deiner vorherigen Frage:
Weise li einen margin-left-Wert zu.

Netvizion

... ok

unten im Anhang.. der aktuelle Stand

Netvizion

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...

sejuma

Ich entpacke nicht gerne fremde Dateien auf meinem PC

Netvizion

*ahhh ok... moment xD

sejuma

Zentrieren einer Listen-Navi

Netvizion

DA...

das ist der krams bis jetzt....

nur ein Seiten-Springer Problem hab ich nicht... bis jetzt xD

Tags