hlmod.hu

Magyar Half-Life Mód közösség!
Pontos idő: 2024.03.28. 10:01



Jelenlévő felhasználók

Jelenleg 229 felhasználó van jelen :: 2 regisztrált, 0 rejtett és 227 vendég

A legtöbb felhasználó (1565 fő) 2020.11.21. 11:26-kor tartózkodott itt.

Regisztrált felhasználók: Bing [Bot], Google [Bot] az elmúlt 5 percben aktív felhasználók alapján

Utoljára aktív
Ahhoz hogy lásd ki volt utoljára aktív, be kell jelentkezned.



Az oldal teljeskörű
használatához regisztrálj.

Regisztráció

Kereső


Új téma nyitása  Hozzászólás a témához  [ 2 hozzászólás ] 
Szerző Üzenet
 Hozzászólás témája: [ Css / html ] Balsáv létrehozása?!
HozzászólásElküldve: 2018.12.02. 08:48 
Offline
Félisten
Avatar

Csatlakozott: 2016.03.06. 14:20
Hozzászólások: 964
Megköszönt másnak: 102 alkalommal
Megköszönték neki: 134 alkalommal
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.

_________________
 ! Moderátori megjegyzés (kiki):
Kérlek csekkold az aláírásra vonatkozó szabályokat!


Hozzászólás jelentése
Vissza a tetejére
   
HozzászólásElküldve: 2018.12.02. 09:38 
Offline
Tud valamit
Avatar

Csatlakozott: 2018.11.02. 12:23
Hozzászólások: 148
Megköszönt másnak: 2 alkalommal
Megköszönték neki: 19 alkalommal
  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>

CSS:

  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. }


2 az 1 ben:

  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>


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 1835 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.

_________________
****

Ők köszönték meg *tOrNaDo nek ezt a hozzászólást: The Peace (2018.12.03. 18:48)
  Népszerűség: 2.27%


Hozzászólás jelentése
Vissza a tetejére
   
Hozzászólások megjelenítése:  Rendezés  
Új téma nyitása  Hozzászólás a témához  [ 2 hozzászólás ] 


Ki van itt

Jelenlévő fórumozók: nincs regisztrált felhasználó valamint 0 vendég


Nyithatsz új témákat ebben a fórumban.
Válaszolhatsz egy témára ebben a fórumban.
Nem szerkesztheted a hozzászólásaidat ebben a fórumban.
Nem törölheted a hozzászólásaidat ebben a fórumban.
Nem küldhetsz csatolmányokat ebben a fórumban.

Keresés:
Ugrás:  
Powered by phpBB® Forum Software © phpBB Limited
Magyar fordítás © Magyar phpBB Közösség
Portal: Kiss Portal Extension © Michael O'Toole