# Link -> CSS Box



## derhoeppi (29. Dezember 2007)

Hallo Leute,
ich habe da mal eine Frage. Ich beschäftige mich seit einigen Tagen mit CSS, was bisher auch relativ gut funktioniert. Nun bin ich bei der Erstellung einer Homepage auf ein Problem gestoßen. Ich habe ein Menü über CSS erstellt. Wenn ich nun einen Menüpunktanklicke möchte ich das sich der Inhalt einer Box ändert. Dazu habe ich mir vorgestellt, dass ich mehrere Boxen erstelle und je nachdem welcher Menüpunkt ausgewählt wird, diese Box sichbar wird - die anderen sind dann unsichtbar. Ist soetwas machbar. Und wie kann ich einen Link auf eine CSS Box setzen?


----------



## Maik (29. Dezember 2007)

Hi,

ob es ausschliesslich mit CSS umsetzbar ist, kommt ganz darauf an, ob die Boxen Nachfahren- oder Nachbarelemente der Menüpunkte sind.

Für ersteres hat Stu Nicholls ein paar Lösungsansätze parat: 


http://www.cssplay.co.uk/menus/menuseven.html
http://www.cssplay.co.uk/menus/mini_tabbed_pages.html
http://www.cssplay.co.uk/menus/page_menu.html
http://www.cssplay.co.uk/menus/page_menu2
Für letzteres wird Javascript benötigt, um die Boxen ein- und auszublenden.


----------



## GFX-Händchen (17. März 2008)

Sorry wenn ich den älteren Beitrag wieder hochhole aber ich komme damit auch nicht klar!

Nehmen wir einmal an ich habe 2 Divs.
Links das Menü (.menu), rechts den Inhalt (.inhalt).
Wie zum Teufel bekomme ich es nun hin, dass wenn man m Menü einen Link anklickt der Text im Inhalt-Div angezeigt wird?

Maik's vorletzer Link kommt dem schon nahe, nur ist der Code für mich
1. unübersichtlich und
2. ist das wohl "nur" per mouseover und nicht so, dass man den Link anklicken muss!


----------



## Maik (17. März 2008)

Hi,

hierfür müsste in den letzten beiden Selektoren die :hover-Pseudoklasse gegen :focus ausgetauscht, und jeweils derselbe Selektor nochmal mit der :active-Pseudoklasse notiert werden:


```
#hoverpage ul#outer li.page a:focus, #hoverpage ul#outer li.page a:active {white-space:normal;}

#hoverpage ul#outer :focus div, #hoverpage ul#outer :active div {position:absolute; left:0; top:0;}
```

Da dies aber in den modernen Browsern (Firefox, Opera, Safari, usw.) nur bei gedrückter Maustaste funktioniert, sprich sobald die Maustaste losgelassen wird, verschwindet die aufgerufene Box wieder umgehend, ist von dieser Methode abzuraten.


----------



## GFX-Händchen (18. März 2008)

Also kommt man um ein iFrame doch nicht herum?


----------



## Maik (18. März 2008)

Anstelle eines iFrames könnte auch PHP und die include-Methode eingesetzt werden.


----------



## GFX-Händchen (18. März 2008)

Gut, dann müssten die Seiten aber in PHP erstellt werden weil es ja nur mit der Dateiendung *.php zu includen geht - richtig?:suspekt:
Dann stünde ich wieder vor einem Problem, weil ich ja noch X/HTML und CSS lerne (somit kein php kann).


----------



## Maik (18. März 2008)

GFX-Händchen hat gesagt.:


> Gut, dann müssten die Seiten aber in PHP erstellt werden weil es ja nur mit der Dateiendung *.php zu includen geht - richtig?


Mit Hilfe einer *.htaccess*-Datei lässt sich auch auf dem Server einrichten, dass HTML-Dokumente vom  PHP-Parser interpretiert werden sollen:


```
AddType application/x-httpd-php .htm .html
```


----------



## GFX-Händchen (18. März 2008)

Habe das jetzt einma probiert, also eine .htaccess mit dem Inhalt angelegt, auf den Server hochgeladen und in meiner Seite im Body *nur* folgendes drin:

```
<div class="menueblock">
  <ul class="menue">
    <li class="menueliste"><a href="inhalt.html">Startseite</a></li>
    <li class="menueliste"><a href="blablubb.html">Fotos</a></li>
    <li class="menueliste"><a href="http://#">Links</a></li>
    <li class="menueliste-unten"><a href="http://#">Kontakt</a></li>
  </ul>
</div>
<div class="inhalt">
<?
switch($section){
case "Fotos": include("blablubb.html"); break;
case "Seite2": include("seite 2.php"); break;
case "Seite3": include("seite 3.php"); break;
default: include("inhalt.html"); break;
}
?>
```
Die inhalt.html wird im _.inhalt_-Bereich auch angezeigt, nur wenn ich auf Fotos klicke dann läd sich die Seite nicht im inhalt-Bereich sondern er läd die Seite quasi komplett, so als wenn ich einfach eine andere url eintippen würde.:suspekt:

Wo liegt der Fehler`?


----------



## Maik (18. März 2008)

Schau dich mal in den PHP-Tutorials um, wie das mit dem Includen funktioniert. 

Und bei weiteren Fragen wende dich bitte damit ans PHP-Board. Vielen Dank.


----------

