FotGOD
-
Posts
12 -
Joined
-
Last visited
FotGOD's Achievements
Explorer (1/14)
0
Reputation
-
Такая вот проблема. Задал блоку ширину, и сразу выходят отступы. Чтоб поставить блок по центру использую margin:auto; Но можно эти отступы как-то убрать?
-
Если вдруг комуто нужно будет, просто нужно было поставить margin в li. .menu{ display: flex; li{ margin: 0 10px; } list-style: none; a{ color: #{$white}; } }
-
Здравствуйте. Верстаю макет, но чтото не так. Подобные верстал раньше, все было хорошо, даже сверяю, все чуть ли не под копирку написал. Но в Этом коде почему-то строки в меню слиплись и не могу их раскинуть. на рисунке как должно быть, и как выходит. Что не так делаю? Html: <div class="container"> <header class="header"> <div class="header-item"> <a href="#"><h1 class="logo">Bouncy</h1></a> <nav class="navbar"> <ul class="menu"> <li><a href="#">Hello</a> </li> <li><a href="#">About</a> </li> <li><a href="#">Services</a> </li> <li><a href="#">Portfolio</a> </li> <li><a href="#">Team</a> </li> <li><a href="#">Blog</a> </li> <li><a href="#">Contact</a> </li> </ul> </nav> </div> </header> </div> Css: .header { width: 1366px; height: 737px; background: url(../i/header.jpg) no-repeat; } .header a { text-decoration: none; } .container { width: 1366px; margin: auto; } .header-item { display: flex; flex-wrap: wrap; justify-content: space-around; } .logo { text-transform: uppercase; color: #ffffff; } .navbar { margin-top: 16px; } .menu { display: flex; justify-content: flex-end; list-style: none; } .menu a { color: #ffffff; }
-
Добрый день. Не подскажите как можно сделать подобное через css или это только через JS? Или хотя бы как это называется, чтоб знать от чего оталкиватся при поиске. Перерыл все способы названия, но так похожего и не нашел.
-
Разобрался, поставил для десктоп @media (min-width: 1250px). А если к примеру три расширение, можно как-то поставить от и до?
-
Народ, помогите разобраться в медиа запросах. написал в css файле 2 вида стилей. Для обычного десктоп и для телефона. Но обычный почему-то все равно немного перебивает стили. В чем проблема? вот html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" media="screen and (color)" href="css/style.css"> <title>Document</title> <style> </style> </head> <body> <div class="container"> <header class="header-item"> <div class="header-item"> <h1 class="logo_img">Prechu</h1> </div> <nav class="navbar"> <ul class="menu"> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <article class="bg-phone"> <div class="slayer transform"></div> <div class="phone-info "> <p class="phone_logo"></p> </div> <div class="phone-info"> <h1 class=" text_phone">Lorem ipsum dolor </h1> <p > sit amet consectetur adipisicing elit consectetur.</p> <p class="button"> <i class="fa fa-check button_check" aria-hidden="true"></i>Sign up now</p> </div> <div class="slayer"></div> </article> <article class="col"> <div class="col_item"> <p><img src="img/shape-1.png"></p> <div class="col_item_post"> <h3>Contary to popular</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</p> </div> </div> <div class="col_item"> <p><img src="img/shape-2.png"></p> <div class="col_item_post"> <h3>Contary to popular</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</p> </div> </div> <div class="col_item"> <p><img src="img/shape-3.png"></p> <div class="col_item_post"> <h3>Contary to popular</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</p> </div> </div> </article> <article class="shop-info"> <div class="self-center"> <h1>The Shopping cart</h1> <p ><img src="img/cart.png"> </p> </div> <div class="self-center"> <h2>Some bullet text here</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit commodi libero laborum, magni optio culpa, quia consectetur placeat quas accusamus eius ut aliquid eaque nemo impedit aliquam. Harum libero expedita quia commodi culpa consequatur, pariatur vero, iusto odit ex, sed modi nesciunt nisi debitis voluptate aspernatur animi officia ut. Sit distinctio modi esse natus non totam laboriosam nulla eveniet rerum molestias officia maiores id praesentium minima sint hic ea, unde expedita iusto iure. Ipsum facere dicta praesentium quaerat architecto ut non quae ducimus tempora quo amet unde distinctio earum laudantium id consectetur iusto perferendis, voluptates veniam at. Cumque, vel vitae!</p> </div> </article> <footer class="footer-item"> <p>Copyright © 2012-2013 cssauthor.com</p> <p><img src="img/vlad.png"> </p> </footer> </div> </body> </html> вот css: * { box-sizing: border-box; } .container { width: 1250px; margin: auto; background: white; } .header-item { background: white; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-around; height: 90px; padding: 0 10px; } .logo_img { background: url(../img/logo.png); background-repeat: no-repeat; width: 50px; height: 50px; text-indent:50px; padding-top: 10px; display: flex; margin-left: 140px; } .navbar{ flex: 1 1 600px; margin-right: 1em; } .menu { list-style: none; display: flex; justify-content: flex-end; margin: 0; } .menu a{ text-decoration: none; color: grey; padding: 40px; display: block; } .menu a:hover{ border-bottom: 2px solid #5094f2; } h1 { margin: 0; } .bg-phone { background: url(../img/bg2.png) no-repeat; width: 1250px; height: 490px; display: flex; flex-flow: row; justify-content: space-between; } .slayer{ background-image: url(../img/right.png); background-repeat: no-repeat; width: 23px; height: 65px; margin: auto; } .transform{ transform: scaleX(-1); } .phone-info { color: white; display: flex; flex-wrap: wrap; flex-direction: column; margin: auto ; } .phone_logo{ background-image: url(../img/phone2.png) ; background-repeat:no-repeat; height: 436px; width: 345px; } .text_phone { margin: 33px 0 0px 0; } .button { background: #5094f2; width: 235px; height: 55px; text-align: center; color: white; font-size: 26px; padding: 12px; } .button_check { border-radius: 50%; background: white; color: #5094f2; margin-right: 30px; } .col { display: flex; justify-content: space-around; text-align: center; } .col_item { display: flex; flex-direction: column; margin: 65px; } .col_item p img{ width: 182px; height: 182; } .col_item_post h3{ color: #5094f2; } .shop-info{ display: flex; justify-content: space-around; color: grey; } .self-center{ display:flex; flex-direction: column; margin: auto 100px; } .self-center p img{ width: 371px; height: 279px; } .self-center h1{ margin: auto; } .footer-item{ font-size: 12px; color:grey; display: flex; justify-content: space-around; align-items: center; } @media (max-width: 550px) { * { box-sizing: border-box; } body { background: grey; font-family: 'Open Sans', sans-serif; } .container { width: 550px; margin: auto; background: white; } .header-item { background: white; display: flex; justify-content: space-between; height: 90px; align-items: center; padding: 0 10px; } .logo_img { background: url(../img/logo.png); background-repeat: no-repeat; width: 50px; height: 50px; text-indent:50px; padding-top: 10px; } .navbar{ background: #5094f2; background: url(../img/menu.png); background-repeat: no-repeat; width: 59px; height: 45px; } .menu { display: none; } .slayer{ display: none; } .transform{ display: none; } h1 { margin: 0; } .bg-phone { background: url(../img/bg.jpg); background-repeat: no-repeat; height: 250px; display: flex; flex-flow: row; } .phone-info { color: white; display: flex; flex-wrap: wrap; justify-content: space-between; margin: auto 20px; } .phone_logo{ background-image: url(../img/phone.png) ; background-repeat:no-repeat; height: 217px; width: 180px; } .text_phone { margin: 33px 0 0px 0; } .button { background: #5094f2; width: 235px; height: 55px; text-align: center; color: white; font-size: 26px; padding: 12px; } .button_check { border-radius: 50%; background: white; color: #5094f2; margin-right: 30px; } .col { display: flex; flex-direction: column; flex-wrap: wrap; } .col_item { display: flex; flex-wrap: nowrap; align-items: center; margin: 30px 40px; border-bottom: 1px solid grey; } .col_item_post { margin: 0 20px; } .shop-info{ display: flex; flex-direction: column; align-items: flex-start; margin: 0 70px; color: grey; } .self-center{ margin: auto; } .footer-item{ font-size: 12px; color:grey; display: flex; justify-content: space-between; align-items: center; margin-left: 5px; } } на первом рисунке макет выглядит, если я оставлю код с медиа на 550px. на втором рисунке, если я добавлю код для десктоп.
-
благодарю
-
Здравствуйте. Пытаюсь выравнять 2 блока через inline-block. Но они выходят все равно не на одном уровне. Подскажите что не так и как исправить? <style> *{ box-sizing: border-box; padding: 0; } .container{ border: 1px solid red; margin: auto; } .row{ background: rgb(206, 200, 200); } .col-1{ width: 200px; border: 2px solid white; display: inline-block; height: 100px; } .col-2{ width:600px; border: 2px solid white; display: inline-block; height: 100px; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-1"> <p>Корзина покупок <br> в корзине 3 товара...</p> </div> <div class="col-2"> <h1>Логотип компани</h1></div> </div> <div class="row"> // 3 колонки </div> <div class="row"> 2 колонки </div> </div> </body>
-
Получается, что это не правильная презентация?
-
Здравствуйте, Можно ли <ul> и <ol> вставлять в <li>?. Т.е. к примеру такой вот код <dl> <ul> <li>Розничные покупатели</li> <ol> <li>Каталог товаров</li> <dt>Велосипеды</dt> <dd>Стоимостью до 1000 гр</dd> <dd>Стоимостью до 2000 гр</dd> <dt>Самокаты</dt> <dd>Стоимостью до 100 гр</dd> <dd>Стоимостью до 400 гр</dd> <dt>Бульдозеры</dt> <dd>Стоимостью до 20000 гр</dd> <dd>Стоимостью до 50000 гр</dd> <li>Консультации</li> <li>Доставка товаров</li> <li>Наше радушие</li> </ol> <li>Оптовые покупатели <ol style="list-style-type: lower-alpha"> <li>Скидки</li> <li>Дисконтная карта</li> <li>Подарочные купоны</li> </ol> </li> </ul> </dl>
-
Благодарю за наставничество.
-
Всем привет. Начал учиться верстать, и столкнулся с такой проблемой, не получается поставить текст по центру в теге <nav>. В чем ошибка, почему не выходит, подскажите? код html: <body> <header class="conteiner"> <h1>reverse obscurity</h1> <nav class="nav1"> <ul class="menu"> <li> <a href="#">home</a> </li> <li> <a href="#">services</a> </li> <li> <a href="#">portfolio</a> </li> <li> <a href="#">about </a> </li> <li> <a href="#">links </a> </li> <li> <a href="#">downloads </a> </li> <li> <a href="#">blog </a> </li> <li> <a href="#">contact</a> </li> </ul> </nav> </header> <section></section> <section></section> <footer></footer> </body> и код css: body{ background-image: url(../images/bg.png); } h1{ font-family: Monotype Corsiva; font-size: 36px; text-align: center; margin-top: 80px; } .conteiner{ width: 1180px; margin: 0 auto; } nav{ float: right; text-align: center; } .nav1{ background-color: #8d503d; height: 58px; width: 1180px; } .menu{ display: block; margin: 0 auto; width: 1062px; text-align: center; } .menu li{ float: left; display: block; margin-right: 65px; margin-left: 20px; } .menu li a{ color: #fff; text-decoration: none; }