Skocz do zawartości

  • 👋 Witaj na MPCForum!

    Przeglądasz forum jako gość, co oznacza, że wiele świetnych funkcji jest jeszcze przed Tobą! 😎

    • ✅ Pełny dostęp do działów i ukrytych treści
    • ✅ Możliwość pisania i odpowiadania w tematach
    • ✅ System prywatnych wiadomości
    • ✅ Zbieranie reputacji i rozwijanie swojego profilu
    • ✅ Członkostwo w jednej z największych społeczności graczy

    👉 Dołączenie zajmie Ci mniej niż minutę – a zyskasz znacznie więcej!

    Zarejestruj się teraz
  • 0

Wyrównanie menu do prawej strony

albert.kiszka

Pytanie zadane przez albert.kiszka ,

Pytanie

albert.kiszka Nowicjusz

albert.kiszka

Opublikowano
Nowicjusz

albert.kiszka

Opublikowano

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

10 odpowiedzi na to pytanie

Rekomendowane odpowiedzi

ανєχυ Uczeń

ανєχυ

Opublikowano
Uczeń

ανєχυ

Opublikowano
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;
}

 

albert.kiszka Nowicjusz

albert.kiszka

Opublikowano
Nowicjusz

albert.kiszka

  • Autor
Opublikowano
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

ανєχυ Uczeń

ανєχυ

Opublikowano
Uczeń

ανєχυ

Opublikowano
1 minutę temu, albert.kiszka napisał:

teraz jest caly bialy ekran

Sprawdź czy odpowiednio wkleiłeś kod, prawdopodobnie musiałeś coś usunąć.

 

ανєχυ Uczeń

ανєχυ

Opublikowano
Uczeń

ανєχυ

Opublikowano
2 minuty temu, albert.kiszka napisał:

robilem ctrl + c i ctrl +v wiec to niemozliwe

Wklejając bezpośredni kod HTML nie będzie działał, potrzebujesz jeszcze zaimportować styl css.

Kod, który edytowałem działa bezproblemowo.

albert.kiszka Nowicjusz

albert.kiszka

Opublikowano
Nowicjusz

albert.kiszka

  • Autor
Opublikowano
2 minuty temu, ανєχυ napisał:

Wklejając bezpośredni kod HTML nie będzie działał, potrzebujesz jeszcze zaimportować styl css.

Kod, który edytowałem działa bezproblemowo.

opcje sa, ale nie wyswietla czesci pod komentarzem menu-box

ανєχυ Uczeń

ανєχυ

Opublikowano
Uczeń

ανєχυ

Opublikowano
2 minuty temu, albert.kiszka napisał:

opcje sa, ale nie wyswietla czesci pod komentarzem menu-box

Wyślij ss`y kodu oraz wyniku w przeglądarce.

albert.kiszka Nowicjusz

albert.kiszka

Opublikowano
Nowicjusz

albert.kiszka

  • Autor
Opublikowano 
/* 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

ανєχυ Uczeń

ανєχυ

Opublikowano
Uczeń

ανєχυ

Opublikowano
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.

Zarchiwizowany

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

Pytania
×
×
  • Dodaj nową pozycję...