+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: [CSS]div i img obok siebie (/thread-css-div-i-img-obok-siebie)
[CSS]div i img obok siebie - aaa - 06-03-2011
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.
Kod:
<div style="width:100%">
<div style="width:auto;float:left;background-image:url(eee1.png)"></div>
<img src="obrazek.png" style="float:left" />
<div style="width:auto;float:left;background-image:url(eee2.png)"></div>
</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.
RE: [CSS]div i img obok siebie - Kartofelek - 06-03-2011
a po co ci takie ustalanie?
Źle podchodzisz do sprawy i żądasz by tak się dało. Ale to po prostu złe podejście.
Właśnie margin auto byłby tutaj właściwy, a nie kombinowanie na siłę.
Dla nadrzędnego dajesz centrowany background, środkowy div dajesz wycentrowany względem nadrzeenego.
I zyskujesz tym to, że zamiast 3 obrazków masz 2 obrazki (mniej requestów = szybkość).
Jeżeli coś tam ma się jeszcze rozciągać w bok, zawsze możesz wykorzystać body lub jeszcze nadrzędny div.
Jeżeli jednak użyłeś właściwego słowa i naprawdę chodzi ci o "kurczenie", wtedy możesz wykorzystać do tego jQuery, albo wykorzystać procentowe szerokości.
Ps. width:auto służy do czegoś innego