Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS] obrazek w prawym dolnym rogu
sowi
post 4.08.2008, 12:08:59
Post #1





Grupa: Zarejestrowani
Postów: 63
Pomógł: 0
Dołączył: 7.03.2004

Ostrzeżenie: (0%)
-----

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?

Ten post edytował sowi 4.08.2008, 12:09:32
Go to the top of the page
+Quote Post
Ar2r
post 4.08.2008, 12:23:50
Post #2





Grupa: Zarejestrowani
Postów: 140
Pomógł: 16
Dołączył: 12.06.2002
Skąd: Kielce

Ostrzeżenie: (0%)
-----

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).
Go to the top of the page
+Quote Post
sowi
post 4.08.2008, 13:20:43
Post #3





Grupa: Zarejestrowani
Postów: 63
Pomógł: 0
Dołączył: 7.03.2004

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
Ar2r
post 4.08.2008, 13:35:10
Post #4





Grupa: Zarejestrowani
Postów: 140
Pomógł: 16
Dołączył: 12.06.2002
Skąd: Kielce

Ostrzeżenie: (0%)
-----

A ta grafika w rogu ma nakładać się na koniec obszaru z tekstem czy być pod nim?
Go to the top of the page
+Quote Post
sowi
post 4.08.2008, 13:37:48
Post #5





Grupa: Zarejestrowani
Postów: 63
Pomógł: 0
Dołączył: 7.03.2004

Ostrzeżenie: (0%)
-----

ma byc na obrazku linii ustalonym w body, i ma byc pod ewentualnym tekstem jezeli ktos wejdzie powiedzmy z 800X600
Go to the top of the page
+Quote Post
Ar2r
post 4.08.2008, 13:46:59
Post #6





Grupa: Zarejestrowani
Postów: 140
Pomógł: 16
Dołączył: 12.06.2002
Skąd: Kielce

Ostrzeżenie: (0%)
-----

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;
Go to the top of the page
+Quote Post
wjkbdg
post 4.08.2008, 14:03:11
Post #7





Grupa: Zarejestrowani
Postów: 35
Pomógł: 0
Dołączył: 3.06.2007
Skąd: bdg

Ostrzeżenie: (0%)
-----

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 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <style type="text/css">
  5. .image {
  6.   position:absolute;
  7.   bottom:0px;
  8.   right:0px;
  9. }
  10.  
  11. #bottomStripe {
  12.   background:url('bg.jpg') repeat-x;
  13.   position:absolute;
  14.   bottom:0px;
  15.   width:100%;
  16.   height:auto;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21.  
  22.   <div id="bottomStripe">
  23.      &nbsp;
  24.   </div>
  25.  
  26.   <img class="image" src="larger.jpg" />
  27.  
  28. </body>
  29. </html>
[HTML] pobierz, plaintext


Ten post edytował wjkbdg 4.08.2008, 14:06:33
Go to the top of the page
+Quote Post
-Gość-
post 28.08.2008, 13:56:31
Post #8





Goście
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 ... smile.gif
Go to the top of the page
+Quote Post
--axel--
post 28.08.2008, 13:57:28
Post #9





Goście
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 ... smile.gif
Go to the top of the page
+Quote Post
--axel--
post 28.08.2008, 13:59:29
Post #10





Goście
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.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 31.07.2025 - 07:51
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn