Ustawienie pozycji i szerokości divów na dole strony

2014-06-10 21:57
0

Witam dopiero zaczynam programowanie więc prosze o wyrozumiałość otóż chciałem uzyskać taki efekt jak w załączniku lecz nie moge sobie poradzić z divami które chce ustawić na dole.
Czy ktos mógłby mi pomóc podać odpowiednie wymiary aby uzyskać efekt jak w zalączniku?
Poniżej moja praca

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>...</title>
  </head>
  <body>
    <div id="top">
    <div style="width:300px;height:500px;background:red;float:left"></div>
    <div style="width:500px;height:400px;background:blue;float:left"></div>
    <div style="width:300px;height:600px;background:yellow;float:right"></div>
    <div style="width:163px;height:300px;background:green;float:right"></div>
    <div style="width:300px;height:400px;background:black;float:left"></div>

    </div>
  </body>
</html>
edytowany 1x, ostatnio: olesio, 2014-06-10 22:59

Pozostało 580 znaków

2014-06-11 00:36
0

Nie wiem czy to poprawne, ale zrobiłbym to mniej więcej tak:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>...</title>
  </head>
  <body>
    <div style="width: 800px; height: 800px;">
      <div style="float: left; width: 400px; height: 800px;">
        <div style="float: left; width: 200px; height: 800px;">
          <div style="width: 200px; height: 500px; background-color: yellow;"></div>
          <div style="width: 200px; height: 300px; background-color: green;"></div>
        </div>
        <div style="float: right; width: 200px; height: 800px;">
          <div style="width: 200px; height: 450px; background-color: red;"></div>
          <div style="width: 200px; height: 350px; background-color: blue;"></div>
        </div>
      </div>
      <div style="float: right; width: 400px; height: 800px;">
        <div style="float: left; width: 200px; height: 800px;">
          <div style="width: 200px; height: 100px; background-color: black;"></div>
          <div style="width: 200px; height: 700px; background-color: pink;"></div>
        </div>
        <div style="float: right; width: 200px; height: 800px;">
          <div style="width: 200px; height: 650px; background-color: gray"></div>
          <div style="width: 200px; height: 150px; background-color: violet"></div>
        </div>
      </div>
    </div>
  </body>
</html>

Czyli pogrupowałbym sobie wszystkie kolumny (a jest ich cztery) i w każdej zrobił po dwa divy - górny i dolny, o odpowiednich rozmiarach; Miniaturka rezultatu:

site.png

Ewentualnie dostosuj rozmiar divów do Twoich potrzeb - zamiast na sztywno wpisywać ilość pikseli, wypada skorzystać z procentowych proporcji.


edytowany 3x, ostatnio: furious programming, 2014-06-11 00:38
Pokaż pozostałe 2 komentarze
Lepiej napiszcie czy podałem dobre rozwiązanie :P - furious programming 2014-06-12 14:40
niee no, po takim masterrro to nie odwaze sie dodac jakakolwiek uwage ;) (nawet te oczojebne inline style mi juz sie podoba :P:P) - szalonyfacet 2014-06-12 15:13
Ja bym wolał dorzucić CSS, ale chyba tego nie mogą zrobić; A tak poza tym to wcale nie wymiatam w HTML czy CSS :P - furious programming 2014-06-12 15:15
ale przeciez dorzuciles css, Tobie chyba chodzi o zewnetrzny arkusz styli(-ow). ja bym wrzucil zewnetrzny i zebral pochwaly od nauczyciela za wybitne osiagniecie :D:D:D - szalonyfacet 2014-06-12 15:51
Niekoniecznie zewnętrzny, w każdym razie można by skorzystać z klas, zapisując je w tym samym pliku, lub w zewnętrznym .css - tym by uszczęśliwił prowadzącego ;) - furious programming 2014-06-12 15:56

Pozostało 580 znaków

Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0