hlmod.hu
https://hlmod.hu/

[ Css / html ] Balsáv létrehozása?!
https://hlmod.hu/viewtopic.php?f=114&t=29574		 Oldal: 1 / 1
Szerző:  The Peace [ 2018.12.02. 08:48 ]
Hozzászólás témája:  [ Css / html ] Balsáv létrehozása?!
Hey People!

Valaki aki ért rendesen a Css-hez + html-hez akkor én hogyan hozzak létre 1 balsávot?

a kordinátáit hogyan kérjem le ? (Hírek-et) akarok balsávra...



Aki segít megy a pacsi.
Szerző:  *tOrNaDo [ 2018.12.02. 09:38 ]
Hozzászólás témája:  Re: [ Css / html ] Balsáv létrehozása?!
Kód: [Egész kijelölése] [Mutatás/Eltüntetés]
  1. <div class="sidenav">
  2.   <a href="#">Hírek</a>
  3.   <a href="#">Infó</a>
  4.   <a href="#">Blabla</a>
  5.   <a href="#">Elérhetőség</a>
  6. </div>
  7.  
  8. <div class="main">
  9.   ...
  10. </div>
GeSHi © Codebox Plus

CSS:

Kód: [Egész kijelölése] [Mutatás/Eltüntetés]
  1. .sidenav {
  2.     height: 100%;
  3.     width: 160px;
  4.     position: fixed; /* Fix pozíció */
  5.     z-index: 1;
  6.     top: 0;
  7.     left: 0;
  8.     background-color: #111;
  9.     overflow-x: hidden;
  10.     padding-top: 20px;
  11. }
  12.  
  13. /* Navigáció menü linkek*/
  14. .sidenav a {
  15.     padding: 6px 8px 6px 16px;
  16.     text-decoration: none;
  17.     font-size: 25px;
  18.     color: #818181;
  19.     display: block;
  20. }
  21.  
  22. .sidenav a:hover {
  23.     color: #f1f1f1;
  24. }
  25.  
  26. .main {
  27.     margin-left: 160px;
  28.     padding: 0px 10px;
  29. }
  30.  
  31. @media screen and (max-height: 450px) {
  32.     .sidenav {padding-top: 15px;}
  33.     .sidenav a {font-size: 18px;}
  34. }
GeSHi © Codebox Plus


2 az 1 ben:

Kód: [Egész kijelölése] [Mutatás/Eltüntetés]
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <style>
  6. body {
  7.     font-family: "Lato", sans-serif;
  8. }
  9.  
  10. .sidenav {
  11.     height: 100%;
  12.     width: 160px;
  13.     position: fixed;
  14.     z-index: 1;
  15.     top: 0;
  16.     left: 0;
  17.     background-color: #111;
  18.     overflow-x: hidden;
  19.     padding-top: 20px;
  20. }
  21.  
  22. .sidenav a {
  23.     padding: 6px 8px 6px 16px;
  24.     text-decoration: none;
  25.     font-size: 25px;
  26.     color: #818181;
  27.     display: block;
  28. }
  29.  
  30. .sidenav a:hover {
  31.     color: #f1f1f1;
  32. }
  33.  
  34. .main {
  35.     margin-left: 160px;
  36.     font-size: 28px;
  37.     padding: 0px 10px;
  38. }
  39.  
  40. @media screen and (max-height: 450px) {
  41.     .sidenav {padding-top: 15px;}
  42.     .sidenav a {font-size: 18px;}
  43. }
  44. </style>
  45. </head>
  46. <body>
  47.  
  48. <div class="sidenav">
  49.   <a href="#about">Hírek</a>
  50.   <a href="#services">Információk</a>
  51.   <a href="#clients">Blabla</a>
  52.   <a href="#contact">Elérhetőség</a>
  53. </div>
  54.  
  55. <div class="main">
  56.   <h2>Sidebar Peacenek</h2>
  57.   <p>Ez a Sidebar FIX méretű (100%) tehát mindig látható!!!</p>
  58.   <p>Scroll down the page to see the result.</p>
  59.  
  60.   <p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  61.   <p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  62.   <p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  63. </div>
  64.      
  65. </body>
  66. </html>
GeSHi © Codebox Plus


Teszt:
Csatolmány:
Screenshot_2018-12-02-09-57-30-970_com.android.chrome.png
Screenshot_2018-12-02-09-57-30-970_com.android.chrome.png [ 308.95 KiB | Megtekintve 1899 alkalommal ]


The Peace írta:
Hey People!

Valaki aki ért rendesen a Css-hez + html-hez akkor én hogyan hozzak létre 1 balsávot?

a kordinátáit hogyan kérjem le ? (Hírek-et) akarok balsávra...



Aki segít megy a pacsi.
Oldal: 1 / 1 Minden időpont UTC+02:00 időzóna szerinti
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/