Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów
Rozjeżdżające się divy - Wersja do druku

+- 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ł: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: Rozjeżdżające się divy (/thread-rozjezdzajace-sie-divy)

Rozjeżdżające się divy - krokodajl - 06-05-2010

Witam,

mam problem z rozjeżdżającymi się divami. Muszę stworzyć mini projekt jednak utknąłem na tworzeniu diva, na którym będę wyświetlać informacje o produkcie. Div taki ma wyglądać następująco:
[Obrazek: div.png]

Muszę to zrobić koniecznie na divach i css, ale zawsze jest coś nie tak.
Poproszę o wskazówki...

pozdrawiam

RE: Rozjeżdżające się divy - razorskate - 06-05-2010

Poczytaj sobie troszkę o float w CSS Wink Całość można by zamknąć w jednym divie obejmującym wszystko i nadać pływanie dla elementów, a szerokość ustawiać procentowo Smile
Pozdrawiam

RE: Rozjeżdżające się divy - krokodajl - 06-05-2010

(06-05-2010, 03:40)razorskate napisał(a): Poczytaj sobie troszkę o float w CSS Wink Całość można by zamknąć w jednym divie obejmującym wszystko i nadać pływanie dla elementów, a szerokość ustawiać procentowo Smile

Kod:
<html>
<head><title>tst</title></head>
<body>
    <div style="min-width: 400px; background-color:lime;">
        <div style="width: 30%; background-color:red; float:left;">
            img
        </div>
        <div style="width:70%px; background-color: gray; float:right;">
            <div style="width:100%; background-color:brown;">
                tytuł
            </div>
            <div style="width:100%; background-color:brown;">
                opis
            </div>
            <div style="width:100%; background-color:brown;">
                <div style="float:left; width: 50%; background-color: blue;">
                    cena
                </div>
                <div style="float: right; width:50%; background-color: aqua;">
                    cos tam
                </div>
            </div>
        </div>
    </div>
</body>
</html>

niestety, ciągle się rozjeżdża

RE: Rozjeżdżające się divy - Haden - 07-05-2010

A nie mogłaś zrobić osobnego .cssa ? A nie robić w taki sposób ? No ale każdy robi jak chce Smile. Dla mnie sprawa prosta ino nie mam jak Ci tego zrobić. Ale ja bym to zrobił tak

Jeden duży <div> w nim <div left> i <div right>. W <div left> dać obrazek a w div right 4 divy w tym <div ilość z położeniem na lewo> a <div coś tam z położeniem na prawo> No i będzie wszystko ok.

Tylko nie pisz tak jak ja <div left> itd Tongue.

Pozdrawiam

RE: Rozjeżdżające się divy - razorskate - 07-05-2010

Proszę, powinno działać Wink
Kod:
<html>
<head><title>tst</title>
<style type="text/css">
/* <![CDATA[ */
* { margin: 5px; text-align:center;}
.cena_costam {width:100%; background-color:brown;}
.cena_costam div {display:inline;}
/* ]]> */
</style>
</head>
<body>
    <div style="min-width: 400px; width:100% background-color:lime;">
        <div style="width: 30%; height:116px; background-color:red; float:left;">
            img
        </div>
        <div style="width:70%px; background-color: gray; float:right;">
            <div style="width:100%; background-color:brown;">
                nazwa
            </div>
            <div style="width:100%; background-color:brown;">
                opis
            </div>
            <div class="cena_costam">
                <div style="float:left; width: 49%; background-color: blue;">
                    cena
                </div>
                <div style="float: right; width:49%; background-color: aqua;">
                    cos tam
                </div>
            </div>
        </div>
    </div>
</body>
</html>