За последние 24 часа нас посетили 22879 программистов и 1237 роботов. Сейчас ищут 728 программистов ...

Как сдвинуть кнопку?

Тема в разделе "HTML и CSS", создана пользователем Nickita222a333, 7 янв 2019.

  1. Nickita222a333

    Nickita222a333 Активный пользователь

    С нами с:
    16 авг 2018
    Сообщения:
    11
    Симпатии:
    0
    Привет. Есть маленькая проблемка. Как передвинуть свёрстанную кнопку "sign up"(картинка1) точно к правому краю контейнера, чтобы получилось как на макете(картинка2)?
    P.S. Только без бутстрапа, flex'ов и т.д, пожалуйста.
    P.P.S. Ну несовсем же говно-код?
    HTML:
    1. <!DOCTYPE html>
    2. <html lang="en">
    4.     <meta charset="UTF-8">
    5.     <title>Сайт</title>
    6.     <link rel="stylesheet" href="style.css">
    7. </head>
    9.     <header>
    10.         <div class="container">
    11.             <div class="menu clearfix">
    12.                 <div class="logo">
    13.                     <img src="img/logo.png" alt="Логотип" align="left">
    14.                     <p>Dart</p>
    15.                     <p>Service manager</p>
    16.                 </div>
    17.                 <nav>
    18.                     <li>Home</li>
    19.                     <li>Service</li>
    20.                     <li>Extension</li>
    21.                     <li>Pricing</li>
    22.                     <li>Help</li>
    23.                 </nav>
    24.                 <a class="button" href="#">sign up</a>
    25.             </div>
    26.             <img src=""img/player.png" alt="">
    27.         </div>
    28.     </header>
    29.     <section></section>
    30.     <section></section>
    31.     <section></section>
    32.     <section></section>
    33.     <section></section>
    34.     <section></section>
    35.     <footer></footer>
    36. </body>
    37. </html>
    Код (CSS):
    1. body {
    2.     margin: 0 auto;
    3.     padding: 0;
    4. }
    5.  
    6. header{
    7.     background: url(img/background.png) no-repeat center top / cover;
    8.     height: 750px;
    9. }
    10.  
    11. .container {
    12.     margin-left: 80px;
    13.     margin-right:80px;
    14.     width: 100vh;
    15. }
    16.  
    17. div {
    18.     box-sizing: border-box;
    19. }
    20.  
    21. .clearfix:after {
    22.     content:'';
    23.     display: table;
    24.     width: 100%;
    25.     clear: both;
    26. }
    27.  
    28. .logo{
    29.     float: left;
    30.     margin-top: 50px;
    31. }
    32.  
    33. .logo p:nth-child(2) {
    34.     padding-left: 40px;
    35.     margin-top: 0;
    36.     margin-bottom: 0;
    37.     font-family: Raleway Regular, sans-serif;
    38.     font-size: 15px;
    39.     color: #fff;
    40.     text-transform: uppercase;
    41. }
    42.  
    43. .logo p:last-child {
    44.     padding-left: 40px;
    45.     margin-top: -3.5px;
    46.     font-family: Raleway ExtraBold, sans-serif;
    47.     font-size: 15px;
    48.     color: #fff;
    49.     text-transform: uppercase;
    50. }
    51.  
    52. @font-face {
    53.     font-family: "Raleway Regular";
    54.     src: url("fonts/raleway-regular.ttf") format("truetype");
    55.     font-weight: 400;
    56.     font-style: normal;
    57. }
    58.  
    59. @font-face {
    60.     font-family: "Raleway ExtraBold";
    61.     src: url("fonts/raleway-extrabold.ttf") format("truetype");
    62.     font-weight: 400;
    63.     font-style: normal;
    64. }
    65.  
    66. @font-face {
    67.     font-family: "Raleway SemiBold";
    68.     src: url("fonts/raleway-semibold.ttf") format("truetype");
    69.     font-weight: 400;
    70.     font-style: normal;
    71. }
    72.  
    73. nav {
    74.     padding-left: 321px;
    75.     padding-top: 60px;
    76.     font-family: Raleway Semibold, sans-serif;
    77.     font-size: 15px;
    78.     color: #fff;
    79.     white-space: nowrap;
    80. }
    81.  
    82. nav li:nth-child(2) {
    83.     color: #061e37;
    84. }
    85.  
    86. nav li {
    87.     display: inline-block;
    88.     padding-right: 48px;
    89.  
    90. }
    91.  
    92. a {
    93.     text-decoration: none;
    94.     color: #fff;
    95.     font-family: Raleway Regular, sans-serif;
    96.     font-size: 12px;
    97. }
    98.  
    99. .button {
    100.     border: 1px solid white;
    101.     padding: 8px 20px 8px 18px;
    102.     float: right;
    103. }
    картинка1.png картинка2.jpg
    --- Добавлено ---
    Упс, на макете слишком мелко. Приблизил(вложение)
     

    Вложения:

    #1 Nickita222a333, 7 янв 2019
  2. Artur_hopf

    Artur_hopf Активный пользователь

    С нами с:
    7 май 2018
    Сообщения:
    2.266
    Симпатии:
    405
    @Nickita222a333 Если ты задаешь этот вопрос, значит не разбираешься вообще в css. Вариантов куча, зачем она тебе в том углу нужна вообще? Самый простой способ:
    Код (CSS):
    1. .sign-up{
    2.      position:absolute;
    3.      left: 90%;
    4.      top: 10%;
    5. }
    но думаю не это тебе нужно, почему бы не всунуть его в <nav>?
     
    #2 Artur_hopf, 7 янв 2019
  3. Taktreba

    Taktreba Активный пользователь

    С нами с:
    11 янв 2017
    Сообщения:
    543
    Симпатии:
    132
    прикольно, люди берутся верстать макеты не зная базы... мож и мне что то себе на фрилансе подыскать? чего без дела на выходных сижу
     
    #3 Taktreba, 8 янв 2019
(Вы должны войти или зарегистрироваться, чтобы разместить сообщение.)