Skocz do zawartości
  • Przeglądający   0 użytkowników

    Brak zarejestrowanych użytkowników, przeglądających tę stronę.

CSnajper

Przesunięcie elementów w divie na prawą stronę. Kilka pseudoklas

Promowane odpowiedzi

CSnajper    0

Witam. Tworzę sobie menu na stronie. Mam takie opcje jak start, nowości itd po lewej, wszystko ładnie śmiga. Problem zaczyna się gdy próbuję klocki Logowanie i Rejestracja dać maksymalnie na prawą stronę belki która tworzy menu. Ma ktoś jakiś pomysł jak zmodyfikować blok "ul.main_menu  li a.link" aby klocki wyświetlały się od prawej krawędzi?

CSS wygląda mniej więcej tak:

ul.main_menu {
margin: auto;
width: 100%;
height: 50px; 
list-style: none;
margin-bottom: 15px;
border-radius: 10px;
background: url(http://CSnajper.eu/img/stopka.png) center top no-repeat;
}
ul.main_menu  li { 
    display: inline-block;
    height: 50px;
    position: relative;
}
ul.main_menu a {
font-size: 16px;
color: #fff;
padding: 7px 20px;
}
ul.main_menu  li a.link {
    float: left;
    line-height: 50px;
    padding: 0px 10px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
}
ul.main_menu  li a:hover{
color: black;
text-shadow: 1px 1px 17px #FFFFFF;
background:rgba(102, 102, 102, 0.38);
font-weight: bold;
}

A oto menu:

 

     <div class="row"><!-- Glowne menu -
        <ul class="main_menu">
             <li><a class="link" href="">Nowości</a></li>
             <li><a class="link" href="/shop/show_all/">Sklep</a></li>
             <li><a class="link" href="/home/about/">O mnie</a></li>
             <li><a class="link" href="/home/partner/">Współpraca</a></li>
             <li><a class="link" href="/home/opinions/">Opinie</a></li>
             <li><a class="link" href="/home/contact/">Kontakt</a></li>
         </ul>
    </div>

2 sprawa. Czy wie ktoś jak poprawnie to zapisać?

ul.main_menu  li a:hover:first-child{
border-radius: 10px 0px 0px 10px;
}

Chodzi o te 2 pseudo klasy.  Nie działa to jak należy ponieważ efekt rozchodzi się na wszystkie klocki.

 

Pozdrawiam.

 
 

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
thestig    122

dodaj na koniec listy

<li class="prawy">Rejestracja</li>
<li class="prawy">Logowanie</li>

i do css

.prawy {
  float:right;
  color: #fff;
  height: 50px;
  line-height: 50px;
  font-weight: bold;
  padding: 0 15px;  
}
  • Lubię to! 1

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
Gość
Ten temat został zamknięty. Brak możliwości dodania odpowiedzi.

×