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

pytanie zadane 15 lipca 2015 w HTML i CSS przez Gabi Nowicjusz (150 p.)

Hej!

Bardzo proszę Was o pomoc. :)

Część kodu:

HTML:

   <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ź

odpowiedź 15 lipca 2015 przez Comandeer Guru (601,590 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. 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.