Forum PHP.pl > [CSS] obrazek w prawym dolnym rogu

sowi

4.08.2008, 12:08:59

Witam,
mam taki problem. Potrzebuję umieścić obrazek w prawym dolnym rogu (zawsze niezależnie od rozdzielczości) przegladarki. Problem w tym, że obrazek ma być nałozony na pasek (grafika jpg) który znajduje się na całości strony - rowniez na dole. Aby uzyskać pasek na całości na dole użylem

body {background: url("img/down_stripe.jpg") repeat-x bottom left; margin: 0px;}

Nie wiem jednak jak zrobić teraz aby dodatkowo obrazek umieścic w rogu. Czy zrobić to za pomocą nowego diva, czy można jakoś inaczej?

Ar2r

4.08.2008, 12:23:50

Jaki masz układ strony? Znajduje się tam stopka?
Możesz umieścić obrazek w stopce lub pod nią i wtedy go wypozycjonować (left;top).

sowi

4.08.2008, 13:20:43

no wlasnie z tym jest problem. Bo klient zazyczyl sobie dosyc dziwny uklad strony. Czesc glowna - z tekstem ma byc tej samej wysokosci niezaleznie od ilosci - czyli z css paskiem bedzie do przewijania [overflow: auto;] - height ok 500. Na dole ma byc wspomniany pasek i grafika w prawym dolnym rogu

Ar2r

4.08.2008, 13:35:10

A ta grafika w rogu ma nakładać się na koniec obszaru z tekstem czy być pod nim?

sowi

4.08.2008, 13:37:48

ma byc na obrazku linii ustalonym w body, i ma byc pod ewentualnym tekstem jezeli ktos wejdzie powiedzmy z 800X600

Ar2r

4.08.2008, 13:46:59

Nie wiem czy o to Ci chodzi, ale dodaj pod obszarem tekstu jakiś element blokowy, wstaw do niego ten obrazek, zrób wyrównywanie do prawej;

wjkbdg

4.08.2008, 14:03:11

Z tym umieszczeniem w body deklaracji grafiki to nie jest najlepszy pomysł.
Spróbuj rozwiązania poniżej. Oba elementy są wypozycjonowane absolutnie, czyli względem odległości od krawędzi okna przeglądarki, więc rozdzielczość nie będzie miała znaczenia. Żeby obrazek nachodził na pasek, a nie był ukryty pod nim, a dokumencie HTML musisz umieścić IMG pod DIV zawierającym pasek.

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.image {
  position:absolute;
  bottom:0px;
  right:0px;
}
 
#bottomStripe {
  background:url('bg.jpg') repeat-x;
  position:absolute;
  bottom:0px;
  width:100%;
  height:auto;
}
</style>
</head>
<body>
 
  <div id="bottomStripe">
     &nbsp;
  </div>
 
  <img class="image" src="larger.jpg" />
 
</body>
</html>
[HTML] pobierz, plaintext

Gość

28.08.2008, 13:56:31

Kod

CSS

#box_glowny {
    position                    : absolute;   /* box_glowny zajmuje całe okienko przeglądarki */
    margin                     : 0px;
    padding                    : 0px;
    width                       : 100%;
    height                      : 100%;
    background              : #333333;
    border                     : 0px;
}

#box_prawa {
    margin                     : auto;
    margin-right             : 0px;
    padding                    : 0px;
    height                      : 100%;
    width                       : 100px;    /* jako 'width' można dać auto lub wpisać szerokość obrazka w pixelach i pozbyć się 'right' z 'background' */
    background              : url(../sciezka/do/obrazka/obrazek.png) no-repeat bottom right;   /* ścieżka do obrazka względem pliku .css */
    border                     : 0px;
}

HTML

<div id="box_glowny">

    <div id="box_lewa">

    </div>
</div>

Mam nadzieję że to pomoże ...

-axel-

28.08.2008, 13:57:28

Kod

CSS

#box_glowny {
    position                    : absolute;                                                                                   /* box_glowny zajmuje całe okienko przeglądarki */
    margin                     : 0px;
    padding                    : 0px;
    width                       : 100%;
    height                      : 100%;
    background              : #333333;
    border                     : 0px;
}

#box_prawa {
    margin                     : auto;
    margin-right             : 0px;
    padding                    : 0px;
    height                      : 100%;
    width                       : 100px;                                                                                       /* jako 'width' można dać auto lub wpisać szerokość obrazka w pixelach i pozbyć się 'right' z 'background' */
    background              : url(../sciezka/do/obrazka/obrazek.png) no-repeat bottom right;       /* ścieżka do obrazka względem pliku .css */
    border                     : 0px;
}

HTML

<div id="box_glowny">

    <div id="box_lewa">

    </div>
</div>

Mam nadzieję że to pomoże ...

-axel-

28.08.2008, 13:59:29

Kod

CSS

#box_glowny {
    position                    : absolute;                                                                                   /* box_glowny zajmuje całe okienko przeglądarki */
    margin                     : 0px;
    padding                    : 0px;
    width                       : 100%;
    height                      : 100%;
    background              : #333333;
    border                     : 0px;
}

#box_prawa {
    margin                     : auto;
    margin-right             : 0px;
    padding                    : 0px;
    height                      : 100%;
    width                       : 100px;                                                                                       /* jako 'width' można dać auto lub wpisać szerokość obrazka w pixelach i pozbyć się 'right' z 'background' */
    background              : url(../sciezka/do/obrazka/obrazek.png) no-repeat bottom right;       /* ścieżka do obrazka względem pliku .css */
    border                     : 0px;
}

HTML

<div id="box_glowny">

    <div id="box_prawa">

    </div>
</div>

Przepraszam za kolejny post ale wkradl sie maly blad w nazewnictwie.
Naprawione.
Pozdrawiam.