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

Uno: Menu i logo w jednej linii. Dos: Mimo width:100% nie widzę oczekiwanego efektu w całości.

VPS Starter Arubacloud
0 głosów
304 wizyt
pytanie zadane 15 lipca 2015 w HTML i CSS przez Gabi Nowicjusz (150 p.)

Hej!

Bardzo proszę Was o pomoc. :)

Część kodu:

HTML:

<body>
<div id="wrapper">

    <div id="outer">
        <div>
            <h1>LOREM IPSUM </h1>
            
            <nav id="menu">
            <ul>
                <li><a href="#">DO</a></li>
                <li><a href="#">RE</a></li>
                <li><a href="#">MI</a></li>
                <li><a href="#">FA</a></li>
            </ul>
            <div style="clear: both"></div>
            </nav> 
            
        </div> 
        
    </div>

    
</div>
</body>

CSS:

html {
-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
body {
 background:#FFF;
 color:#000;
 font-family: Orator Std, Tahoma, Arial, sans-serif;
 font-size: 13px;
}

#wrapper {
 margin:0 auto;
 width:100%;
}

#outer {
    width: 100%;
    -moz-box-shadow: 0 25px 25px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 25px 25px rgba(0, 0, 0, 0.4);
    box-shadow: 0 25px 25px rgba(0, 0, 0, 0.4);
    overflow: auto;
    background: white;
}




h1 {
float: left;
font-size: 36px;
color: #787878;
}

#menu ul {

float: right;
}


#menu li {
display: inline;
font-size: 30px;

}
#menu a {
text-decoration: none;
}

Problem nr 1:

Otóż chciałabym, aby "LOREM IPSUM" i "DO RE MI FA" były w jednej linii, a nie jedno wyżej drugie niżej. Tak to wygląda:

Problem nr 2:

Mimo width:100% i tak po otwarciu strony nie jest ona maksymalnie rozciągnięta, tylko widać po bokach takie małe paski (zmieniłam kolor na czerwony, aby było to lepiej widoczne).

 

 

1 odpowiedź

+1 głos
odpowiedź 15 lipca 2015 przez Comandeer Guru (599,730 p.)
wybrane 15 lipca 2015 przez Gabi
 
Najlepsza

ad. 1) Problemem są zapewne różne rozmiary czcionek i różna wartość line-height

ad. 2) Przeglądarka ma domyślne style, w których body ma margines równy 8px, który należy usunąć. Od razu polecam poczytać o normalizacji i resecie.

 

BTW background-size nie potrzebuje prefiksów

komentarz 15 lipca 2015 przez Gabi Nowicjusz (150 p.)
edycja 15 lipca 2015 przez Gabi

Dziękuję bardzo za pomoc. smiley Udało mi się z tym uporać. Szczególnie dziękuję za tą drugą podpowiedź, miałam w plikach "reset.css", tylko nie był "podpięty" do html. 

Podobne pytania

0 głosów
1 odpowiedź 129 wizyt
pytanie zadane 30 marca 2018 w HTML i CSS przez Dawid Kuzak Nowicjusz (120 p.)
0 głosów
1 odpowiedź 164 wizyt
pytanie zadane 19 grudnia 2017 w HTML i CSS przez Lahosky Nowicjusz (150 p.)
0 głosów
2 odpowiedzi 184 wizyt
pytanie zadane 8 stycznia 2018 w HTML i CSS przez Darkis Początkujący (290 p.)

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!

...