Beiträge von koslowski

  • CSS Problem

    Hi,

    Zitat von cester

    Ja, mein Problem ist aber, warum die Überschift in alten Browsern unter der blauen Linie angezeigt werden und bei ältern über der blauen Linie... ich möchte die Überschrift unter der blauen Linie anzeigen, bei alten und neuen Browsern...

    das ist nicht dein einziges Problem.

    Der IE 6 zeigt deine navi überhaupt nicht an, was wohl mit der Stapelung zusammenhängt.

    Jetzt sehe ich erst woher der blaue Strich ist. Es ist ein übermäßig großes HG-Bild, wo der Strich ganz unscheinbar unten links in der Ecke ist.

    Sorry, aber wie schon gesagt die ganze Seitenstruktur ist ausgesprochen suboptimal und kaum dafür geeignet die gewünschte Darstellung browserübergreifend sicherzustellen.

    Es wimmelt von position:relative/absolute, z-index in zahllosen imho überflüssigen Containern.
    Da hab ich leider nicht die Zeit dazu das mühevoll auseinanderzuklamüsern. :)

    Meiner Meinung nach ist es das Beste noch mal von vorne mit einer besseren Struktur anzufangen.

  • CSS Problem

    Hi,

    Zitat von cester

    Bei der H3-Überschrift! Über dem Content...

    die wird bei mir im FF und IE8 überhaupt nicht angezeigt, weil sie sich hinter div#upbg befindet.
    Wenn man das z-index:1; für #upbg wegnimmt ist sie zu sehen.

    Die h3 hat position:relative und top:4px;, warum auch immer.

    Nimmt man top weg rutscht die h3 4px nach oben.
    Kann mir aber nicht vorstellen das es beabsichtigt ist, weil es dann komisch ausschaut.

    Persönlich finde ich auch die ganze Struktur der Site nicht gut.
    Es wurde HTML/CSS-mäßig imho sinnlos so verschachtelt, positioniert,
    geschichtet, das es mich wundert das nicht mehr Probleme auftauchen.

    Gruß
    koslowski

  • Vistered Little - Navigation in den Header einbauen

    Moin,

    Zitat von karlo16

    Aber um die Gestaltung der Links geht es mir noch nicht, mir geht es ERSTMAL darum, überhaupt Links (oder einfach nur Schrift) dorthin platziert zu bekommen, wo ich sie haben will - also rechts von den Thumbnails.

    genau das ist Gestaltung. :)

    Alles was mit positionieren von Elementen zu tun hat, mit Farben, Größen, usw. ist CSS.


    Zitat von karlo16

    Und das ohne dass sie von der Header-Grafik überdeckt werden, so wie es mit der Tabelle passiert ist, von der ich vorher schrieb.

    Eine Headergrafik sollte eine Hintergrundgrafik sein und nicht als img eingebunden werden (außer dem Logo vielleicht.).

    Zum positionieren zählt auch die Stapelreihenfolge, d.h. die Schichtung auf der z-Achse (zum Betrachter hin).

    Wenn man das falsch macht kann schon mal ein Element unerwünschterweise das andere verdecken.

    Zitat von karlo16


    Oder meinst Du das mit "Gestaltung der Links"?

    jep. :)

    Gruß
    koslowski

  • Vistered Little - Navigation in den Header einbauen

    Hi,

    mit deiner header.php kann ich leider nix anfangen.

    Wenn du im Backend verschiedene Seiten erstellt hast, kannst du mit wp_list_pages dir diese Seiten als Linkliste ausgeben lassen.

    Dabei weist WP den Listenpunkten Klassen zu.
    Für den Link der aktuellen Seite wird dem entsprech. Listenpunkt .current_page_item zugewiesen. Diese Klasse kannst du mit CSS individuell gestalten.

    Außerdem wird den Listenpunkten die Klasse .page_item und eine spezifische Klasse z.B. .page-item-(irgendeine Zahl) zugewiesen.
    Diese Zahl ist bei jedem Listenpunkt anders.

    Diese Klassen kannst du herausfinden indem du den Quelltext der Seite aufrufst und nachsiehst welche Klassen WP vergibt.

    Das sind auch wieder Ansatzpunkte um die Liste per CSS zu gestalten.

    Ohne CSS-Kenntnisse ist eine individuelle Gestaltung der Links leider schwerlich möglich. ;)

    Gruß
    koslowski

  • Vistered Little - Navigation in den Header einbauen

    Hi,

    eine Tabelle ist für tabellarische Daten da.
    Eine Reihe von Links gehört semantisch als Liste ausgezeichnet (ul).

    PHP
    <div id="kopf">
  <h1>Schrauben Müller - <span>Der Blog</span></h1>
</div><!-- Ende #kopf -->
<div id="topnavi">
  <ul>
    <li><a href="/wordpress/"<?php if(is_home() and !is_paged()) echo ' class="aktiv"'; ?>
         title="Startseite">Startseite Blog</a></li>
    <?php wp_list_pages('title_li='); ?>
  </ul>
</div><!-- Ende #topnavi -->

    So könnte der entscheidende Teil einer header.php aussehen.

    Zuerst div#kopf mit Hauptüberschrift und direkt danach div#topnavi mit der horizontalen Navigation.
    Optisch kann man es so aussehen lassen als wäre die navi im Kopf, z.B. gleiche Farbe und kein Abstand zwischen #kopf und #topnavi.

    Mit dem ersten li wird sichergestellt das die gerade aktuelle Seite optisch hervorgehoben wird (die Klasse .aktiv hat die gleiche Formatierung wie die Klasse .current_page_item welche auf der aktuellen Seite normal ausgegeben wird)

    Durch wp_list_pages werden die Links als Liste ausgegeben und jeder Listenpunkt bekommt noch zwei Klassen mit auf den Weg:
    .page_item und .page-item-5 wobei die 5 nur beispielhaft ist.
    Jeder Listenpunkt bekommt eine individuelle Klasse mit einer jeweils anderen Zahl augegeben.
    So hast du genug Ansatzpunkte um das Ganze per CSS zu gestalten.

    Innerhalb der Klammer nach wp_list_pages können noch versch. Parameter eingetragen werden, um das Ergebnis zu steuern.


    Bin kein WP-Profi deshalb hoffe ich nix falsches zu erzählen. :)

    Gruß
    koslowski

  • Verachtelte Listen unschön dargestellt

    Hi,

    die browserübergreifende Darstellung der voreingestellten Listenzeichen ist kaum in den Griff zu bekommen.

    Beim FF ist z.B. die Default-Einstellung von list-style-position outside und beim IE ist es inside.

    Das Sicherste ist, die Listenzeichen für alle li-Elemente auf list-style-type:none; zu setzen (also ziemlich oben in der style.css). und Hintergrundgrafiken als Listenzeichen einzusetzen.

    Die Lösung mit HG-Grafiken als Listenzeichen ist browserübergreifend i.d.R. völlig unproblematisch. :wink:

    Gruß
    koslowski

  • Verachtelte Listen unschön dargestellt

    Hi,

    die Listen wurden falsch geschachtelt.
    So ist es richtig:

    HTML
    <ol>
<li>Ebene 1
<ul>
<li>Ebene 2</li>
<li>Ebene 2</li>
</ul>
</li>
<li>Ebene 1</li>
</ol>

    Das schließende li-Element kommt erst nach der eingefügten ul. ;-)

    Zitat

    Das CSS kann man bei wordpress.com leider irgendwie nur gegen Geld ändern... :sad:

    Oder du lernst es.

    Gruß
    koslowski

  • css div variable höhe

    Hi,

    Zitat von alchymyth

    ein beispiel: die graue box ist mit min-height definiert.
    (wahrscheinlich nicht IE6 konform)

    PS: ansonsten folge ich koslowski's anregung, uns mal einen link zu geben.

    der IE6 braucht per Cond. Comment height, da er height fälschlicherweise wie min-height behandelt.

    Mir ist aber trotzdem schleierhaft warum hier min-height zum Einsatz kommen soll, wenn nicht "Foot Sticker Alt" benötigt wird.

    Das Beste ist doch immer keine Höhe anzugeben und die Abstände per padding/margin herzustellen.

    Gruß
    koslowski

  • css div variable höhe

    Hi,

    display:block für a.
    Dann wird a so groß wie sein Elternelement.
    Das hat auch den Vorteil das dann nicht nur der Text verweissensitiv ist, sondern die ganze Fläche.

    Die Höhe wird ganz einfach über ein entsprechendes padding festgelegt. ;-)

    Ach ja, a sollte für den IE6 noch HasLayout in Form einer Mindesthöhe bekommen (über Cond. Comment!), damit auch dort nicht nur der Text verweissensitiv wird.

    Gruß
    Klaus

  • Nav Hover >> Internet Explorer

    Hi,

    nein, das reicht natürlich nicht.

    Seufz:

    Zitat von koslowski

    Dein Content hat position:relative;
    Nimm das doch mal raus und schau ob das reicht.

    Zeile 132-136 deiner style.css:

    HTML
    #header,#content, #footer {
        float: left; display: inline;
        clear: both;
        position: relative;
    }

    Dort nimmst du #content raus sodaß es dann so ausschaut:

    HTML
    #header, #footer {
        float: left; display: inline;
        clear: both;
        position: relative;
    }

    Dann klappt die Subliste im IE6 und im IE7 wie gewünscht über dem Content aus. ;)

    Der Grund warum sie im IE6/7 hinter dem Content ausgeklappt ist habe ich auch schon gepostet:

    Zitat von koslowski


    Ansonsten wäre noch anzumerken das der IE6/7 jedem positionierten Element wo HasLayout=true gilt fälschlicherweise einen Art Stapelkontext zuordnet, so als wäre z-index:0 gesetzt.

    Klasse wenn man sich selbst recyceln kann. :mrgreen:

    Gruß
    Klaus

  • Nav Hover >> Internet Explorer

    Hi,

    Zitat von Whoppy

    die Angaben des z-index scheinen zu stimmen.

    sorry, wenn ich widerspreche aber das tun sie ganz und gar nicht. ;-)

    z-index wirkt nur auf Elemente die ungleich position:static (Default-Einstellung!) sind.
    In dem Link wird z-index an Elemente vergeben die position:static sind.

    Hab jetzt leider zuwenig Zeit mir das anzuschauen, aber vielleicht helfen ein paar Tips:
    Im normalen Textfluss ordnen sich die Elemente untereinander an.
    In der natürlichen Stapelreihenfolge befindet sich das zuletzt notierte Element im Quelltext am nächsten zum Betrachter (Z-Achse).
    Diese Reihenfolge kann man durch Vergabe von position:relative beeinflussen.
    Meistens reicht das. Wenn nicht kommt noch z-index hinzu.

    Mit z-index kann die Reihenfolge von überlappenden Elementen auf der z-Achse bestimmt werden.
    Je höher der z-index-Wert, desto näher wird das Element zum Betrachter hin angeordnet.

    Durch float wird die Stapelungsreihenfolge ebenfalls geändert, da gefloatete Elemente auch aus dem Textfluß raus sind.

    Du vergibt z.B. fast überall den gleichen z-index-Wert.
    Dein Content hat position:relative;
    Nimm das doch mal raus und schau ob das reicht.

    Ansonsten wäre noch anzumerken das der IE6/7 jedem positionierten Element wo HasLayout=true gilt fälschlicherweise einen Art Stapelkontext zuordnet, so als wäre z-index:0 gesetzt.

    Gruß
    Klaus

  • navi mit 3 bildern

    Hi,

    Das steht bei dir im Quelltext. Der Linktext fehlt noch.
    Dann sähe es so aus:

    Für li schreibst du erstmal ganz allgemein:

    HTML
    #navigation li  {
    float:left;
    list-style-type:none;
}

    dann das Spezielle für jeden li extra:

    HTML
    #navigation #navi01  {
    width: 60px;
}
#navigation #navi02  {
    width: 80px;
}
#navigation #navi03  {
    width: 90px;
}

    Da du für jedes li eine id vergeben hast kannst du die auch extra ansprechen, um deine individuelle Breite zu vergeben. Da ich deine Breiten nicht kenne habe ich einfach beispielhafte Zahlen genommen.

    Für das span wird dann einfach width:100% und die exakte Höhe genommen, halt wie in meinem Beispiel. ;-)

    Gruß
    koslowski

  • Schriftgröße ändern - wo in meiner style.css?

    Hi,

    um etwas wiederzufinden wo du wie was ändern mußt solltest du dir Firebug im FF installieren.
    Dort kannst du Änderungen eingeben und sofort live im Browser sehen, was diese bewirken.

    Um bei diesem speziellen Post den Text unter dem Bild zu ändern schreibe ich in die style.css:

    HTML
    #post-2256 p  {
     font-size:0.3em;
     color:green;
}

    Ergebnis: ein superkleiner, grüner Text unter dem Bild. :mrgreen:

    Das herauszufinden hat mit Firebug ungefähr 15 Sekunden gedauert.