Skocz do zawartości
  • 0

Wyrównanie menu do prawej strony


albert.kiszka

Pytanie

czesc,

mam problem z menu, dlatego ze nie wiem jak mam zrobic je po prawej stronie, zreszta zobaczcie zamierzony efekt i efekt ktory jest w tym momencie

kod html:

<body>
<!-- header -->
  <div class="menu-container">
    <div class="menu-logo"><a href="/">opcja 1</a></div>
    <ul class="menu-nav">
      <li><a href="/">opcja 1</a></li>
      <li><a href="">opcja 2</a></li>
      <li><a href="">opcja 3</a></li>
    </ul>
  </div>

</body>

kod css:

body
{
  font-family: 'Titillium Web', sans-serif;
  margin: 0;
  width: 100%;
}

/* menu-box   */

.menu-container
{
  width: 100%;
  margin: 0;
  height: 75px;
  background-color: #404040;
  border-top: 3px solid #ffa500;
}

/* menu-logo */

.menu-logo a
{
  text-decoration: none;
  color: #ffffff;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 20px;
  overflow: hidden;
}

.menu-logo a:hover
{
  color: #ffa500;
  transition: 1s;

}

/* menu-nav */

.menu-nav li
{
  list-style-type: none;
  text-transform: uppercase;
  font-weight: 600;
  padding-left: 12px;
  padding-right: 12px;
  float: right;
}

.menu-nav li a
{
  color: #ffffff;
  text-decoration: none;
}

 

chce zeby bylo tak:

 

klkafkajsjfkajklsjfkla.png

Odnośnik do komentarza
Udostępnij na innych stronach

10 odpowiedzi na to pytanie

Rekomendowane odpowiedzi

1 godzinę temu, albert.kiszka napisał:

czesc,

mam problem z menu, dlatego ze nie wiem jak mam zrobic je po prawej stronie, zreszta zobaczcie zamierzony efekt i efekt ktory jest w tym momencie

kod html:


<body>
<!-- header -->
  <div class="menu-container">
    <div class="menu-logo"><a href="/">opcja 1</a></div>
    <ul class="menu-nav">
      <li><a href="/">opcja 1</a></li>
      <li><a href="">opcja 2</a></li>
      <li><a href="">opcja 3</a></li>
    </ul>
  </div>

</body>

kod css:


body
{
  font-family: 'Titillium Web', sans-serif;
  margin: 0;
  width: 100%;
}

/* menu-box   */

.menu-container
{
  width: 100%;
  margin: 0;
  height: 75px;
  background-color: #404040;
  border-top: 3px solid #ffa500;
}

/* menu-logo */

.menu-logo a
{
  text-decoration: none;
  color: #ffffff;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 20px;
  overflow: hidden;
}

.menu-logo a:hover
{
  color: #ffa500;
  transition: 1s;

}

/* menu-nav */

.menu-nav li
{
  list-style-type: none;
  text-transform: uppercase;
  font-weight: 600;
  padding-left: 12px;
  padding-right: 12px;
  float: right;
}

.menu-nav li a
{
  color: #ffffff;
  text-decoration: none;
}

 

chce zeby bylo tak:

 

klkafkajsjfkajklsjfkla.png

 

<!-- header -->
<div class="menu">
    <div class="menu-container">
        <div class="menu-logo"><a href="/">opcja 1</a></div>
        <ul class="menu-nav">
        <li><a href="/">opcja 1</a></li>
        <li><a href="">opcja 2</a></li>
        <li><a href="">opcja 3</a></li>
        </ul>
    </div>
</div>

 

body
{
    font-family: 'Titillium Web', sans-serif;
    margin: 0;
    width: 100%;
}

/* menu-box   */

.menu
{
    width: 100%;
    margin: 0;
    height: 75px;
    background-color: #404040;
    border-top: 3px solid #ffa500;
}

/* menu-logo */

.menu-container{
    width: 1000px;
    padding: 22.5px 0;
    margin-left: auto;
    margin-right: auto;
    height: 33px;
}

.menu-logo{
    float: left;
    padding: 5px;
}

.menu-logo a
{
    text-decoration: none;
    color: #ffffff;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 20px;
    overflow: hidden;
}

.menu-logo a:hover
{
    color: #ffa500;
    transition: 1s;
}

/* menu-nav */

.menu-nav{
    float: right;
    -webkit-padding-start: unset;
    -webkit-margin-before: unset;
    -webkit-margin-after: unset;
    padding: 7.5px 0;
}

.menu-nav li
{
    list-style-type: none;
    text-transform: uppercase;
    font-weight: 600;
    padding-left: 12px;
    padding-right: 12px;
    float: right;
}

.menu-nav li a
{
    color: #ffffff;
    text-decoration: none;
}

 

Odnośnik do komentarza
Udostępnij na innych stronach

