Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> CSS - źle dokleja diva ze stopką
kristofer
post 21.10.2014, 13:32:37
Post #1





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 20.10.2014

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

Piszę właśnie swoją pierwszą stronkę w HTML/CSS. Mam problem ponieważ nie mogę ułożyć elementów na stronie: stopka wyświetla się pośrodku strony zamiast po ostatnim newsie. Gdy próbuję naprawić to najczęściej stopa wskakuje pod newsy ale kolumna druga wyswietla sie pod ostatnim newsem a nie u gory. Czy ktos moglby mi podpowiedziec, co robie nie tak?

index.html:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>TODO supply a title</title>
  5.         <meta charset="UTF-8">
  6.         <meta name="viewport" content="width=device-width">
  7.         <link rel="stylesheet" href="style.css" />
  8.         <link type="text/css" rel="stylesheet" href="http://fast.fonts.com/cssapi/7437551d-ab4b-4ece-bc20-f8956f5b84cd.css"/>
  9.     </head>
  10.     <body>
  11.         <div id="container">
  12.             <div id="nav">
  13.                 <a href="#" class="toplink">Home</a>|
  14.                 <a href="#" class="toplink">O mnie</a>|
  15.                 <a href="#" class="toplink">Projekty</a>|
  16.                 <a href="#" class="toplink">Kontakt</a>
  17.                 <div id="logobar">
  18.                     <div class="maincontainer">
  19.                         <div id="logo_left">SITENAME</div>
  20.                         <div id="logo_center"></div>
  21.                         <div id="logo_right">SLOGAN
  22.                         </div>
  23.                     </div>
  24.                 </div>
  25.             </div>
  26.  
  27.             <div id="main">
  28.                 <div id="col1">
  29.                     <div class="news">Post1</div>
  30.                     <div class="news">Post2</div>
  31.                     <div class="news">Post3</div>
  32.                     <div class="news">Post4</div>
  33.                     <div class="news">Post2</div>
  34.                     <div class="news">Post3</div>
  35.                     <div class="news">Post4</div>
  36.                     <div class="news">Post2</div>
  37.                     <div class="news">Post3</div>
  38.                     <div class="news">Post4</div>
  39.                 </div>
  40.                 <div id="col2">
  41.                     <div id="socialpanel"> Znajdziesz mnie:
  42.                         <img src='images/facebook.png' alt="Odwiedź mnie na Facebooku" />
  43.                         <img src='images/twitter.png' alt="Śledź mnie na Twitterze" />
  44.                     </div>
  45.                     <div id="loginpanel">Zaloguj:</div>
  46.                      <div id="newsletter">Newsletter:</div>
  47.                 </div>
  48.  
  49.             </div>
  50.  
  51.             <div id="footer"> 
  52.                 <div class="maincontainer">
  53.                     <div id="footer_left">
  54.                         <a href="#" class="footlink">Home</a>|
  55.                         <a href="#" class="footlink">O mnie</a>|
  56.                         <a href="#" class="footlink">Projekty</a>|
  57.                         <a href="#" class="footlink">Kontakt</a>
  58.                     </div>
  59.                     <div id="footer_right">2000-2014 &copy; SITENAME</div>
  60.                 </div>
  61.             </div>
  62.         </div>
  63.     </body>
  64. </html>
[HTML] pobierz, plaintext


