BIlder im Container ausrichten

[Cleptomanicx]

hallo habe ein problem

hier erstmal der HTML code:

<div id="navigation" class="container2">
<div id="buttons">
</div>
</div>


hier der css code:


#navigation{width:517px;height:62px;}

#buttons{width:517px;height:62px;background:url(images/buttons-oben.png);}

.container2{margin:auto;width:810px;}

möchte das bild am linken rand des containers ausrichten
mit float:left geht das bild aber an den äußersten rand des bildes
möchte das mit nem container machen, da ich noch mehr daran
ausrichten muss/möchte.

 

[MyBad]

AW: BIlder im Container ausrichten

Kannst du dein Problem noch einmal etwas umformulieren oder eventuell mit Screenshots verdeutlichen!? Ich kapiere es so leider nicht.

 

[Cleptomanicx]

AW: BIlder im Container ausrichten

screenshot schlecht..

also ich würde das bild "buttons-oben.png"
gerne am äußersten linken rand des containers ausrichten

die größe des containers hab ich per css ja eingestellt.
sowohl die mittige ausrichtung im gesamten bild.
eingebunden hab ich ihn im HTML auch.

hoff das reicht^^

 

[Myhar]

AW: BIlder im Container ausrichten

Es gibt im Forum auch so etwas wie CODE Werkzeuge. Damit lässt sich Code lesbarer präsentieren.
Auch ist es nicht ratsam, fixe höhen und breiten anzugeben. Dann kann der Inhalt nicht darüber hinauswachsen.
Zu deinem Problem an sich: Du hast kein Bild, welches du ausrichten kannst. Du hast nur einen semantisch bedeutungslosen div Container, welcher sich standardmäßig am sich umschließenden div Container orientiert.

<div>
<p>

</p>
<div>

CSS:
p{margin-left:10px}/*Der Absatz ist 10px vom linken rand entfernt*/

L. G.

 

[salonike72]

AW: BIlder im Container ausrichten

Falls es Dir nicht möglich sein sollte ein screenshot zuerzeugen, wie bei mir beim Notebook, gibt es im Netz super Programme die Freeware sind und hervorragende Bilde macht vom Bildschirm, besser als es Standartmässig auf jedem PC möglich ist. Das Programm nennt sich "Macical Snap" und ist von Adope. Dort kannst du sogar mit Pfeilen und Texten im screenshot sagen, was Du möchtest oder erklären willst. Es gibt eine kleine Einleitungsfunktion beim Programm, mir hat es schon viel geholfen. Hatte es auf dem PC, auf dem Notebook aber noch nicht installiert

 

[MyBad]

AW: BIlder im Container ausrichten

Dein ganzer Code ist halt etwas verwirrend. Du definierst erst die Breite von "#navigation" überschreibst sie dann aber direkt wieder mit ".container2".

Keine Ahnung, ob ich es nun richtig verstanden habe, aber ich würde es so machen:

HTML:

<div class="container">
  <div id="buttons"></div>
</div>

CSS:

.container{ 
  margin: auto; 
  width: 810px; 
}
#buttons{
  background: url('images/buttons-oben.png') no-repeat top left;
}

Wie geschrieben, so ganz haben ich dein Vorhaben noch nicht verstanden.

 

[Myhar]

AW: BIlder im Container ausrichten

Genau habe ich es auch nicht verstanden, aber ich hoffe doch, dass mein Hinweis auf margins (und eventuell auch paddings, wie ich an dieser Stelle anmerken möchte), angekommen ist. Damit kann man nämlich Abstände definieren.

Jedoch überschreibt er die Breite von #navigation nicht, da ein ID Selektor eine höhere Gewichtung als der Klassen Selektor besitzt.

Für Screenshots reichen die standardfunktionalitäten eines PCs aus. Den Screenshot einfach in ein Grafikprogramm (zB Paint) seiner Wahl einfügen und Erklärungen etc. hinzufügen.

 

[MyBad]

AW: BIlder im Container ausrichten

[...]

Jedoch überschreibt er die Breite von #navigation nicht, da ein ID Selektor eine höhere Gewichtung als der Klassen Selektor besitzt.

[...]

Stimmt... irgendwie war ich mir vorhin auch nicht ganz sicher.

 

[Cleptomanicx]

AW: BIlder im Container ausrichten

ok dann lad ich das jetzt mal hoch

HTML - code


CSS-Code


So sieht das bild damit aus


So soll es aussehen



da ich dann später noch das große feld
den grünen button unten auch noch daran ausrichte
hätte ich gern ein container benutzt

hoffe das hilft weiter..
danke schonmal an alle die bisher geholfen haben

 

[Myhar]

AW: BIlder im Container ausrichten

Bitte den Code nicht hochladen, damit fangen wir gar nichts an. Füge ihn hier mit den entsprechenden CODE Werkzeugen ein (Dazu entweder auf das entsprechende Feld im Antworten-Editor drücken oder [ CODE ] eingeben [ /CODE ] (ohne die eckigen Klammern)

Was man aus deinem Code jetzt aber schon heraussieht, ist, dass dir noch die elementaren Grundlagen für semantisch korrektes HTML fehlen. Man muss nicht jedes Element in ein div geben und Hintergrundbilder gehören nicht mit img Tags eingebunden, sondern mit dem CSS Property background-image (was auf deutsch so viel wie Hintergrundbild heißt), versehen. Nur Bilder, welche keinen dekorativen Charakter besitzen, gehören mit img Tags eingebunden. Dann aber auch mit einem entsprechend deskriptiven alt Tag.
Auch deine Einsatz von position:absolute und position:fixed, welche bei deinem Layout wirklich nicht nötig sind, zeigt, dass noch viel Lernbedarf besteht.

Ich kann nur wieder auf meinen ersten Beitrag verweisen, in dem erklärt wird, wie man verschachtelten Containern einen Abstand gibt (Das war doch deine Frage? )
Ich habe bei dem Beispiel bewusst keine zwei div Container genommen, damit du siehst, dass nicht nur div Tags verwendet werden müssen.

L. G.