Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS] DIV problem z tłami, Dwa tła na jednej stronie, działa tylko jedno ;/
d0m1n1k_
post
Post #1





Grupa: Zarejestrowani
Postów: 208
Pomógł: 3
Dołączył: 13.07.2009
Skąd: Tarnów

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

Cześć wszystkim!

Sprawa wygląda tak, że zaczynam przechodzić (jak zaraz zobaczycie, bardzo opornie) z tabel do divów
Chce zrobić takie "cuś":

Tzn. dwa tła.
czerwone gorne ma być np. obrazkiem tlo1.jpg
czerwone dolne z kolei np. obrazkiem tlo2.jpg albo kolorem
Jak mam zrobić żeby to działało.
Udaje mi się zrobić żeby góra działała sama,
tak wyglada styl i wyglad:
[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2.  
  3. body {
  4. 	margin-left: 00px;
  5. 	margin-top: 0px;
  6. 	margin-right: 0px;
  7. 	margin-bottom: 0px;
  8. }
  9.  
  10. #body {
  11.       width: 100%;
  12.       height: 120px;
  13.       background-color:  #0000ff;
  14. }
  15.  
  16. #column {
  17.       width: 1000px;
  18.       margin: 0 auto 0 auto;
  19. }
  20.  
  21. #column-left {
  22.       width: 650px;
  23.       float: left;
  24.       font-size: 1.3em;
  25.       font-weight: bold;
  26.       color: #ffffff;
  27. 	  background-color:  #00FF33;
  28. }
  29.  
  30. #column-right {
  31.       width: 350px;
  32.       float: left;
  33.       font-size: 1.3em;
  34.       font-weight: bold;
  35.       color: #ffffff;
  36. 	  background-color: #990000;
  37. }
  38.  
  39. #stopka {
  40. 	  background: #0000FF;
  41. 	  height: 100px;
  42. 	  width: 100%;
  43. 	  clear: both;
  44.  
  45. }
  46. </style>
  47. <div id="body">
  48. <div id="column">
  49. <div id="column-left">
  50. Tytuł
  51. </div>
  52. <div id="column-right">
  53. tekst
  54.   <br>
  55.   <br>
  56.   <br>
  57.   <br>
  58.   <br>
  59.   <br>
  60.   <br>
  61.   <br>
  62.   <br>
  63.   <br>
  64.   <br>
  65.   <br>
  66. </div>
  67. <div id="stopka">
  68. asdasd
  69. </div>
[HTML] pobierz, plaintext


Czemu nie chce mi to zadziałać w stopce tak jak to robi na górze w body?!
Co robie źle?!


--------------------
Prywatna koncepcja pasji - SprawdzAuto.info
Go to the top of the page
+Quote Post
pedro84
post
Post #2





Grupa: Nieautoryzowani
Postów: 2 249
Pomógł: 305
Dołączył: 2.10.2006

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

Poczytaj najpierw o CSS, bo robisz syfek straszny. Raz stosujesz:
Kod
#
margin-left: 00px;
#
margin-top: 0px;
#
margin-right: 0px;
#
margin-bottom: 0px;

innym razem:
Kod
margin:0 auto 0 auto

Z drugiej strony, DRY. Pamiętaj:
Kod
// Można tak
margin:0 auto 0 auto;

// Ale tak lepiej jeśli nie ustawiasz dla góry/dołu marginesu. Tak samo z paddingiem.
margin:0 auto


Masz nie zamknięte divy body i column (swoją drogą głupia konwencja nazewnictwa). W dodatku nie widzę, żadnego diva topu strony (header, top, etc.).

Czemu nie zrobisz tego jakoś po ludzku?
Kod
<div id="header-wrap">
  <div id="header"><!-- TUTAJ TE CZERWONE TŁO</div>
</div>


I analogicznie w stopce:
Kod
<div id="footer-wrap">
  <div id="footer"><!-- TUTAJ TE CZERWONE TŁO</div>
</div>



--------------------
Google knows the answer...
Go to the top of the page
+Quote Post
d0m1n1k_
post
Post #3





Grupa: Zarejestrowani
Postów: 208
Pomógł: 3
Dołączył: 13.07.2009
Skąd: Tarnów

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

Nie wiem...
Ja już się pogubiłem.
Nie mogę się w ogóle przestawić na divy...
Jak na razie dla mnie to czarna magia ;/

Inaczej napisze.
Jak zrobić jednokolumnową stronę składającą się z trzech "wierszy", header, tresc strony i footer w divach. tak zeby tło było rozciągane na całą szerokość okna przeglądarki?
Dobry przykład (który mi się swoją drogą bardzo podoba) macie tu: LINK


--------------------
Prywatna koncepcja pasji - SprawdzAuto.info
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #4





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

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

może to ci się przyda
Kod
<style type="text/css">


body {
height: 100px;
margin: 0;
background: #fff url(body.png) repeat-x;
}

#header {
width: 1000px;
height: 100px;
background: #ff0000;
margin: 0 auto;
}

#column {
width: 1000px;
height: 800px;
margin: 0 auto;
border: 1px solid #3399ff;
}

#column-left {
width: 300px;
float: left;
}

#column-right {
width: 700px;
float: left;
}

#footer-tlo {
height: 100px;
background: #3399ff url(twojobrazek.png) repeat-x;
}

#footer {
width: 1000px;
height: 30px;
margin: 0 auto;
background: #fff;
border: 1px solid #3399ff;
}
</style>

<div id="header">
Twoje logo
</div>
<div id="column">
<div id="column-left">
lewa kolumna
</div>
<div id="column-right">
Prawa kolumna
</div>
         </div>
<div id="footer-tlo">
<div id="footer">
twoja stopka
</div>


Ten post edytował krzysztof_kf 17.03.2010, 17:04:45
Go to the top of the page
+Quote Post
d0m1n1k_
post
Post #5





Grupa: Zarejestrowani
Postów: 208
Pomógł: 3
Dołączył: 13.07.2009
Skąd: Tarnów

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

Dzięki.
Przydało się co nieco.
Ale chyba najbardziej przydało się to, że DIV'y zacząłem powoli łapać - nie mylić ze zdaniem "Zrozumiałem i załapałem w 100%" haha.gif
Temat można chyba zamknąć i do archiwum przenieść smile.gif


--------------------
Prywatna koncepcja pasji - SprawdzAuto.info
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · 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 Aktualny czas: 21.08.2025 - 09:53
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn