CSS Einfaches Hauptmenü mit Bildern: Unterschied zwischen den Versionen
K |
|||
| (4 dazwischenliegende Versionen des gleichen Benutzers werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
[[Category:Beispiele]] | [[Category:Beispiele]] | ||
[[en:Simple main menu with images]] | [[en:Simple main menu with images]] | ||
| − | → Hauptartikel: [[ | + | → Hauptartikel: [[Anpassen des Navigationsmenüs#Grafiken für Menüpunkte|Anpassen des Navigationsmenüs > Grafiken für Menüpunkte]] |
''Beschreibung:'' Ein simples Hauptmenü mit Bildern an den Einträgen der ersten Ebene. | ''Beschreibung:'' Ein simples Hauptmenü mit Bildern an den Einträgen der ersten Ebene. | ||
| Zeile 8: | Zeile 8: | ||
<code>[php, N] | <code>[php, N] | ||
<?php | <?php | ||
| − | require '../dynpg/getcontent.php'; //DynPG-Funktionalität einbinden | + | require '../dynpg/getcontent.php'; // DynPG-Funktionalität einbinden |
| − | $GLOBALS["DynPG"]->SetParam_PathToRoot('../dynpg/'); //DynPG-Pfad setzen | + | $GLOBALS["DynPG"]->SetParam_PathToRoot('../dynpg/'); // DynPG-Pfad setzen |
?> | ?> | ||
| Zeile 64: | Zeile 64: | ||
} | } | ||
| + | /* Inhalt */ | ||
div#inhalt { | div#inhalt { | ||
/* Angaben für ein zweispaltiges Layout */ | /* Angaben für ein zweispaltiges Layout */ | ||
| Zeile 72: | Zeile 73: | ||
/* Alle divs innerhalb des Navigationsmenüs verschieben ihren Inhalt | /* Alle divs innerhalb des Navigationsmenüs verschieben ihren Inhalt | ||
um 10 pt nach rechts. Durch die Verschaltelung von divs innerhalb | um 10 pt nach rechts. Durch die Verschaltelung von divs innerhalb | ||
| − | des Menüs erhalten wir so eine Einrückung. | + | des Menüs erhalten wir so eine Einrückung. */ |
div#course_categories_menu div { | div#course_categories_menu div { | ||
padding-left:10pt; | padding-left:10pt; | ||
| Zeile 100: | Zeile 101: | ||
} | } | ||
</code> | </code> | ||
| − | |||
[http://examples.gampers.ch/examples/css/menu_with_images/index.php Beispiel ausführen] | [http://examples.gampers.ch/examples/css/menu_with_images/index.php Beispiel ausführen] | ||
Aktuelle Version vom 15. Mai 2011, 11:06 Uhr
→ Hauptartikel: Anpassen des Navigationsmenüs > Grafiken für Menüpunkte
Beschreibung: Ein simples Hauptmenü mit Bildern an den Einträgen der ersten Ebene.
Einfaches Hauptmenü mit Bildern - index.php
[php, N]
<?php
require '../dynpg/getcontent.php'; // DynPG-Funktionalität einbinden
$GLOBALS["DynPG"]->SetParam_PathToRoot('../dynpg/'); // DynPG-Pfad setzen
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> <head>
<title>Seite mit dynamischen Navigationsmenü</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<?php $GLOBALS["DynPG"]->Write_AllGroups(); // Gruppenlisten-Ansicht ausgeben (standardmäßig abhängig vom Navigationskontext) $GLOBALS["DynPG"]->SetParam_AA_Maxview(10); // Maximal zehn Einträge in Artikellisten anzeigen $GLOBALS["DynPG"]->Write_AllArticles(); // Artikdelliste-Ansicht ausgeben (standardmäßig abhängig vom Navigationskontext) $GLOBALS["DynPG"]->SetParam_A_Anytime(false); // Parameter wieder auf false setzen (wurde bei der Navigation auf true gesetzt) $GLOBALS["DynPG"]->Write_Article(); // Artikel-Detailansicht ausgeben ?>
</body> </html>
Einfaches Hauptmenü mit Bildern - style.css
[css,N]
/* ======= Layout der Seite und Navigation ======= */
/* Navigation*/ div#navigation{
/* Angaben für ein zweispaltiges Layout */ float: left; width:150pt; margin-left:5pt; margin-right:5pt;
border:1px solid black;
}
/* Inhalt */ div#inhalt {
/* Angaben für ein zweispaltiges Layout */ margin-left:165pt; margin-right:5pt;
}
/* Alle divs innerhalb des Navigationsmenüs verschieben ihren Inhalt
um 10 pt nach rechts. Durch die Verschaltelung von divs innerhalb des Menüs erhalten wir so eine Einrückung. */
div#course_categories_menu div {
padding-left:10pt;
}
/* Alle links innerhalb des Navigationsmenüs */ div#course_categories_menu a {
text-decoration:none;
}
/* ======= Bilder der Menüeinträge ======= */
/* Hintergrundbilder für die Menüeinträge der ersten Ebene setzen */ div#navigation .level_0_r_i_exp, div#navigation .level_0_r_i_exp_hover, div#navigation .level_0_r_a_exp_hover, div#navigation .level_0_r_a_exp {
background: url("images/note.gif") no-repeat left top;
padding: 0px 0px 5px 0px;
}
/* Bezeichnungen für die Menüeinträge der ersten Ebene positionieren */ div#navigation .level_0_r_i_exp p, div#navigation .level_0_r_i_exp_hover p, div#navigation .level_0_r_a_exp_hover p, div#navigation .level_0_r_a_exp p {
position: relative; left: 40px;
}
