• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Przesówne okno na stronie

VPS Starter Arubacloud
+1 głos
122 wizyt
pytanie zadane 26 stycznia 2022 w HTML i CSS przez Kristofer998 Początkujący (270 p.)

Witajcie robię  stronę internetowa dla mojej  jednostki  i chciałbym  w miejsce  gdzie jest tekst  robić  stała  wielkość okna a gdy by było  więcej tekstu można przesunąć bocznym suwakiem czy macie jakieś podpowiedzi z góry dziękuje i pozdrawiam

2 odpowiedzi

0 głosów
odpowiedź 26 stycznia 2022 przez SzkolnyAdmin Szeryf (86,280 p.)
Co do pasków przesuwu, to własność overflow się kłania. Standardowo: wrzuć kod strony i CSS-a.
komentarz 26 stycznia 2022 przez Kristofer998 Początkujący (270 p.)
edycja 29 stycznia 2022 przez ScriptyChris

Zdaje sobie sprawe ze jest pewnie dużo błedów ale niejestem zawodowcem a stronke pisze dzieki kanałowi pasja informatyki.

<body>
<div id="conteiner">

	<div id="container">
	
		<div id="logo3">
	
		</div>
		
		<div id="menu">
			<a href ="index.html" class="tilelink"><div class="option">Strona główna</div></a>
			<a href ="kontakt.html" class="tilelink"><div class="option">Kontakt </div></a>
			<a href ="akcje.html" class="tilelink"><div class="option">Nasze Akcje</div></a>
			<a href ="jednostka.html"class="tilelink"><div class="option">Z życia Jednostki</div></a>
			<a href ="status.html" class="tilelink"><div class="option">Status naszej  Jednostki</div></a>
			<a href ="strazacy.html" class="tilelink"><div class="option">Strażacy z naszej  Jednmostki</div></a>
			<div style="clear:both;"></div>
		</div>
		<div id="topbar">
		<div id="topbarL"></div>
			
			<div style="clear:both;"></div>
		</div>
		
		<div id="sidebar">
             	<a href="historia.html" class="tilelink2"><div class="optionL">Historia</div></a>
		        <a href ="sprzet.html"class="tilelink2"><div class="optionL">Nasz Sprzęt</div></a>
		        <a href="lukas.html" class="tilelink2"><div class="optionL">Lukas</div></a>
	            <a href="oparzenia.html" class="tilelink2"><div class="optionL">Baza Wiedzy</div></a>
		</div>
		<div id="content">
			
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia mollis odio eu bibendum. Praesent non hendrerit risus. Nulla id semper sem. Mauris risus mauris, ultrices sed ullamcorper sed, vulputate vel nisi. Aliquam augue ante, mattis in pulvinar vitae, ultrices nec leo. Nulla ultricies augue enim, sit amet semper tellus vulputate sit amet. Maecenas tincidunt, ex eu viverra scelerisque, quam lectus auctor nunc, at pretium nibh lacus in ligula. Cras condimentum felis ac aliquet tristique. Sed elementum eu nulla vel rutrum. Cras feugiat nulla non congue malesuada.
		
			
			<br /><br />			
			Nam ullamcorper turpis non tristique sollicitudin. Etiam id magna lacus. Pellentesque vestibulum ex eget quam consectetur, sit amet luctus erat feugiat. Sed gravida tellus tempus consequat rhoncus. Phasellus lobortis magna et risus pharetra, facilisis blandit sapien tristique. Vivamus aliquam interdum arcu, eget facilisis ante gravida ut. Proin nec nisl ut lacus finibus sagittis id non nibh. Donec volutpat pretium libero. Sed fermentum vel ante vitae mattis. Curabitur porttitor turpis at scelerisque auctor. Sed vitae iaculis risus, ut iaculis nibh.
				<br /><br />			
			Nam ullamcorper turpis non tristique sollicitudin. Etiam id magna lacus. Pellentesque vestibulum ex eget quam consectetur, sit amet luctus erat feugiat. Sed gravida tellus tempus consequat rhoncus. Phasellus lobortis magna et risus pharetra, facilisis blandit sapien tristique. Vivamus aliquam interdum arcu, eget facilisis ante gravida ut. Proin nec nisl ut lacus finibus sagittis id non nibh. Donec volutpat pretium libero. Sed fermentum vel ante vitae mattis. Curabitur porttitor turpis at scelerisque auctor. Sed vitae iaculis risus, ut iaculis nibh.
				<br /><br />			
			Nam ullamcorper turpis non tristique sollicitudin. Etiam id magna lacus. Pellentesque vestibulum ex eget quam consectetur, sit amet luctus erat feugiat. Sed gravida tellus tempus consequat rhoncus. Phasellus lobortis magna et risus pharetra, facilisis blandit sapien tristique. Vivamus aliquam interdum arcu, eget facilisis ante gravida ut. Proin nec nisl ut lacus finibus sagittis id non nibh. Donec volutpat pretium libero. Sed fermentum vel ante vitae mattis. Curabitur porttitor turpis at scelerisque auctor. Sed vitae iaculis risus, ut iaculis nibh.
			
				<br /><br />			
			Nam ullamcorper turpis non tristique sollicitudin. Etiam id magna lacus. Pellentesque vestibulum ex eget quam consectetur, sit amet luctus erat feugiat. Sed gravida tellus tempus consequat rhoncus. Phasellus lobortis magna et risus pharetra, facilisis blandit sapien tristique. Vivamus aliquam interdum arcu, eget facilisis ante gravida ut. Proin nec nisl ut lacus finibus sagittis id non nibh. Donec volutpat pretium libero. Sed fermentum vel ante vitae mattis. Curabitur porttitor turpis at scelerisque auctor. Sed vitae iaculis risus, ut iaculis nibh.
			
			
			
		</div>	
		<div id="footer">
        Oficjalna Strona Ochotniczej Straży Pożarnej w Łasine   2022r. &copy; Wszelkie prawa zastrzeżone
		</div>
	
	</div>
	<script src="jquery-3.3.1.min.js"></script>
<script src="jquery.tabSlideOut.js"></script>
	
	
	
	
<div id="my-tab">
	<span class="handle">Facebook</span>
	
	<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fosplasin998&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe> 
</div>

<script>

	$('#my-tab').tabSlideOut( {
		tabLocation:'right',
		action:'click',
		offset:'100px'
		} );
	
</script>
	
</body>
</html>

a poniżej  css

body
{
    background-color: #404040;
    font-family: 'Lato', sans-serif;
}

#container
{
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
#logo3{
    background-image: url(img/logo3.png) ;
    width: 863px;
    height: 156px;

}
#menu
{
    margin-top: 20px;
    color: #ffffff;
    padding: 10px;
    
}

#topbar
{
    background-image: url(img/logo.jpg) ;
    padding: 10px;
    margin-top: 20px;
    margin-bottom: 25px;
    height: 170px;
}

.topbar:hover img
{
    transform: scale(0.9);
    
}

#topbarL
{
    background-image: url(img/zos.png) ;
    float:left;
    height:120px;
    width: 120px;
    margin-top:30px;
    margin-bottom: 30px;
    margin-left:30px;

}

#sidebar
{
    float: left;
    width: 148px;
    min-height:700px;
    padding:20px;
    background-color: lightgray;
    text-align: center;
    font-size: 18px;
    border-right: 2px dotted #780000;
    
}

#content
{
    float: left;
    padding: 40px;
    width: 730px;
    min-height:660px;
    background-color: #dedede;

    text-align: justify;
}

#footer
{
    clear: both;
    color: white;
    text-align: center;
    padding: 20px;
    font-size: 20px;
}

.option
{
    float: left;
    min-width: 50px;
    height: 25px;
    font-size: 18px;
    padding: 10px;
    border-right: 3px dotted #780000;
    opacity: 0.8;
}

.option:hover
{
    background-color:#780000;
    cursor: pointer;
}

.optionL
{
    font-size:20px;
    height:25px;
    padding: 10px;
    border-bottom: 3px dotted #780000;
    text-decoration:none;
}

.optionL:hover
{
    background-color: #780000;
    color: white;
    cursor: pointer;
}

.bigtitle
{
    font-size: 32px;
    font-weight: 900;
    letter-spacing: 2px;
}



.handle
{
    font-size: 30px;    
    
    
}
#logo2
{
    text-align:center;
    padding:5px;
    color:#780000 ;
    font-size: 40px;
    letter-spacing: 3px;
    font-weight: bold;
    border-bottom: 3px dotted #780000;

}

#opis  
{
 
    width: 700px;    
    padding:6px;
}

#sprzet
{
 
    float: left;
    height:120px;
    width: 120px;
    margin-top:10px;
    margin-bottom: 10px;
    margin-left:10px;
  border:outset 5px #780000 ;
}
a:link hover
{
text-decoration:none;
color:black;
}

a.tilelink
{
    color:#ffffff;
    text-decoration:none;    
}
a.tilelink2
{
    color:#000000 ;
    text-decoration:none;    
}

