Gość utworzono 31 maja 2023 utworzono 31 maja 2023 Napotkałem się na problem gdzie <div>div</div> #right-navbar jest umieszczony w elemencie o większej wysokości niż jego domyślna a dając mu width: 100% jego wysokość się nie zmniejsza. PS: czemu position: absolute; umieszcza element wzg. ekranu a nie strony, czy mogę zrobić żeby element był po prawej stronie poza widoczną częścią strony bez floatów i za pomocą position: absolute; ? kodziki: (html) <!Doctype html> <html lang="pl-PL"> <head> <meta charset="UTF-8"> <title>Dom Projektu</title> <link rel="stylesheet" type="text/css" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="content"> <div id="topbar"> <div id="title"> <img src="img/tech/js.png"><div yellow>Javascript</div> </div> </div> <div id="navbar"> <span vscblue>Technologie Webowe</span> <div> <img src="img/tech/java_script.png"><a href="java.html" vscorange>Java</a> </div> <div> <img src="img/tech/php.png"><a href="php.html" vscblue>PHP</a> </div> <div> <img src="img/tech/nodejs.png"><a href="nodejs.html" vscgreen>Node.js</a> </div> <div> <img src="img/tech/python.png"><a href="python.html" vscblue><span cyellow>Py</span>thon</a> </div> <div> <img src="img/tech/angular.png"><a href="angular.html" red>Angular</a> </div> <div> <img src="img/tech/react.png"><a href="react.html" vsclblue>React</a> </div> <div> <img src="img/tech/jquery.png"><a href="jquery.html" vscblue>jQuery</a> </div> <div> <img src="img/tech/bootstrap.png"><a href="bootstrap.html" cpurple>Bootstrap</a> </div> <div> <img src="img/tech/js.png"><a href="js.html" yellow>Javascript</a> </div> <div> <img src="img/tech/html.png"><a href="html.html" orange>Html</a> </div> <div> <img src="img/tech/css.png"><a href="css.html" vscblue>Css</a> </div> </div> <!int ><main><! (int argc, char* args[])> <div embed="clear" style="--bgc: yellow; --txtc: lightgrey;"> <div lang-ico style="--color: yellow; --img: url('img/tech/js.png')"></div> <span vsclblue>Javascript</span> - język skryptowy interpretowany po stronie przeglądarki do tworzenia interaktywnych stron internetowych.</br></br> Jego początki sięgają <span vscgreen>lat 70 ubiegłego wieku</span>.</br> Prace nad nim zostały rozpoczęte <span cyellow underline>z powodu zapotrzebowania</span><span orange> producentów urządzeń o różnych standardach pracy </span><span cyellow underline>różnych funkcjonalności.</span> </div> <div titleel>Historia języka</div> <ul> <li>pił</li> </ul> </main> <div id="right-navbar"> <!> </div> </div> </body> </html> (style.css) @import url("./util.css"); @font-face { font-family: mc-reg; src: url("fonts/Mojang-Regular.ttf"); } @font-face { font-family: Source Code Pro; src: url("fonts/scp/SourceCodePro-Regular.ttf"); } @font-face { font-family: Source Code Pro Bold; src: url("fonts/scp/SourceCodePro-Bold.ttf"); } @layers utils, main; body{ --bgcolor: rgba(35,35,35, 0.3); --bgimg: url("img/bg2.png"); --darker-bgcolor: rgba(30,30,30, 0.7); --lighter-bgcolor: rgb(50,50,50, 0.7); --main: rgb(0,50,100); --main-lighter: rgb(0,60,110); --main-darker: rgb(0,40,90); --bottom-shadow: 0 2px 5px 0 rgba(0,0,0,0.4); --nav-shadow: 0 3px 6px rgba(0,0,0,0.4); --light-nav-shadow: inset -20px 0px 4px -3px rgb(255,255,255); #--topbarc: rgb(0,50,100); --topbarc: rgb(30,30,30); } @layer main{ body { background-color: var(--bgcolor); background-image: var(--bgimg); background-size: 100% 100%; background-repeat: repeat-y; background-position: center; background-attachment: fixed; color: white; font-size: 20px; font-family: Calibri; } *{ margin: 0; padding: 0; } #content{ width: 100%; min-width: 760px; margin-right: auto; margin-left: auto; } #topbar{ width: 100%; height: 80px; background-color: var(--topbarc); box-sizing: border-box; box-shadow: var(--bottom-shadow); z-index: 2; position: fixed; } #title{ width: 100%; text-align: center; font-size: 45px; line-height: 80px; font-weight: 400; font-family: Arial; letter-spacing: 3px; } #title > img{ width: 60px; height: 60px; position: relative; top: 10px; } #title > div{ display: inline-block; position: relative; bottom: 5px; } #navbar{ background-color: var(--darker-bgcolor); display: inline-block; position: fixed; width: 15%; height: calc(100% - 80px); overflow-y: scroll; z-index: 1; box-shadow: var(--nav-shadow); min-width: 220px; font-family: Source Code Pro; box-sizing: border-box; top: 80px; } #navbar > span{ text-align: center; font-size: calc(15px + 0.5vw); display: block; padding-top: 10px; padding-bottom: 10px; width: 100%; } #navbar > div{ width: 100%; height: 70px; box-sizing: border-box; padding: 5px; } #navbar > div > img{ width: 60px; height: 60px; position: relative; top: 0px; border-radius: 10px/10px; } #navbar > div > a{ line-height: 60px; margin-top: 5px; margin-bottom: 5px; display: inline-block; position: relative; bottom: 23px; width: calc(100% - 60px); box-sizing: border-box; padding-left: 10px; border-radius: 5px/5px; height: 70px; font-size: 20px; } #navbar > div:hover{ transition-duration: 0.1s; transition-timing-function: linear; background-color: var(--lighter-bgcolor); } main{ width: calc(70% - 20px); display: inline-block; margin-left: calc(15% + 10px); padding: 10px; box-sizing: border-box; box-shadow: inset 0 0 50px 5px rgba(0,0,0,0.5); background-color: var(--bgcolor); margin-top: 90px; border-radius: 10px/10px; min-width: 300px; } main > * { margin-bottom: 5px; } #right-navbar{ display: inline-block; position: relative; width: 15%; height: 100%; z-index: 1; box-shadow: var(--nav-shadow); min-width: 220px; box-sizing: border-box; padding: 5px; } *[lang-ico]{ --color: rgb(255,0,0); --img: url("img/tech/js.png"); float: left; width: 200px; height: 200px; margin: 10px; border-radius: 20px/20px; background-color: rgba(20,20,20); overflow: hidden; } *[lang-ico]::after{ content: url("<div> </div>"); background-image: var(--img); background-size: 90% 90%; background-position: 10px 10px; background-repeat: no-repeat; width: 190px; height: 190px; display: block; position: relative; top: 5px; left: 5px; border-radius: 15px/15px; background-color: rgb(40,40,40); } *[lang-ico]::before{ content: url("<div> </div>"); display: block; position: relative; float: left; width: 300px; height: 100px; right: 50px; top: 60px; background-color: var(--color); box-shadow: 0 0 20px 10px var(--color); animation: rotate 5s linear infinite; } } @keyframes bgscroll { from {background-position: 50%, 0%;} to {background-position: 50% 100vh;} } @keyframes rotate { from {transform: rotate(0deg);} to {transform: rotate(360deg);} } @media screen and (max-width: calc(220px / 0.15)){ main{ width: calc(100% - 460px); margin-left: 230px; } } Cytuj
AnyDuck komentarz 1 czerwca 2023 komentarz 1 czerwca 2023 Przydałoby się jakieś zdjęcie tego jak to wygląda, bo ułatwiłoby to znacząco ogarnięcie w czym jest problem Cytuj
Dodaj odpowiedź bez logowania
Dodajesz wpis jako gość. Pamiętaj, że to jest forum komputerowe.
Informacja: Twój wpis zostanie opublikowany po weryfikacji przez moderatora.