Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS][HTML] problem z marginesami
o2w5n778
post 8.02.2012, 22:47:46
Post #1





Grupa: Zarejestrowani
Postów: 235
Pomógł: 0
Dołączył: 10.12.2009

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


Witam!
Mam oto taki kod:
HTML:
  1. <div id="header">
  2. <div id="hwrapper">
  3. header
  4. </div>
  5. </div>
  6.  
  7. <div id="main">
  8. <div id="content">
  9. tresc
  10. </div>
  11. <div id="sidebar">
  12. dsadsa
  13. </div>
  14. </div>
  15.  
  16. <div id="footer">
  17. stopka
  18. </div>

i CSS:
  1. #header{
  2. height: 100px;
  3. margin: -8px -8px 0 -8px;
  4. background: #ff9000;
  5. clear: both;
  6. }
  7.  
  8. #hwrapper{
  9. width: 900px;
  10. height: 100px;
  11. margin: auto;
  12. background-image: url(../images/banner.png);
  13. }
  14.  
  15. #main{
  16. width: 900px;
  17. margin: auto;
  18. clear: both;
  19. }
  20.  
  21. #content{
  22. width: 685px;
  23. margin: 0 15px 0 0;
  24. float: left;
  25. }
  26.  
  27. #sidebar{
  28. width: 200px;
  29. float: left;
  30. }
  31.  
  32. #footer{
  33. width: 894px;
  34. clear: both;
  35. font-family: Trajan Pro;
  36. font-size: 13px;
  37. text-align: center;
  38. margin:-top: 10px;
  39. border-top: 1px solid #e1e1e1;
  40. padding: 3px;
  41. }


Mój problem polega na tym że jeżeli w stopce ustawiam margin-top to nie chce mi zrobić odstępu od div'a main


--------------------
Go to the top of the page
+Quote Post
vonski
post 8.02.2012, 23:11:59
Post #2





Grupa: Zarejestrowani
Postów: 292
Pomógł: 89
Dołączył: 27.12.2006
Skąd: Warszawa

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


W tym CSS, którego wkleiłeś, w stylach #footer jest: margin:-top: 10px;
Poza tym dodaj sobie taką klasę:

  1. .clear {position:relative;clear:both;height:0px;overflow:hidden;}


i dodaj w kodzie HTML:

  1. <div id="main">
  2. <div id="content">
  3. ...
  4. </div>
  5. <div id="sidebar">
  6. ...
  7. </div>
  8. <div class="clear"></div>
  9. </div>
  10. <div id="footer">
  11. ...
  12. </div>


--------------------
Zend Certified Engineer | Microsoft Certified Professional: Programming in HTML5 with JavaScript & CSS3 | Blog
Go to the top of the page
+Quote Post

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

 



RSS Wersja Lo-Fi Aktualny czas: 18.07.2025 - 04:21