Ich werd hier noch irre bei den custom fields! HILFE!!!

    also ich versuche gerade mir ein neues layout zu erstellen und diesmal mit custom fields. diese will ich dauerhaft nutzen. also jeder atikel soll eines haben. habe hier mal ein teilausschnitt aus photoshop wies aussehen soll: http://www.ludk.de/guck.jpg
    (text und bild ist natürlich nicht der richtige :p )
    das mit dem datum und der headline war alles kein problem, auch das mit dem "overflow:hidden" (wegen bildausschnitt), aber wie bekomm ich jetzt am besten das bild bzw custom field dahinter???? probier hier schon ewig, muss aber irgendwie funzen. versteh das alles nicht und bin echt am verzweifeln!!! :( . hab das auch schon einbauen können, aber nur darunter und darüber... habs auch mal irgendwie geschafft das bild übers datum zu bekommen... aber nicht darunter! bitte helft mir :(

    lg lumo

    Einmal editiert, zuletzt von lumo (18. April 2008 um 01:34)

    • 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

    LUDK.DE
    das ist meine seite. Da soll jetzt unter das datum und headline ein custom field gelegt werden... ein bild, wie oben im screenshot. hatte mir jetzt nen kleinen code von hier geholt WordPress benutzerdefinerte Felder (Custom Fields) - bueltge.de [by:ltge.de]

    PHP
    <?php $image = get_post_meta($post->ID, 'image_des_beitrags', true); ?> <a href="<?php the_permalink() ?>"><img src="<?php echo $image; ?>" alt="<?php the_title(); ?>" /></a>


    das ist der code und den hatte ich irgendwo in der index.php eingebaut. dann hab ich mal 2 artikel mit customfield erstellt. also mit dem key "image_des_beitrags" und einem bild. soweit war auch alles gut. aber in der css bekomm ich das ding nicht verschoben. wills ja unter datum und titel haben... hatte gedacht mit padding und z-index klappts, aber irgendwas mach ich wohl falsch. komm da echt nicht weiter :( . hoffe du/ihr könnt mir jetzt bei meinem prob helfen

    LUDK.DE
    das ist meine seite. Da soll jetzt unter das datum und headline ein custom field gelegt werden... ein bild, wie oben im screenshot. hatte mir jetzt nen kleinen code von hier geholt WordPress benutzerdefinerte Felder (Custom Fields) - bueltge.de [by:ltge.de]

    PHP
    <?php $image = get_post_meta($post->ID, 'image_des_beitrags', true); ?> <a href="<?php the_permalink() ?>"><img src="<?php echo $image; ?>" alt="<?php the_title(); ?>" /></a>

    das ist der code und den hatte ich irgendwo in der index.php eingebaut. dann hab ich mal 2 artikel mit customfield erstellt. also mit dem key "image_des_beitrags" und einem bild. soweit war auch alles gut. aber in der css bekomm ich das ding nicht verschoben. wills ja unter datum und titel haben... hatte gedacht mit padding und z-index klappts, aber irgendwas mach ich wohl falsch. komm da echt nicht weiter :( . hoffe du/ihr könnt mir jetzt bei meinem prob helfen. lg lumo

    Also funktionieren die Custom Keys, nur die Darstellung per CSS bekommst du nicht hin? Dann ist der Threadtitel aber ungünstig gewählt. ;-)

    In deinem Code seh ich kein <img>-Element. Bau mal alles soweit ein (auch dein bisheriges CSS), und dann melde dich nochmal. (Warum alles einbauen? Weil ich dann mit meinem Firebug live testen kann.)

    also hab den code jetzte noch mal in die index.php eingebaut. und zack ist auch das bild wieder da... hab jetzt noch mal versucht mit css aber da klappt nicht mal das mit dem overflow... :'( . hatte so gedacht erst mal

    .image_des_beitrags {
    position: absolute;
    width: 248px;
    height: 100px;
    overflow: hidden;
    }

    aber geht nicht :( . was muss ich ab besten tun?
    was ist firbug? lg lumo

    Im Template hast du noch vergessen, dem Bild die Klasse "image_des_beitrags" zuzuweisen. Ein Hinweis noch: z-index funktioniert nur mit positionierten Elementen (siehe Hinweis bei SELFHTML). Füge ich position:relative zu den Regeln für ".post .date" (Zeile 200) und ".post h2.title" (Zeile 247) hinzu, dann siehts schon fast so aus wie von dir gewünscht.

    Firebug: siehe mein Link oben. Eine sehr gute Debugging-Erweiterung für den Firefox. Eigentlich unverzichtbar für jeden Webentwickler. ;-)

    aha ja super :D danke! . jetzt siehts schon ganz gut aus, ist aber leider immer noch nicht ganz bündig :( . wie kann ich das jetzt am besten noch ein wenig höher schieben?? mit padding und margin klappts leider nicht :(

    Das Datum musst du etwas verbreitern. Ich habe

    Code
    width:30px;
padding-right:3px;


    gewählt.
    Die Hintergrundgrafik für .post .title musst du wohl etwas verbreitern (ca. 3px). Zusätzlich ein negatives margin-left von -2px.

    Bei .image_des_beitrags hab ich den negativen margin nach oben auf -65px gesetzt.

    Ich denke damit siehts so aus wie von dir gewünscht.

    .image_des_beitrags geht leider nicht nach oben zu setzen... aus welchem grund auch immer.. netterweise hab ichs aber hin bekommen, das datum nach unten zu setzen :D . nur komischerweise klappt nun das gleiche nicht mit dem titel... der hängt da immer noch oben. den titel bekomm ich irgendwie nicht nach oben. woran liegt das nun schon wieder? die kleine lücke zwischen datum und titel soll übrigens sein :D . danke auf jeden fall schon mal. hat mich schon um einiges weiter gebracht. hoffe du kannst mir bei dem letzten "problemchen" noch mal helfen :D

    Den .title bekomme ich so auch nicht hin, vielleicht muss da was gefloatet werden. Aber meine Variante mit dem negativen margin beim Bild geht definitiv. Vielleicht hast du da nur ein Problem mit der Reihenfolge. So gehts auf jeden Fall bei mir, das Bild rutscht unter Datum und Titel:

    Code
    .image_des_beitrags {
height:100px;
margin:[COLOR="Red"][B]-75px[/B][/COLOR] 0pt 0pt;
overflow:hidden;
position:relative;
width:248px;
z-index:1;
}

    hmm ne, hab den code ausgetausch. da regt sich nichts :( . weiß auch nicht was da los ist. warum klappt das denn nicht :( ??

    hmm ja hab ich jetzt gemacht, aber bei mir siehts immer noch gleich aus. hab bei mir den code genau mit dem überschrieben den du mir gegeben hast, aber da ist nix passier :( . kannste ja noch mal gucken, aber so wie du gesagt hast, klappts irgendwie nich... könnte es vielleicht wo anders dran liegen?

    -----
    hab mir mal das tool firebug runter geladen. wenn ich da meine maus über in der obersten leiste (in der auch das suchfeld rechts ist) über die einzelnen divs halte, zeigt er mir mir ja blau makiert die dis an. bei der image_des_beitrags, zeigt er den oberen bereich gelb an.... also da wo das bild wohl sein sollte, denk ich mal :D . vielleicht muss ich da noch sowas angeben wie.. " top left"?

    Einmal editiert, zuletzt von lumo (20. April 2008 um 06:10)

    Zitat

    hmm ja hab ich jetzt gemacht, aber bei mir siehts immer noch gleich aus. hab bei mir den code genau mit dem überschrieben den du mir gegeben hast, aber da ist nix passier . kannste ja noch mal gucken, aber so wie du gesagt hast, klappts irgendwie nich... könnte es vielleicht wo anders dran liegen?


    Offensichtlich nicht. Online steht immer noch folgendes in Zeile 298:

    Code
    .image_des_beitrags {
height:100px;
margin:-60px 0pt 0pt;
overflow:hidden;
position:relative;
width:248px;
z-index:1;
}


    In Zeile 188 und 244 definierst du .image_des_beitrags übrigens schon einmal, die Eigenschaften werden aber vollständig von der Regel in Zeile 298 überschrieben!
    Das siehst du sehr schön im Firebug, wenn du mit der rechten Maustaste auf dein Bild klickst und im Kontextmenü "Inspect Element" auswählst. Hier erscheinen jetzt rechts alle CSS-Regeln, die für dieses Element angewendet werden. Regeln die später wieder überschrieben werden, werden hier durchgestrichen.
    Ergo: Du solltest mal dein CSS aufräumen. ;-)

    Übrigens: Das Datum rutscht dann ja wieder runter. Also bei .post .date (Zeile 204) mal das margin-top wieder auf 0 setzen.


    Zitat

    hab mir mal das tool firebug runter geladen. wenn ich da meine maus über in der obersten leiste (in der auch das suchfeld rechts ist) über die einzelnen divs halte, zeigt er mir mir ja blau makiert die dis an. bei der image_des_beitrags, zeigt er den oberen bereich gelb an.... also da wo das bild wohl sein sollte, denk ich mal .


    Hellblau ist das Element selbst, lila ist padding, gelb ist margin.


    Zitat

    vielleicht muss ich da noch sowas angeben wie.. " top left"?


    Nein. Mit den paar Änderungen, die ich dir jetzt noch geschrieben habe siehts so aus wie du dir das wünschst. Ich häng dir zum Beweis auch mal nen Screenshot an (mit Firebug-Ausgabe - beachte die durchgestrichenen Eigenschaften rechts unten!).

    ja wie dumm von mir! jetzt seh ichs auch. hatte das sogar 3 mal drin!! :mrgreen:
    jetzt ists auf jeden fall ganau wie ichs wollte! vielen vielen lieben dank. hast mir echt voll geholfen, vor allem die erklärung für firebug. werd mich mal damit beschäftigen, scheint ein sehr gutes tool zu sein :-D
    Und kann ich den text jetzt auch noch so fließen lassen wie in meiner vorlage http://www.ludk.de/guck.jpg oder wird es nur gehen, dass der text darunter läuft?
    danke lg lumo

    Einmal editiert, zuletzt von lumo (20. April 2008 um 14:10)

    pssst, marX?? kannst dir das bitte noch n letztes mal angucken? LUDK.DE und da hab ichs jetzt so gemacht, dass der erste artikel anders aussieht als die anderen. leider hab ichs immer noch nicht selbst geschafft, dass die artiekel (also alle ab dem 2ten) so aussehen wie hier http://www.ludk.de/guck.jpg . will dass der text halt daneben fließt, oder ab besten dann noch in voller länge unter dem bild/custom field. kannste mir da noch nen tipp geben, bitte?? :oops: :)
    lg lumo

    Ich würde dazu das ganze Datum/Titel/Bild-Gedöns in ein weiteres <div> einpacken, und dieses dann links floaten. Also in etwa so:


    Statt dem Inline-Style kannst du natürlich wieder ne eigene Klasse verwenden. Eventuell wird es nötig sein, dem .post-Container noch ein clear:left mitzugeben (style.css, Zeile 222), oder nach dem <div class="entry"> noch ein <br style="clear:left" /> einzufügen. Das musst du mal ausprobieren.

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden