stick to bottom of page..css - Softwareontwikkeling

donderdag 11 april 2013 16:48

Acties:

Verwijderd

Topicstarter

Ik zit met een css probleempje en ik kom er niet uit.

ik heb een png afbeelding die ik aan de onderkant van mijn website wil hebben. deze moet aan de onderkant van mijn scherm blijven plakken. hij is 1024 px breed en moet ten aller tijde in het midden blijven. Tot zover lukt het nog. <Maar ik wil dat deze achter de rest van mijn website verdwijnt.
De bottom img staat dus aan de onderkant van het scherm geplakt, en de content moet daar overheem staan. als je naar beneden scrollt blijft de bottom img waar die staat (evenls de background) maar moet de content wel mee scrollen.
Is dit een duidelijk verhaal?

ik krijg hem wel gecentreerd achter mijn content, maar dan staat hij niet aan de bottom van mijn scherm,
ik krijg em ook gecentreerd aan de bottom van mijn scherm, maar dan krijg ik hem niet achter mijn content.
Met position absolute krijg ik hem benden, maar dan werkt de z- index niet meer...

Alvast bedankt!

donderdag 11 april 2013 16:54

Acties:

TheDevilOnLine

Heb je al geprobeerd om je content in een div te plaatsen en jou image dan al background van die div te zetten uitgelijnd naar beneden? Op deze manier kan je toch nog een background aan je body geven en je kan de div scrollbaar (is dat een nederlands woord?) maken.

Dus iets als:

HTML:

<html>
  <head>
    <style type='text/css'>
      #content
      { 
        background-image:url('image.png');
        background-repeat:no-repeat;
        background-attachment:fixed;
        background-position:bottom;
        width: 100%;
        height: 100%;
        overflow : auto;
      }
    </style>
  </head>
  <body>
    <div id='content'>
      Some content
    </div>
  </body>
</html>

donderdag 11 april 2013 17:17

Acties:

Verwijderd

Topicstarter

In dat geval staat de img aan de onderkant van de div. Ik wil hem echt aan de onderkant van het scherm hebben, ongeacht de schermresolutie van de gebruiker.

Thanks iig!

donderdag 11 april 2013 17:30

Acties:

Pizzalucht

Snotneus.

code:

<html>
  <head>
    <style type='text/css'>
      #content
      {
         z-index: 2;
         position:relative;
      }
      #sticky {
        bottom: 0;
        position: fixed;
        width: 100%;
        z-index: 1;
        min-width: 1024px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id='content'>
      Some content
    </div>
    <div id='sticky'>
      <img src="image.png">
    </div>
  </body>
</html>

http://jsfiddle.net/tTRzG/3/

[ Voor 4% gewijzigd door Pizzalucht op 11-04-2013 17:34 ]

donderdag 11 april 2013 18:03

Acties:

TheDevilOnLine

Verwijderd schreef op donderdag 11 april 2013 @ 17:17:
In dat geval staat de img aan de onderkant van de div. Ik wil hem echt aan de onderkant van het scherm hebben, ongeacht de schermresolutie van de gebruiker.

Thanks iig!

Er zijn manieren om die div precies je schermgrote te geven ;-)

donderdag 11 april 2013 23:27

Acties:

Verwijderd

Topicstarter

Pizzalucht schreef op donderdag 11 april 2013 @ 17:30:

code:

<html>
  <head>
    <style type='text/css'>
      #content
      {
         z-index: 2;
         position:relative;
      }
      #sticky {
        bottom: 0;
        position: fixed;
        width: 100%;
        z-index: 1;
        min-width: 1024px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id='content'>
      Some content
    </div>
    <div id='sticky'>
      <img src="image.png">
    </div>
  </body>
</html>

http://jsfiddle.net/tTRzG/3/

thanks! Hier kom ik al een heel eind mee. het enige probleem wat ik nu nog heb is dat de image niet gecentreerd staat, ik doe dit altijd door margin: 0 auto 0 auto; in mijn css mee te geven, maar volgens mij kan dat niet als je position:fixed hebt staan. iig bedankt!

donderdag 11 april 2013 23:31

Acties:

Gropah

Admin Softe Goederen

Oompa-Loompa 💩

Is dit niet wat je zoekt? CSSStickyFooter

nevermind, eerst TS goed doorlezen, dan pas posten...

[ Voor 28% gewijzigd door Gropah op 11-04-2013 23:33 ]

donderdag 11 april 2013 23:39

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

scriptrequest
PRG >> WEB

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

vrijdag 12 april 2013 09:35

Acties:

Bosmonster

*zucht*

Verwijderd schreef op donderdag 11 april 2013 @ 23:27:
[...]

thanks! Hier kom ik al een heel eind mee. het enige probleem wat ik nu nog heb is dat de image niet gecentreerd staat, ik doe dit altijd door margin: 0 auto 0 auto; in mijn css mee te geven, maar volgens mij kan dat niet als je position:fixed hebt staan. iig bedankt!

Je kunt ook een z-index van -1 gebruiken, dan hoef je #content niet een geforceerde z-index te geven.

Om hem in het midden te zetten kun je natuurlijk de image margin: 0 auto geven en een display: block.

woensdag 17 april 2013 22:03

Acties:

_Thanatos_

Ja, en kaal

Verwijderd schreef op donderdag 11 april 2013 @ 17:17:
In dat geval staat de img aan de onderkant van de div. Ik wil hem echt aan de onderkant van het scherm hebben, ongeacht de schermresolutie van de gebruiker.

Onderaan het scherm is onmogelijk. Onderaan de browser kan wel

html en body beide height:100% geven en dan een background-image onderaan uitlijnen. Wat is daat moeilijk aan? Of mis ik iets?

日本！🎌

woensdag 17 april 2013 23:28

Acties:

NiteSpeed

Wat betreft dat centreren, je plaatje is 1024px breed zeg je? Simpelweg de linkermarge op de helft van die breedte instellen en negatief maken en je plaatje uitlijnen op 50%. Dan kom je ook altijd op het midden uit.

code:

1
2
3

position:fixed;
left: 50%;
margin-left: -512px;