4 minuty temu, ανєχυ napisał:

 


<!-- header -->
<div class="menu">
    <div class="menu-container">
        <div class="menu-logo"><a href="/">opcja 1</a></div>
        <ul class="menu-nav">
        <li><a href="/">opcja 1</a></li>
        <li><a href="">opcja 2</a></li>
        <li><a href="">opcja 3</a></li>
        </ul>
    </div>
</div>

 


body
{
    font-family: 'Titillium Web', sans-serif;
    margin: 0;
    width: 100%;
}

/* menu-box   */

.menu
{
    width: 100%;
    margin: 0;
    height: 75px;
    background-color: #404040;
    border-top: 3px solid #ffa500;
}

/* menu-logo */

.menu-container{
    width: 1000px;
    padding: 22.5px 0;
    margin-left: auto;
    margin-right: auto;
    height: 33px;
}

.menu-logo{
    float: left;
    padding: 5px;
}

.menu-logo a
{
    text-decoration: none;
    color: #ffffff;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 20px;
    overflow: hidden;
}

.menu-logo a:hover
{
    color: #ffa500;
    transition: 1s;
}

/* menu-nav */

.menu-nav{
    float: right;
    -webkit-padding-start: unset;
    -webkit-margin-before: unset;
    -webkit-margin-after: unset;
    padding: 7.5px 0;
}

.menu-nav li
{
    list-style-type: none;
    text-transform: uppercase;
    font-weight: 600;
    padding-left: 12px;
    padding-right: 12px;
    float: right;
}

.menu-nav li a
{
    color: #ffffff;
    text-decoration: none;
}

 

teraz jest caly bialy ekran

Odnośnik do komentarza
Udostępnij na innych stronach

/* menu-box   */

.menu
{
    width: 100%;
    margin: 0;
    height: 75px;
    background-color: #404040;
    border-top: 3px solid #ffa500;
}

/* menu-logo */

.menu-container{
    width: 1000px;
    padding: 22.5px 0;
    margin-left: auto;
    margin-right: auto;
    height: 33px;
}

.menu-logo{
    float: left;
    padding: 5px;
}

.menu-logo a
{
    text-decoration: none;
    color: #ffffff;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 20px;
    overflow: hidden;
}

.menu-logo a:hover
{
    color: #ffa500;
    transition: 1s;
}

/* menu-nav */

.menu-nav{
    float: right;
    -webkit-padding-start: unset;
    -webkit-margin-before: unset;
    -webkit-margin-after: unset;
    padding: 7.5px 0;
}

.menu-nav li
{
    list-style-type: none;
    text-transform: uppercase;
    font-weight: 600;
    padding-left: 12px;
    padding-right: 12px;
    float: right;
}

.menu-nav li a
{
    color: #ffffff;
    text-decoration: none;
}

 

 

jkggkkajgk.png

oczywiscie przed zrobieniem screena kliknalem ctrl+a

Odnośnik do komentarza
Udostępnij na innych stronach

2 minuty temu, albert.kiszka napisał:

/* menu-box   */

.menu
{
    width: 100%;
    margin: 0;
    height: 75px;
    background-color: #404040;
    border-top: 3px solid #ffa500;
}

/* menu-logo */

.menu-container{
    width: 1000px;
    padding: 22.5px 0;
    margin-left: auto;
    margin-right: auto;
    height: 33px;
}

.menu-logo{
    float: left;
    padding: 5px;
}

.menu-logo a
{
    text-decoration: none;
    color: #ffffff;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 20px;
    overflow: hidden;
}

.menu-logo a:hover
{
    color: #ffa500;
    transition: 1s;
}

/* menu-nav */

.menu-nav{
    float: right;
    -webkit-padding-start: unset;
    -webkit-margin-before: unset;
    -webkit-margin-after: unset;
    padding: 7.5px 0;
}

.menu-nav li
{
    list-style-type: none;
    text-transform: uppercase;
    font-weight: 600;
    padding-left: 12px;
    padding-right: 12px;
    float: right;
}

.menu-nav li a
{
    color: #ffffff;
    text-decoration: none;
}

 

 

jkggkkajgk.png

oczywiscie przed zrobieniem screena kliknalem ctrl+a

Podsyłam na pw link ze wgranym dokładnie tym stylem, który tu udostępniłem.

Porównaj go sobie i sprawdź co u Ciebie jest nie tak.

Odnośnik do komentarza
Udostępnij na innych stronach

Zarchiwizowany

Ten temat przebywa obecnie w archiwum. Dodawanie nowych odpowiedzi zostało zablokowane.

Gość
Ten temat został zamknięty. Brak możliwości dodania odpowiedzi.
  • Ostatnio przeglądający forum Wyrównanie menu do prawej strony   0 użytkowników
    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...