Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

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

  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>


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
 
Start new topic
Odpowiedzi
aeaeae
post
Post #2





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:

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


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.

  1. <head>
  2. </head>
  3. <body style="margin:0px">
  4. <div style="width:100%">
  5. <div style="float:left;height:200px;width:33%;background-color:#FF0000"></div>
  6. <div style="float:left;height:200px;width:34%;background-color:#00FF00"></div>
  7. <div style="float:left;height:200px;width:33%;background-color:#0000FF"></div>
  8. </div>
  9. </body>
  10. </html>


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

Posty w temacie


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

 



RSS Aktualny czas: 6.10.2025 - 11:10