Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 15 von 16

Thema: Grafik zentriert ausrichten

  1. #1
    TP-Senior
    Registriert seit
    Jul 2002
    Ort
    Bremen
    Beiträge
    163

    Grafik zentriert ausrichten (Update)

    Hallo zusammen,

    ich brauch mal bitte einen Tipp. Auf der Startseite meiner Website:

    http:www.hieroglyphenweb.de

    Ist unten zwischen dem Text ein kleines Bild "Hieroglyphen".

    Dieses möchte ich zentriert ausrichten (im Bezug zur Überschrift eine Flucht) , kriegs aber einfach nicht hin.

    Bitte um Hilfe und Unterstützung.

    Wenn ihr euch die Site anseht, wäre ich über einen kurzen Kommentar betreffs der Farbgestaltung dankbar.

    viele Grüße aus Bremen
    Rolf
    Geändert von rolli123 (18.06.2011 um 19:39 Uhr)
    Nicht wer hinfällt hat verloren, sondern der, der nicht mehr aufsteht

  2. #2
    TP-Veteran Avatar von wildmieze
    Registriert seit
    Dec 2003
    Beiträge
    1.905
    ... bei mir (IE8 / Firefox 4) ist das Bild zentriert ..

    Was die Farbgestaltung angeht .. hmm .. nicht so mein Fall .. ich hätte bei dem Thema vermutlich eher mit Sandfarbtönen gearbeitet. Aber das machen vermutlich alle anderen schon .. mir persönlich fällt allerdings das pixelige Horus-Auge unten links negativ auf .. da gibt es bestimmt qualitativ bessere Alternativen ..

  3. #3
    TP-Senior
    Registriert seit
    Jul 2002
    Ort
    Bremen
    Beiträge
    163
    @wildmieze, danke für deine Meinung zur Farbgestaltung, du hast recht, ich hatte übrigens vorher selber Papyrus-Hintergrund, irgendwie fand ich diesen langweilig und altbacken, deshalb hab ich etwas rumprobiert.

    Zum zentrierten Bild, ich Paddel hab mich verkehrt ausgedrück, ich meinte zentriert im Bezug zur Überschrift!!!

    Jetzt ist es im Text zentriert, aber irgendwie stört mich das.

    gruss
    Rolf
    Nicht wer hinfällt hat verloren, sondern der, der nicht mehr aufsteht

  4. #4
    TP-Veteran Avatar von wildmieze
    Registriert seit
    Dec 2003
    Beiträge
    1.905
    Hmmm .. Du müsstest dann das Bild um die Breite des Menüs nach links verschieben .. evtl. mit margin-left:-xxxpx ? .. müssteste mal ausprobieren ..
    .. aber ob das dann gut aussieht, wenn es nicht mittig zum Text ist .. *kratzamkopp* .. wie wäre es mit einer dritten Spalte rechts, da wo das Gemälde ist? Oder dort einfach noch ein, zwei Bilder drunter machen, dann rutscht das Hieroglyphen-Bild auch weiter nach links .. Oder aber, generell dem Text einfach rechts einen Abstand zum Browserfenster in Breite des Menüs geben - das wirkt dann wie eine "leere Spalte". Da wird es dann allerdings schwieriger, das Gemälde passend unterzubringen.
    .. generell würde m.E. eine Verschmälerung der Textspalte die Lesbarkeit erhöhen - ich hab hier nen Widescreen-Monitor und sehe ellenlange Bandwurmzeilen

  5. #5
    TP-Senior
    Registriert seit
    Jul 2002
    Ort
    Bremen
    Beiträge
    163
    Erstmal danke für deine Hilfe @ Wildmieze !!!

    Allerdings verstehe ich nicht ganz, was mit der Verschmälerung der Textspalte gemeint ist, ich hab die Seite so aufgebaut, das sie absolut flexibel ist, also keine festen Längen und Breiten. Schriftgröße "em" usw..

    Die Seite ist so sogar auf meinem Iphone gut lesbar.

    Ich selber habe einen 21.5' Imac und wenn ich das Browserfenster ganz auf den Bildschirm öffne, gut dann sind die Zeilen schon ziemlich lang, da sich alles streckt (meinst du das?). Nur wie verhindere ich das?

    Wenn ich den Textbereich, also den Content jetzt begrenze, dann habe ich doch eine feste Breite?

    gruss
    Rolf

    ps. Jetzt habe ich übrigens die php. Version mit dem Lexikon hochgeladen. Das mit dem Hieroglyphenbild bleibt so, du hast recht.
    Nicht wer hinfällt hat verloren, sondern der, der nicht mehr aufsteht

  6. #6
    TP-Veteran Avatar von wildmieze
    Registriert seit
    Dec 2003
    Beiträge
    1.905
    Mit Verschmälerung meine ich nur, daß der Text nach rechts einen größeren Abstand kriegt. Die Flexibilität bleibt dabei gegeben. Jut, bringt nicht sooo viel, aber immerhin ein bisschen was^^
    Du könntest mit max-width arbeiten und damit verhindern, daß die Seite zu sehr in die Breite geht. Ich hab in einigen Seiten zB ne Begrenzung auf ca. 1400 drin, weils danach einfach merkwürdig aussah (bis 1400 bleibt es flexibel). Allerdings muss man sich dann wieder nen Kopp machen, wie das "Drumherum" aussehen soll.

    Mir ging es bei der ganzen Sache auch eher um die Zentrierung zur Überschrift, die Du ja erreichen wolltest... Der Satz "Je tiens l'affaire" ist ja auch nur zufällig fast zentriert, weil Du rechts das Gemälde eingebaut hast .. und je nachdem, was für Inhalte noch folgen, wäre eine generelle Lösung vermutlich besser, als nun das einzelne Bild auf der Startseite durch die Gegend zu schieben

  7. #7
    TP-Senior
    Registriert seit
    Jul 2002
    Ort
    Bremen
    Beiträge
    163
    Glück gehabt, gerade wollt ich ins Bettchen und da seh ich das du geantwortet hast

    Hab vorhin mal gegoogelt und etwas rumprobiert. Da gab es den Tipp dem <p> eine breite mitzugeben, aber das war keine Lösung, sah bescheiden aus.

    Okay, max-width werde ich machen, (kommt das in Body ?) aber was meinst du mit dem ganzen drumherum???

    Nur zur Erklärung, bin absoluter Amateur, hatte mir mal die Seite zusammengeschustert und war ein bißchen stolz, gerade auf die Flexibilät. In der php Version hab ich ja sogar eingebaut, wo der User sich gerade befindet und er kann jederzeit zurück auf die Startseite. Text ist skalierbar usw...

    Die Seite ist für mich, möchte damit mein Hobby einfach "weitergeben". Ist nicht so einfach für einen "alten" Mann einerseits die Webseite aufbauen und andererseits bin ich ja auch dabei den Inhalt zu bereiten.

    gruss aus Bremen
    Rolf
    Nicht wer hinfällt hat verloren, sondern der, der nicht mehr aufsteht

  8. #8
    TP-Junior
    Registriert seit
    Dec 2008
    Beiträge
    22
    also ich hab das ähnlich mit dem div gemacht, damit die gesamte seite horizontal zentriert ausgerichtet ist.
    ich bin folgendermassen vorgegangen, das div hat eine feste breite von 1000px, damit es nun zentriert
    dargestellt wird, muss im css für das div "margin-left: -500px" eingetragen werden. damit liegt der div container
    immer in der mitte. der wert für margin-left entspricht demnach immer die hälfte der breite des jeweiligen
    elementes.
    damit es dann mit der überschrift so wie du es möchtest, zusammenpasst, muss die überschrift
    auch in einen div-container, und dann genauso verfahren wie für das bild.

    gruss

  9. #9
    TP-Veteran Avatar von wildmieze
    Registriert seit
    Dec 2003
    Beiträge
    1.905
    @rolli123:
    Hmmm .. ich würde sagen, bevor Du weitermachst, solltest Du Dir überlegen, was genau Du optisch erreichen willst. Das mit den 3 Spalten / dem max-width / dem Text-Abstand zum Seitenrand macht nur Sinn, wenn Du weißt, was das genau bedeutet, und ob Du das überhaupt willst Ansonsten könnte man wirklich erstmal nur an dem einen Bild arbeiten, damit das n Stück weit nach links rutscht ...

    @excess:
    Um divs horizontal zu zentrieren, braucht man die "negative-margin-left"-Methode i.d.R. nicht mehr - es genügt, margin-left und -right auf auto zu setzen. Ich denke auch, daß eine Positionierung in diesem Fall, mit dem Bild mitten im Text, zu Problemen führen könnte. Aber wenn alle Stricke reißen, warum nicht, könnte man ausprobieren ...

  10. #10
    TP-Senior
    Registriert seit
    Jul 2002
    Ort
    Bremen
    Beiträge
    163
    Danke erstmal für die Hilfe, ich werde mir das jetzt am Wochenende mal in Ruhe zu Gemüte führen.

    Jetzt so hopp hopp bringt nichts, ich melde mich dann wieder.

    gruss aus Bremen
    Rolf
    Nicht wer hinfällt hat verloren, sondern der, der nicht mehr aufsteht

  11. #11
    TP-Senior
    Registriert seit
    Jul 2002
    Ort
    Bremen
    Beiträge
    163
    Also es hat mir keine Ruhe gelassen und ich hatte auf der Arbeit heute eine "verrückte" Idee, die ich heute abend mal probeweise umgesetzt habe.

    Natürlich ist das noch nicht das Endstadium, aber so erreiche ich das zumindest erstmal auf der Startseite keine Ellenlangen Textspalten sind.

    Die "Kästchen" ersetzen die Navi und ich kann gleichzeitig eine kleine Erklärung/Einführung darin reinbringen.

    Für die anderen Seiten muss ich mir eben etwas ähnliches einfallen lassen.

    Hier nochmal der Link:

    http://www.hieroglyphenweb.de


    Bitte eure Meinung dazu.

    Danke!!!

    gruß
    Rolf
    Geändert von rolli123 (16.06.2011 um 22:09 Uhr)
    Nicht wer hinfällt hat verloren, sondern der, der nicht mehr aufsteht

  12. #12
    TP-Senior
    Registriert seit
    Jul 2002
    Ort
    Bremen
    Beiträge
    163

    Red face

    So, könnt Ihr bitte noch mal schauen, wie es jetzt aussieht?

    http://www.hieroglyphenweb.de

    Noch Verbesserungsvorschläge dann immer her damit!!!

    gruss aus Bremen
    Rolf
    Nicht wer hinfällt hat verloren, sondern der, der nicht mehr aufsteht

  13. #13
    TP-Veteran Avatar von wildmieze
    Registriert seit
    Dec 2003
    Beiträge
    1.905
    Also ich persönlich finde es so angenehmer als vorher
    .. sieht nur ein bissl trocken aus - ein wenig grafische Gestaltung wäre nett.

    Noch ne Kleinigkeit: Auf der Startseite schreibst Du "[..] bei den Websiten" .. Websiten ist für mich irgendwie kein Wort .. entweder websites oder Webseiten. Aber so gemischt siehts komisch aus^^

  14. #14
    TP-Senior
    Registriert seit
    Jul 2002
    Ort
    Bremen
    Beiträge
    163
    Hallo Wildmieze,

    schön das du da bist, fühlte mich etwas unsicher, was ich da gemacht habe.

    Habe jetzt eben noch etwas geändert.

    Und zwar hab ich in dem Content noch ein div gelegt mit dem Namen Textblock, in dem der Text dann auch drinne ist. Das zieht die Sache noch etwas zusammen.

    Grafisch mache ich noch etwas, aber ich wäre dankbar für einen Farbvorschlag für den Textblock.

    Außerdem habe ich die Kontaktseite rausgenommen bei Kontakt öffnet sich jetzt das Mailprogramm des Besuchers und die Anmerkungen, "Sie befinden sich auf der ....Seite" wurden auch entfernt.

    gruß
    Rolf
    Geändert von rolli123 (18.06.2011 um 23:31 Uhr)
    Nicht wer hinfällt hat verloren, sondern der, der nicht mehr aufsteht

  15. #15
    TP-Veteran Avatar von wildmieze
    Registriert seit
    Dec 2003
    Beiträge
    1.905
    Hmm .. ich sehe keine Änderungen zu gestern ..

    ... ich glaube nicht, daß der Content unbedingt eine andere Hintergrundfarbe braucht - dann hättest Du drei Kästen nebeneinander, das würde .. öhmm .. naja, halt "kastig" wirken

    Bei Klick auf "Kontakt" kommt nach wie vor die kontakt.php - und das finde ich auch gut so. Ich persönlich erwarte bei einem Klick im Hauptmenü das Öffnen einer Seite, und nicht das Öffnen meines Mailprogramms. Bei mir ist das übrigens nur Outlook Express, das ich nicht nutze, und daher sowieso direkt wieder zumache^^ .. ein Kontaktformular sollte man sich heutzutage schon gönnen ..

Seite 1 von 2 12 LetzteLetzte

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Ähnliche Themen

  1. Bild immer zentriert ausrichten
    Von flipper im Forum GoLive
    Antworten: 1
    Letzter Beitrag: 19.12.2009, 15:06
  2. Horizontals Menu im div zentriert ausrichten?
    Von chrigi78 im Forum Dreamweaver & andere Webeditoren
    Antworten: 0
    Letzter Beitrag: 28.11.2007, 10:52
  3. zentriert ausrichten
    Von roger1 im Forum HTML & CSS
    Antworten: 5
    Letzter Beitrag: 26.09.2005, 23:17
  4. Tabelle zentriert ausrichten (Beispiel)
    Von Philzlous im Forum Dreamweaver & andere Webeditoren
    Antworten: 7
    Letzter Beitrag: 18.01.2004, 16:46
  5. ganz zentriert ausrichten!
    Von pauel im Forum Photoshop
    Antworten: 5
    Letzter Beitrag: 30.06.2003, 17:23

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

     

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •  

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51