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

Pomoc w kodzie

VPS Starter Arubacloud
0 głosów
283 wizyt
pytanie zadane 3 października 2015 w HTML i CSS przez Paweł123 Nałogowiec (33,500 p.)

Cześć, mam problem :/ Chodzi o to, że meni nie układa się tak jak powinno. Chciałbym, aby wysztko​ było w jednej linii, jednak nie wiem jak to zrobić. 

<! DOCTYPE HTML> 

<html>


    <head>
    
        <title>Strona głowna </title>
            
        <meta charset="utf-8"/>
        
        <link rel="stylesheet" href="tlo.css" tpye="text/css">
    
    
    </head>


    <body>
    
        <div id="logo">Nazwa strony</div>
        
        <div id="menu">
        
        <li>Strona główna</li>
        <li>Cele i Idee</li>
        <li><img src="Orange_girl_render.png" width="50" height="50"></li>
        <li>O nas</li>
        <li>Kontakt</li>
        
        
        
        
        
        </div>
        
        
        
        
    </body>

</html>
body
{
    background-color: gray;   
    margin-left: auto;
    margin-left: auto;
    margin: 0 !important;

}
#logo
{
    font-size: 50px;
    text-align: center;
    
    
}
#menu
{
    text-align: center;
   
   
        
    
}
li
{
    display: inline-block;
    font-size: 30px;
    background-color: aqua;
    padding: 2px;
    border-bottom-color: aquamarine;
    font-size: 40px;
    padding: 10px;
  
   
}
li:hover
{
    background-color: azure;   
    
    
}

Proszę o pomoc 

5 odpowiedzi

+1 głos
odpowiedź 3 października 2015 przez Eimens Maniak (69,240 p.)

Widzę że nie rozumiesz tematu :) początkujący-rozumiem. 

Proponuję zapoznać się ze stroną: http://kodcss.pl/kurs-css/lekcje/dzial-4/rozwijane-poziome-menu-css

Jeżeli już na wstępię robisz błędy to lepiej żebyś tego nie kończył, bo to będzie po prostu tandetne i błędnie zbudowane. 

Jakiegoś czasu zbudowałem proste menu, które teraz ci pokażę LINK

Wszystkie elementy <li> powinny być w znaczniku <ul>

Czyli tak: 

<ul>

   <li>...</li>

   <li>...</li>

   <li>...</li>

</ul>

Dwa: czysty kod to podstawa nie rób zbędnych spacji, staraj się to trzymać w porządku. 

ŹLE

li

{

    display: inline-block;

    font-size: 30px;

    background-color: aqua;

    padding: 2px;

    border-bottom-color: aquamarine;

    font-size: 40px;

    padding: 10px;

   

    

}

 

DOBRZE:

li {

    display: inline-block;

    font-size: 30px;

    background-color: aqua;

    padding: 2px;

    border-bottom-color: aquamarine;

    font-size: 40px;

    padding: 10px;

}

 

Robienie menu na samym początku nauki wcale nie jest proste, mam nadzieję że ogarniesz temat :) podałem wszystko co do tego potrzebne, teraz tylko wziąć się za lekturę :) 

+1 głos
odpowiedź 3 października 2015 przez Schizohatter Nałogowiec (39,600 p.)
Wyzeruj wszystkie marginesy i paddingi:

* { margin: 0; padding: 0; }

zawsze na początku kodu CSS. Lub używaj reset.css/normalize.css
0 głosów
odpowiedź 3 października 2015 przez Patrycjerz Mędrzec (192,340 p.)

Gdzie ty masz tagi ul?

komentarz 3 października 2015 przez Patrycjerz Mędrzec (192,340 p.)
Ogólnie to obrazek rozpycha przycisk. Musisz sam sobie rozplanować, jaką będzie miał wielkość.
0 głosów
odpowiedź 3 października 2015 przez niezalogowany

Witaj,

daj

float:: left;

zamiast

display: inline-block;

 

komentarz 3 października 2015 przez writen Nałogowiec (29,060 p.)

Ale to niczego nie zmienia. no

0 głosów
odpowiedź 3 października 2015 przez writen Nałogowiec (29,060 p.)

Robisz tak.

Wszystkie te li pakujesz do ul.

Co to za menu bez linków? Do li wsadzasz znacznik a.

Wszystkie właściwości z li, oprócz display, dajesz do a. Właściwości z li:hover dajesz do a:hover.

Ustalasz takie wymiary dla obrazka, aby ładnie pasował.

komentarz 3 października 2015 przez Paweł123 Nałogowiec (33,500 p.)
Nadal nie działa, nic się nie zmieniło :/
komentarz 3 października 2015 przez writen Nałogowiec (29,060 p.)
Kluczowym jest odpowiednie ustawienie wymiarów obrazka. Pewnie coś około 35px.

Błąd jest spowodowany różnicą wysokości tekstu i obrazka.
komentarz 3 października 2015 przez Paweł123 Nałogowiec (33,500 p.)
aha :D dzięki za podpowiedż :D

Podobne pytania

+1 głos
1 odpowiedź 362 wizyt
pytanie zadane 28 maja 2021 w HTML i CSS przez Piotrek G Nowicjusz (160 p.)
+1 głos
2 odpowiedzi 316 wizyt
pytanie zadane 17 listopada 2020 w HTML i CSS przez Konrad M'k Nowicjusz (240 p.)
0 głosów
1 odpowiedź 189 wizyt
pytanie zadane 14 października 2020 w HTML i CSS przez napoludniestad.pl Użytkownik (960 p.)

92,452 zapytań

141,262 odpowiedzi

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

...