Ungewollter Abstand zwischen Grafiken

    Viele Fragen zum Thema Layout

    Hallo,

    ich bin gerade dabei das Layout meiner Seite in CSS zu realisieren um endlich mal von den Tabellen wegzukommen. Jedoch plagt mich gerade das Problem das zwischen einigen Grafiken ein ungewollter Abstand dargestellt wird - und zwar nur im IE, im Firefox exisitert dieser Abstand nicht.

    Hier habe ich mal 2 Bilder dazu:

    http://deniswelsch.de/temp/ungewollter-abstand1.gif
    http://deniswelsch.de/temp/ungewollter-abstand2.gif

    Es liegt definitiv am <div> Tag, denn nehme ich diesen in der Navigation raus, ist der Abstand weg. Was ich nun genau in der CSS Datei noch machen kann damit dieser Abstand nicht existiert weiss ich leider nicht und hoffe ihr könnt mir helfen.

    Die CSS der Navigation sieht so aus:

    Code
    #navigation {
 margin: 0 0 0 0;
 padding: 0;
 white-space: nowrap;
 display: block;
 vertical-align: middle; 
 }



    Zum anderen würde mich interessieren, wie ich Kategorienamen eine Grafik zuweisen kann sodass z.B. in der Sidebar nicht der Text Blogroll steht sondern eine Grafik dafür angezeigt wird.

    Danke schonmal für eure Hilfe.

    Grüße
    Denis

    • Gerade eben
    • Anzeige

    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

    Läuft alles noch auf meinem lokalen Webserver, daher kein Link.

    HTML Code sieht wie folgt aus:



    Die Tabelle ist ein Überbleibsel des alten Codes und ich möchte erst weitermachen wenn das Problem gelöst ist.

    Hier die gesamte CSS:

    Kann mir nicht so recht vosrstellen das das von da oben das auf den Screens erzeugt, aber versuchen kannst du dies:

    PHP
    #navigation img{
