Anzeige

a position über div

a position über div | PSD-Tutorials.de

Erstellt von qazwsx, 15.11.2009.

  1. qazwsx

    qazwsx Nicht mehr ganz neu hier

    Dabei seit:
    17.05.2009
    Beiträge:
    104
    Geschlecht:
    männlich
    a position über div
    Hallo!

    Ich habe ein Hintergrund so eingefügt:
    Code (Text):
    1. <div style="background-image:url(bg1.png); background-repeat:no-repeat; height:768px; widht:1024px; background-position:50%50%; background-attachment:scroll; vertical-align:middle"></div>
    2.  
    Es bleibt stets in der Mitte des Browser Fensters. Nun habe ich ein 2. Bild, das stets am linken unterem Eck des Hintergrundbildes angezeigt werden soll.

    Bitte meinen zweiten Beitrag lesen!
     
    Zuletzt bearbeitet: 16.11.2009
    #1      
  2. Metalshoota

    Metalshoota Will seinen Namen ändern.

    Dabei seit:
    26.11.2006
    Beiträge:
    55
    Geschlecht:
    männlich
    Ort:
    Leverkusen
    Software:
    PS CS 4 & DW CS 4 @ Macbook pro 13"
    Kameratyp:
    Canon EOS 7D
    a position über div
    AW: a position über div

    Kleine Frage: Was ist ein a-Container?
    Poste mal den gesamten Code bitte ;)
     
    #2      
  3. qazwsx

    qazwsx Nicht mehr ganz neu hier

    Dabei seit:
    17.05.2009
    Beiträge:
    104
    Geschlecht:
    männlich
    a position über div
    AW: a position über div

    Sorry, habe mich falsch ausgedrückt. Ich will ein Bild exakt an der linke unteren Seite meines Hinturgrundbildes anzeigen.

    HTML:
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    2.       "http://www.w3.org/TR/html4/loose.dtd">
    3. <title>Test</title>
    4. <link rel="stylesheet" type="text/css" href="style.css" />
    5. <script language="javascript">
    6. <!-- hide script from old browsers
    7.  
    8. //detect browser:
    9. browserName = navigator.appName;
    10. browserVer = parseInt(navigator.appVersion);
    11. if (browserName == "Netscape" && browserVer >= 3) browserVer = "1";
    12. else if (browserName == "Microsoft Internet Explorer" && browserVer == 4) browserVer = "1";
    13. else browserVer = "2";
    14.  
    15. //preload images:
    16. if (browserVer == 1) {
    17. a1 = new Image(404,240);
    18. a1.src = "1.png";
    19. a2 = new Image(404,240);
    20. a2.src = "2.png";
    21. }
    22.  
    23. //image swapping function:
    24. function hiLite(imgDocID, imgObjName, comment) {
    25. if (browserVer == 1) {
    26. document.images[imgDocID].src = eval(imgObjName + ".src");
    27. window.status = comment; return true;
    28. }}
    29. //end hiding -->
    30. </head>
    31.  
    32.  
    33.  
    34.  
    35. <div style="background-image:url(bg1.png); background-repeat:no-repeat; height:768px; widht:1024px; background-position:50%50%; background-attachment:scroll; vertical-align:middle"></div>
    36. <a title="Info" href="http://www.test.de/relaunch/info.html" onMouseOver="hiLite('a','a2','Your Comment Here')" onMouseOut="hiLite('a','a1','')" id="xxx"><img name="a" src="1.png" border=0 width=404px height=240px></a>
    37.  
    38. </body>
    39. </html>
    Code (Text):
    1. body
    2. {
    3. background-color:#000000;
    4. }
    5. #xxx {
    6. z-index:4;
    7. width : 404px;
    8. height : 240px;
    9. position: absolute;
    10. top : 533px;
    11. left : auto 50px;
    12. }
    Da mein BG Bild zentriert ist, bewegt es sich mit, wenn man die Größe des Browserfensters ändert.. Das geht auch mit meinen 2. Bild, jedoch nur, wenn ich es ebenfalls mit 50%50% zentriere. Dann ist es aber nicht an der linken unteren Ecke.

    Danke für jegliche Hilfe!
     
    #3      
  4. qazwsx

    qazwsx Nicht mehr ganz neu hier

    Dabei seit:
    17.05.2009
    Beiträge:
    104
    Geschlecht:
    männlich
    a position über div
    AW: a position über div

    Kann sonst jemand helfen?
     
    #4      
  5. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.557
    Geschlecht:
    männlich
    a position über div
    Zuletzt bearbeitet: 16.11.2009
    #5      
  6. Dennis Kovarik

    Dennis Kovarik Aktives Mitglied Kreativ-Flatrate-User

    Dabei seit:
    11.08.2009
    Beiträge:
    653
    Geschlecht:
    männlich
    Ort:
    Troisdorf (Köln/Bonn)
    Software:
    CC 2018, Sketch, Visual Studio Code, Brackets, Coda, Sublime, Atom, PhpStrom, CodeKit, WordPress
    Kameratyp:
    Canon EOS 450D, iPhone 6s Plus
    a position über div
    AW: a position über div

    ich rate einfach mal ins blaue: das a steht für absolute.

    meinst du vielleicht so?
    (beides grafiken s. quelltext)

    grüße
     
    Zuletzt bearbeitet: 16.11.2009
    #6      
  7. qazwsx

    qazwsx Nicht mehr ganz neu hier

    Dabei seit:
    17.05.2009
    Beiträge:
    104
    Geschlecht:
    männlich
    a position über div
    AW: a position über div

    Danke dir.

    So mache ich es auch eig. immer, nur das 2 Bild wird mit einem javascript bei einem mouseover ausgetauscht und dient als Button. Bei dieser Methode funktioniert der JS natürlich nicht und der Link ist nicht nur auf dem Button anklickbar.

    @Herr_D,

    die Methode hatte ich früher auch auf einen Website Header angewandt. Nur das Problem in diesem Fall ist, dass bg1 zentriert ist und sich beim ändern der Browsergröße bewegt. Da kann man keine absoluten Angaben geben.
     
    #7      
  8. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    a position über div
    AW: a position über div

    Warum nicht? Du kannst deinen Button auch auf left:50% setzen und margin-left:***px.
    ***musst du natürlich ausrechnen, halbe Breite vom Hintergrundbild - Breite des Button, von oben gehts genauso...
     
    #8      
  9. Dennis Kovarik

    Dennis Kovarik Aktives Mitglied Kreativ-Flatrate-User

    Dabei seit:
    11.08.2009
    Beiträge:
    653
    Geschlecht:
    männlich
    Ort:
    Troisdorf (Köln/Bonn)
    Software:
    CC 2018, Sketch, Visual Studio Code, Brackets, Coda, Sublime, Atom, PhpStrom, CodeKit, WordPress
    Kameratyp:
    Canon EOS 450D, iPhone 6s Plus
    a position über div
    AW: a position über div

    muss es denn zwingend java sein? ;)
     
    #9      
x
×
×