style.css
[HTML] pobierz, plaintext 
  1. /*
  2. To change this license header, choose License Headers in Project Properties.
  3. To change this template file, choose Tools | Templates
  4. and open the template in the editor.
  5. */
  6. /* 
  7.     Created on : 2014-10-21, 10:29:26
  8.     Author     : krzysztof
  9. */
  10.  
  11. body {
  12.     background-color: #e0e0e0;
  13.     //background-image: url(images/ironpatern.png);
  14.     font-family: "HelveticaNeueW02-Thin";
  15. }
  16.  
  17. img {
  18.     alignment-adjust: right;
  19. }
  20.  
  21. #container {
  22.     width:100%;
  23. }
  24.  
  25. #nav {
  26.     background-color: white;
  27.     width: 100%;
  28.     padding: 15px 0 5px 0;
  29. }
  30.  
  31. #nav a:hover{
  32.     color: #0080ff;
  33.     text-decoration: none;
  34. }
  35.  
  36. .toplink {
  37.     color: grey;
  38.     padding: 0px 15px 0px 15px; 
  39.     text-decoration: none;
  40. }
  41.  
  42. #logobar {
  43.     background-color: #0080ff;
  44.     margin: 10px 0px 10px 0px;
  45.     padding: 0px 50px 0px 0px;
  46.     height: 100px;
  47.     line-height: 100px;
  48.     text-align: right;
  49.     vertical-align: middle;
  50.     font-size: 12;
  51. }
  52.  
  53. .maincontainer {
  54.     width: 900px;
  55.     margin-left: auto;
  56.     margin-right: auto;
  57. }
  58.  
  59. #logo_left {
  60.     width: 35%;
  61.     text-align: right;
  62.     margin-right: 10px;
  63.     color: #ffffff;
  64.     font-size: 24;
  65.     font-weight: bold;
  66.     float: left;
  67. }
  68.  
  69. #logo_center {
  70.     width: 1%;
  71.     border: solid 1px blue;
  72.     margin: 25px 0px 25px 0px;
  73.     padding: 49px 0px 0px 0px;
  74.     background-color: blue;
  75.     color: blue;
  76.     float: left;
  77. }
  78.  
  79. #logo_right {
  80.     width: 55%;
  81.     font-size: 14;
  82.     text-align: left;
  83.     margin-left: 10px;
  84.     letter-spacing: 2mm;
  85.     float: left;
  86. }
  87.  
  88. #main {
  89.     width: 900px;
  90.     margin-left: auto;
  91.     margin-right: auto;
  92.     float: inherit;
  93. }
  94.  
  95. #col1 {
  96.     width: 570px;
  97.     height: 500px;
  98.     float: left;
  99. }
  100.  
  101. #col2 {
  102.     background-color: #ffffff;
  103.     width: 230px;
  104.     padding: 15px 15px 0px 15px;
  105.     margin: 10px  auto;
  106.     float: right;
  107.     text-align: center;
  108. }
  109.  
  110. #socialpanel {
  111.     background-color: #e0e0e0;
  112.     color: #0080ff;
  113.     margin-bottom: 15px;
  114.     padding: 15px 15px 15px 15px;
  115.     text-transform: uppercase; 
  116. }
  117.  
  118. #loginpanel {
  119.     background-color: #000000;
  120.     color: #ffffff;
  121.     margin-bottom: 15px;
  122.     padding: 15px 15px 15px 15px;
  123.     text-transform: uppercase; 
  124. }
  125.  
  126. #newsletter {
  127.     background-color: blue;
  128.     color: #ffffff;
  129.     margin-bottom: 15px;
  130.     padding: 15px 15px 15px 15px;
  131.     font-weight: bold; 
  132. }
  133.  
  134. .news {
  135.     background-color: #ffffff;
  136.     width: 600px;
  137.     height: 150px;
  138.     margin: 10px auto;
  139.     padding: 15px 15px 15px 15px;
  140.     float: left;
  141. }
  142.  
  143. #footer {
  144.     width: 100%;
  145.     background-color: #0080ff;
  146.     color: #ffffff;
  147.     margin: 10px 0px 10px 0px;
  148.     padding: 15px 0px 15px 0px;
  149.     float: right;
  150. }
  151.  
  152. #footer_left {
  153.     text-align: left;
  154. }
  155.  
  156. #footer_right {
  157.     text-align: right;
  158.     font-size: 12px;
  159.     padding-right: 15px;
  160. }
  161.  
  162. #footer a:hover{
  163.     color: #e0e0e0;
  164.     text-decoration: none;
  165. }
  166.  
  167. .footlink {
  168.     color: #ffffff;
  169.     padding: 0px 15px 0px 15px; 
  170.     text-decoration: none;
  171. }
  172.  
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
viking
post 21.10.2014, 13:40:41
Post #2





Grupa: Zarejestrowani
Postów: 6 365
Pomógł: 1114
Dołączył: 30.08.2006

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