display:block;
}

    Ich habe gerade aus...

    Code
    [COLOR=#000000][FONT=Courier New][COLOR=#ff9900]#navigation img{ 
[/COLOR][COLOR=#0000cc]display[/COLOR][COLOR=#006600]:[/COLOR][COLOR=#0000cc]block[/COLOR][/FONT][COLOR=#006600][FONT=Courier New]; 
}[/FONT][/COLOR][/COLOR]



    ...das hier gemacht:

    Code
    [COLOR=#000000][FONT=Courier New][COLOR=#ff9900]#navigation img{ 
[/COLOR][COLOR=#0000cc]display[/COLOR][COLOR=#006600]:[/COLOR][COLOR=#0000cc]inline[/COLOR][/FONT][COLOR=#006600][FONT=Courier New]; 
}[/FONT][/COLOR][/COLOR]



    Der Abstand verschwand!
    Dann habe ich den Code oben entfernt und in meinem oben geposteten Code aus dem "block" ein "inline" gemacht. Der Abstand war wieder da. Also alles rückgängig gemacht und meine #navigation so geändert:

    Code
    #navigation {
  margin: 0 0 0 0;
  padding: 0; 
  }



    Und jetzt kommts, den Code von Olafb vergessen reinzuschreiben und so probiert und was soll ich sagen, es funktioniert - in beiden Browsern :D Sehr kurios.

    Bleibt nur noch meine 2. Frage offen, danke erstmal!

    ....Zum anderen würde mich interessieren, wie ich Kategorienamen eine Grafik zuweisen kann sodass z.B. in der Sidebar nicht der Text Blogroll steht sondern eine Grafik dafür angezeigt wird.....

    Blogroll ist der Name für eine Linkkategorie

    die anderen Kategorien sind für Inhalte

    wo welche Grafik ..

    ich empfehle jedoch dies händisch zu machen

    lg

    Monika

    Das Problem schieb ich erstmal beiseite, denn ich hab gerade ein ganz anderes.

    Und zwar wachsen meine <div> Elemente nicht mit dem Inhalt mit. Da ich mich erst seit kurzem damit befasse mein Layout mit CSS umzusetzen steig ich da noch nicht so richtig durch und bekomme es einfach nicht hin.

    Im Anhang hab ich mal eine Grafik eingefügt die das Problem verdeutlicht.

    Der Code sieht wie folgt aus:

    Code
    <div id="main">
  <div id="border-left"></div> <!-- closing border-left -->
  <div id="content"></div> <!-- closing content -->
  <div id="mainhr"></div> <!-- closing mainmiddle -->
  <div id="sidebar"></div> <!-- closing sidebar -->
  <div id="border-right"></div> <!-- closing border-right -->
  <div id="footer"></div> <!-- closing footer -->
 </div> <!-- closing main -->



    Die Elemente border-left, mainhr, sidebar und border-right wachsen nicht mit.

    CSS hier:



    Was mache ich falsch?

    so

    da ich deine Hintergrundbilder nicht habe, habe ich jedem Div einen Rahmen gegeben,

    Div wachsen nicht mit

    Du siehst es ist völlig egal, ob height 100% oder nicht, die wachsen so nicht mit,
    das ist einfach so,
    es gibt js Lösungen dies zu machen,.... gut kompliziert und es gibt einige hacks, dies zu machen, ompliziert und wirken auchnicht bei jedem Browser


    die beste Möglichkeit ein Hintergrundbild zu machen,

    in den äußersten Div geben

    brauchst du mehr Hintergrundbilder, dann mache da noch ein div hinein,....

    wie das geht, kannst Du Dir abschauen

    Finanzen

    studier das html und css ,d ann siehst Du , dass immer zwei divs fast dieselbe Aufgabe haben, damit der Rahmen, ob mit Bilder oder ohne ist ja egal, funktioniert

    lg

    Hab das Problem erstmal mit einer Tabelle gelöst und es läuft im IE und im Firefox.

    Bleibt noch meine andere Frage bezüglich der Grafiken anstatt der Kategorienamen.
    Ist es möglich anstatt des Namens eine Grafik anzeigen zu lassen wie im folgenden Beispiel?

    http://www.deniswelsch.de/temp/grafik-statt-text.gif

    Also es soll zum Beispiel nicht Blogroll als Text dastehen, sondern ich möchte dafür eine Grafik ausgeben. Das gleiche bei z.B. Seiten, Kategorien, Meta etc.

    Ich hab z.B. in der sidebar.php das <h2>Meta</h2> durch eine Grafik ersetzt, aber es passiert nichts.

    Hier..

    PHP
    <?php wp_list_categories('show_count=1&title_li=<h2>Kategorien</h2>'); ?>



    ..habe ich auch probiert eine Grafik einzubinden aber der Text bleibt stehen und die Grafik wird nicht angezeigt.

    Lass das h2 doch einfach weg und lösche den Titel raus!

    Packe dann wp_list_pages in einen neuen div Container mit neuen styles.

    Bspw so:

    Ok danke, ich glaube ich hab verstanden was du meinst. Ich werd mich mal dran probieren hab aber schon wieder ein Problem :-? Komm mir schon langsam blöd vor. Aber so ist das wenn man sonst immer nur mit Tabellen gearbeitet hat.

    Ich hab mich mal auf meinen Server gewagt damit ihr vernünftig schauen könnt was ich meine. Und zwar habe ich wieder ungewollte Abstände, diesemal nicht zwischen Grafiken sondern in meinem Content bzw. Newsbereich beim Text. Ich hab keinen Schimmer woran das liegt und bekomme den Inhalt eines einzelnen eintrages einfach nicht weiter zusammengeschoben.

    Zu sehen hier: Denis Welsch

    Meine CSS sieht zur Zeit so hier aus:



    Den Rest einfach nicht beachten, soweit bin ich noch nicht!

    Nun jedes Element bringt ja eigene Styles mit, bzw, werden die vom Browser zugeordnet. Wenn du sowas in deine CSS schreibst, setzt du damit alle diese Abstände auf 0. Danach kannst du losgehen und dann für jedes Element den gewünschten Abstand einstellen

    PHP
    *{
margin:0;
padding:0;
}

    Hi,

    um nicht nochmal ein neues Thema aufzumachen, bleibe ich mal in meinem Thread hier.
    Mein Theme ist soweit fertig und WP läuft auch ganz gut.
    Ich habe den Code den Olafb mir gegeben hat wieder entfernt da keine vernünftigen Absätze angezeigt wurden etc.

    Jetzt ist mir aber etwas kurioses aufgefallen.
    Ich füge den Inhalt einer Seite per include Befehl ein, d.h. es gibt für den Inhalt eine extra angelegte .php Datei da ich, wenn sich auf dieser Seite mal etwas ändern sollte, nicht im eingebauten WP Editor rumspielen will sondern das lieber gerne über einen externen machen möchte wie z.B. Notepad.

    Der Code sieht in der .php Datei wie folgt aus:



    Alles schön und gut, aber WP haut irgendwie an einigen Stellen ein <p> rein, obwohl dieser Code garnicht in der .php Datei vorkommt.

    So sieht es aus wenn ich den Quelltext pber den IE anschaue:



    Wo um Himmels Willen kommen die ganzen <p> her?
    Am Anfang hatte ich die Vermutung das die Browser (getestet im IE und Firefox) diese Absätze reindonnern, aber dem ist nicht so. Denn in der Sidebar füge ich auch ein wenig Inhalt per externer .php Datei ein und dort gibt es keine Absätze die auf einmal aus dem Verborgenen hervorkriechen.

    Ich hab auch schon ein wenig in den .php Dateien von WP rumgeschnüffelt ob ich da vielleicht etwas finde was diese Absätze erzeugt, bin aber leider nicht fündig geworden.

    Ich hoffe ihr könnt mir weiterhelfen und mir dieses Phänomen erklären.

    Besten Dank schonmal.

    Grüße
    Denis

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden