Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]div i img obok siebie
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
aeaeae
5.03.2011, 21:51:58
Hej
Chcę umieścić obok siebie trzy elementy blokowe, ale tak, że środkowy (img) będzie miał stałą szerokość i będzie dokładnie na środku, a dwa div po bokach uzupełnią szerokość do 100%. Zależy mi na tym, żeby w samych div nic nie było.

[HTML] pobierz, plaintext 
  1. <div style="width:100%">
  2.   <div style="width:auto;float:left;background-image:url(eee1.png)"></div>
  3.   <img src="obrazek.png" style="float:left" />
  4.   <div style="width:auto;float:left;background-image:url(eee2.png)"></div>
  5. </div>
[HTML] pobierz, plaintext


Chcę po prostu osiągnąć taki efekt, że na środku jest obrazek, a tło z lewej i prawej kurczy się i rozszerza wraz z rozdzielczością/szerokością przeglądarki. Może ktoś wie jak to zrobić?
Od razu napiszę, że zależy mi na dokładnym ustaleniu pozycji eee1.png i eee2.png względem obrazek.png, więc odpada wpisanie do img background-image i margines auto.
krzywy36
5.03.2011, 22:14:37
tak na szybko, przyszło mi na myśl coś takiego: robisz dwa divy po 50% width i 100% height, img pozycjonujesz np. przez fixed na środek i tym divom nadajesz tło. Z tym że tym sposobem strona nie może być ze zcrollem (dłuższa niż okno przeglądarki). Może napisz co to konkretnie ma być?
aeaeae
5.03.2011, 22:32:08
To ma być pasek o wysokości 200px na samej górze strony.

Stworzyłem obrazek o szerokości 400px i wysokości 200px (eee.png) w ten sposób, że jego prawy koniec pasuje do lewego - czyli będzie się powtarzał jako tło dla obrazka z tytułem strony. Wziąłem takie dwa "tła" - wtedy razem mają 800px x 200px i na nich zrobiłem tytuł - nazwałem ten plik obrazek.png. i teraz chcę, żeby obrazek.png był zawsze pośrodku szerokości strony, a eee.png z lewej i prawej przylegały odpowiednio do jego początku i końca.

Mógłbym zrobić jeden div z szerokością 100%, tłem, i dać w nim img, ale ten img ma rzucać cień, a starsze IE nie radzą sobie z tym (poza tym nie umiem robić półprzezroczystości - cień zrobiłem w gd php - nie znam się na programach graficznych :/).
krzywy36
5.03.2011, 22:56:06
czyli w czym konkretnie problem? ^^
co do przezroczystości, można w css, sprawdź http://www.w3schools.com/Css/css_image_transparency.asp, z tym że nie wiem jak stare przeglądarki to obsługują. a w programach graficznych z reguły się to robi przez zmniejszenie krycia (w gimpie masz tą opcje nad warstwami, jak się nie mylę to w photoshopie też).
aeaeae
5.03.2011, 23:22:55
Programy graficzne nie są mi już potrzebne, bo sobie poradziłem z cieniem, ale chodzi o sam układ.

Może uproszczę sytuację, nie odnosząc się do grafiki. Mam pustą stronę i chcę zrobić na samej górze poziomy pasek o szerokości łącznej 100% i wysokości 200px z trzech div-ów w taki sposób, że lewy ma background-color czerwony, środkowy zielony, a prawy niebieski. Oprócz tego środkowy ma zawsze szerokość 400px i zawsze jest w samym środku, a lewy i prawy div przylegają do środkowego i "rozciągają się" do końca w zależności od rozdzielczości.

Wychodzę z takiego kodu:

[HTML] pobierz, plaintext 
  1. <html>
  2.   <head>
  3.     <title></title>
  4.   </head>
  5.   <body style="margin:0px">
  6.     <div style="width:100%">
  7.       <div style="float:left;height:200px;background-color:#FF0000"></div>
  8.       <div style="float:left;height:200px;width:400px;background-color:#00FF00"></div>
  9.       <div style="float:left;height:200px;background-color:#0000FF"></div>
  10.     </div>
  11.   </body>
  12. </html>
[HTML] pobierz, plaintext


Wiem, że to poprawna sytuacja, że nie widać czerwonego i niebieskiego div-a, ale jak je rozciągnąć, żeby otrzymać zielony w samym środku i o szerokości 400px, a czerwony i niebieski wypełniające kolejno lewą i prawą stronę?

edit: Efekt, jaki chcę otrzymać ma być podobny do tego jaki daje poniższy kod, z tym, że, tak jak pisałem zielony ma mieć zawsze 400px (a nie 34%) i być pośrodku.

[HTML] pobierz, plaintext 
  1. <html>
  2.   <head>
  3.     <title></title>
  4.   </head>
  5.   <body style="margin:0px">
  6.     <div style="width:100%">
  7.       <div style="float:left;height:200px;width:33%;background-color:#FF0000"></div>
  8.       <div style="float:left;height:200px;width:34%;background-color:#00FF00"></div>
  9.       <div style="float:left;height:200px;width:33%;background-color:#0000FF"></div>
  10.     </div>
  11.   </body>
  12. </html>
[HTML] pobierz, plaintext
krzywy36
5.03.2011, 23:47:00
wymyśliłem coś takiego:
[HTML] pobierz, plaintext 
  1. <html>
  2.   <head>
  3.     <title></title>
  4.   <style>
  5.     #left, #middle, #right
  6.     {
  7.     	height: 200px;
  8.     }
  9.     #middle
  10.     {
  11.     	width: 400px;
  12.         background-color: black;
  13.     }
  14.     #right
  15.     {
  16.         background-color: green;
  17.         width: 100%
  18.     }
  19.     #left
  20.     {
  21.     	float: left;
  22.         background-color: blue;
  23.         width: 50%;
  24.     }
  25.     #middle
  26.     {
  27.         float: right;
  28.         margin-right: -200px;
  29.     }
  30.   </style>
  31.   </head>
  32.   <body>
  33.     <div>
  34.       <div id="right">
  35.         <div id="left">
  36.               <div id="middle"></div>
  37.         </div>
  38.       </div>
  39.     </div>
  40.   </body>
  41. </html>
[HTML] pobierz, plaintext

w chrome działa.

Edit: z #left można usunąć float: left, bez tego też działa
Damonsson
6.03.2011, 00:00:47 
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html>
  3.   <head>
  4.     <title></title>
  5.   </head>
  6.   <body style="margin:0px">
  7.    <div style="width: 100%; position: relative; z-index: 1;">
  8.       <div style="float: left; height: 200px; width: 50%; background-color: rgb(255, 0, 0); position: relative; z-index: 1;"></div>
  9.  
  10.       <div style="float: left; height: 200px; width: 50%; background-color: rgb(0, 0, 255); position: relative; z-index: 1;"></div>
  11.     </div><div style="width: 400px; background-color: rgb(0, 255, 0); z-index: 100; height: 200px; position: relative; margin: 0pt auto;"></div>
  12.   </body>
  13. </html>
[HTML] pobierz, plaintext


Powinno być ok, ale sprawdź jeszcze.
aeaeae
6.03.2011, 14:14:22
Dzięki za obie odpowiedzi. Pod firefoxem i chrome wszystko działa tak jak chciałem, tylko że dla przykładu od krzywy36 nie będę mógł ustawić obrazkowego tła prawej strony (tego zielonego paska) tak, żeby w odpowiednim miejscu stykało się z środkowym.
Poza tym oba przykłady sypią się pod IE6:
-w przykładzie od krzywy36 środkowy pasek chowa się pod prawy div (ten 100%) i w efekcie widać z niego tylko 200px
-w przykładzie od Damonsson bloki są przesuwane na dół

Ogólnie to miałem nadzieję, że będzie się dało załatwić problem za pomocą float i width - w końcu to tylko trzy bloki obok siebie. sad.gif
Mogę prosić jeszcze o jakieś rozwiązania, tak żeby śmigały pod IE6?
krzywy36
6.03.2011, 14:17:44
po co wspierać trupa, odpuść sobie IE6, co do tła - zaraz coś wymyśle biggrin.gif
Damonsson
6.03.2011, 14:20:54
Liczba osób korzystających z IE6 mieści się w granicach błędu statystycznego, olej to. Po za tym powinieneś zrobić coś dla dobra ludzkości i tym bardziej wgrać stronę która rozjeżdża się pod IE6. Chyba, że masz nad sobą kata, który od Ciebie wymaga zgodności z IE6 wtedy masz problem.

Swoją drogą nie wiem co @krzywy36 pali, ale musi być dobre, w życiu bym nie wpadł na taki pomysł, ale jeśli działa to w porząsiu wink.gif

Rozwiązałbym pewnie Twój problem dla IE6, ale nie mam do niego żadnego dostępu, nawet nie ruszy na 64bit, a nie chcę mi się kombinować, żeby działało. Więc musisz czekać na jakiegoś dobrego samarytanina.
krzywy36
6.03.2011, 14:48:22
Nie mam pomysłu jak z tym tłem zrobić oO, konkretnie jak zrobić, żeby zawsze stykało się w odpowiednim miejscu z środkowym divem.
Bo o ile nawet w przykładzie Damonsson'a dla prawego diva nie będzie problemu (przesunie się tło o 200 px w prawo) to dla lewego diva nie wiem jak to zrobić biggrin.gif
aeaeae
6.03.2011, 14:56:20
http://www.kurshtml.boo.pl/css/pozycja,tlo.html
Wystarczy w lewym bloku ustawić żeby tło powtarzało się od prawej strony. wink.gif

edit: O! Teraz widzę, że mogę zastosować background-position: repeat-x; center top. Tylko czy uda mi się dopasować dokładnie pixele? Lecę sprawdzić. tongue.gif
krzywy36
6.03.2011, 15:05:37
ale tak czy siak musisz jakoś przesunąc tło 200 px w prawo albo w lewo żeby pasowało haha.gif
aeaeae
6.03.2011, 15:14:16
Na szczęście środkowy obrazek stworzyłem z dwóch teł. Tło ma 422px na 200px, a środkowy obrazek 844px na 200px. tongue.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.