Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS][HTML] Jak ułożyć divy tak jak chcę? :<
Flapper
post
Post #1





Grupa: Zarejestrowani
Postów: 56
Pomógł: 0
Dołączył: 10.04.2007
Skąd: znienacka.

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

No właśnie próbowałem różnych metod ustawiania ale nijak mi nie wychodzi jak chcę...
Mam taki arkusz:
Kod
html, body {
    background-color: #000000;
    color: #18ff00;
    margin: 0;
    padding: 0;
    font-family: System, Terminal;
}

#top {
    width: 1007px;
}

#top1 {
    position: relative;
    float: left;
    background: url(images/1.gif);
    width: 194px;
    height: 216px;
    overflow: hidden;
}
#top2 {
    position: relative;
    background: url(images/2.gif);
    width: 588px;
    height: 216px;
    overflow: hidden;
}
#top3 {
    position: relative;
    background: url(images/3.gif);
    width: 225px;
    height: 716px;
    overflow: hidden;
}

#mid1 {
    position: relative;
    float: left;
    background: url(images/4.gif);
    width: 194px;
    height: 500px;
    overflow: hidden;
}

#mid2 {
    position: relative;
    background: url(images/5.gif);
    width: 588px;
    height: 500px;
    overflow: hidden;
}

#stopka {
    position: relative;
    background: url(images/6.gif);
    width: 1007px;
    height: 39px;
    overflow: hidden;
}


I chciałbym żeby wyglądało to mniej więcej tak:
top1 top2 top3
mid1 mid2 top3
stopka stopka

przy czym te podwójne top3 i stopki mają być pojedynczymi divami.
I nie mam pojęcia jak te divy poukładać w HTML'u i co im w stylu wpisać żeby się tak ułożyło.
Męczę to od wczoraj ale samemu mi się to chyba nie uda. (IMG:http://forum.php.pl/style_emoticons/default/sad.gif) Liczę na waszą pomoc, z góry dzięki.

Ten post edytował Flapper 27.04.2008, 21:27:28
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
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%)
-----

Może nie najlepszy sposób, ale na szybko pisane ;] no i chciałeś każdy div osobno:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <title>tytuł</title>
  4. <link rel="stylesheet" href="style.css" type="text/css">
  5. </head>
  6. <body>
  7. <div id="top1">top1</div>
  8. <div id="top2">top2</div>
  9. <div id="top3">top3</div>
  10. <div class="clear"></div>
  11. <div id="mid1">mid1</div>
  12. <div id="mid2">mid2</div>
  13. <div id="top3-2">top3-2</div>
  14. <div class="clear"></div>
  15. <div id="stopka1">stopka1</div>
  16. <div id="stopka2">stopka2</div>
  17. </body>
  18. </html>
[HTML] pobierz, plaintext


style.css
[HTML] pobierz, plaintext 
  1. #top1
  2. {
  3.     float: left;
  4. }
  5. #top2
  6. {
  7.     float: left;
  8. }
  9. #top3
  10. {
  11.     float: left;
  12. }
  13. #mid1
  14. {
  15.     float: left;
  16. }
  17. #mid2
  18. {
  19.     float: left;
  20. }
  21. #top3-2
  22. {
  23.     float: left;
  24. }
  25. #stopka1
  26. {
  27.     float: left;
  28. }
  29. #stopka2
  30. {
  31.     float: left;
  32. }
  33. .clear
  34. {
  35.     clear: both;
  36. }
[HTML] pobierz, plaintext


A jak chcesz ładniej to sobie zrób 3 nowe divy i pogrupuj odpowiednio: top1 top2 top3 - mid1 mid2 top3-2 - stopka1 stopka2 i wtedy bedzie Ci łatwiej to zrobić...

Ten post edytował krzywy36 28.04.2008, 08:26:23
Go to the top of the page
+Quote Post

Posty w temacie
- Flapper   [CSS][HTML] Jak ułożyć divy tak jak chcę? :<   27.04.2008, 18:56:28
- - krzywy36   Może nie najlepszy sposób, ale na szybko pisa...   28.04.2008, 08:23:42
- - Flapper   Tyle tylko że top3 i stopka napisałem dwa razy ze ...   28.04.2008, 15:30:45
- - batman   Wersja 1: [HTML] pobierz, plaintext <style> ...   28.04.2008, 17:18:35
- - Flapper   Dzięki wielkie. <;   28.04.2008, 19:52:04

« Następny starszy · Przedszkole · 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: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 8.10.2025 - 02:02
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn