Formatierungskomplikationen - Profis gefragt

    Moin.

    Zur Zeit tun sich mehrere Probleme mit der Umgestaltung des QWERTZwerks auf. Auch mit oftmaligem Trial-and-Error ist da nix mehr zu machen.

    Also: QWERTZwerk läuft auf einem modifizierten Blix-Theme. http://www.QWERTZwerk.de

    1. Ich hab jetzt gerade die Spaltenbreite des Contents schmaler gemacht. In der Layout.css unter CONTENT-width. Leider rutscht dabei die Sidebar nicht mit nach links rüber. Wie geht das?

    2. Auch der Kommentar-Kasten ist nun fehlerhaft - links vom Kasten ist nun seltsamerweise etwas abgeschnitten. Öh?

    3. Eigentlich hätte ich gern die gesamte Content-Spalte (mitsamt Kommentarkasten) weiter nach rechts an die Sidebar geschoben. Möglich?

    4. Und die Headergrafik hätte ich gerne einige Pixel weiter nach links. Gesucht, und nicht gefunden. Auch nicht in der Header.php. Hm.

    5. Last but not least: gestern hab ich krampfhaft versucht, ein Bild linksbündig in den Content zu bringen, so, dass rechts davon einige Pixel Abstand zum Text sind. Das war nicht möglich! Ich hab in der Layout.css unter IMAGES in den Margins rumgespielt. Das alles hatte aber keine Auswirkungen. Verstehe ich nicht. Ihr vielleicht?

    Für Hilfreiches bin ich sehr dankbar.

    Grüße,
    Thomas

    • 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

    zu den Bildern
    wenn Du magst , dass die Angaben der CSS wirksam werden,
    dann nutze bitte niemals:
    align:botom oder irgendwas ähnliches,
    dies ist erstens urururururualtes HTML und zweitens nutzt Dein Theme die Angabe:
    strict, ganz ganz obenin der header.php sichtbar und wird somit 'ungültig' =falsch,invalid oder wie auch immer Du dies nennen magst ;)

    in der layout.css findest Du:
    img.left {
    float:left;
    margin:6px 12px 6px 12px;
    }

    img.right {
    float:right;
    margin:12px 20px 12px 12px;
    }

    img.center {
    display: block;
    margin:0 auto;

    }

    das bedeutet:
    Du fügst ein Bild ein, willst, dass das Bild ganz Links ist, aber nicht am Rand pickt,

    Code
    <img src="http://........" alt="Mein superBild" height="300" width="240" class="left" />


    dies bedeutet:
    Zeige das Bild mit der Internetadresse XY an.
    Kannst Du das Bild nicht anzeigen, dann zeige wenigstens den alt(ernativ) Text an alt=" ,,,",
    das Bild hat die Höhe Y die Breite Y, damit erleichterst Du dem IE dasBild schneller anzuzeigen,
    und nutze für das Bild die class left 'class="left"'.

    Magst Du das Bild rechts haben , dann eben class="right",
    zentriert:class="center"

    Passen Dir die margins nicht,dann kannst Du die dort verändern:
    margin:6px 12px 6px 12px;
    margin: oben rechts unten links;

    Magst Du Deine Bilder immer am selben Platz haben,
    dann schreibe in die layout.css hinein

    .entry img{float:left;
    margin:6px 12px 6px 12px;}

    das andere seh ich mir bei meiner nächsten Kaffeepause an ;)

    verbreitern oder kleiner machen ist bei Blix nicht einfach,

    [habichschonerwähnt,dassichdasthemedeswegennichtmehrmag;)]


    @headergrafik

    kannst Du mir erklären wer je sieht, dass die header Grafik ein Pixel zu weit rechts ist, wenn weißer Hintergrund der Grafik in den weißen Hintergrund des Backgrounds übergeht ?

    Perfektion hin oder her, das ist unsichtbar... :-)

    Und bringt arge Brwoserkompatibilitätsprobleme mit sich ...


    lg

    das ganze Theme steht in der Box container,
    innerhalb dieser Schachtel sind fast alle Positionen mit margins und paddings angegeben,

    690px istsowieso schon elends klein ist-
    [auf meinen großen Monitor bei einer 1600 Auflösung finde ich Dein Blog nicht mehr, sieht einsam und verloren aus ;)]

    machst Du da jetzt den content noch kleiner, muss die sidebar breiter werden,

    sonst geht es sich ja nicht auf diese px aus,

    innerhalb dieses containers sind die Abstände vom container Rand zum nächsten Element, zur nächsten Schachtel (so eine nächste Schachtel =content, oder subcontent) mit

    #container {
    width:690px;
    margin:0 auto;
    padding:30px 30px 0 30px;
    text-align:left;
    } angegeben
    padding: oben rechts unten links

    schau mal wie es für Dich wird, wenn Du dies auf:

    padding: 30px 0px 0px 0px ;

    änderst.

    der lange vertikale Strich ist ein Hintergrundbild, kann sein, dass dies dann nicht mehr passt,
    das ist eine andere Frage ;)

    lg

    Ah, fein, Antworten ... :-)

    Ok, ich hab's so eingetragen, dass das Bild IMMER links steht - mit entsprechendem Abstand zum Text. So:
    .entry img{float:left;
    margin:4px 16px 2px 0px;
    }

    Links soll also gar kein Abstand sein. Leider sieht die Realität anders aus: http://www.qwertzwerk.de/2006/05/11/lie…s-kapitalismus/

    Das Bild ist mit dieser Zeile eingefügt: <img alt="Lieder vom Ende" class="left" src="http://www.qwertzwerk.de/wp-content/upl…orschaubild.jpg" />

    Ich frage mich jetzt, ob das damit zusammen hängt, dass ich vorher die Spaltenbreite verkleinert habe. Denn der Kommentarkasten ist ja ebenfalls links so komisch fehlerhaft formatiert. :-( Darüber hinaus fände ich es sehr mühsam, immer wieder bei jedem neuen Bild MANUELL die class einfügen zu müssen. Vorher wählte man aus dem Blix-Pulldown "linksbündig" und fertig. Leider eben ohne Abstände. :-(


    Stichwort Headgrafik: Es geht mir nicht nur um einen Pixel, sondern um viele Pixel. Das Q vom QWERTZwerk soll linksbündig mit dem Textraster abschließen. Als Mediengestalter achtet man auf sowas. ;-)

    Und der Content soll jetzt nicht mehr schmaler werden. Auch die Sidebar muss nicht mehr unbedingt weiter nach links ran. Passt eigentlich schon so. Deine Angaben zu den Containern muss ich gleich mal überprüfen. :-)


    EDIT: HÄ? Hab gerade mal die Headgrafik etwas verändert, aber nix an der Größe. Plötzlich sind auch die Bilder im Content richtig formatiert! lol. Sehr seltsam.

    Einmal editiert, zuletzt von Levare Patria (13. Mai 2006 um 13:34)

    Zitat von Levare Patria

    Ah, fein, Antworten ... :-)..
    Stichwort Headgrafik: Es geht mir nicht nur um einen Pixel, sondern um viele Pixel. Das Q vom QWERTZwerk soll linksbündig mit dem Textraster abschließen. Als Mediengestalter achtet man auf sowas. ;-)

    gut als Web-Designerin sage ich Dir dann, nutze keine feste Breite ;);)

    da musst Du dann mit negativen margins ran,
    wie sollte sonst ein Bild weiter nach Links rücken, wenn dort das Ende der festgelegten Breite ist ?

    Zitat


    EDIT: HÄ? Hab gerade mal die Headgrafik etwas verändert, aber nix an der Größe. Plötzlich sind auch die Bilder im Content richtig formatiert! lol. Sehr seltsam.

    nein logisch, damit hast Du Deinen Browsercache geleert, und siehst nun die Änderungen von vorhin ;)

    lg

    Zitat von Levare Patria


    Stichwort Headgrafik: Es geht mir nicht nur um einen Pixel, sondern um viele Pixel. Das Q vom QWERTZwerk soll linksbündig mit dem Textraster abschließen. Als Mediengestalter achtet man auf sowas. ;-)...


    Ein Mediengestalter sollte auch wissen, dass die (header)grafik entsprechend in der Grösse sein muss ;)links neben dem q ist zuviel platz/verlauf, der noch dazu links mit einer relativ harten kante abschliesst, das seh ich sogar an meinem miesen crt bei 1280x1024, bei monika siehts vermutlich noch krasser aus...
    und wenn du bei diesem bild mit negative margins arbeitest, wird das noch krasser... also mach die headergrafik neu und passend...
    dann klappts auch mit dem Q...
    ;)

    Tst. Das ist mir selbst klar. Wobei die harte Kante auf meinem TFT gar nicht zu sehen ist, auf dem CRT aber schon. Die Grafik ist ja auch noch gar nicht fertig ...

    Der Verlauf links vom Q muss allerdings sein.

    tst... maaa
    war eh nur ein gut gemeinter rat...

    aber wenn wir einmal dabei sind,...
    1. Du benutzt ein theme, das von hause aus valides XHTML strict mitbringt...
    ist nicht mehr viel davon übrig... leider.
    2. Die Grafik Richtertextprodukt sollte ein Mediengestalter zum einen wenigstens mit einem alt/und titleattribut versehn, denn erst dann bringt sie was im web, und zum anderen ist zumindest nach meinem Geschmack das R viel zu groß...
    echte kapitälchen haben da meist ein gefälligeres outfit...

    wenn du sie gar als echten (maschinen)lesfähigen text reinstellen willst, kannst du die georgia benutzen, die bringt als einzige auf den meisten computern vorhandene schrift schon echte kapitälchen mit, die farben kannst mit span-css stylen

    Also: Das QWERTZwerk befindet sich noch immer im Relaunch/Redesign-Prozess. Da ist noch vieles nicht 100%ig. Auch das Richtertextprodukt-Logo noch nicht (bei der Rotis soll es allerdings bleiben - für die musste ich auch teuer bezahlen). Ob das R zu groß ist oder nicht ... eher Ansichtssache. Da ist aber auch noch nicht das letzte Wort gesprochen. Stehe derzeit auch beruflich etwas unter Stress, deshalb kommt alles so kleckerweise ...

    Zitat von Levare Patria

    Also: Das QWERTZwerk befindet sich noch immer im Relaunch/Redesign-Prozess. Da ist noch vieles nicht 100%ig. Auch das Richtertextprodukt-Logo noch nicht (bei der Rotis soll es allerdings bleiben - für die musste ich auch teuer bezahlen). Ob das R zu groß ist oder nicht ... eher Ansichtssache. Da ist aber auch noch nicht das letzte Wort gesprochen. Stehe derzeit auch beruflich etwas unter Stress, deshalb kommt alles so kleckerweise ...


    no problem...
    ich mag die rotis auch, persönlich gefällt mir zwar die sans besser, aber es ist schon toll, dass da noch ne gute serif dabei ist... ob nun für kombination mit fliesstext oder andres, lass ich mal dahingestellt...

    die validatorgeschichte ist wichtiger, monika hats ja schon charmanter angedeutet...
    es gibt halt auch im web NO GO´S...
    gerade für leute, die design anbieten...
    und fehler machen wir alle, und haben stress...

    Kommt Zeit, kommt Rat. Problem dabei ist, dass ich auf der anderen Seite auch Redakteur/Texter bin. Gestaltung und Text also - das ist schon mal ne Menge. Da hab ich nicht auch noch nen Kopf für's Coding. Denn Programmierung habe ich schon immer verabscheut, wegen mangelnder Ästhetik und Zeit. :-)

    Und wie das Logo schon sagt, ist das QWERTZwerk ein Richtertextprodukt, und kein Richterdesignprodukt. ;-)

    Eure Seite finde ich übrigens hübsch. Nicht unbedingt hübscher als meine, aber doch hübsch. Ich wollte das QWERTZwerk dieses Mal so richtig reduziert halten und mich auf die Inhalte konzentrieren.

    :T:

    1. CSS und HTML ist NIX Programmierung..
    verwehre mich entschieden,
    es ist Auszeichnung!

    und Auszeichnung ist Ästhethik!

    was nutzt das schönste Bildchen, wenn es in zig Brwoser bescheidenaussieht, weil CSS und HTMl falsch ist....

    und
    2. Willkommen im Club

    :cool::cool::cool::cool:

    Zitat von Levare Patria

    Kommt Zeit, kommt Rat. Problem dabei ist, dass ich auf der anderen Seite auch Redakteur/Texter bin. Gestaltung und Text also - das ist schon mal ne Menge. Da hab ich nicht auch noch nen Kopf für's Coding. Denn Programmierung habe ich schon immer verabscheut, wegen mangelnder Ästhetik und Zeit. :-)

    Und wie das Logo schon sagt, ist das QWERTZwerk ein Richtertextprodukt, und kein Richterdesignprodukt. ;-)

    Eure Seite finde ich übrigens hübsch. Nicht unbedingt hübscher als meine, aber doch hübsch. Ich wollte das QWERTZwerk dieses Mal so richtig reduziert halten und mich auf die Inhalte konzentrieren.
    :T:


    Danke fürs "hübsch" *lacht
    ich bin auch kein Coder sondern eher Fotograf und Designer, und von Texten versteh ich unter Umständen auch noch was...
    ist alles attraktiver als Coding...
    ich hab aber extra darum, weil es soviel Missverständnisse zwischen Designern und Codern gibt, den Weg gewählt, mich zumindest halbwegs mit den ungeliebten Programmier- und Auszeichnungssprachen zu beschäftigen, um zu wissen, zu kennen was geht, um design am screen, im web umzusetzen... ist es nicht oft so, dass ein art director dem programmierer nen tolles layout hinwirft, und sagt... mach was draus, und der greift sich wenn er weg ist an die stirn, weil das irrer aufwand ist, nicht gut für usuability... was weiss ich...

    und zumindest ist es derzeit so, dass alles auf xml hingeht, und da ist sauberes xhtml schon mal ein guter ausgangspunkt, für datenaustausch zwischen den verschiedensten anwendungen
    Nachtrag: btw. ich heiss auch Richter, vielleicht daher das unbehagen beim Richtertextlogo...

    Zitat von Levare Patria

    Oha. Guckt euch mal den Head jetzt an. http://www.qwertzwerk.de

    Ich hab ihn jetzt weiter nach links gerückt. Damit:
    #header {
    height:115px;
    padding:0 0 0 18px;
    margin:0 -65px;
    }

    Tja ... coding sucks. Sag ich doch.

    yepp,
    ;)
    wenn Du jetzt noch dort wo das Hintergrundbild eingebunden ist,
    dazu schreibst:
    flavour.css

    #header {
    background-color:#FFFFFF;
    background-image:url(images/spring_flavour/header_bg.jpg);

    background-repeat:no-repeat;
    }

    dann wird das Bild auch nicht zig Mal wiederholt wie derzeit,

    und Deine Website verschickt an die Browser die Feststellung, dass Du dort englisch schreibst ;9
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    gib dort de ein ;)

    lg

    yo mal ne andere frage wo ich das gerade sehe auf deiner HP. wie machsten das mit dem Bild. das es per klick in vollbild erscheint und sbeim laden die homepage so abdunkelt. einfach ne augenweide. Würd das auch gern machen.

    Danke!

    Zitat von Grrboy

    yo mal ne andere frage wo ich das gerade sehe auf deiner HP. wie machsten das mit dem Bild. das es per klick in vollbild erscheint und sbeim laden die homepage so abdunkelt. einfach ne augenweide. Würd das auch gern machen.

    Danke!

    http://www.4mj.it/lightbox-js-v20-wordpress/

    das macht das ;)

    lg

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden