Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS]div i img obok siebie
aeaeae
post
Post #1





Grupa: Zarejestrowani
Postów: 117
Pomógł: 23
Dołączył: 5.03.2011

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

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.
Go to the top of the page
+Quote Post
krzywy36
post
Post #2





Grupa: Zarejestrowani
Postów: 370
Pomógł: 43
Dołączył: 1.12.2007
Skąd: Kędzierzyn Koźle

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

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ć?
Go to the top of the page
+Quote Post
aeaeae
post
Post #3





Grupa: Zarejestrowani
Postów: 117
Pomógł: 23
Dołączył: 5.03.2011

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

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 :/).
Go to the top of the page
+Quote Post
krzywy36
post
Post #4





Grupa: Zarejestrowani
Postów: 370
Pomógł: 43
Dołączył: 1.12.2007
Skąd: Kędzierzyn Koźle

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

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ż).

Ten post edytował krzywy36 5.03.2011, 22:56:43
Go to the top of the page
+Quote Post
aeaeae
post
Post #5





Grupa: Zarejestrowani
Postów: 117
Pomógł: 23
Dołączył: 5.03.2011

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

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


Ten post edytował aeaeae 5.03.2011, 23:32:35
Go to the top of the page
+Quote Post
krzywy36
post
Post #6





Grupa: Zarejestrowani
Postów: 370
Pomógł: 43
Dołączył: 1.12.2007
Skąd: Kędzierzyn Koźle

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

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

Ten post edytował krzywy36 5.03.2011, 23:50:19
Go to the top of the page
+Quote Post
Damonsson
post
Post #7





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

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

[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.

Ten post edytował Damonsson 6.03.2011, 00:05:58
Go to the top of the page
+Quote Post
aeaeae
post
Post #8





Grupa: Zarejestrowani
Postów: 117
Pomógł: 23
Dołączył: 5.03.2011

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

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. (IMG:style_emoticons/default/sad.gif)
Mogę prosić jeszcze o jakieś rozwiązania, tak żeby śmigały pod IE6?
Go to the top of the page
+Quote Post
krzywy36
post
Post #9





Grupa: Zarejestrowani
Postów: 370
Pomógł: 43
Dołączył: 1.12.2007
Skąd: Kędzierzyn Koźle

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

po co wspierać trupa, odpuść sobie IE6, co do tła - zaraz coś wymyśle (IMG:style_emoticons/default/biggrin.gif)
Go to the top of the page
+Quote Post
Damonsson
post
Post #10





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

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

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 (IMG:style_emoticons/default/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.
Go to the top of the page
+Quote Post
krzywy36
post
Post #11





Grupa: Zarejestrowani
Postów: 370
Pomógł: 43
Dołączył: 1.12.2007
Skąd: Kędzierzyn Koźle

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

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ć (IMG:style_emoticons/default/biggrin.gif)
Go to the top of the page
+Quote Post
aeaeae
post
Post #12





Grupa: Zarejestrowani
Postów: 117
Pomógł: 23
Dołączył: 5.03.2011

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

http://www.kurshtml.boo.pl/css/pozycja,tlo.html
Wystarczy w lewym bloku ustawić żeby tło powtarzało się od prawej strony. (IMG:style_emoticons/default/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ć. (IMG:style_emoticons/default/tongue.gif)

Ten post edytował aeaeae 6.03.2011, 15:09:14
Go to the top of the page
+Quote Post
krzywy36
post
Post #13





Grupa: Zarejestrowani
Postów: 370
Pomógł: 43
Dołączył: 1.12.2007
Skąd: Kędzierzyn Koźle

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

ale tak czy siak musisz jakoś przesunąc tło 200 px w prawo albo w lewo żeby pasowało (IMG:style_emoticons/default/haha.gif)
Go to the top of the page
+Quote Post
aeaeae
post
Post #14





Grupa: Zarejestrowani
Postów: 117
Pomógł: 23
Dołączył: 5.03.2011

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

Na szczęście środkowy obrazek stworzyłem z dwóch teł. Tło ma 422px na 200px, a środkowy obrazek 844px na 200px. (IMG:style_emoticons/default/tongue.gif)
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 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 Aktualny czas: 25.08.2025 - 12:21
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn