 [CSS] Dwa paski obok siebie |
  |
| [CSS] Dwa paski obok siebie |
 30.05.2019, 14:01:06
Post
#1
|
|
|
Grupa: Zarejestrowani Postów: 308 Pomógł: 0 Dołączył: 9.12.2009 Ostrzeżenie: (10%) 
 |
Jak zrobic aby czerwony pasek wypełnił pole w 100% obok szarego bez pustej przestrzeni. Oczywiście ma być wypełniony w zalezności od rozmiaru strony.
Ten po lewej ma mieć stałą wartośc a ten po prawej w zalezności od rozdzielczości
LINK Kliknij EDYTOR Ten post edytował david8213 30.05.2019, 14:02:05 |
 |
 
|
|
30.05.2019, 14:20:17
Post
#2
|
|
|
Grupa: Zarejestrowani Postów: 286 Pomógł: 46 Dołączył: 10.01.2016 Ostrzeżenie: (0%) 
|
Kod .pasek_right { float: right; width: calc(100% - 30px); /* ... */ } Pamiętaj, że wszystko w calc pomiędzy nawiasami, te znaki "+", "-" muszą być oddzielone spacją, taka gramatyka. Cytat: Cytat The + and - operators must be surrounded by whitespace. For instance, calc(50% -8px) will be parsed as a percentage followed by a negative length ? an invalid expression ? while calc(50% - 8px) is a percentage followed by a subtraction operator and a length. Likewise, calc(8px + -50%) is treated as a length followed by an addition operator and a negative percentage. The * and / operators do not require whitespace, but adding it for consistency is both allowed and recommended. https://developer.mozilla.org/en-US/docs/Web/CSS/calc Staraj się nie korzystać z W3Schools, dlaczego - przeczytaj: https://forum.pasja-informatyki.pl/34559/w3...ywej-propagandy https://www.webkrytyk.pl/2017/10/29/w3schools-com/ Ten post edytował Neutral 30.05.2019, 14:28:52 |
|
|
|
|
30.05.2019, 14:43:38
Post
#3
|
|
|
Grupa: Zarejestrowani Postów: 6 762 Pomógł: 1822 Dołączył: 11.03.2014 Ostrzeżenie: (0%)
|
https://jsfiddle.net/goqv792u/
1. Komentarze w CSS obejmuje się /* */. 2. left i top dla pozycjonowania statycznego są zupełnie niepotrzebne. 3. border: 0px solid red - to tylko chwilowe? -------------------- |
|
|
|
|
30.05.2019, 14:43:55
Post
#4
|
|
|
Grupa: Zarejestrowani Postów: 308 Pomógł: 0 Dołączył: 9.12.2009 Ostrzeżenie: (10%)
|
Super. Dziękuję
/* <style> body { margin: 0; font-family: Arial, Helvetica, sans-serif; } .topnav { width: 100%; // overflow: hidden; background-color: #333; border: 0px solid red; } .pasek_left { float: left; width: 80px; height: 40px; z-index: 1; top: 0; left: 0; background-color: #DCDCDC; transition: 0.5s; padding-top: 1px; } .pasek_right { float: right; width: calc(100% - 80px); height: 40px; z-index: 1; top: 0; left: 0; background-color: red; transition: 0.5s; padding-top: 1px; } </style> <body> <div class="topnav"> <div class="pasek_left"> </div> <div class="pasek_right"> </div> </div> </body> */ Ten post edytował david8213 30.05.2019, 14:45:25 |
|
|
|
|
|
Wersja Lo-Fi | Aktualny czas: 8.05.2024 - 20:24 |
