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

menu chowa sie pod tekst

VPS Starter Arubacloud
0 głosów
372 wizyt
pytanie zadane 7 maja 2016 w HTML i CSS przez artix132 Użytkownik (870 p.)
otwarte ponownie 10 maja 2016 przez artix132

https://zapodaj.net/77d61b871c325.jpg.html

W jaki spsosób mam dodać obrazek(to czerwono-niebieskie) żeby było w tym miesjcu i tekst na mniejszym ekranie nie chował sie pod menu?

<!-- Fixed navbar     -->
   <nav  class="navbar menu navbar-default navbar-fixed-top">
           <div class="logo">
       	      <img src="logo.png" class="img-responsive logo" alt="Cinque Terre">
           </div>
      <div class="container">
      <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
		<div class="navbar-brand" href="#">LOK Miechów</div>
        </div>

Jeżeli dodam przed <nav>  to na samej górze jest menu, potem logo i tekst.
Jeśli nie dodam tego obrazka to wszystko jest OK i tekst nie chowa sie pod menu
Dałem padding, reszta .css jest bootstrapa

body {
    padding-top: 70px;
  }


1 odpowiedź

0 głosów
odpowiedź 7 maja 2016 przez kubaapk Nałogowiec (44,270 p.)
Daj padding temu co masz pod nawigacją.
komentarz 7 maja 2016 przez artix132 Użytkownik (870 p.)
Jak dam większy padding to na małym ekranie będzie OK, ale na dużym będzie za duża przerwa miedzy logo a tekstem.
2
komentarz 7 maja 2016 przez kubaapk Nałogowiec (44,270 p.)
komentarz 10 maja 2016 przez artix132 Użytkownik (870 p.)
edycja 10 maja 2016 przez artix132

To jest nie możliwe...... W sensie moge użyć tego csc media query ale to by miało sens gdyby na 1 stronie sie to działo. Mam na myśli że jak na stronie głównej mam ten obrazek i ustaiwe to media query i jest OK, ale jak otwieram podstrone i tam zamiast tego obrazka jest już tekst to musze znowu to dodawać itd...Naprawde musze to robić czy w zły sposób dodaje ten obrazek????

 


<body>
   
    
       
 <!-- Fixed navbar     -->
  <div > <nav  class="navbar navbar-default navbar-fixed-top">
           <div class="logo">
       	      <img src="logo.png" class="img-responsive logo" alt="Cinque Terre">
           </div>
          <div class="container">
              <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
		<div class="navbar-brand" href="#">temat</div>
        </div>
          <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="index.html">Strona główna</a></li>
            <li><a href="wydarzenia">Wydarzenia</a></li>
            <li><a href="kontakt">Terminarz</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Więcej<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">1</a></li>
                <li><a href="#">12</a></li>
                <li><a href="#">13</a></li>
                <li><a href="#">14</a></li>
             </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
           <li class="active"><a href="./">Powrót na góry<span class="sr-only">(current)</span></a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Panel administracji <span class="caret"></span></a>
             
              <ul class="dropdown-menu">
                <li><a href="#">3</a></li>
                <li><a href="#">34</a></li>
                <li><a href="#">35</a></li>
                <li><a href="#"><36</a></li>
                
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
          </div>
	  </nav></div>
	

     
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi tempore eius, ea ratione, esse quaerat quasi voluptatibus sit a debitis sed? Explicabo aperiam amet veniam tenetur, quidem quae eos deleniti eveniet quia necessitatibus eaque exercitationem harum corporis nisi. Dolore hic, rerum fuga. Ut deserunt labore laboriosam voluptatibus, et saepe. Quae possimus veritatis neque aliquam laudantium obcaecati, quasi inventore consectetur mollitia minima. Ab a ratione recusandae quia pariatur molestiae, repellat sapiente minima cum. Quaerat amet recusandae quis quas! Dolore, vero minima nemo harum quas perspiciatis dolorem praesentium, ab dolorum accusamus, quisquam fugiat veniam delectus culpa! Corrupti eius nam repellat odit commodi placeat nemo, voluptate ea! Obcaecati architecto impedit quod tempora iste, expedita ab laboriosam repellendus illo enim quae nesciunt aspernatur, nam dolorem, fugiat quasi dolore eveniet quaerat. Et numquam minima ipsum dolorum fugit, ex illum officiis quo. Quo ducimus hic voluptatum esse error ullam quis quam consectetur deserunt! Nobis, corporis suscipit, blanditiis perferendis recusandae fugit unde dolor dignissimos voluptatibus a ratione rem adipisci soluta labore, nostrum eveniet ea iure, dolore quidem quam neque. Pariatur harum repellat veniam rerum eius sit itaque error impedit perferendis fugit praesentium reprehenderit accusantium facere, cum, officia recusandae est tempora in, a fugiat hic cumque, illo vel consectetur. Harum aperiam, veritatis libero quisquam. Voluptatum facere molestias, aliquam, consequatur corporis aliquid impedit ab animi quae expedita sunt cupiditate, debitis quam atque dolores delectus adipisci. Repellat voluptatem aliquam adipisci non velit eaque, quasi fuga iste a sunt enim consequatur, saepe, dolor cupiditate culpa quisquam, ut reprehenderit quam itaque! Quos quod sed, consequuntur, mollitia inventore quaerat nihil libero! Fuga, tenetur fugiat esse veniam quia ipsam pariatur blanditiis, et inventore voluptatum neque voluptas illum voluptate alias. Maxime reprehenderit, sunt quasi a, libero dolor aliquam alias excepturi sapiente suscipit obcaecati? Provident aut itaque commodi, nihil consequatur incidunt illum non omnis odit, quo rerum praesentium soluta! Illum mollitia perferendis odit incidunt minus labore tempore voluptatem laborum, iste optio quia modi cumque quibusdam sapiente voluptates, itaque, eaque delectus! Sequi sunt, sit ea consectetur fugiat impedit itaque vel saepe perspiciatis inventore voluptates deleniti temporibus, obcaecati rerum laudantium nobis assumenda illo libero. Temporibus aliquam repellat, molestias error animi alias odit recusandae aperiam hic consequuntur culpa illum qui ipsa ullam distinctio impedit accusamus quod quisquam commodi dolore. Soluta veniam a praesentium qui est alias dicta, libero illo, nobis quis? Minus laboriosam, doloribus explicabo incidunt exercitationem quas quisquam recusandae qui, animi at fugit fugiat ullam nemo maiores nesciunt laborum excepturi, dicta aliquid magni numquam! Dignissimos corrupti dolores maiores, voluptatibus quam aliquam numquam, obcaecati sed et cumque aut nostrum, fugit quia dolorem. Nisi esse error quia neque dolores. Tenetur, molestias omnis magnam, doloremque libero, eos consequatur perferendis velit ea temporibus adipisci necessitatibus ratione facere ad facilis, quo nam asperiores beatae accusantium eius possimus. Aliquid hic veniam, facilis. Provident molestias praesentium voluptatem, sequi laudantium debitis culpa possimus voluptates dolor minus quis amet. Blanditiis aliquid ad, accusantium, iure eaque, sed voluptates ipsa saepe eius eos, minus! Doloribus possimus, eum facilis molestias consequuntur et consectetur facere! Vitae dignissimos eum obcaecati, facilis accusantium.</div>
    
      
      <script src="jquery-1.12.3.min.js"></script>  
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  </body>
</html>
komentarz 10 maja 2016 przez kubaapk Nałogowiec (44,270 p.)
No to dodaj temu contentowi na stronie głównej dodatkową klasę i tylko ją obniż. Nie wiem "index-mainContent" i ostyluj to po tej klasie.
komentarz 10 maja 2016 przez artix132 Użytkownik (870 p.)
w jaki sposób? Co jej nadać min-height czy co?
komentarz 10 maja 2016 przez kubaapk Nałogowiec (44,270 p.)
//Strona główna

<nav>...</nav>

<div class="glowny_kontener_z_tekstem DODATKOWA_KLASA">

....

</div>

//Inne strony

<nav>...</nav>

<div class="glowny_kontener_z_tekstem">

....

</div>

 

I nadaj inny padding DODATKOWEJ_KLASIE w cssie którą dodaj tylko dla strony głównej i tyle.
komentarz 10 maja 2016 przez kubaapk Nałogowiec (44,270 p.)
To się nie zrozumieliśmy. Mediaqueries zadziała na wszystkich stronach.

Podobne pytania

0 głosów
2 odpowiedzi 1,729 wizyt
pytanie zadane 9 marca 2016 w HTML i CSS przez Skalny Początkujący (340 p.)
0 głosów
1 odpowiedź 513 wizyt
0 głosów
1 odpowiedź 368 wizyt
pytanie zadane 2 listopada 2018 w HTML i CSS przez Q7V Gaduła (4,250 p.)

92,455 zapytań

141,263 odpowiedzi

319,099 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!

...