Änderungen im Header?

peterpa

Hallo,

ich bräuchte mal bitte einwenig Hilfe. Ich habe folgendes Theme installiert und nutze dieses auch aktiv:

http://www.elegantthemes.com/preview/Basic/

Ich finde das Theme super, aber eine mehr oder weniger kleine Sache stört mich extrem. Ich würde gerne die Seiten also z.B. Contact, Portofolio näher zu der Suche hinmachen und dann links von den Seiten soll meine kleine Header Grafik hin. Ich habe mal ein Screenshot gemacht, wie ich es gerne hätte:

http://www.abload.de/img/sowillicheshaben23ai.jpg

Könnte mir jemand das vielleicht realisieren? Als mehr oder weniger Wordpress Anfänger/Noob, bekomme ich das leider nicht hin.

Header.php:

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'); ?>" />
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
<?php wp_get_archives('type=monthly&format=link'); ?>


<?php 
global $options;
foreach ($options as $value) {
if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else { $$value['id'] = get_settings( $value['id'] ); } }
      ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/style<?php echo $artsee_color; ?>.css" 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'); ?>" />
<!--[if IE 7]>    
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_directory'); ?>/iestyle.css" />
<![endif]-->    
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_directory'); ?>/ie6style.css" />
<script defer type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/pngfix.js"></script>
<![endif]-->
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/superfish.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/hoverIntent.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/idtabs.js"></script>
<script type="text/javascript">
jQuery(function(){
jQuery('ul.superfish').superfish();
});
</script>
</head>


<body>


<!--This controls pages navigation bar-->
<div id="pages">
<ul class="nav superfish">
<?php if (is_home()) { ?>
<?php include(TEMPLATEPATH . '/includes/home-button.php'); ?>
<?php } else { include(TEMPLATEPATH . '/includes/home-button2.php'); } ?>
<?php wp_list_pages("sort_order=$artsee_order_page&depth=3&exclude=$artsee_exclude_page&title_li="); ?>
</ul>
<div id="search">
<form method="get" action="<?php bloginfo('home'); ?>" style="padding:0px 0px 0px 0px; margin:0px 0px 0px 0px">
<input type="text"  name="s" value="<?php echo wp_specialchars($s, 1); ?>"/><input type="image" class="input" src="<?php bloginfo('stylesheet_directory'); ?>/images/search-<?php echo $artsee_color; ?>.gif" value="submit"/>
                    </form>
</div>
</div>


<!--End pages navigation-->


<div id="wrapper2">

Alles anzeigen

Style.css

http://nopaste.info/7ad6929a2f.html

Vielen Dank für eure Hilfe, bin echt seht dankbar!

Mit freundlichen Grüßen
Peter

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

maxe

Du musst für die Seitenliste die Breite (width) löschen und einen Abstand nach links angeben:

Code

#pages ul {
float:left;
list-style-type:none;
margin:0;
[COLOR=Red]padding:0 0 0 300px;[/COLOR]
}

dann kannst du #pages ein backround geben:

Code

#pages {
height:39px;
margin:50px auto 0;
width:950px;
[COLOR=Red]background-image:url(images/bild.gif);[/COLOR]
}

peterpa

Erstmal vielen Dank für deine Hilfe. Meine Style.CSS sieht nun so aus:

http://nopaste.info/ae9c9a02d2.html

Ich habe eine 100 x 250 PXC große Gif Datei mit dem Namen bild.gif in das Image Verzeichnis getan. Wie man auf folgendem Bild sehen kann, wird die Header Grafik aber völlig falsch dargstellt:

http://www.abload.de/img/falschbjo3.jpg

wo liegt da der Fehler? Nochmals vielen Dank für die nette und kompetende Hilfe!

Grüße
Peter

maxe

Du hast bei #pages nur eine height von 39px angegeben, vielleicht hakt es da. Ansonsten gib mal einen Link zum Blog.

peterpa

Jetzt sieht es so aus:

Code

#pages {
width: 950px;
margin: 50px auto 0px auto;
height: 100px;
background-image:url(images/bild.gif);
}

Die Url kann ich nicht posten, da ich es Local mit XAMPP am laufen habe. Jetzt hat die Header Grafik zwar die richtige Höhe, aber erst immer noch wie auf dem Bild oben zu sehen viel zu breit.

Danke für die Hilfe!

maxe

gib doch mal zusätzlich zum background-image auch[FONT=arial][size=10] background-position[/SIZE][/FONT] an: http://www.css4you.de/background-position.html

Edit: In deinem Screenshot seh ich übrigens gar kein Headerimg.

peterpa

Die Headergrafik auf meinem Screenshot ist die graue. Wird aber viel zu breit und zu flach dargestellt.

#pages {
width: 950px;
margin: 50px auto 0px auto;
height: 39px;
background-image:url(images/bild.gif);
background-position:50px 100%;
}

eigentlich sieht die bild.gif Grafik so aus:

http://www.abload.de/img/bild537a.gif

Oben auf dem Screenshot sieht man ja, wie sie bei mir aussieht, also falsch!?

maxe

ahh okay, dann seh ich es jetzt auch ;-)
Dann versuch es doch mal so:

Code

#pages {
width: 950px;
[COLOR=Red]margin: 0px auto;
height: 100px;[/COLOR]
[COLOR=Red]background:transparent url(images/bild.gif) repeat-x left [/COLOR][COLOR=Red]top[/COLOR][COLOR=Red];[/COLOR]
}

peterpa

Habe jetzt alles so geändert, wie du es gesagt hast:

http://nopaste.info/b102481a25.html

Aussehen tut es aber immer noch falsch:

http://www.abload.de/img/unbenannt-1zxh5.jpg

Liebe Grüße
Peter

maxe

aja, sieht doch schon fast richtig aus. Ich hatte das margin etwas verändert, spiel mal ein bisschen mit den Werten und probier auch mal padding aus.

Oder willst du die Wiederholung noch raus haben, dann musst du repeat-x auf no-repeat ändern.

peterpa

Mhhh, es soll ja so aussehen:

http://img1.abload.de/img/sowillicheshaben23ai.jpg

Header -- Navi -- Suche[LEFT]Irgendwie muss ja noch die Navi/Suche wieder runter und die Grafik ist ja viel zu breit dargestellt?
[/LEFT]

maxe

aber so ähnlich hatten wir es doch schon :confused:
dann musst du doch nur noch ein padding-top mitgeben:

Code

#pages ul {
float:left;
list-style-type:none;
margin:0;
padding:0 0 0 300px;
}


#pages {
background:transparent url(http://www.abload.de/img/bild537a.gif) no-repeat scroll 0 0;
height:39px;
margin:0 auto;
[COLOR=Red]padding-top:70px;[/COLOR]
width:950px;
}

Alles anzeigen

peterpa

könnte man es mahen, dass der Header weiter unten ist? Also alles soll [FONT=Arial Narrow]so [/FONT][FONT=Arial Narrow]bleiben nur der Header soll issel run[/FONT][FONT=Arial Narrow]ter! th[/FONT][FONT=Arial Narrow]x![/FONT]

maxe

du merkst doch selber wie schwer es ist ohne Link zur Problemseite ist. Warum probierst du nicht selber mal ein bisschen mit margin, padding, height, background etc. rum :confused: Dann wäre doch der Lerneffekt auch viel größer.

Code

#pages {
background:url(http://www.abload.de/img/bild537a.gif) no-repeat scroll 0 [COLOR=Red]20px[/COLOR];
height:39px;
margin:0 auto;
padding-top:[COLOR=Red]90px[/COLOR];
width:950px;
}

peterpa

Nochmals Danke :)

peterpa

Ich muss nochmal nachfragen, weil der gepostete Code leider nicht funktioniert und weil ich es leider auch nicht hinbekomme.

Aktueller Code:

http://nopaste.info/ff6b8271d9.html

Aussehen tut es jetzt aber so:

http://nopaste.info/ff6b8271d9.html

Was ist da falsch? Vielen Dank für die Hilfe!

Liebe Grüße
Peter

peterpa

Könnte mir da bitte jemand helfen?

maxe

Dann wäre es wenigstens hilfreich, wenn du einen Screenshot posten würdest, anstatt 2x die css zu posten. Und dann frag ich mich grad, was das Padding 2x da sucht? Und eine geschweifte Klammer fehlt?

Code

#pages { 
width: 950px; 
padding-top:90px; 
margin: 0px auto; 
height: 39px; 
background:url(http://www.abload.de/img/bild537a.gif) no-repeat scroll 0 20px; 
[B][COLOR=Red]}[/COLOR][/B]
#pages ul {  
list-style-type: none;  
float: left;  
[COLOR=Red]padding: 0px 0px 0px 0px;  [/COLOR]
margin: 0; 
[COLOR=Red]padding:0 0 0 300px; [/COLOR]
}

Alles anzeigen

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Änderungen im Header?

Jetzt mitmachen!