.option:hover
{
    background-color:#780000;
    cursor: pointer;
}
#zdjecia
{
   text-align:center;
    float:left;
    height:150px;
    width: 150px;
    margin-top:10px;
    margin-bottom: 10px;
    margin-left:10px;
  border:outset 5px #C80000;

 

–1 głos
odpowiedź 29 stycznia 2022 przez VBService Ekspert (251,210 p.)
edycja 29 stycznia 2022 przez VBService

Możesz też spróbować zastosować: position: sticky; 

 

przykład

<!DOCTYPE html>
<html lang="PL-pl">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Zostań strażakiem ochotnikiem. Zostań jednym z nas. Ochotnicza Straż Pożarna w Łasinie ogłasza nabór czynnych strażaków-ratowników. Zapraszamy do kontaktu w Naszej remizie lub tel. +48 56 466 47 77">
    <meta name="keywords" content="Straż pożarna, Ochotnicza, Łasin, OSP KSRG Lasin">
    <meta name="author" content="Kristofer998">
    <title>Oficjalna Strona Ochotniczej Straży Pożarnej w Łasine</title>
    <script src="jquery-3.3.1.min.js"></script>
    <script src="jquery.tabSlideOut.js"></script>
    <style>
      html, body
      {
        margin: 0;
        padding: 0;
      }
      body
      {
        background-color: #404040;
        font-family: 'Lato', sans-serif;
      }

      #container
      {
        width: 1000px;
        margin: 0 auto;
      }
      .header {
        position: sticky;
        top: 0;
        left: 0;
        background-color: #404040;
      }
      #logo3{
        background-image: url(img/logo3.png);
        width: 863px;
        height: 156px;
      }
      #menu
      {
        margin-top: 20px;
        color: #ffffff;
        padding: 10px;
      }
      #topbar
      {
        background-image: url(img/logo.jpg);
        padding: 10px;
        margin-top: 20px;
        margin-bottom: 25px;
        height: 170px;
      }
      .topbar:hover img
      {
        transform: scale(0.9);
      }
      #topbarL
      {
        background-image: url(img/zos.png);
        float: left;
        height: 120px;
        width: 120px;
        margin-top: 30px;
        margin-bottom: 30px;
        margin-left: 30px;
      }
      #sidebar
      {
        float: left;
        width: 148px;
        min-height: 700px;
        padding: 20px;
        background-color: lightgray;
        text-align: center;
        font-size: 18px;
        border-right: 2px dotted #780000;
      }
      #content
      {
        float: left;
        padding: 40px;
        width: 730px;
        min-height: 660px;
        background-color: #dedede;
        text-align: justify;
      }
      #footer
      {
        clear: both;
        color: white;
        text-align: center;
        padding: 20px;
        font-size: 20px;
      }
      .option
      {
        float: left;
        min-width: 50px;
        height: 25px;
        font-size: 18px;
        padding: 10px;
        border-right: 3px dotted #780000;
        opacity: 0.8;
      }
      .option:hover
      {
        background-color: #780000;
        cursor: pointer;
      }
      .optionL
      {
        font-size: 20px;
        height: 25px;
        padding: 10px;
        border-bottom: 3px dotted #780000;
        text-decoration: none;
      }
      .optionL:hover
      {
        background-color: #780000;
        color: white;
        cursor: pointer;
      }
      .bigtitle
      {
        font-size: 32px;
        font-weight: 900;
        letter-spacing: 2px;
      }
      .handle
      {
        font-size: 30px;
      }
      #logo2
      {
        text-align: center;
        padding: 5px;
        color: #780000;
        font-size: 40px;
        letter-spacing: 3px;
        font-weight: bold;
        border-bottom: 3px dotted #780000;
      }
      #opis  
      {
        width: 700px;
        padding: 6px;
      }
      #sprzet
      {
        float: left;
        height: 120px;
        width: 120px;
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: 10px;
        border: outset 5px #780000;
      }
      a:link
      {
        text-decoration: none;
        color: black;
      }
      a.tilelink
      {
        color: #ffffff;
        text-decoration: none;    
      }
      a.tilelink2
      {
        color: #000000;
        text-decoration: none;    
      }
      .option:hover
      {
        background-color: #780000;
        cursor: pointer;
      }
      #zdjecia
      {
        text-align: center;
        float: left;
        height: 150px;
        width: 150px;
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: 10px;
        border: outset 5px #C80000;
      }
    </style>
  </head>

  <body>
    <div id="container">
      <div class="header">
        <div id="logo3"></div>

        <div id="menu">
          <a href="index.html" class="tilelink">
            <div class="option">Strona główna</div>
          </a>
          <a href="kontakt.html" class="tilelink">
            <div class="option">Kontakt </div>
          </a>
          <a href="akcje.html" class="tilelink">
            <div class="option">Nasze Akcje</div>
          </a>
          <a href="jednostka.html" class="tilelink">
            <div class="option">Z życia Jednostki</div>
          </a>
          <a href="status.html" class="tilelink">
            <div class="option">Status naszej Jednostki</div>
          </a>
          <a href="strazacy.html" class="tilelink">
            <div class="option">Strażacy z naszej Jednmostki</div>
          </a>
          <div style="clear:both;"></div>
        </div>

        <div id="topbar">
          <div id="topbarL"></div>
          <div style="clear:both;"></div>
        </div>
      </div>

      <div id="sidebar">
        <a href="historia.html" class="tilelink2">
          <div class="optionL">Historia</div>
        </a>
        <a href="sprzet.html" class="tilelink2">
          <div class="optionL">Nasz Sprzęt</div>
        </a>
        <a href="lukas.html" class="tilelink2">
          <div class="optionL">Lukas</div>
        </a>
        <a href="oparzenia.html" class="tilelink2">
          <div class="optionL">Baza Wiedzy</div>
        </a>
      </div>

      <div id="content">        
        <h3>
          Strona główna
        </h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia mollis odio eu bibendum. Praesent non hendrerit risus. Nulla id semper sem. Mauris risus mauris, ultrices sed ullamcorper sed, vulputate vel nisi. Aliquam augue ante, mattis in pulvinar vitae, ultrices nec leo. Nulla ultricies augue enim, sit amet semper tellus vulputate sit amet. Maecenas tincidunt, ex eu viverra scelerisque, quam lectus auctor nunc, at pretium nibh lacus in ligula. Cras condimentum felis ac aliquet tristique. Sed elementum eu nulla vel rutrum. Cras feugiat nulla non congue malesuada.
        </p>
        <p>      
          Nam ullamcorper turpis non tristique sollicitudin. Etiam id magna lacus. Pellentesque vestibulum ex eget quam consectetur, sit amet luctus erat feugiat. Sed gravida tellus tempus consequat rhoncus. Phasellus lobortis magna et risus pharetra, facilisis blandit sapien tristique. Vivamus aliquam interdum arcu, eget facilisis ante gravida ut. Proin nec nisl ut lacus finibus sagittis id non nibh. Donec volutpat pretium libero. Sed fermentum vel ante vitae mattis. Curabitur porttitor turpis at scelerisque auctor. Sed vitae iaculis risus, ut iaculis nibh.
        </p>
        <p>
          Nam ullamcorper turpis non tristique sollicitudin. Etiam id magna lacus. Pellentesque vestibulum ex eget quam consectetur, sit amet luctus erat feugiat. Sed gravida tellus tempus consequat rhoncus. Phasellus lobortis magna et risus pharetra, facilisis blandit sapien tristique. Vivamus aliquam interdum arcu, eget facilisis ante gravida ut. Donec volutpat pretium libero. Curabitur porttitor turpis at scelerisque auctor. Sed vitae iaculis risus, ut iaculis nibh.
        </p>
        <p>
          Nam ullamcorper turpis non tristique sollicitudin. Etiam id magna lacus. Pellentesque vestibulum ex eget quam consectetur, sit amet luctus erat feugiat. Sed gravida tellus tempus consequat rhoncus. Phasellus lobortis magna et risus pharetra, facilisis blandit sapien tristique. Vivamus aliquam interdum arcu, eget facilisis ante gravida ut. Proin nec nisl ut lacus finibus sagittis id non nibh. Donec volutpat pretium libero. Sed fermentum vel ante vitae mattis. Curabitur porttitor turpis at scelerisque auctor. Sed vitae iaculis risus, ut iaculis nibh.
        </p>
        <p>
          Nam ullamcorper turpis non tristique sollicitudin. Etiam id magna lacus. Pellentesque vestibulum ex eget quam consectetur, sit amet luctus erat feugiat. Sed gravida tellus tempus consequat rhoncus. Vivamus aliquam interdum arcu, eget facilisis ante gravida ut. Proin nec nisl ut lacus finibus sagittis id non nibh. Donec volutpat pretium libero. Sed fermentum vel ante vitae mattis. Curabitur porttitor turpis at scelerisque auctor. Sed vitae iaculis risus, ut iaculis nibh.
        </p>
      </div>

      <div id="footer">
        Oficjalna Strona Ochotniczej Straży Pożarnej w Łasine 2022r. &copy; Wszelkie prawa zastrzeżone
      </div>
    </div>

    <div id="my-tab">
      <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fosplasin998&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
    </div>

    <script>
      $('#my-tab').tabSlideOut({
        tabLocation: 'right',
        action: 'click',
        offset: '100px'
      });
    </script>
  </body>
</html>

 

P.S. Styling Scrollbars  [ 1 ]  [ 2 ]

 

Ochotnicza Straż Pożarna w Łasinie

Podobne pytania

0 głosów
4 odpowiedzi 151 wizyt
pytanie zadane 13 czerwca 2022 w HTML i CSS przez Mick_SQ6IYV Obywatel (1,020 p.)
0 głosów
1 odpowiedź 175 wizyt
pytanie zadane 4 lipca 2015 w JavaScript przez Kuba Rycyk Nowicjusz (220 p.)
+1 głos
2 odpowiedzi 81 wizyt
pytanie zadane 12 września 2023 w HTML i CSS przez Reapel Początkujący (320 p.)

92,453 zapytań

141,262 odpowiedzi

319,086 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...