Tworzenie menu górnego- wyśrodkowanego

0

Witam,
Mam taki problem. Robię stronę i chcę ją mieć w witrynie google site i chcę dodać niestandardowe menu. Moje pytanie jest następujące. Mam taki kod:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#menu {
   float: left;
   width: 100%;
   background-color: transparent;
   overflow: hidden;
   position: relative;
   text-align: center;
   margin-bottom: 15px;

}
#menu ul {
   clear: left;
   float: left;
   list-style: none;
   margin: 0;
   padding: 0;
   position: relative;
   left: 50%;
   text-align: center;
}
#menu ul li {
   float: left;
   list-style: none;
   position: relative;
   right: 50%;
   margin: 0px 25px;
   padding: 5px 10px;
   border:1px solid black;
}
#menu ul li a {
   background-color: transparent;
   color: #999999!important;
    font-family: 'Droid Sans',sans-serif!important;
    font-size: 16px!important;
   text-decoration: none;
}
#menu ul li a:hover {
    color: #444444!important;
    text-decoration: underline;
    background-color: transparent;
}
#logo{
    text-align: left;
    margin: 15px 30px;
    margin-top: 0;
  }
</style>

</head>
<body>
    <div id="menu">
        <ul>            
            <li><a target="_self" href="#">zakładka 1 szersza</a></li>
            <li><a target="_self" href="#">zakładka 2 wezsza</a></li>
            <li><a target="_self" href="#">zakładka 3</a></li>
            <li><a target="_self" href="#">zakładka 4 szeroka</a></li>
            <li><a target="_self" href="#">zakładka 5 mała</a></li>
            <li><a target="_self" href="#">zakładka 6</a></li>
            <li><a target="_self" href="#">zakładka 7</a></li>
            <li><a target="_self" href="#">zakładka 8 szeroka</a></li>
            <li><a target="_self" href="#">zakładka 9</a></li>
            <li><a target="_self" href="#">zakładka 10</a></li>

        </ul>
    </div>

</body>
</html>

I co powinienem zrobić by elementy były wyśrodkowane lub zawijały sie na dół gdy sie nie mieszcza i tez sie wysrodkowuja. Na tą chwilę one dziwnie sie zachowują. Przechodzą na dół ale dziwnie się wyrównują.

0

Do RWD powinieneś użyć media queries -> https://developer.mozilla.org[...]a_Queries/Using_media_queries

Dodatkowo Twój kod można ciutkę odchudzić - w obu selektorach
#menu ul li a oraz #menu ul li a:hover
masz background-color: transparent; - skoro jest tak bez hovera, to i na hoverze będzie wyglądało tak samo - no chyba że to tylko fragment Twojego kodu i ten hover gdzieś indziej przybiera inny kolor tła.

Natomiast do samego rozmieszczenia - może to pomoże.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
`

0

też z drugiej strony nie wiadomo czy ten bieda edytorek google przyjmie flexa i mq bez problemów :)

0

Jest sporo ograniczeń w Gsite ale za pomocą gadzetu mi to działa, dzięki za pomoc :)

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0