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

Twarde spacje w liście UL

VPS Starter Arubacloud
+1 głos
260 wizyt
pytanie zadane 8 lipca 2019 w HTML i CSS przez FilOON Użytkownik (680 p.)

Witam, mój problem wygląda następująco: moja lista służąca za menu nie chciała się wyśrodkować. Po podejrzeniu jej za pomocą 'zbadaj element' w chrome zauważyłem że lista UL jest szersza niż powinna a 'pustą przestrzeń' zajmują twarde spacje. Co zrobić aby wyśrodkować menu i pozbyć się tych twardych spacji?

Poniżej dołączam zdjęcie i kod.

<!DOCTYPE HTML>
<html lang="pl">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
      
    <title></title>
      
    <meta name="description" content="Opis w Google" />
    <meta name="keywords" content="słowa, kluczowe, wypisane, po, porzecinku" />
      
    <link rel="stylesheet" href="style.css" type="text/css"/>
      
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap&subset=latin-ext" rel="stylesheet">
 
    <!--============================
    Add script for SMOTH LINK SCROLL
    ================================!-->
    <script src="jquery-3.4.1.min.js"></script>
     
    <script>
    $(document).ready(function(){
    // Add smooth scrolling to all links
    $("a").on('click', function() {
 
        // Make sure this.hash has a value before overriding default behavior
        if (this.hash !== "") {
        // Prevent default anchor click behavior
        event.preventDefault();
 
        // Store hash
        const hash = this.hash;
 
        // Using jQuery's animate() method to add smooth page scroll
        // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
        $('html, body').animate({
            scrollTop: $(hash).offset().top-75
        }, 800, function(){
    
            // Add hash (#) to URL when done scrolling (default click behavior)
            <!-- window.location.hash = hash; -->
        });
        } // End if
    });
    });
    </script>
     
</head>
  
<body>
    <div id="container">
        <div id="wrapper"> <!--Add DIV #wrapper!-->
            <div class="nav">
                <ul>
                    <li><a id="link1" href="#omnie">O MNIE</a></li> 
                    <li><a id="link2" href="#portfolio">PORTFOLIO</a></li> 
                    <li><a id="link3" href="#cennik">CENNIK</a></li> 
                    <li><a id="link4" href="#kontakt">KONTAKT</a></li> 
                </ul>
            </div>
        </div>
    <div id="content">
      
        <h1 id="omnie">O mnie</h1>
        
        <h1 id="portfolio">Portfolio</h1>
        <p>Sed sit amet tincidunt metus, sed euismod metus. Morbi vehicula et risus pretium facilisis. In sollicitudin ut enim non scelerisque. Praesent vitae lacus quis eros iaculis molestie iaculis eu metus. Donec posuere nisl vitae nunc mollis volutpat. Maecenas quis sapien a mauris faucibus venenatis. Vivamus at interdum felis. Morbi eu pharetra risus. Quisque aliquet ac augue sed scelerisque. Sed facilisis commodo sagittis. Nam nec imperdiet diam. Pellentesque aliquet felis a ligula interdum euismod. Vestibulum id felis nunc. Nam et pretium est. Pellentesque elementum nisl nulla, vitae dictum purus dapibus nec. Vivamus vulputate sem non convallis imperdiet.</p>
        <p>Cras iaculis pharetra justo, sed ornare ex condimentum id. Nam fermentum urna eu congue sollicitudin. Donec euismod interdum pharetra. Cras vel imperdiet tortor. Vivamus sollicitudin volutpat justo, in mollis erat faucibus id. Aenean porta, justo quis bibendum pretium, mauris lorem hendrerit sem, vestibulum fringilla metus urna eget turpis. Morbi eros velit, lacinia nec scelerisque eget, bibendum lobortis neque. Nullam dapibus massa in eros dictum tincidunt.</p>
        <h1 id="cennik">Cennik</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta luctus ligula. Pellentesque a dignissim leo. Nam sodales sem vel quam vehicula, eget consectetur turpis eleifend. Proin iaculis nibh eu enim facilisis ullamcorper. Nunc rhoncus, elit non viverra egestas, lorem libero tempor arcu, in malesuada leo ligula non neque. Fusce sit amet pulvinar nulla. Nunc scelerisque gravida blandit. Aliquam sit amet nunc accumsan, porta lacus sit amet, cursus metus. Quisque eget lorem lectus. Etiam velit tellus, semper ac tellus nec, iaculis lacinia ligula. Nam sagittis nec quam egestas gravida. Etiam fermentum at neque vitae consequat. Phasellus porttitor in arcu non pretium. In vestibulum ex a tortor varius volutpat. Nullam purus urna, blandit ut dui at, varius aliquam velit.</p>
  
        <p>Sed sit amet tincidunt metus, sed euismod metus. Morbi vehicula et risus pretium facilisis. In sollicitudin ut enim non scelerisque. Praesent vitae lacus quis eros iaculis molestie iaculis eu metus. Donec posuere nisl vitae nunc mollis volutpat. Maecenas quis sapien a mauris faucibus venenatis. Vivamus at interdum felis. Morbi eu pharetra risus. Quisque aliquet ac augue sed scelerisque. Sed facilisis commodo sagittis. Nam nec imperdiet diam. Pellentesque aliquet felis a ligula interdum euismod. Vestibulum id felis nunc. Nam et pretium est. Pellentesque elementum nisl nulla, vitae dictum purus dapibus nec. Vivamus vulputate sem non convallis imperdiet.</p>
        <p>Sed felis lorem, tempor at pulvinar eu, hendrerit ac sem. Nam eleifend dolor et augue sagittis efficitur. Morbi sollicitudin convallis purus, et condimentum nibh dictum id. Suspendisse egestas elit mattis viverra ultrices. Nullam eleifend vehicula arcu, id condimentum dui imperdiet ut. Vivamus magna libero, fringilla hendrerit venenatis at, tempus eu eros. Ut et imperdiet purus. Pellentesque cursus condimentum massa, nec pulvinar ex suscipit a.</p>
        <p>Cras iaculis pharetra justo, sed ornare ex condimentum id. Nam fermentum urna eu congue sollicitudin. Donec euismod interdum pharetra. Cras vel imperdiet tortor. Vivamus sollicitudin volutpat justo, in mollis erat faucibus id. Aenean porta, justo quis bibendum pretium, mauris lorem hendrerit sem, vestibulum fringilla metus urna eget turpis. Morbi eros velit, lacinia nec scelerisque eget, bibendum lobortis neque. Nullam dapibus massa in eros dictum tincidunt.</p>
        <h1 id="kontakt">Kontakt</h1>
        <p>Maecenas bibendum sapien eu sem pulvinar, eu congue enim accumsan. Vestibulum id sollicitudin felis. Phasellus porta quam ut massa congue volutpat. Nam facilisis, est sed pulvinar vestibulum, elit urna venenatis mauris, ut elementum eros libero vitae ipsum. Fusce vitae aliquam ligula. Suspendisse tempus mi quis justo semper, sed interdum libero viverra. Sed sit amet fermentum ex, sit amet ornare lacus. Sed suscipit velit id tortor viverra lacinia. Aliquam sed tincidunt odio. Integer malesuada auctor consequat. Sed non ex lectus. Sed eu tellus convallis, pretium felis venenatis, placerat lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque accumsan mollis ex, a blandit arcu egestas suscipit. Fusce ultrices luctus dapibus.</p>
  
        <p>Sed sit amet tincidunt metus, sed euismod metus. Morbi vehicula et risus pretium facilisis. In sollicitudin ut enim non scelerisque. Praesent vitae lacus quis eros iaculis molestie iaculis eu metus. Donec posuere nisl vitae nunc mollis volutpat. Maecenas quis sapien a mauris faucibus venenatis. Vivamus at interdum felis. Morbi eu pharetra risus. Quisque aliquet ac augue sed scelerisque. Sed facilisis commodo sagittis. Nam nec imperdiet diam. Pellentesque aliquet felis a ligula interdum euismod. Vestibulum id felis nunc. Nam et pretium est. Pellentesque elementum nisl nulla, vitae dictum purus dapibus nec. Vivamus vulputate sem non convallis imperdiet.</p>
    </div>
      
          
        <div id="footer">
        ***** ***** 2019 © Wszelkie prawa zastrzeżone
        </div>
      
    </div>
 
    <script>
    $(document).ready(function() {
    const NavY = $('.nav').offset().top;
       
    const stickyNav = function(){
    const ScrollY = $(window).scrollTop();
            
    if (ScrollY > NavY) { 
        $('.nav').addClass('sticky');
    } else {
        $('.nav').removeClass('sticky'); 
    }
    };
       
    stickyNav();
       
    $(window).scroll(function() {
        stickyNav();
    });
    });
    </script>
