Antworten auf deine Fragen:
Neues Thema erstellen

Positionieren ??

Kadey

Nicht mehr ganz neu hier

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:
#kopf { 
  width:100%;
  height: 182px;
  background: url(../images/bg-html.jpg) repeat-x; margin:0 auto;}
  
      #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
 

Jormungand

VonAllemEtwas

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.
 
H

hustelinchen

Guest

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.
 

s4f

Aktives Mitglied

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
 

Christoph_Ac

Fühlt sich wohl hier!

AW: Positionieren ??

Ich sag nur no-repeat!

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 - Dort findest du ein Tutorial was sich genau mit positionieren von Elementen befasst!

lg Chris
 

fexx

Aktives Mitglied

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
 

s4f

Aktives Mitglied

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. :)

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?
 

hubspe

display:schwarzgelb;

AW: Positionieren ??

was ist am absolute schlecht?

Die Frage hätte ich in dem Falle auch mal gerne beantwortet:)

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.

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).

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.
 

s4f

Aktives Mitglied

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.
 

hubspe

display:schwarzgelb;

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.

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!" :)
 

s4f

Aktives Mitglied

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:

hubspe

display:schwarzgelb;

AW: Positionieren ??

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.

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.

bei position:absolute vom kind-div verschindet nix, da es am eltern-div ausgerichtet ist.

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.
 

s4f

Aktives Mitglied

AW: Positionieren ??

daher schrieb ich:
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

und richtig:
bei negativ pos. können sie weg sein,
verschwunden sind sie, wenn man es will.
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.614
Beiträge
1.538.351
Mitglieder
67.525
Neuestes Mitglied
mgtaucher
Oben