W col1 masz zdefiniowaną na sztywno wysokość 500px. Poza tym skoro dajesz float to gdzieś trzeba by wstawić clear.
I jeszcze dobrze kombinujesz z nazwami tylko jak spojrzysz w kod wszędzie są divy. #footer -> <footer>, #main -> <main>, #nav -> <nav>


--------------------
Odpowiedzi na często zadawane pytania:
Konfiguracja serwera Apache + PHP 7 pod Windows | Kodowanie znaków na stronach www | PHPTAL w Zend Framework | Programowanie obiektowe w PHP | PDO uniwersalnym sposobem na obsługę baz danych | Kurs PHP (część 1): Podstawowy opis języka
Go to the top of the page
+Quote Post
kristofer
post 21.10.2014, 14:32:20
Post #3





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 20.10.2014

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

A przez # nie oznaczało się przypadkiem id? Jak dobrze pamiętam to tak, od kropki nazwa kalsy a jak chcę zmienić wygląd np. <a> to pisze po prostu a { parametr: wartosc;}

Co do tej kolumny to pomogło usuniecie parametru height. Klilam pomógł.

I mam jeszcze jedno pytanie: co zrobiłem nie tak, że górny panel na urządzeniach moblnych wygląda fatalnie. Podgląd tutaj
Go to the top of the page
+Quote Post
viking
post 21.10.2014, 14:50:39
Post #4





Grupa: Zarejestrowani
Postów: 6 365
Pomógł: 1114
Dołączył: 30.08.2006

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

Chodzi o to że się nie zwęża? Masz podaną wartość 900px. Poczytaj o media queries https://developer.mozilla.org/en-US/docs/We...S/Media_queries

#id, .klasa - owszem ale to nie wymusza że coś musi być divem. Masz też więcej selektorów http://www.w3.org/TR/css3-selectors/#selectors

I masz jeszcze kilka razy font-size: 14; 14 czego?


--------------------
Odpowiedzi na często zadawane pytania:
Konfiguracja serwera Apache + PHP 7 pod Windows | Kodowanie znaków na stronach www | PHPTAL w Zend Framework | Programowanie obiektowe w PHP | PDO uniwersalnym sposobem na obsługę baz danych | Kurs PHP (część 1): Podstawowy opis języka
Go to the top of the page
+Quote Post
kristofer
post 21.10.2014, 15:06:47
Post #5





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 20.10.2014

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

Nie, celowo dałem na 900 żeby w każdej rozdziałce wyglądało tak samo. Górny logobar i footer kończą się w połowie ekranu. Podejrzewam ze to coś z #maincontainer. Dałbym screena ale nie mam roota w telefonie. Edit: Udało mi się zrobić zdjęcie starą nokią:

Chodzi o to, że słowo slogan wyjeżdza a powinno być jeszcze na niebieskim tle.
Na Chrome na PC i na tablecie jest OK, tylko na Chrome na Androidzie 4.3 tak dziwnie się zachowuje.

Ten post edytował kristofer 21.10.2014, 15:17:12
Go to the top of the page
+Quote Post
marcus753
post 21.10.2014, 16:48:51
Post #6





Grupa: Zarejestrowani
Postów: 281
Pomógł: 3
Dołączył: 8.06.2009
Skąd: Kraków

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

przy projektowaniu strony polecam korzystać z wspaniałej właściwości takiej jak "border:1px solid color" jak dodasz to do różnych divów to zobaczysz jak przeglądarka je renderuje / czyta

#logobar i .maincontainer ustaw sobie na 900px szerokość a do tego dodaj magiczny znacznich overflow:hidden <- dzięki niemu element nadrzędny poprawnie zinterpretuje szerokość znaczników z opływaniem które zawiera. Powinno być ok wink.gif

Ten post edytował marcus753 21.10.2014, 16:49:21


--------------------
Cokolwiek zostanie upuszczone na uklad elektroniczny, spadnie zawsze tam gdzie wyrzadzi najwiecej szkody.
Go to the top of the page
+Quote Post
« Następny starszy · HTML \ XHTML · 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: 27.04.2024 - 17:18
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn