Anzeige

BIlder im Container ausrichten

BIlder im Container ausrichten | PSD-Tutorials.de

Erstellt von Cleptomanicx, 02.11.2011.

  1. Cleptomanicx

    Cleptomanicx Noch nicht viel geschrieben

    Dabei seit:
    04.10.2011
    Beiträge:
    36
    Geschlecht:
    männlich
    BIlder im Container ausrichten
    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.
     
    #1      
  2. MyBad

    MyBad localhorst

    Dabei seit:
    18.12.2006
    Beiträge:
    1.977
    Geschlecht:
    männlich
    BIlder im Container ausrichten
    AW: BIlder im Container ausrichten

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

    Cleptomanicx Noch nicht viel geschrieben

    Dabei seit:
    04.10.2011
    Beiträge:
    36
    Geschlecht:
    männlich
    BIlder im Container ausrichten
    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^^
     
    #3      
  4. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.049
    Geschlecht:
    männlich
    Ort:
    Ö
    BIlder im Container ausrichten
    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.
    HTML:
    1.  
    2. <div>
    3. <p>
    4.  
    5. </p>
    6. <div>
    7.  
    8. CSS:
    9. p{margin-left:10px}/*Der Absatz ist 10px vom linken rand entfernt*/
    10.  
    L. G.
     
    #4      
  5. salonike72

    salonike72 Jeder hilft wo er kann Kreativ-Flatrate-User

    11
    Dabei seit:
    13.08.2010
    Beiträge:
    1.425
    Geschlecht:
    männlich
    Ort:
    Treze Tilias (Brasilien)
    Software:
    CS6 EX
    Kameratyp:
    Canon
    BIlder im Container ausrichten
    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
     
    #5      
  6. MyBad

    MyBad localhorst

    Dabei seit:
    18.12.2006
    Beiträge:
    1.977
    Geschlecht:
    männlich
    BIlder im Container ausrichten
    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:
    HTML:
    1.  
    2. <div class="container">
    3.   <div id="buttons"></div>
    4. </div>
    5.  
    CSS:
    HTML:
    1.  
    2. .container{
    3.   margin: auto;
    4.   width: 810px;
    5. }
    6. #buttons{
    7.   background: url('images/buttons-oben.png') no-repeat top left;
    8. }
    9.  
    Wie geschrieben, so ganz haben ich dein Vorhaben noch nicht verstanden.
     
    #6      
  7. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.049
    Geschlecht:
    männlich
    Ort:
    Ö
    BIlder im Container ausrichten
    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.
     
    #7      
  8. MyBad

    MyBad localhorst

    Dabei seit:
    18.12.2006
    Beiträge:
    1.977
    Geschlecht:
    männlich
    BIlder im Container ausrichten
    AW: BIlder im Container ausrichten

    Stimmt... irgendwie war ich mir vorhin auch nicht ganz sicher.
     
    #8      
  9. Cleptomanicx

    Cleptomanicx Noch nicht viel geschrieben

    Dabei seit:
    04.10.2011
    Beiträge:
    36
    Geschlecht:
    männlich
    BIlder im Container ausrichten
    AW: BIlder im Container ausrichten

    ok dann lad ich das jetzt mal hoch

    HTML - code
    http://img338.imageshack.us/img338/9628/htmltext.jpg

    CSS-Code
    http://img703.imageshack.us/img703/6954/csstext.jpg

    So sieht das bild damit aus
    http://img6.imageshack.us/img6/2778/aktuellg.jpg

    So soll es aussehen
    http://img513.imageshack.us/img513/9619/kinderkarten.png


    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
     
    #9      
  10. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.049
    Geschlecht:
    männlich
    Ort:
    Ö
    BIlder im Container ausrichten
    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.
     
    #10      
x
×
×