kostenloser Webspace werbefrei: lima-city

Menu Design Color pro Unterseite anders.

lima-city → Forum → Programmiersprachen → PHP, MySQL & .htaccess

attribut auto beispiel blocken code dank datei display farbe grafik http image kontakt login page position start text unterseite url
  1. Autor dieses Themas

    l*******k

    20:47, 24.8.2011
    Hallo,

    ich möchte auf jeder Unterseite auf meiner Homepage eine andere Farbe der Menubar haben, wie mach ich das am besten ich hätte es so gedacht:

    <?php
            echo("<div id=\"Menu\" style=\"background-image: url('/Lokalbook/HP/images/menu/".$menu.".png')\">");
                ?>


    habe die seiten mit includes gemacht, wenn ich zum Beispiel Kontakt offen habe, sollte diese menubar orange sein, also habe ich das so:
    <?php $menu = "orange"; ?>


    aber wie stell ich das ganze in der CSS an, weil ich hatte bisher nur eine Menubar in einer Farbe und zwar so, hier ist auf jeder Seite meiner HP die Menubar gleich: 
    background:url("http://lokalbook.wmw.cc/Lokalbook/HP/images/menubar/blau.png") no-repeat 4px -8px;

    /* ################################# Menu ################################# */

/* start css reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,
fieldset,legend,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
/* end css reset */

#nav_wrppr{
padding:0px 0px 0px 8px;
margin:8px auto 0;
height:58px; 
width:920px;
background:url("http://lokalbook.wmw.cc/Lokalbook/HP/images/menubar/blau.png") no-repeat 4px -8px;
z-index:1;
}

#main_nav{
}

#main_nav li{
float:left;
height:49px;
list-style: none;
}

#main_nav li a{
text-decoration:none;
display:block;
margin-left:5px;
height:58px;
text-indent:-9999px;
overflow:hidden;
outline:none;
background:url("http://lokalbook.wmw.cc/Lokalbook/HP/images/menubar/blau.png") no-repeat ;
}

ul#main_nav li#startseite{
width:252px;
}
ul#main_nav li#unterseite1{
width:163px;
height:1px
}
ul#main_nav li#unterseite2{
width:143px;
}
ul#main_nav li#unterseite3{
width:167px;
}
ul#main_nav li#unterseite4{
width:187px;
}
ul#main_nav li#startseite a{
background-position:-9px -8px;
}
ul#main_nav li#unterseite1 a{
background-position:-261px -8px;
}
ul#main_nav li#unterseite2 a{
background-position:-424px -8px;
}
ul#main_nav li#unterseite3 a{
background-position:-567px -8px;
}
ul#main_nav li#unterseite4 a{
background-position:-734px -8px;
}
ul#main_nav li#startseite a.current{
margin-top:0px;
background-position:-9px -104px;
}
ul#main_nav li#unterseite1 a.current{
margin-top:0px;
background-position:-261px -104px;
}
ul#main_nav li#unterseite2 a.current{
margin-top:0px;
background-position:-424px -104px;
}
ul#main_nav li#unterseite3 a.current{
margin-top:0px;
background-position:-567px -104px;
}
ul#main_nav li#unterseite4 a.current{
margin-top:0px;
background-position:-734px -104px;
}
ul#main_nav li#startseite a:hover{
margin-top:2px;
background-position:-9px -58px;
}
ul#main_nav li#unterseite1 a:hover{
margin-top:2px;
background-position:-261px -58px;
}
ul#main_nav li#unterseite2 a:hover{
margin-top:2px;
background-position:-424px -58px;
}
ul#main_nav li#unterseite3 a:hover{
margin-top:2px;
background-position:-567px -58px;
}
ul#main_nav li#unterseite4 a:hover{
margin-top:2px;
background-position:-734px -58px;
}




    Beitrag zuletzt geändert: 24.8.2011 20:49:08 von lokalbook

  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. programtools

    programtools hat kostenlosen Webspace.

    22:00, 25.8.2011
    Hallo,
    könntest du ein Beispiel online stellen?

    Allgemein wäre es einfacher, wenn du nicht mit Grafiken sondern nur css styles arbeiten würdest (grafiken müsste man sonst erst generieren bzw du müsstest alle erstellen). Dann könntest du ja einfach 'orange' in eine Variable Color schreiben und diese dann im css ausgeben (zB 
    style="color:<?php echo $color; ?>;"
    )

    Oder wenn du zufällige Werte willst lege dir ein Array an:
    <?php
$colors = Array("orange", "green", "red", "#222222", "blue", "#212121");
$color = $colors[rand(0, (count($colors) - 1))];
  4. Autor dieses Themas

    l*******k

    23:19, 25.8.2011
    Hey,

    das mit den Grafiken ist kein Problem die sind schon gemacht, geht es irgendwie das er in diesem Code von der Menu.php nach der Grafik der Menubar frägt und nicht in der Css?

    Menubar: http://lokalbook.wmw.cc/Lokalbook/menu.php

    bsp so aber wie bau ich das in die menu.php ein:

    <?php
    echo("<div id=\"Menu\" style=\"background-image: url('/Lokalbook/HP/images/menu/".$menu.".png')\">");
    ?>

    Gruß Tobi

  5. programtools

    programtools hat kostenlosen Webspace.

    16:34, 26.8.2011
    okay, ich kann deine Struktur leider nicht ganz nachvollziehen. Wie sieht deine menu.php aus und was macht sie wo?

    MFG
  6. Autor dieses Themas

    l*******k

    19:39, 26.8.2011
    Hey,

    upps, den hab ich vergessen zu posten:

    menu.php hier sollte der Link zur Grafik rein sollte dann wieder mittig sitzen (kann ich das dann wieder in der CSS machen?) , anstatt in der CSS:

    <!-- Start: Menu -->
<div id="nav_wrppr">
        <ul id="main_nav">
                        <li id="startseite">
                <a class="current" href="http://lokalbook.wmw.cc/Lokalbook/"></a>
            </li>
            <li id="unterseite1">
                <a class="" href="http://lokalbook.wmw.cc/Lokalbook/unterseite.php"></a>
            </li>
            <li id="unterseite2">
                <a class="" href="http://lokalbook.wmw.cc/Lokalbook/unterseite2.php"></a>
            </li>
            <li id="unterseite3">
                    <a class="" href="http://www.Google.de/"></a>
            </li>
            <li id="unterseite4">
                <a class="" href="http://www.Google.de/"></a>
            </li>
        </ul>
    </div>
		<!-- End: Menu -->


    CSS:

    /* ################################# Menu ################################# */

/* start css reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,
fieldset,legend,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
/* end css reset */

#nav_wrppr{
padding:0px 0px 0px 8px;
margin:8px auto 0;
height:58px; 
width:920px;
background:url("http://lokalbook.wmw.cc/Lokalbook/HP/images/menubar/blau.png") no-repeat 4px -8px;
z-index:1;
}

#main_nav{
}

#main_nav li{
float:left;
height:49px;
list-style: none;
}

#main_nav li a{
text-decoration:none;
display:block;
margin-left:5px;
height:58px;
text-indent:-9999px;
overflow:hidden;
outline:none;
background:url("http://lokalbook.wmw.cc/Lokalbook/HP/images/menubar/blau.png") no-repeat ;
}

ul#main_nav li#startseite{
width:252px;
}
ul#main_nav li#unterseite1{
width:163px;
height:1px
}
ul#main_nav li#unterseite2{
width:143px;
}
ul#main_nav li#unterseite3{
width:167px;
}
ul#main_nav li#unterseite4{
width:187px;
}
ul#main_nav li#startseite a{
background-position:-9px -8px;
}
ul#main_nav li#unterseite1 a{
background-position:-261px -8px;
}
ul#main_nav li#unterseite2 a{
background-position:-424px -8px;
}
ul#main_nav li#unterseite3 a{
background-position:-567px -8px;
}
ul#main_nav li#unterseite4 a{
background-position:-734px -8px;
}
ul#main_nav li#startseite a.current{
margin-top:0px;
background-position:-9px -104px;
}
ul#main_nav li#unterseite1 a.current{
margin-top:0px;
background-position:-261px -104px;
}
ul#main_nav li#unterseite2 a.current{
margin-top:0px;
background-position:-424px -104px;
}
ul#main_nav li#unterseite3 a.current{
margin-top:0px;
background-position:-567px -104px;
}
ul#main_nav li#unterseite4 a.current{
margin-top:0px;
background-position:-734px -104px;
}
ul#main_nav li#startseite a:hover{
margin-top:2px;
background-position:-9px -58px;
}
ul#main_nav li#unterseite1 a:hover{
margin-top:2px;
background-position:-261px -58px;
}
ul#main_nav li#unterseite2 a:hover{
margin-top:2px;
background-position:-424px -58px;
}
ul#main_nav li#unterseite3 a:hover{
margin-top:2px;
background-position:-567px -58px;
}
ul#main_nav li#unterseite4 a:hover{
margin-top:2px;
background-position:-734px -58px;
}


  7. programtools

    programtools hat kostenlosen Webspace.

    23:24, 26.8.2011
    Ja, du kannst ja die Grafik direkt mithilfe des Styles Attribute rein schreiben. Der CSS Hirachie anch gelten styles über das style Attribut immer mehrwertiger als styles über ids & classen. Daher wird das überschrieben.



    menu.php:
    <!-- Start: Menu -->
<div id="nav_wrppr">
        <ul id="main_nav">
                        <li id="startseite">
               [b] <a class="current" href="http://lokalbook.wmw.cc/Lokalbook/" style="background:url('http://lokalbook.wmw.cc/Lokalbook/HP/images/menubar/<?php echo $color; ?>.png') no-repeat ;"></a>[/b]
            </li>
            <li id="unterseite1">
                <a class="" href="http://lokalbook.wmw.cc/Lokalbook/unterseite.php"></a>
            </li>
            <li id="unterseite2">
                <a class="" href="http://lokalbook.wmw.cc/Lokalbook/unterseite2.php"></a>
            </li>
            <li id="unterseite3">
                    <a class="" href="http://www.Google.de/"></a>
            </li>
            <li id="unterseite4">
                <a class="" href="http://www.Google.de/"></a>
            </li>
        </ul>
    </div>
		<!-- End: Menu -->


    Alternativ kannst du auch einfach für jede Farbe eine eigene Klasse anlegen und diese dann ins class-Attribute einbinden oder aber, du schreibst einfach (nicht sauber wird aber aktzeptiert) den style in die php datei
    BSP:

    menu.php
    [..]
<style type="text/css">

#nav_wrppr{
padding:0px 0px 0px 8px;
margin:8px auto 0;
height:58px; 
width:920px;
background:url("http://lokalbook.wmw.cc/Lokalbook/HP/images/menubar/<?php echo $color; ?>.png") no-repeat 4px -8px;
z-index:1;
}

</style>
[..]


    Dann musst du in der css diesen Block natürlich entfernen.

    Denk dran, dass die php-Variable '$color' auch einen Wert enthalten muss.

    Ich hoffe das war so das was du wissen wolltest, ansonsten einfach weiterfragen :D
    MFG
  8. Autor dieses Themas

    l*******k

    23:29, 26.8.2011
    Hey,

    Danke erstmal für die Hilfe, aber dann kann ich das nicht in den Unterseiten machen die ich zum Beispiel im Footer stehen habe,


    ich möchte auf jeder Unterseite auf meiner Homepage eine andere Farbe der Menubar haben, hätte es so gedacht:

    <?php
            echo("<div id=\"Menu\" style=\"background-image: url('/Lokalbook/HP/images/menu/".$menu.".png')\">");
                ?>



    habe die seiten mit includes gemacht, wenn ich zum Beispiel Kontakt offen habe, sollte diese menubar orange sein, also habe ich das so:
    <?php $menu = "orange"; ?>

    Also so:

    <?php $bild = "orange"; ?>
<?php include("style-unterseiten.php"); ?>
<?php include("login.php"); ?>
<?php include("menu.php"); ?>
<?php include("header-unterseiten.php"); ?>
<?php include("searchbar.php"); ?>
	<!-- Start: Site Page -->
	<div id="sitePage">
		
		<!-- Start: Site Page Content -->
		<div id="sitePageContent">
			<a id="skipPoint"></a> <!-- support for disabled surfers -->
				</div>
				<br>Von hier..
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>Bis hier..
		</div>
		<!-- End: Site Page Content -->
		
	</div>
	<!-- End: Site Page -->
	<hr>	
<?php include("footer.php"); ?>


    Danke Gruß Tobi

    Beitrag zuletzt geändert: 26.8.2011 23:29:51 von lokalbook

  9. programtools

    programtools hat kostenlosen Webspace.

    10:36, 27.8.2011
    Okay.
    Du hast eine Seite (PHP) auf der due via Include deine scripte (login search & co) einbindest. Jetzt möchtest du das die Menübar (immer die gleiche Menübar) je nach dem welcher Inhalt (variabler Inhalt) mit einer anderen Farbe (variables CSS -> über php) angezeigt wird.

    Woher weisst du, welcher Kontent angezeigt wird? hast du Parameter, die php übergeben werden?
    zB: www.deinedomein.de?page=kontakte

    PHP-Code
    $colors = Aray('kontakte' => 'red', 'home' => 'yellow', 'impressum' => 'green', 'pictures' => 'blue');
$color = '';
$page = $_GET['page'];

// Menücolor laden
$color = $colors[$page];

[..]

//Menü ausgeben
echo("<div id=\"Menu\" style=\"background-image: url('/Lokalbook/HP/images/menu/".$menu.".png')\">");

[..]

// Content laden
switch($page){
  case 'kontakte':
     include('kontakte.html');
}

[..]


    Wenn du als Parameter 'page=kontakte' übergibst, dann ist die Variable $color = 'red' und als Inhalt wird kantakte.html geladen.
    War das das was du meintest? MFG
  10. Autor dieses Themas

    l*******k

    11:33, 27.8.2011
    Hey,


    ich möchte auf jeder Unterseite auf meiner Homepage eine andere Farbe der Menubar haben, hätte es so gedacht: 

    <?php 
echo("<div id=\"Menu\" style=\"background-image: url('/HP/images/menu/".$menu.".png')\">"); 
?>






    PHP Datei der menu.php: 

    <!-- Start: Menu --> 
<div id="nav_wrppr"> 
<ul id="main_nav"> 
<li id="startseite"> 
<a class="current" href="/"></a> 
</li> 
<li id="unterseite1"> 
<a class="" href="unterseite.php"></a> 
</li> 
<li id="unterseite2"> 
<a class="" href="unterseite2.php"></a> 
</li> 
<li id="unterseite3"> 
<a class="" href="http://www.Google.de/"></a> 
</li> 
<li id="unterseite4"> 
<a class="" href="http://www.Google.de/"></a> 
</li> 
</ul> 
</div> 
<!-- End: Menu -->



    habe die seiten mit includes gemacht, wenn ich zum Beispiel Kontakt offen habe, sollte diese menubar orange sein, also habe ich das so:
    <?php $menu = "orange"; ?>

    Also so sieht die kontakt.php aus: 

    <?php $bild = "orange"; ?> 
<?php include("style-unterseiten.php"); ?> 
<?php include("login.php"); ?> 
<?php include("menu.php"); ?> 
<?php include("header-unterseiten.php"); ?> 
<?php include("searchbar.php"); ?> 
<!-- Start: Site Page --> 
<div id="sitePage"> 

<!-- Start: --> 
<br>Von hier.. 
<br> 
<br> 
<br> 
<br> 
<br> 
<br> 
<br> 
<br> 
<br> 
<br> 
<br> 
<br>Bis hier.. 
</div> 
<!-- End: --> 

</div> 
<!-- End: --> 
<hr> 
<?php include("footer.php"); ?>





    Mein CSS Code: 


    #nav_wrppr{ 
padding:0px 0px 0px 8px; 
margin:8px auto 0; 
height:58px; 
width:920px; 
background:url("http://lokalbook.wmw.cc/Lokalbook/HP/images/menubar/menubar.png") no-repeat 4px -8px; 
z-index:1; 
} 
#main_nav{ 
} 
#main_nav li{ 
float:left; 
height:49px; 
list-style: none; 
} 
#main_nav li a{ 
text-decoration:none; 
display:block; 
margin-left:5px; 
height:58px; 
text-indent:-9999px; 
overflow:hidden; 
outline:none; 
background:url("http://lokalbook.wmw.cc/Lokalbook/HP/images/menubar/menubar.png") no-repeat ; 
}



    Aber wie baue ich das ganze in die Menu.php Datei ein das das funktioniert weil er bisher die MenuGrafik aus der CSS Datei geholt hat?
    Danke Gruß Tobi

    Beitrag zuletzt geändert: 27.8.2011 23:30:06 von lokalbook

  11. programtools

    programtools hat kostenlosen Webspace.

    19:34, 29.8.2011
    MAch die menü.php so:
    <?php
//Jenachdem welches Bild du laden willst, musst du das hier unterscheiden
switch($menu){
  case 'orange':
    $bg_url = ''; #übergebe Hier die URL für orange
  break;
  case 'blue'
    $bg_url = ''; #hier für blau
  break;
 //und immer so weiter...    
}
?>
<!-- Start: Menu --> 
<div id="nav_wrppr" style="background:url('<?php echo $bg_url; ?>') no-repeat 4px -8px;"> 
<ul id="main_nav"> 
<li id="startseite"> 
<a class="current" href="/"></a> 
</li> 
<li id="unterseite1"> 
<a class="" href="unterseite.php"></a> 
</li> 
<li id="unterseite2"> 
<a class="" href="unterseite2.php"></a> 
</li> 
<li id="unterseite3"> 
<a class="" href="http://www.Google.de/"></a> 
</li> 
<li id="unterseite4"> 
<a class="" href="http://www.Google.de/"></a> 
</li> 
</ul> 
</div> 
<!-- End: Menu -->


    Jetzt ist es wichtig, dass du die Daten in die switchschleife einträgst und die FArbe die du möchtest vor dem include der menu.php in die VAriable $menu schreibst.

    Desweiteren finde ich das Konzept etwas verwirrend.
    Überdenke vielleicht die Struktur, oder poste einmal alle Dateien mit erklärung in volgendem Schema:

    Dateistruktur:
    dateiname.dateiendung
    Dateicode

    Das macht die Datei. Hier ist ihre Beschreibung. So steht sie im zusammenhang mit dateixyz.endung. Das ist auch noch wichtig für die Datei etc.

    dateiname2.dateiendung
    Dateicode2

    Das macht die Datei2. Hier ist ihre Beschreibung. So steht sie im zusammenhang mit dateixyz.endung. Das ist auch noch wichtig für die Datei etc.

    usw.

    _
    MFG

  12. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

Login zum Webhosting ohne Werbung!

Hast Du schon kostenlosen Webspace oder bist Du auf der Suche nach WordPress-Hosting mit Staging-Funktion und wp-cli? Jetzt günstige Prepaid Domains registrieren!