</body>
</html>
body
{
    background-color: #ffffff;
    color: #000000;
    margin: 0 !important;
    font-family: 'Roboto', sans-serif;
}
 
#container
{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
  
#content
{
    width: 1500px;
    margin-left: auto;
    margin-right: auto;
}
  
#footer
{
    width: 100%;
    padding: 10px;
    color: #ffffff;
    background-color: #000000;
    text-align: center;
}
  
#wrapper /*New ID*/
{
   height: 50px;
   width: 1000%;
   
}
 
.nav /*Few changes*/
{
    width: 100%;
    height: 50px;
	position: fixed;
    top: 0;
    background-color: gray;
    text-align: center;
    font-weight: bold;
    -o-transition:box-shadow 1s;
    -moz-transition:box-shadow 1s;
    -webkit-transition:box-shadow 1s;
    transition:box-shadow 1s;
}
.sticky /*Few changes*/
{
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    box-shadow:0px 0px 3px 2px #666;
}
  
ul
{
   padding: 0;
   margin: auto;
   list-style-type: none;
   font-size: 18px;
   height: px;
   line-height: 50px;
   display: inline-block;
}
  
ul a
{
    color: #000000;
    text-decoration: none;
    display: block;
    transition-duration: 0.3s
}
  
ul > li
{
	
    float: left;
    width: 150px;
    height: 50px;
}
 
ul > li a:hover
{
    color: #990099;
    background-color: red;
}

 

2 odpowiedzi

0 głosów
odpowiedź 8 lipca 2019 przez mati2762 Mądrala (5,510 p.)

https://jsfiddle.net/bwhLy0qx/

Tu chyba dobrze wyświetla ?

komentarz 8 lipca 2019 przez FilOON Użytkownik (680 p.)
Tak, tu dobrze.
komentarz 8 lipca 2019 przez FilOON Użytkownik (680 p.)

Na innych przeglądarkach również wyświetla źle i wygląda to tak jakby dobrze wyśrodkowywało ale tam coś było. Gdy najeżdżam na zaznaczone miejsce poza kafelkami menu to kursor znika.

0 głosów
odpowiedź 9 lipca 2019 przez Job102 Bywalec (2,050 p.)

Kilka wskazówek, może pomogą:

1. w linii 68 CSS brakuje wartości

height: px;

proponuje wogóle usunąć tą linię.

2. w linii 78 CSS na końcu brakuje średnika

transition-duration: 0.3s

3. Zamiast

ul > li
{
     
    float: left;
    width: 150px;
    height: 50px;
}

zrób

ul > li
{
    display: inline-block;
    width: 150px;
    height: 50px;
}

i usuń linię 70

   display: inline-block;

Daj znać czy pomogło.

Pozdrawiam.

komentarz 9 lipca 2019 przez FilOON Użytkownik (680 p.)

Wyszło coś takiego: 

Czerwony kafelek to efekt po najechaniu kursorem. Menu jakby wystaje z dołu i pomiędzy kafelkami znika kursor w miejscach zaznaczonych na obrazku.

komentarz 10 lipca 2019 przez Job102 Bywalec (2,050 p.)
Umieściłem stronę na:

t4st.000webhostapp.com/test

sprawdź, czy wyświetla Ci ją poprawnie.
komentarz 10 lipca 2019 przez FilOON Użytkownik (680 p.)
Tak, poprawnie.
komentarz 11 lipca 2019 przez Job102 Bywalec (2,050 p.)
W takim wypadku sprawdź kod jaki jest na tej stronie i porównaj go ze swoim, zobacz czy masz jakieś różnice, bo to jest dokładnie ten sam kod, który wysłałeś z naniesionymi poprawkami.

Podobne pytania

0 głosów
1 odpowiedź 173 wizyt
0 głosów
1 odpowiedź 191 wizyt
pytanie zadane 29 grudnia 2016 w HTML i CSS przez Sedki Początkujący (250 p.)
0 głosów
1 odpowiedź 507 wizyt

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 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!

...