Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS]Problem z divem jednym pod drugim i height
degistivepl
post 5.04.2018, 14:05:43
Post #1





Grupa: Zarejestrowani
Postów: 13
Pomógł: 0
Dołączył: 5.04.2018

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

Cześć mam problem z elementami jeden pod drugim w CSS. 
[CSS] pobierz, plaintext 
  1. body {
  2.     margin: 0;
  3.     padding: 0;
  4.     font-family: sans-serif;
  5. }
  6. header {
  7.     background-color: red;
  8.     text-align: center;
  9.     padding: 20px;
  10.     width: 100%; 
  11. }
  12. aside {
  13.     background-color: #3b3b3b;
  14.     width: 200px;
  15.     position: absolute;
  16.     height: 100%;  
  17.  
  18. }
[CSS] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1. <body>
  2.         <header> 
  3.             <a href="#" class="link"><i class="fa fa-reorder"></i>Zamówienia</a>
  4.             <a href="#" class="link"><i class="fa fa-home"></i>Strona główna</a> 
  5.         </header>
  6.         <aside>
  7.         </aside>
  8.         <main> 
  9.         </main>
  10.         <footer>
  11.  
  12.         </footer>
  13.     </body>
[HTML] pobierz, plaintext

Problem w tym, że dodaje mi suwak na długość elementu header i nie potrafię sobie z tym poradzić.
Go to the top of the page
+Quote Post
leonpro778
post 5.04.2018, 14:15:54
Post #2





Grupa: Zarejestrowani
Postów: 146
Pomógł: 19
Dołączył: 1.03.2012

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

Problem jest w padding. Nie możesz sobie ustawiać ot tak sobie paddingu w px a szerokość w %. Zmień header na:

[CSS] pobierz, plaintext 
  1. header {
  2.     background-color: red;
  3.     text-align: center;
  4.     padding: 20px;
  5.     display: block;
  6. }
[CSS] pobierz, plaintext


Ten post edytował leonpro778 5.04.2018, 14:59:33
Go to the top of the page
+Quote Post
degistivepl
post 5.04.2018, 14:20:38
Post #3





Grupa: Zarejestrowani
Postów: 13
Pomógł: 0
Dołączył: 5.04.2018

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

Usunęło dolny suwak, ten z boku nadal jest.
Go to the top of the page
+Quote Post
trueblue
post 5.04.2018, 14:39:28
Post #4





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

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

<aside> ma 100% wysokości. Więc razem z <header> mają więcej.


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
degistivepl
post 5.04.2018, 14:42:02
Post #5





Grupa: Zarejestrowani
Postów: 13
Pomógł: 0
Dołączył: 5.04.2018

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

Wiem o tym, ale jak to zrobić z tym paddingiem w header.
Go to the top of the page
+Quote Post
trueblue
post 5.04.2018, 14:43:23
Post #6





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

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

A jaki chcesz efekt osiągnąć?


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
degistivepl
post 5.04.2018, 14:47:34
Post #7





Grupa: Zarejestrowani
Postów: 13
Pomógł: 0
Dołączył: 5.04.2018

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

No żeby nie dodawało suwaka po boku jeśli mam ten header i aside oraz żeby aside było do końca strony (tak jak height 100%).
Go to the top of the page
+Quote Post
trueblue
post 5.04.2018, 14:53:11
Post #8





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

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

Ale jeśli treści w <aside> lub <main> będzie dużo to ma być suwak, tak? Jeśli tak, to poszukaj w Google pod hasłem: sticky footer.


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
leonpro778
post 5.04.2018, 14:59:02
Post #9





Grupa: Zarejestrowani
Postów: 146
Pomógł: 19
Dołączył: 1.03.2012

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

Cytat(degistivepl @ 5.04.2018, 15:05:43 ) *
Problem w tym, że dodaje mi suwak na długość elementu header i nie potrafię sobie z tym poradzić.

Pisałeś tylko o header. Co do bocznego paska to:

[CSS] pobierz, plaintext 
  1. aside {
  2.     background-color: #3b3b3b;
  3.     width: 200px;
  4.     height: 100%;
  5. 	position: fixed;
  6. }
[CSS] pobierz, plaintext


P.s. Osobiście nadal nie wiem jaki ma być efekt końcowy smile.gif
Go to the top of the page
+Quote Post
degistivepl
post 5.04.2018, 15:22:37
Post #10





Grupa: Zarejestrowani
Postów: 13
Pomógł: 0
Dołączył: 5.04.2018

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

Chodzi o to, że chce u góry strony menu (header) i pod nim z lewej strony menu (aside) i żeby aside był do końca strony (tak jakby 100%) ale bez suwaków.
Go to the top of the page
+Quote Post
leonpro778
post 5.04.2018, 15:29:49
Post #11





Grupa: Zarejestrowani
Postów: 146
Pomógł: 19
Dołączył: 1.03.2012

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

Zmieniłeś aside na fixed?
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 - 15:33
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn