Navigation formatieren

Mauki

Ich probiere gerade ein eigenes Template zu erstellen. Nach 2 Stunden rumprobieren hab ich folgendes Ergebniss erzielt.

Nun stellt sich noch die Frage wie ich das Wort "Pages" in der Navigation rausbekomme?

Desweiteren steh ich noch auf dem Schlauch warum die beiden Grafiken den HIntergrund nicht korrekt gesetzt haben. In meinem DW Web passt das?

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

Silencer

Die Grafiken sind beide richtig, lediglich die passende Hintergundfarbe fehlt noch dann sieht es so aus wie auf der alten seite.

In deiner Sidebar müsste so etwas stehen:

PHP

<?php wp_list_pages('title_li=<h2>' . __('Pages', 'kubrick') . '</h2>' ); ?>

Mach daraus einfach dieses hier:

PHP

<?php wp_list_pages('title_li='); ?>

Mauki

Die Sidebar passt nun!

Zitat von Silencer

Die Grafiken sind beide richtig, lediglich die passende Hintergundfarbe fehlt noch dann sieht es so aus wie auf der alten seite.

Die Hintergrundfarbe ist gsetzt, das ist es ja. Ich habe ja das Stylesheet der alten Seite übernommen.

Code

.box1{
    height: 85px;
    background-color: #E2F3FA;
    border-bottom: 5px solid #FEE07E;
    background: url(images/zeitlos.jpg) no-repeat;
    }


.box2{
    padding:20px;
    padding-right:0px;
    background-color: #31C3E8;
    border-bottom: 12px;
    border-color: #ffff00;
    background: url(images/brasserie.jpg) no-repeat;
    }

Alles anzeigen

Mauki

Komisch ist auch das der gesamte Navibereich und der Content total verschoben sind und ich weiß nicht warum? EIgentlich sollte es so aussehen?

Code

#container {
    width: 900px;
    text-align: left;
    margin-right: auto;
    margin-left: auto; 
    border: 1px solid #9C9C9C;
    border-bottom: 15px solid #31C3E8;
    background-color: #90d7ed;
    }


.navi{
    width: 130px;
    height: 520px;
    margin-bottom: 10px;
    float: left;
    background: #71CEEA;
    border-right: 1px dashed #31C3E8;
    }


.content{
    float:none;
    padding:15px 20px 10px 25px;
    height: 520px;
    margin: 0px 0px 0px 312px;
    background-color: #90D7ED;
    line-height: normal;
    text-align: justify;
    }

Alles anzeigen

Frau_Braun

Gerade wollte ich antworten, da schient sich das Problem gelöst zu haben.

Kleiner Tip für die Karte in der Anfahrtsbeschreibung: Als GIF und nicht als JPG abspeichern. JPG ist für Übergänge aber nicht für einfarbige Flächen gut. Deshalb sieht die Graphik so vermanscht aus.

Monika

und mein Tipp, ich habe bescheinigt , dass ich Farben sehr gut sehen kann, doch diesen Text kann ich fast nicht*derlesen* , weil der Kontrast so schwach ist

* Geniessen Sie die angenehme Atmosphäre der Brasserie ZEITLOS bei guten Weinen und Bieren, Kaffee und Kuchen oder einem Leckerbissen aus der Bistroküche.

Das ZEITLOS besteht aus zwei Teilen: Einem Gewölbekeller aus dem 14. Jahrhundert und einem modernen Teil mit schicker Lounge-Atmosphäre

Neugierig geworden ? Dann besuchen Sie uns im Herzen Nürtingens.
*

Mauki

Zitat von Frau_Braun

Gerade wollte ich antworten, da schient sich das Problem gelöst zu haben

Welches Problem meinst du?

Zitat von Monika

und mein Tipp, ich habe bescheinigt , dass ich Farben sehr gut sehen kann, doch diesen Text kann ich fast nicht*derlesen* , weil der Kontrast so schwach ist

Ja das weiß ich aber dem Besitzer der Brasserie gefällt das :mrgreen:

Frau_Braun

Verstehe, ich habe die alte für die neue Page gehalten.

Mir sind ein paar Sachen aufgefallen: Was soll folgendes im Quelltext?

Code

<!--
@import url("#");
-->

Das könnte den gesamten Quellcode überschreiben.
In meinem CSS-Edidor wird das wie ein eigenes Stylesheet angezeigt, und dieses wiederum verweist auf ein neues @import url("#"). Dadurch entsteht vielleicht eine Art Endlos-Loop.

Bei

Code

.right {
    float:right;
    margin-left:10px" 
    }

für das Bild ist ein Anführungszeichen hineingeraten.

Warum hat #content einen margin von 312 px? Das entspricht doch gar nicht der Breite der Navigation.

Wenn ich den Quelltext richtig interpretiere, umschließt #cobtainer alle darstellenden Elemente: Header, linke Navigation und Haupttextfeld (auch Footer?). Wenn die Elemente des Haupttextfeldes trotzdem machen, was sie wollen und wenn irgendwo ein Float vorkommt, liegt das meistens daran, dass das Float nicht weder durch einen Clearer aufgehoben wurde.

Versuch deshalb mal, einen Clearer oberhalb des Footers einzusetzen.

Code

<div id="clearer"></div>

CSS:

Code

#clearer {
    clear: both;
}

Da musst Du mal ein bisschen mit herumexperimentieren. Kann auch sein, dass der Clearer nach der Navigation eingesetzt werden muss.

Probier erstmal damit weiter. Ich schaue morgen gern noch mal drauf; für heute melde ich mich erstmal ab.

Noch was zum Inhalt:

Wenn es nicht Absicht ist:

"Die Brasserie" statt "die Brasserie".
"Speisen & Getränke" statt "Speisen&Getränke"

Speisekarte:

Die Preise sind so weit von den Speisen entfernt, dass es schwierig ist zu erkennen, welcher Preis zu welchem Gericht gehört.

Mauki

So @import url ist draussen, der Clearer ist drin und das Anführungszeichen entfernt.

Hat sich aber nichts getan. Wegen dem Stylesheet muß ich mal rumexperimentieren. Die 312px sind irgendwie beim rumspielen reingekommen, ansonsten hängt der Content fast in der Navigation drin?

Da rätsel ich noch wo das Problem ist?

Frau_Braun

Eine Zwischenmeldung; morgen geht es weiter, aber erst wenn die angemerkten Dinge geändert sind.

In Deinem Blog sind ein Haufen Dinge im Argen:

Erstmal ganz wichtig: Warum fehlt im Quelltext oben die Zeile:[COLOR=Red]<html xmlns="http://www.w3.org/1999/xhtml"> [/COLOR]?!!!
Die wird jedenfalls bei mir nicht angezeigt.

So und jetzt das grundlegende Problem des Zusammenhalts:

HTML

<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="navi">
<div class="navcontainer">
<ul>
<li class="page_item page-item-58 current_page_item"><a href="http://wordpress.deinblog.de" title="Willkommen">Willkommen</a></li>
<li class="page_item page-item-60"><a href="http://wordpress.deinblog.de/?page_id=60" title="die Brasserie">die Brasserie</a></li>
<li class="page_item page-item-62"><a href="http://wordpress.deinblog.de/?page_id=62" title="Speisen & Getränke">Speisen & Getränke</a></li>
<li class="page_item page-item-64"><a href="http://wordpress.deinblog.de/?page_id=64" title="Kontakt">Kontakt</a></li>
<li class="page_item page-item-66"><a href="http://wordpress.deinblog.de/?page_id=66" title="Anfahrt">Anfahrt</a></li>
<li class="page_item page-item-68"><a href="http://wordpress.deinblog.de/?page_id=68" title="Events">Events</a></li>
<li class="page_item page-item-70"><a href="http://wordpress.deinblog.de/?page_id=70" title="Bilder">Bilder</a></li>
<li class="page_item page-item-72"><a href="http://wordpress.deinblog.de/?page_id=72" title="Impressum">Impressum</a></li>
</ul>
</div>
</div>
</div>

Alles anzeigen

Das allerletzte Tag schließt die Box #container ab. Ich dachte ja, dass sie auch die gesamte Navigation plus Haupttextfeld und Footer umschließt. Dem ist aber nicht so! Dieser letzte abschließende Tag gehört nicht in die index.php, sondern in die footer.php. Sonst wird das alles überhaupt nüscht. Also sofort ändern.

Schau Dir mal bitte folgenden Screenshot an:

Screenshot

Das ist das, was mein CSS-Editor bei Deiner Testsite anzeigt. Was ist das für ein merkwürdiges Gebilde, das unter den Stylesheets aufgeführt wird und das da noch immer eingebunden wird? Wenn ich dieses extrahiere, wird ein Dokument angezeigt, das exakt den gleichen Code hat wie der Quelltext Deiner Seite (wenn ich das mal kurz überfliege). Der Pfad verweist aber auf ein übergeordnetes Verzeichnis. Kann sein, dass das mit dem fehlenden einleitenden HTML-Tag zusammenhängt.

Clearer im Stylesheet ist noch nicht definiert!

Es ist nützlich und deshalb üblich, body mit margin 0 und padding 0 an allen vier Seiten zu definieren. Den Abstand nach oben musst Du mit #container herstellen.

#box5 ist nicht definiert.

Sprache Englisch in der ersten Zeile des Quelltextes ist falsch angelegt.

Viel Glück und gute Nacht!

Mauki

Also der Clearer ist jetzt drin, die box5 ist auch definiert. Das überflüssige DIV sollte jetzt auch draussen sein.

Bei einigen Metas weiß ich garnicht was die machen bzw ob ich die auch brauch. Soll ja eigentlich kein Blog werden. Ich habe die Infos aus nem Tutorial?

Wo muß denn <html xmlns="http://www.w3.org/1999/xhtml"> hin?

Frau_Braun

Ganz oben; so muss es aussehen:

HTML

<!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="text/html; charset=UTF-8" />
<meta name="distribution" content="global" />
<meta name="robots" content="follow, all" />
<meta name="language" content="de" />

Nur zur Vergewisserung: Der genannte abschließende Tag soll nicht rausfliegen, sondern in die footer.php gesetzt werden, (fast) als letzter HTML-Code.

Grobstruktur:

header.php

PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html ...">
<head ...">
Metaangaben
Titel
Automatismen
Stylesheet
</head>
<body>
<div id="container">
<!-- Umgebender Container ******************************** -->
#box1
#box2

Alles anzeigen

Das ganze steht für den Ausdruck get_header

index.php

PHP

<?php get_header(); ?> 
#navi
<div id="content"
Hier kommt die Loop hin
</div>
#clearer (kommt eventuell auch über #content, teste mal aus)
<?php get_footer(); ?>

get_footer steht für

footer.php

PHP

#footer
</div> <!-- Ende container ******************************************* -->
</body>
</html>

Mauki

Ich poste mal zur Sicherheit meine 3 Dateien. Ich denke da kann von den Metas sicherlich noch was raus. Ich erzeuge ja kein Blog und ich denke das sind sicherlich überflüssige Sachen vom Tutorial drin!

Was mich wundert ist das die Formatierung vom Container nicht die Sidebar, den Content und den Fuss einschließen?

header.php

PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head profile="http://gmpg.org/xfn/11">
<title><?php bloginfo('name'); ?><?php if ( is_single() ) { ?> &raquo; <?php } ?><?php wp_title(); ?></title>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="description" content="<?php bloginfo('description'); ?>" />
<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'); ?>" />


<meta http-equiv="Content-Type" content="" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="content-language" content="de" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="robots" content="index,follow" />
<meta name="description" content="" />
<link rel="stylesheet" href="" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="" />
<link rel="alternate" type="text/xml" title="RSS .92" href="" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="" />
<link rel="pingback" href="" />
<link href="http://wordpress.markusburkhardt.de/favicon.ico" rel="shortcut icon"></link>
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>

Alles anzeigen

index.php

PHP

<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>


<div class="navi">
<?php get_sidebar(); ?>
</div>


<div class="content">
<?php the_content(); ?>
</div>


<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>


<div id="clearer"></div>
<?php get_footer(); ?>

Alles anzeigen

footer.php

Code

<div class="footer"></div>


</div>
</body>
</html>

Frau_Braun

Setze bitte erst mal in Zeile 2 dieses hier ein, dann sehen wir weiter.
[COLOR=Red]<html xmlns="http://www.w3.org/1999/xhtml">[/COLOR]

Frau_Braun

Wenn Du Dir den Quelltext anschaust (das ist möglich in Deinem Browser unter Ansicht > Quelltext anzeigen, oder Darstellung > Quelltext anzeigen, je nachdem welchen Browser Du benutzt), dann wirst Du sehen, dass #container NICHT alles umschließt, obwohl das in Deinen PHP-Dateien richtig angelegt zu sein scheint. Irgendetwas läuft also schief. Deshalb erst mal den Basisfehler korrigieren.

Hier mal eine Ansicht Deines Quelltexts, so wie Wordpress ihn nach Ausführung aller Anweisungen ausgibt:

Dein Quelltext

Mauki

So jetzt sieht das schon etwas besser aus.
[COLOR=Black]<html xmlns="http://www.w3.org/1999/xhtml"> ist drinund in der Sidebar war ein abschließendes DIV zuviel drin.

Jetzt muß noch der Content sauber formatiert werden.

Offen ist auch noch warum trotz gesetzer Hintergrundfarbe das bei box1 und box2 das nicht korrekt angezeigt wird.

Bei der Sidebar und dem Content habe ich ne Höhenangabe drin, das will ich aber rausmachen. Kann man das dynamisch machen?
[/COLOR]

Frau_Braun

Zitat von Mauki

[COLOR=Black]
Bei der Sidebar und dem Content habe ich ne Höhenangabe drin, das will ich aber rausmachen. Kann man das dynamisch machen?
[/COLOR]

Ja klar, die Höhe verschiebt sich, wenn Du nichts definierst, automatisch mit dem Inhalt. Allerdings würde ich, wenn nicht zu viel ungenutzter Raum drum sein soll, eine Mindesthöhe (min-hight) einstellen. Das sieht immer besser aus.

Frau_Braun

Zitat

Offen ist auch noch warum trotz gesetzer Hintergrundfarbe das bei box1 und box2 das nicht korrekt angezeigt wird.

Das kommt, weil Du immer entweder als Hintergrund ein Bild haben kannst oder eine Hintergrundfarbe. Wenn Du nämlich das Bild rauslöscht, ersteckt sich die Hintergrundfarbe über die ganze Breite. Die einfachste Lösung ist, das Bild so breit zu machen wie den Container. Es reicht dann auch eine Box.

Übrigens hast Du auch hier das Hintergrundbild wieder als JPG abgespeichert. Deshalb sieht auch dieses verwaschen aus. Auch wenn Du keine vernünftige Ausgangsgraphik geliefert bekommen hast, bearbeite das Bild in Photoshop neu: Alle zusammenhängenden Flächen mit Zauberstab markieren und einheitliche Farben zuweisen, bei allen senkrechten und waagrechten Kanten die Glättung entfernen. Anschließend über Datei > Für Web speichern als GIF ohne Dither speichern; 8 Farben werden vermutlich genügen. Dann wirst Du höchstwahrscheinlich eine wesentlich kleinere Datei bekommen, die die Vergrößerung des Bildes/der Bilder wieder ausgleicht.

Frau_Braun

Noch was:

#right braucht noch einen linken Margin, damit das Bild nicht an den Text stößt.
#navi braucht noch ein oberes Padding, damit die Navigation nicht direkt an den Header stößt. Höhe anpassen (da musst Du ein bisschen fummeln).

Wenn ich mal nach Nürtingen komme, kann mir die Brasserie ein Freibier spendieren. :)

Mauki

Zitat von Frau_Braun

Übrigens hast Du auch hier das Hintergrundbild wieder als JPG abgespeichert. Deshalb sieht auch dieses verwaschen aus. Auch wenn Du keine vernünftige Ausgangsgraphik geliefert bekommen hast, bearbeite das Bild in Photoshop neu: Alle zusammenhängenden Flächen mit Zauberstab markieren und einheitliche Farben zuweisen, bei allen senkrechten und waagrechten Kanten die Glättung entfernen. Anschließend über Datei > Für Web speichern als GIF ohne Dither speichern; 8 Farben werden vermutlich genügen. Dann wirst Du höchstwahrscheinlich eine wesentlich kleinere Datei bekommen, die die Vergrößerung des Bildes/der Bilder wieder ausgleicht.

Ok das Bild hab ich mal verbreitert und ohne extra HIntergrundfarbe eingebunden. Ist auch ein GIF.

Wie man allerding einheitliche Farben zuweist bzw die Kanten glättet hab ich keine Ahnung. Ich kenn mich mit Photoshop kaufm aus :mrgreen:

Zitat von Frau_Braun

#right braucht noch einen linken Margin, damit das Bild nicht an den Text stößt.

Ist drin

Zitat von Frau_Braun

#navi braucht noch ein oberes Padding, damit die Navigation nicht direkt an den Header stößt. Höhe anpassen (da musst Du ein bisschen fummeln).

Auch drin, allerdings ist jetzt die Navi ein Tick zu lang und läuft in den Fuß rein??

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Navigation formatieren

Jetzt mitmachen!