Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Dwa paski obok siebie
Forum PHP.pl > Forum > Przedszkole
david8213
30.05.2019, 14:01:06
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

[XML] pobierz, plaintext 
  1. <style>
  2.  
  3. body {
  4.   margin: 0;
  5.   font-family: Arial, Helvetica, sans-serif;
  6. }
  7.  
  8. .topnav {
  9.  // overflow: hidden;
  10.   background-color: #333;
  11.   border: 0px solid red;
  12. }
  13.  
  14.  
  15. .pasek_left {
  16. float: left;
  17.   width: 30px;
  18.   height: 40px;
  19.   z-index: 1;
  20.   top: 0;
  21.   left: 0;
  22.   background-color: #DCDCDC;
  23.   transition: 0.5s;
  24.   padding-top: 1px;
  25.  
  26. }
  27.  
  28. .pasek_right {
  29. float: right;
  30.   width: 90%;
  31.   height: 40px;
  32.   z-index: 1;
  33.   top: 0;
  34.   left: 0;
  35.   background-color: red;
  36.   transition: 0.5s;
  37.   padding-top: 1px;
  38.  
  39. }
  40.  
  41. </style>
  42.  
  43. <body>
  44.  
  45. <div class="topnav">
  46.  
  47.  
  48.  <div class="pasek_left">
  49.  
  50. </div>
  51.  
  52.  <div class="pasek_right">
  53.  
  54. </div>
  55.  
  56.  
  57. </div>
  58.  
  59.  
  60. </body>
  61.  
  62.  
[XML] pobierz, plaintext


LINK Kliknij EDYTOR
Neutral
30.05.2019, 14:20:17
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/
trueblue
30.05.2019, 14:43:38
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?
david8213
30.05.2019, 14:43:55
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>
*/
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.