✔ DIV-Box Höhe 100%

[Maik]

Die alte Klasse für Menü kann ich dann löschen? Und die neue CSS-Klassen müssten dann so aussehen

Du kannst es im CSS-Selektor auch bei deinem ursprünglichen Klassenbezeichner .menue belassen, und mußt hier nicht zwingend den ID-Bezeichner #nav aus dem Codeschnipsel übernehmen

Stattdessen würde ich für das Navigationsmenü die Tabelle durch die Liste ersetzen, denn das <table>-Element entspricht hier überhaupt nicht seiner vorgesehenen Bedeutung (Semantik), im Dokument Daten in tabellarischer Form gegenüberzustellen.

Bei einer Ansammlung, Liste mit Links eignet sich das <ul>-Element nicht nur besser für ein semantisch wohlgeformteres Markup, sondern lässt sich auch wunderbar mit weiteren <ul>-Elementen verschachteln, wenn Untermenüs für die Menüpunkte (<li><a>...</a></li>) erwünscht sind bzw. benötigt werden, was mit der Tabellenstruktur so nicht möglich ist.

Die CSS-Praxis zielt da in diese Richtung ab:

• Site-Navigation mit Listen — Grundaufbau
• Site-Navigation mit Listen — Erweiterungen

• Listamatic: one list, many options

• Son of Suckerfish Dropdowns

Wo muss ich nun die beiden PHP-Code hinpacken?

Wo die beiden PHP-Scripts in deinem Code hingehören, geht doch eigentlich klar aus ihrer Funktion hervor. "Nr.1" dort, wo der Inhalt getauscht wird, und "Nr.2" unmittelbar vor der Navigation, wie auch in dem vorgestellten Code.

mfg Maik

 

[_SimonSez_]

Hi Maik,

Habe meine Tabelle nun durch eine Liste ersetzt, hab aber jetzt das Problem das ich sie nicht horizontal nebeneinander bekomme.
Hier meine Codes:

<div id="navi">
  <ul class="menue">
    <li><a href="index.php?page=001">home</a></li>
    <li><a href="index.php?page=002">unternehmen</a></li>
    <li><a href="index.php?page=003">leistungen</a></li>
    <li><a href="index.php?page=004">referenzen</a></li>
    <li><a href="index.php?page=005">kontakt</a></li>
    <li><a href="index.php?page=006">impressum</a></li>
  </ul>
</div>

CSS:

#navi    { width:801px; height:32px; margin:0px 1px 0px 1px; background:url(../images/bg03.jpg) repeat-x; float:left; }

.menue			{ border:0px; font-family:Arial, Helvetica, sans-serif; font-size:12px; text-align:center; list-style-type:none; display:inline; }

.menue a:link, .menue a:visited
				{ text-decoration:none; display:block; width:95px; color:#ffffff; background:url(../images/button.jpg) repeat-x; line-height:32px; 
				  text-align:center; border-right:1px solid #ffffff; }
			
.menue a:hover, .menue a:active, .menue a:focus
				{ text-decoration:none; color:#ffffff; background:url(../images/button-hover.jpg) repeat-x; }

Weißt du wo ich was vergessen hab?

Gruß
Simon

 

[Maik]

Habe meine Tabelle nun durch eine Liste ersetzt, hab aber jetzt das Problem das ich sie nicht horizontal nebeneinander bekomme.

Weißt du wo ich was vergessen hab?

Die Frage hätten dir eigentlich in meinem letzten Beitrag die beiden zuletzt empfohlenen Links beantwortet, die sich auch mit horizontalen Listenmenüs beschäftigen

mfg Maik

 

[_SimonSez_]

Ja habs nun doch geschafft

Hab da noch mal ne andere Frage. Welche programmierung ist eigentlich besser?
Wenn man denn Inhalt über ein PHP-Script läd, so wie ich es gemacht hab oder wenn man mit PHP die "include" Funktion benutzt?

 

[Maik]

Wieso stellst du diese Frage hier im CSS-Forum, das sich mit der Formatierungssprache und keiner der Programmiersprachen beschäftigt, anstelle in deinem PHP-Thema HTML-Datei in div laden, wo du das PHP-Script erhalten hast?

mfg Maik

 

[_SimonSez_]

Ok werd dort nochmal die Frage stellen. Dachte du könntest mir vielleicht auch was darüber sagen, da du mir das eine PHP-Script geschickt hattest.

Gruß
Simon

 

[Maik]

Dachte du könntest mir vielleicht auch was darüber sagen, da du mir das eine PHP-Script geschickt hattest.

Erstens stammt das Script nicht aus meiner eigenen Feder, und zweitens wollte ich dir damit lediglich veranschaulichen, wie sich dein Vorhaben umsetzen lässt, den aktuell geladenen Inhalt im Menü optisch hervorzuheben.

mfg Maik

 

[_SimonSez_]

Hallo zusammen,

@Maik: hab es nun mit dem "include" gemacht und eine Lösung gefunden das auch die Buttons aktiv sind.

Hätte da noch mal eine Frage. Und zwar geht es um folgendes:
Mein Body hat ein "background-Image" das einen Verlauf darstellt, der sich beim vergrößern und verkleinen des Browser-Fensters anpasst.
Dann hatte ich mir eine DIV-Box gemacht, die in der Mitte zentriert war und immer 100% Höhe hatte. In der waren dann die restlichen DIV-Boxen.

Jetzt würd ich ganz gerne auf den Body-Background noch ein Image legen. Habe es wie folgt geändert:

CSS:

#wrapper		{ width:1000px; margin:0 auto; min-height:100%; height:auto !important; height:100%; background:url(../images/bg05.jpg) no-repeat #dfe0e3; }
#body			{ width:803px; margin:0 auto; background:url(../images/bg02.gif) repeat-y; }

wrapper: hat die weißen Flecken
body: ist der dunkelgraue verlauf (der auch bis unten gehen soll)


Jetzt habe ich das Problem wieder, dass der Body-Div nicht mehr über die ganze Höhe angezeigt wird.
Habe auch noch mal ein Image angehängt.

Kann mir vielleicht jemand Helfen?

Gruß
Simon

 

[Maik]

Ich schätze mal, du willst erreichen, dass sich das innere DIV #body ebenfalls in der Höhe auf 100% streckt, so wie #wrapper.

Dies ist technisch aber nicht möglich.

mfg Maik

 

[_SimonSez_]

Schade. Gibt es den irgendwie ne andere Möglichkeit das mit der Grafik darzustellen?
Das der Verlauf weiterhin beim vergrößern/verkleinen immer komplett dargestellt ist und die weißen Flecken rechts und links neben der Seite angezeigt werden?

Gruß
Simon