Anzeige

Positionieren ??

Positionieren ?? | PSD-Tutorials.de

Erstellt von Kadey, 07.07.2010.

  1. Kadey

    Kadey Nicht mehr ganz neu hier

    Dabei seit:
    08.07.2009
    Beiträge:
    104
    Geschlecht:
    männlich
    Positionieren ??
    Hallo zusammen,

    eine kleine Frage hätte ich mal.

    Möchte auf meiner Website eine Grafik in den Header einbauen.

    Hier einmal der Code:

    PHP:
    1. #kopf {
    2.  width:100%;
    3.   height: 182px;
    4.   background: url(../images/bg-html.jpg) repeat-x; margin:0 auto;}
    5.  
    6.       #bild1{ width:552px; height:130px; background:url(../images/Name.png) no-repeat;}
    Wie man sieht habe ich im Kopfbereich eine Grafik, welche sich auf der X-Achse wiederholt.
    Auf diese habe ich eine andere Grafik gepackt welche ich in der Postion anpassen möchte.

    Bräuchte nur Abstände von links und oben.

    Bitte um Hilfe
     
    #1      
  2. Jormungand

    Jormungand VonAllemEtwas

    Dabei seit:
    23.09.2008
    Beiträge:
    727
    Geschlecht:
    männlich
    Software:
    Adobe Creative Cloud, C4D R 11.5
    Kameratyp:
    Nikon D5000
    Positionieren ??
    AW: Positionieren ??

    Was genau möchtest du wissen? Das Attribut für den Abstand heißt "margin".
    In deinem Fall margin-top und margin-left.
    Wenn deine Container absolut sind, reichen top und left.

    Wenn dir das nicht auf die Sprünge hilft, müsstest du deinen HTML Code zeigen und dein Problem etwas exakter formulieren.
     
    #2      
  3. hustelinchen

    hustelinchen Noch nicht viel geschrieben

    Dabei seit:
    29.06.2010
    Beiträge:
    1
    Geschlecht:
    weiblich
    Positionieren ??
    AW: Positionieren ??

    Hi Kadey,

    also, wenn ich das richtig verstehe, hast du ein Bild und du möchtest auf der selben Achse ein Bild daneben setzten? Hast du div-tags angelegt, oder das Bild in eine Tabelle eingefügt? Du kannst dir in Dreamweaver unter Ansicht auch Lineale anzeigen lassen. Damit kannst du die Abstände gut messen. Aber wie Jormungand schon schreibt, wäre es gut den HTML-Code zu sehen.
     
    #3      
  4. s4f

    s4f Aktives Mitglied

    Dabei seit:
    14.06.2010
    Beiträge:
    250
    Geschlecht:
    männlich
    Positionieren ??
    AW: Positionieren ??

    bild1 ist bestimmt ein logo was im kopf angezeigt werden soll, oder?
    div id=kopf position:relative
    div id=bild1 (kind von div=kopf) position:absolute und dann mit top und left am div=kopf ausrichten. der bezugspunkt ist dann die obere linke ecke von div=kopf

    du kannst es auch mit margin-left und -top machen, solltest du aber später im kopf z.B. ein text reinbringen wird das dein margin beeinflussen
     
    #4      
  5. Christoph_Ac

    Christoph_Ac Fühlt sich wohl hier!

    Dabei seit:
    29.05.2010
    Beiträge:
    100
    Geschlecht:
    männlich
    Ort:
    Aachen
    Software:
    Photoshop und Dreamweaver
    Positionieren ??
    AW: Positionieren ??

    Ich will dir nicht zu nahe treten aber das ist keine Antwort sondern grenzt schon an Spam. Wenn du deine Hilfe einem Anfänger anbieten möchtest dann schreib doch ein bischen mehr als einen kurzen Satz...

    Zu deinem Problem. Ich würde das Logo was in den Header soll auch Absolute positionieren und dann per top und left die Werte eintragen.

    Wenn du eine Anleitung brauchst www.css4you.de - Dort findest du ein Tutorial was sich genau mit positionieren von Elementen befasst!

    lg Chris
     
    #5      
  6. hubspe

    hubspe display:schwarzgelb;

    Dabei seit:
    09.08.2007
    Beiträge:
    209
    Geschlecht:
    männlich
    Ort:
    Passau
    Software:
    PS CS5
    Kameratyp:
    Linhof Technika 4
    Positionieren ??
    AW: Positionieren ??

    Absolut ist absolut überflüssig außer man möchte für Google indexierbaren Logotext hinterlegen und den mittels einer Image Replacement Technik mit der HG-Grafik überdecken. :)
     
    Zuletzt bearbeitet: 13.07.2010
    #6      
  7. fexx

    fexx Aktives Mitglied

    Dabei seit:
    13.07.2010
    Beiträge:
    1.058
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Adobe Creative Cloud, Coda2
    Positionieren ??
    AW: Positionieren ??

    du kannst das "margin: 0 auto;" in #kopf weglassen, da width eh 100% ist und somit die komplette breite eingenommen wird.

    für die abstände gibts jetzt zwei möglichkeiten:
    - padding-top & -left in #kopf
    - margin-top & -left in #bild1

    absolute positionierung finde ich etwas überflüssig.

    fexx
     
    #7      
  8. s4f

    s4f Aktives Mitglied

    Dabei seit:
    14.06.2010
    Beiträge:
    250
    Geschlecht:
    männlich
    Positionieren ??
    AW: Positionieren ??

    nur mal eine frage,
    wie willst du sonst den zweiten div im #kopf dauerhaft ausrichten?
    ich gehe davon aus, dass er sein #bild1 immer an der gleichen position im #kopf haben will (unabhängig davon was im kopf ist).

    was ist am absolute schlecht?
     
    #8      
  9. hubspe

    hubspe display:schwarzgelb;

    Dabei seit:
    09.08.2007
    Beiträge:
    209
    Geschlecht:
    männlich
    Ort:
    Passau
    Software:
    PS CS5
    Kameratyp:
    Linhof Technika 4
    Positionieren ??
    AW: Positionieren ??

    zunächst mal grundsätzlich gar nix. :)
    Wenn man denn versteht was pos.absol. macht und die Nachteile genau kennt.
    Mit pos. abs. können Inhalte unerreichbar im Nirwana verschwinden, z.B. bei kleinen Bildschirmen (netbooks).
    Die Schichtung auf der z-Achse ändert sich dadurch, was dann öfter mal für unangenehme Überraschungen sorgt.

    Leider setzen es viele nicht ganz so Versierte ein ohne es verstanden zu haben.

    Mit Float natürlich, weil sich da die Elemente wenigstens noch ein bisschen sehen.

    Im vorliegenden Fall ist schon das zweite Element imho überflüssig.
    Er kann eine HG-Grafik mit Logo und Kopf-HG machen, den Logotext ins Markup schreiben und die HG-Grafik einfach drüberschieben (Link dazu habe ich ja schon gepostet).
    Dann hat man einen chicen Kopf und Google trotzdem noch Text zum Indexieren. ;)

    Wenn der Kopf immer über die ganze Breite gehen soll, gibt man die sich wiederholende Grafik body und die andere mit dem Logo dem Kopf, der in einem unsichtbaren, horizontal zentrierten wrapper hockt.
    Das macht man u.a. um die Zeilenlaufweite zu begrenzen.

    Die Technik für die Kopfgrafik: siehe mein Link.
     
    #9      
  10. s4f

    s4f Aktives Mitglied

    Dabei seit:
    14.06.2010
    Beiträge:
    250
    Geschlecht:
    männlich
    Positionieren ??
    AW: Positionieren ??

    es verschwindet nur das, was man verschwinden lassen will.
    sonst nix, auch am netbook nicht.

    wenn ich ein logo habe, dann will ich es an einem festen punkt im kopf.
    hg mit logo in einem? vielleicht ist es gar kein logo oder er will es öfter mal tauschen.
    genauso kann/wird #kopf schon ein teil von irgendwas sein und der body hat vielleicht schon ein hg.
    #kopf ist nur 182px hoch, da wird noch mehr sein.
     
    #10      
  11. hubspe

    hubspe display:schwarzgelb;

    Dabei seit:
    09.08.2007
    Beiträge:
    209
    Geschlecht:
    männlich
    Ort:
    Passau
    Software:
    PS CS5
    Kameratyp:
    Linhof Technika 4
    Positionieren ??
    AW: Positionieren ??

    was willst du mir denn mit deinem Posting sagen?
    Entweder hast du nicht gelesen was ich gepostet habe oder du hast es einfach nicht verstanden.

    Einen Sinn kann ich jedenfalls nicht darin erkennen.
    Klingt alles ein bisschen wie "Sein oder nicht sein, das ist hier die Frage!" :)
     
    #11      
  12. s4f

    s4f Aktives Mitglied

    Dabei seit:
    14.06.2010
    Beiträge:
    250
    Geschlecht:
    männlich
    Positionieren ??
    AW: Positionieren ??

    hubspe,

    ich versuche immer etwas weiter zu denken. also wenn ich eine frage wie oben von kadey habe, dann gibt es eigentlich nur 2 möglichkeiten warum die frage erst überhaupt gestellt wurde.

    1. es ist ein anfänger und will eine schnelle lösung
    oder
    2. es steht einer auf dem schlauch

    da anfänger meistens eher zuviel als zuwenig code als anhang beilegen, denke ich dass hier die 2. möglichkeit wahrscheinlicher ist. hinzu kommt, dass die frage schon fast 2 wochen alt ist, folgefragen gab es nicht, also ist das problem scheinbar schon erledigt.

    zurück zu deiner lösung,
    diese ist natürlich richtig, vorausgesetzt die struktur der site wird nicht auf den kopf gestellt. da wir aber hier nur 2 zeilen css haben, versuche ich immer eine lösung zu bieten die nur in den o.g. 2 zeilen bleibt und nicht alles andere mitändert.
    manche leute machen sich noch gedanken über die größe der site und versuchen mit möglichst vielen repeats die dateigröße zu minimieren (da braucht man oft ein paar divs extra). es macht relativ wenig sinn, eine große grafik zu laden, wenn ich die in 10 kleine zerlegen kann und durch repaeten nur ein 1/3 der größe hab. vielleicht ist es hier auch der fall und im body wird schon ein hg repeatet. ich denke ein wrap wird auch schon vorhanden sein (mit hg).

    bei position:absolute vom kind-div verschindet nix, da es am eltern-div ausgerichtet ist. es kann also auch auf einem netbook nicht verloren gehen. es wird also immer dort angezeigt, wo du es hinknallst, dass jetzt keineR ein logo in 2000px von links platzieren wird ist ja auch klar, oder? aber auch wenn ist es da, du hast nur lange scrollbalken.

    beim design ist folgende frage wichtig, was soll der besucher im kopf behalten? bei einer startsite ist der name schon sehr wichtig (finde ich), damit du dich immer erinnern kannst wo du etwas gesehen hast. da das auge von links oben nach rechts unten liest, macht der name links oben natürlich viel sinn.
     
    Zuletzt bearbeitet: 17.07.2010
    #12      
  13. hubspe

    hubspe display:schwarzgelb;

    Dabei seit:
    09.08.2007
    Beiträge:
    209
    Geschlecht:
    männlich
    Ort:
    Passau
    Software:
    PS CS5
    Kameratyp:
    Linhof Technika 4
    Positionieren ??
    AW: Positionieren ??

    das ist leider nicht ganz richtig. ;)

    Schon bei negativen Positionsangaben gibt es keinen Scrollbalken mehr.
    Auch bei Angaben für right statt left können Inhalte ohne Scrollbalken im Nirwana verschwinden .
    Außerdem wird vielen der Scrollbalken gar nicht so auffallen. Die wissen gar nicht das Inhalte außerhalb des Viewports sind.

    das ist leider auch nicht ganz richtig. ;)


    Elemente mit position:absolute; orientieren sich bei Positionsangaben nicht am Elternelement sondern am Initial Containing Block (html).
    Sie orientieren sich nur am Elternelement wenn dieses position:relative; hat!

    Das wissen aber viele Anfänger nicht.

    Man sollte pos. abs. nur einsetzen wenn es wirklich notwendig ist und im vorliegenden Fall ist es nur notwendig, wenn man die Image Replacement Technik nach Gilder/Levine einsetzt um dem Googlebot indexierbaren Inhalt zu präsentieren.

    Eine große Grafik in 10 kleine aufzuteilen ist deswegen oft nicht sinnvoll weil das kb-mäßig eh auf's Gleiche rauskommt.
     
    #13      
  14. s4f

    s4f Aktives Mitglied

    Dabei seit:
    14.06.2010
    Beiträge:
    250
    Geschlecht:
    männlich
    Positionieren ??
    AW: Positionieren ??

    daher schrieb ich:
    und richtig:
    bei negativ pos. können sie weg sein,
    verschwunden sind sie, wenn man es will.
     
    Zuletzt bearbeitet: 17.07.2010
    #14      
  15. hubspe

    hubspe display:schwarzgelb;

    Dabei seit:
    09.08.2007
    Beiträge:
    209
    Geschlecht:
    männlich
    Ort:
    Passau
    Software:
    PS CS5
    Kameratyp:
    Linhof Technika 4
    Positionieren ??
    AW: Positionieren ??

    sorry, deinen ersten Beitrag hatte ich übersehen.
     
    #15      
x
×
×