Menü in Header einfügen

keamas

Hi ich würde gerne ein Menü einfügen (da bzw darunter wo das Header Image ist). Wie hier auf dem Bild der Rot eingefärbte Bereich.
Kann mir jemand sagen wie ich das machen kann und wo ich was einfügen muss) ?
[Blockierte Grafik: http://www.sunworks.org/tt.jpg]

PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head profile="http://gmpg.org/xfn/11">
	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />


	<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>
	
	<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->


	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
	<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
	<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />


	<style type="text/css" media="screen">
			
		body	 	{ background: url("<?php bloginfo('stylesheet_directory'); ?>/images/bg.gif"); border: none; }
		#header 	{ background: url("<?php bloginfo('stylesheet_directory'); ?>/images/header.gif") no-repeat bottom center; border: none; }
		#footer 	{ background: url("<?php bloginfo('stylesheet_directory'); ?>/images/footer.gif") no-repeat top center; border: none; }
		#sidebar    { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/sb_top.gif") no-repeat top left; border: none; }
        #sidebar_bottom    { background: url('<?php bloginfo('stylesheet_directory'); ?>/images/sb_bottom.gif') no-repeat top left; border: none; }
        .sb_header    { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/h2.gif") no-repeat top left; border: none; }
	</style>


	<?php wp_get_archives('type=monthly&format=link'); ?>


	<?php wp_head(); ?>
</head>
<body>
<div id="page">


<div id="header" onclick="location.href='<?php bloginfo('url'); ?>';" style="cursor: pointer;">
    <h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1>
    <div class="description"><?php bloginfo('description'); ?></div>
</div>

Alles anzeigen

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

MaD

hm in welcher Form möchtest du da eine Navi haben ... eine Möglichkeit wären ein paar einfache Textlinks in den Header ... eine andere Möglichkeit wäre eine ganze Leiste unter dem Header ... vielleicht sogar ein ausklappbares ... ??

an was hattest du gedacht?

keamas

Hmmm schwer zu sagen aber son geiles popup währe schon ne feine sache.
Eigentlich habe ich vorerst nur Home und Gallery eingepalant aber da kommt vielleicht schon noch mehr.
Evtl kann ja jemand ein Beispiel für so ein Popup menü posten und wie ich das integrieren muss. Währe sher Dankbar darüber

Gruß

Keamas

MaD

schaust du hier
http://killercup.ki.funpic.de/blog/?p=231

um dir erstmal sowas zu zeigen ...

keamas

sieht wirklich klasse aus aber mir würden eigentlich die Kategoriebuttons riechen, da ich nicht so viel zu verlinken habe bzw auch ein normaler Textlinkt würde glaub recht ausreichen.

Was total schick währe diese transparenten Kategorie Buttons über das Headerimage zu legen. Wie gesagt das Popup brüchte ich eigentlich nicht.
Würde mich nur noch interessieren wie und wo ich das einbauen kann.

keamas

So hi nun habe ich eine Seite gefunden, die ein richtig schickes Menü hat, wie ich es in etwar auch haben möchte:
http://majik.id.au/

Nur bekomme ich das irgendwie nicht hin, da das Menü über dem Bild sein soll.

Kann mir dabei jemand helfen ?

Monika

Zitat von keamas

So hi nun habe ich eine Seite gefunden, die ein richtig schickes Menü hat, wie ich es in etwar auch haben möchte:
http://majik.id.au/
Nur bekomme ich das irgendwie nicht hin, da das Menü über dem Bild sein soll.
Kann mir dabei jemand helfen ?

keamas
ich helfe gerne,
aber eine url zu Deinem bisherigen Versuch wäre mehr als hilfreich fürs helfen,

ich spekulier nicht so gern ;)

lg

keamas

so hier die URL zu meiner Seite: http://www.sunworks.org/

und der jertzige Header Code:
Ich möchte die Home und Photos Links oben in dem Grünen Feld des Bildes haben.

PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head profile="http://gmpg.org/xfn/11">
	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />


	<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>
	
	<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->


	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
	<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
	<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />


	<style type="text/css" media="screen">
			
		body	 	{ background: url("<?php bloginfo('stylesheet_directory'); ?>/images/bg.gif"); border: none; }
		#header 	{ background: url("<?php bloginfo('stylesheet_directory'); ?>/images/header.gif") no-repeat bottom center; border: none; }
		#footer 	{ background: url("<?php bloginfo('stylesheet_directory'); ?>/images/footer.gif") no-repeat top center; border: none; }
		#sidebar    { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/sb_top.gif") no-repeat top left; border: none; }
        #sidebar_bottom    { background: url('<?php bloginfo('stylesheet_directory'); ?>/images/sb_bottom.gif') no-repeat top left; border: none; }
        .sb_header    { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/h2.gif") no-repeat top left; border: none; }
	</style>


	<?php wp_get_archives('type=monthly&format=link'); ?>


	<?php wp_head(); ?>
</head>
<body>
<div id="page">


<div id="header" onclick="location.href='<?php bloginfo('url'); ?>';" style="cursor: pointer;">
    <h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1>
    <div class="description"><?php bloginfo('description'); ?></div>
</div>
	<div id="topbar">	
	<div class="nav"><a href="<?php echo get_settings('home'); ?>">Home</a>
	  <?php if(function_exists('g2_adminheader')) { 
				$g2_option = get_settings('g2_options'); 
			?>
	  <a href="/<?php echo $g2_option['g2_embed']; ?>">Photos</a>
	  <?php } ?>
			
	  <?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
	  <br />
	  <br />
	  <br />
	</div>
	</div>

Alles anzeigen

MaD

also so wie du es in dem speziellen Blog gesehen hast:

in der Header.php

Code

<div>
    <ul id="supernav">
        <li class="page_item"><a href="" title="Home">Home</a></li>
        <li class="page_item"><a href="" title="Ueber den Blog">Ueber den Blog</a></li>
        <li class="page_item"><a href="" title="Ueber mich">Ueber mich</a></li>
        <li class="page_item"><a href="" title="FB4 FH" target="_blank">FB4 FB</a></li>


    </ul>


</div>

Alles anzeigen

in der Style.css

Code

#supernav {
           font : bold 10px/10px Verdana, Lucida Grande, Arial, Helvetica, Sans-Serif;
           font-weight : bold;
           top : 181px;
           left : 50%;
           width : 920px;
           [COLOR=Red]margin : 0 0 0 -360px;[/COLOR]
           padding : 5px 9px;
           text-align : left;
           display : block;
           z-index : 99;
      }
     #supernav li {
           margin : 0;
           padding : 0;
           display : inline;
      }
      #supernav a {
    color: #ffffff;
    font-weight: bold;
    height: 19px;
    padding: 5px 16px;
    }


#supernav a:hover {
    color: #ffa500;
     text-decoration: none;
    font-weight: bold;
    }


#supernav a:active {
    color: #ffa500;
     text-decoration: none;
    font-weight: bold;
    }


#supernav .current_page_item a {
    color: #ffa500;
     text-decoration: none;
    font-weight: bold;
}

Alles anzeigen

mit der rot gekennzeichnete Zeile kannst du die Position verändern ... Erklärung zu dem margin-Befehl findest du hier http://www.css4you.de/margin.html

ansonsten muss du natürlich noch die Farben deinem Design anpassen ...

Rob Vegas

da lobe ich mir doch die suchfunktion! wollte schon fast einen eigenen artikel aufmachen, doch anscheinend gehts anderen ähnlich wie mir!

ich habe ein blog (relaxtion theme) und da die zwei sidebars sehr schmal sind, würde ich gerne ebenfalls zwischen headerbild und dem blog eine leiste über die gesamte breite(also unter dem headerbild) einfügen. am liebsten natürlich mit hovergrafiken? damit es auch fein ausschaut.

traut sich das hier jemand zu? rob hat nämlich kaum ahnung von solchen spielereien. code kann ich gerne mail, oder auch hier veröffentlichen!

seite findet ihr hier: http://www.mindtime-blog.de

würde mich sehr freuen, wenn das ginge!

MaD

im Grunde genommen hast du doch schon in dem Beitrag fast alles,was du brauchst ... nur wenn du ein Hover-Bild haben möchtest, dann musst du ne Kleinigkeit in der css ändern ... aber das kann man auch nahcträglich machen

hast du schon mal versucht, das ganze einzubauen ... und wenn ja, wo traten Probs auf ...

Rob Vegas

im ersten theme war ja nur ein teil der der leist bedienbar. habe keine große ahnung, aber treffen diese veränderungen für jedes theme zu? meine sieht ja nun "leicht" anders aus ;-)

verändern wollte ich noch nix, aber wenn ich es so übernehmen kann, dann werde ich es gern testen

MaD

also die Links in der Header.php sind immer gleich aufgebaut .... das einzige, was für jedes Theme und für jeden Geschmack angepasst werden muss ist der css-Teil

Rob Vegas

so nun habe ich es mal testweise eingebaut. man sieht zwar schon, dass es in eine richtige richtung geht, aber so kanns pral ist es dann leider doch noch nicht. was hab ich trottel falsch gemacht?

http://www.schnabi03.de *hat ja dasselbe theme wie meine hauptseite*

MaD

zeig mal bitte deine Header.php und deine css-Datei ...

und schilder mal bitte, was du geändert hast ...

EDIT:
versuch mal bitte den Teil den du im Header ergänzt hast in einen <div> .... hier der ergänzte Teil .... </div> z u setzen ...

Rob Vegas

header:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
    <head profile="http://gmpg.org/xfn/11">
        <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
        <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>
        <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
        <!-- leave this for stats -->
        <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
        <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
        <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
        <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
        <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
        <?php wp_get_archives('type=monthly&format=link'); ?>
        <?php wp_head(); ?>


    </head>
    <div>
</div>


    <body>
        <div id="page">
        <div id="top"><a href="http://robvegas.alfahosting.org/wordpressfun/index.php"><img src="<?php bloginfo('template_directory'); ?>/images/blank.gif" alt="home" title="home" width="864" height="185" /></a></div>
        <div id="wrapper">
    <ergänzt>
    <ul id="supernav">
        <li class="page_item"><a href="" title="Home">Home</a></li>
        <li class="page_item"><a href="" title="Ueber den Blog">Ueber den Blog</a></li>
        <li class="page_item"><a href="" title="Ueber mich">Ueber mich</a></li>
        <li class="page_item"><a href="" title="FB4 FH" target="_blank">FB4 FB</a></li>


    </ul>
    <ende...hatte ich aber auch schon mal im head teil, dann schob es sich oben übers gesamte banner>

Alles anzeigen

so und die die style css:

HTML

.postmetadata {
    color: #808979;
    font-size: 11px;
    letter-spacing: 0.09em;
    margin: 0;
    padding: 0;
    text-align: right;
}


.postmetadata a {
    color: #808979;
}


/* different postmetadata style for single.php */


.alt {
    line-height: 1.4em;
    padding: 0 0 15px 30px;
}


.alt a {
    color: #005577;
}




/*     these are the styles for the flickr badges in the 3 column. feel free to edit them 
    to your own needs but do never rename them as the styles would not be applied correctly.  
*/


#flickr_badge_uber_wrapper {
    text-align:center; 
    width:150px;
}
#flickr_badge_wrapper {
    padding:10px 0 10px 0;
}
.flickr_badge_image {
    margin:0 10px 10px 0px
}
.flickr_badge_image img {
    border: 1px solid black !important;
}
#flickr_badge_source {
    text-align:left; margin:0 10px 0 0px;
}
#flickr_badge_icon {
    float:left; margin-right:5px;
}
#flickr_www {
    display:block; 
    padding:0 10px 0 00px !important; 
    font: 11px Arial, Helvetica, sans-serif !important; 
    color: #3993ff !important;
}
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {
    text-decoration:none !important; 
    background:inherit !important;
    color: #000000;
}
#flickr_badge_wrapper {}
#flickr_badge_source {
    padding:0 !important; 
    font: 11px Arial, Helvetica, sans-serif !important; 
    color: #000000 !important;
    <ergänzt>
#supernav {
           font : bold 10px/10px Verdana, Lucida Grande, Arial, Helvetica, Sans-Serif;
           font-weight : bold;
           top : 181px;
           left : 50%;
           width : 920px;
           margin : 0 0 0 -360px;
           padding : 5px 9px;
           text-align : left;
           display : block;
           z-index : 99;
      }
     #supernav li {
           margin : 0;
           padding : 0;
           display : inline;
      }
      #supernav a {
    color: #ffffff;
    font-weight: bold;
    height: 19px;
    padding: 5px 16px;
    }


#supernav a:hover {
    color: #ffa500;
     text-decoration: none;
    font-weight: bold;
    }


#supernav a:active {
    color: #ffa500;
     text-decoration: none;
    font-weight: bold;
    }


#supernav .current_page_item a {
    color: #ffa500;
     text-decoration: none;
    font-weight: bold;
}

Alles anzeigen

bin kein großer html fachmann. kann links mit bilder verknüpfen und nen bisschen rumpfuschen, aber ich bin schon mal sehr dankbar für deine nette hilfe!

MaD

so sorry, dass ich mich jetzt erst wieder melde, aber war irgendwie zu stressig gestern ...

versuch mal bitte den Teil den du im Header ergänzt hast in einen <div> .... hier der ergänzte Teil .... </div> zu setzen und das ganze außerhalb der anderen <div> Bereiche zu plazieren ...

solltest du damit Probleme haben, kannst du mir auch dein Theme zippen und zukommen lassen, dann bau ich dir die Navi ein ...

nowhere

hm...

Um mal bei dem genannten Beispiel http://majik.id.au/ zu bleiben: Wie schaffe ich es, dass dann in den einzelnen Menüpunkten (Home, Gallery, Links, Kontakt) jeweils Header und Footer angezeigt werden? Ich hab versucht mir das Menü einzubauen, was soweit wohl auch geklappt hat, aber wenn ich dann meine Menü-Punkte anklicke, werden die jeweiligen Seiten sozusagen "target_self" und dementsprechend ohne Header und Footer dargestellt.

MaD

Zitat von nowhere

Um mal bei dem genannten Beispiel http://majik.id.au/ zu bleiben: Wie schaffe ich es, dass dann in den einzelnen Menüpunkten (Home, Gallery, Links, Kontakt) jeweils Header und Footer angezeigt werden? Ich hab versucht mir das Menü einzubauen, was soweit wohl auch geklappt hat, aber wenn ich dann meine Menü-Punkte anklicke, werden die jeweiligen Seiten sozusagen "target_self" und dementsprechend ohne Header und Footer dargestellt.

also im Grunde hast du das schon geschafft ... weil bis auf den Link Gallery funktionieren die Links einwandfrei ... das von dir genannte Problem tritt nur bei der Gallery auf und wird wohl durch das Plugin selber verursacht ...

mit Gallerien kenn ich mich leider nicht aus, da müßtest du nochmal ein Thema im Plugin Bereich schreiben zu dem Problem ...

nowhere

[gelöscht erstmal]

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Menü in Header einfügen

Jetzt mitmachen!