Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS][HTML] Jak ułożyć divy tak jak chcę? :<
Flapper
post 27.04.2008, 18:56:28
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. 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
krzywy36
post 28.04.2008, 08:23:42
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


--------------------
pretty as a shit.
Go to the top of the page
+Quote Post
Flapper
post 28.04.2008, 15:30:45
Post #3





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

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

Tyle tylko że top3 i stopka napisałem dwa razy ze względu na rozmiar. <; to mają być pojedyncze divy.
Go to the top of the page
+Quote Post
batman
post 28.04.2008, 17:18:35
Post #4





Grupa: Moderatorzy
Postów: 2 921
Pomógł: 269
Dołączył: 11.08.2005
Skąd: 127.0.0.1
Wersja 1:
[HTML] pobierz, plaintext 
  1. <style>
  2.   #main div {
  3.     border: 1px solid red;
  4.   }
  5.  
  6.   #center, #right {
  7.     float: left;
  8.   }
  9.  
  10.   #footer {
  11.     clear: left;
  12.   }
  13. </style>
  14.  
  15.     <div id="main">
  16.         <div id="center">
  17.             <div id="top">aaaaa</div>
  18.             <div id="middle">bbbbb</div>
  19.         </div>
  20.         <div id="right">ccccc</div>
  21.         <div id="footer">ddddd</div>
  22.     </div>
[HTML] pobierz, plaintext


Wersja 2:
Ten sam kod HTML.
[HTML] pobierz, plaintext 
  1. <style>
  2.   <style>
  3.   #main div {
  4.     border: 1px solid red;
  5.   }
  6.  
  7.   #center {
  8.     float: left;
  9.     width: 500px;
  10.   }
  11.  
  12.   #main #right {
  13.     margin-left: 500px;
  14.   }
  15.  
  16.   #footer {
  17.     clear: left;
  18.   }
  19.   </style>
  20. </style>
[HTML] pobierz, plaintext


Oczywiście musisz usunąć obramowanie oraz ustawić odpowiednią szerokość div-ów.
A jeśli chcesz uzyskać efekt, że div "top3" będzie rozszerzał się razem z div-ami "top" i "middle", to napisz. Coś się wymyśli winksmiley.jpg


--------------------
I would love to change the world, but they won't give me the source code.
My software never has bugs. It just develops random features.
Go to the top of the page
+Quote Post
Flapper
post 28.04.2008, 19:52:04
Post #5





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

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

Dzięki wielkie. <;
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

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

RSS Wersja Lo-Fi Aktualny czas: 19.07.2025 - 08:59
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn