1. Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела
    Скрыть объявление

[Помогите] вторая верстка, помогите до верстать.

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем Fantastic, 16 окт 2015.

  1. Fantastic

    Fantastic

    Регистрация:
    18 сен 2015
    Сообщения:
    22
    Симпатии:
    6
    Вот пока я так сверстал: http://primer-primer.esy.es

    Как сделать маску для верхней картинки, что бы она сжималась и увеличивалась так как положено? (пробовал разными способами, но у меня криво выходило и я убрал, думаю так легче помочь, чем за мной переделывать)

    Почему в div class fact-one, текст и фотография в одном section, хоть я их ставил в разные? (пробовал float делать, не помогло, не пойму что я упускаю то)

    Вот шаблон: (для тех кто согласиться помочь сделать маску) https://yadi.sk/d/eoBIgxqejmdDB

    P.S. Так как сказали что первую тему по верстке создал не правильно и надо было писать помощь, решил в эту тему с префиксом написать.
     
    Fantastic, 16 окт 2015
    #1
  2. Fantastic

    Fantastic

    Регистрация:
    18 сен 2015
    Сообщения:
    22
    Симпатии:
    6
    Пробовал работать с маской и вот что вышло http://primer-primer.esy.es/ больше у меня вариантов как сделать нет. Так что если только кто то захочет помочь.
     
    Fantastic, 22 окт 2015
    #2
  3. Fantastic

    Fantastic

    Регистрация:
    18 сен 2015
    Сообщения:
    22
    Симпатии:
    6
    Наконец то удалось решить проблему с маской, осталось узнать как убрать 1px зазор справа у маски.
     
    Fantastic, 29 окт 2015
    #3
  4. Marrie

    Marrie

    Регистрация:
    7 сен 2015
    Сообщения:
    51
    Симпатии:
    10
    само изображение (для маски) перенарезать или растянуть ее по всей ширине. Еще есть несоответствие с левой стороны - присмотрись.


    Посмотрела код - все правильно пописала, просто надо перерезать картинку. она у тебя со всех сторон по 1 пикселю пустого места
     
    Marrie, 29 окт 2015
    #4
    Fantastic нравится это.
  5. Fantastic

    Fantastic

    Регистрация:
    18 сен 2015
    Сообщения:
    22
    Симпатии:
    6
    Ну я вроде растянул, прописал же width 100% (если случайно не убрал, сейчас гляну)

    А насчет не соответствия с левой стороны и 1px пустого места, я вырезал с помощью выделения самого слоя. Ну если может что то не специально нажал (хотя врятли) или шаблон кривой.

    А как вы узнали что именно отступ 1px, программой какой то? Ну и за то что посмотрели весь код (если вы не такой же новичок как я) большое спасибо :Smile:
     
    Fantastic, 29 окт 2015
    #5
  6. Marrie

    Marrie

    Регистрация:
    7 сен 2015
    Сообщения:
    51
    Симпатии:
    10
    не весь а только пару настроек)
    картинку то перенарезали?
     
    Marrie, 29 окт 2015
    #6
    Fantastic нравится это.
  7. Fantastic

    Fantastic

    Регистрация:
    18 сен 2015
    Сообщения:
    22
    Симпатии:
    6
    Marrie, Все, пере нарезал, это проблема была в самом шаблоне, а я не обратил внимание так как вырезал просто слои, а не как в некоторых уроках учат с помощью выделения.
     
    Fantastic, 30 окт 2015
    #7
  8. Fantastic

    Fantastic

    Регистрация:
    18 сен 2015
    Сообщения:
    22
    Симпатии:
    6
    Marrie, Помогите еще пожалуйста (наверно рановато взялся за резиновый сайт, так как учил статический + начал js, но хочу добить раз начал) Вообщем надо что бы картинка в section class = fact-one при уменьшении меняла пропорции, но оставалась шириной 67% и высотой 256px. (из html у нее убирал width=100% и ставил background-size: 100%; не помогло) или это надо только через css прописывать картинку, как и верхнюю, у нее же остается одна высота? (Если не понятно что сказал, вверху есть ссылка на шаблон, там есть для разрешения 768 и 1280 + описание как нужно)

    И еще, если вы посмотрите шаблон, вот под словами Настоящий городок, стоит №1 и там слева и справа полоски, как их можно сделать?
     
    Fantastic, 31 окт 2015
    #8
  9. Marrie

    Marrie

    Регистрация:
    7 сен 2015
    Сообщения:
    51
    Симпатии:
    10
    У тебя столкоо вложеноостей...и все в перемешку.
    старайся использовать чем поменьше дивов, тем более в 10 вложенности - секшн...кака то некрасиво.
    Всегда я прошу изначально человека нарисовать все на бумаге а тогда уже писать структуру хтмл - попробуй.
    Насчет полосок - не поняла ниче.
    Насчет картинки - background-size:cover; но єто только для бекграунда! для имг такое не катит.
     
    Marrie, 1 ноя 2015
    #9
    Fantastic нравится это.
  10. Fantastic

    Fantastic

    Регистрация:
    18 сен 2015
    Сообщения:
    22
    Симпатии:
    6
    Где же лишние вложенности? Сначала идут семантические теги, которые выступают еще как фон по краям (можно было конечно заменить одним wrapper, но вложенность не уменшилось бы + потерялось бы гибкость) То есть как у меня идет main (отвечает за семантику и вон по краям) -> id=main (отвечает за блок маин, каким он должен быть и т .д.) -> div = fact-one (отвечает за блок где будет факт 1) -> и в нем уже 2 section, один для текста, а справа для картинки. То есть что внутри section на 4 вложенности. А как бы вы сделали, не ужели по вашему все очень плохо?

    Ну у меня же есть макет, не совсем понимаю для чего рисовать?

    http://s019.radikal.ru/i615/1511/f8/4122a86a5eda.png

    Ну по идее когда верстальщик сверстает страницы, потом же менеджеры по контенту добавляют еще же контент. А при использовании cms или еще чего то читал что добавляются через img, вот думал так и сделать и начал мучатся. Ну раз только так можно, то поменяю.
     
    Fantastic, 2 ноя 2015
    #10
  11. Marrie

    Marrie

    Регистрация:
    7 сен 2015
    Сообщения:
    51
    Симпатии:
    10
    Код:
    <body>
  <header>
    <div id="header">
      <nav>
        <ul>
          <li><a href="#">Иформация</a></li>
          <li><a href="#">Фото и Видео</a></li>
          <li></li>
          <li><a href="#">Карта Штата</a></li>
          <li><a href="#">Гостиницы</a></li>
        </ul>
        <a href="index.html"><img src="img/logo.png" alt="logo" title="logo"></a>
      </nav>
      <div class="white netmask">
      <h1>Седона – небольшой городок в аризоне,<br>
          заслуживающий большего!</h1>
      <p>Рассмотрим 5 причин, по которым седона круче чем гранд каньон!</p>
      </div>
    </div>
  </header>
  <main id="main">
      <section class="fact-one">
          <h2>Настоящий городок.</h2>
          <p>Седона не атракцион для турсистов, там своя жизнь</p>
        <div>
        </div>
      </section>
      <section>
        <div></div>
        <div></div>
        <div></div>
      </section>
      <section class="fact-two">
        <div></div>
        <div></div>
      </section>
    
  </main>
  <footer>
    <div id="footer">
     
    </div>
  </footer>

</body>



    <img src="img/welcome.png" alt="welcome" width="240px">
    <img src="img/sedona.png" alt="sedona" width="500px">
    <img src="img/because.png" alt="because" width="300px">
    эти или делать картинкой или сливать с беком

    <div class="netmask">
    <div class="white">
    эти можно слить.
    в меню <li></li> - пустая


    в зависимости от того что именно нужно меня контент - менеджеру. на данный момент я вижу что это больше как заставка а не наполнение.
    по полоскам:




    Код:
    <h3>№1</h3>


h3{
background:url(...) center center no-repeat;
}
    --- Добавлено, 2 ноя 2015 ---
    в шапке пустая li
    картинки можно сделать бекграундом если это не сладер
    у тебя main выполняет ту же роль что и id=main
    fact-one - внутри картинка - она тоже по смыслу может быть беком, а не как имг.

    Для начала нарисуй на бумаге каркас - это для того чтобы ты понимал что именно ты делаешь.

    насчет полосок - я бы сделала их задним фоном
     
    Marrie, 2 ноя 2015
    #11
    Fantastic нравится это.
  12. Fantastic

    Fantastic

    Регистрация:
    18 сен 2015
    Сообщения:
    22
    Симпатии:
    6
    После вашего сообщения вспомнил что чем больше картинок, тем больше запросов к серверу, тем хуже, так что буду менять. А то что вы написали сделать картинкой, вы хотлеи сказать одной картинкой что ли? (но наверно я солью с бекг.)

    Вот, по не опытности, даже не подумал что можно одним :Smile:

    Знаю, она для того что бы было 20% свободного места для лого, так как у лого position: absolut;

    Где то читал, что как то так можно с помощью css сделать, да вот закладки не осталось, не найду, тогда сделаю так.

    P.S. Спасибо вам большое за разбор моего кода :Smile:
     
    Fantastic, 2 ноя 2015
    #12
< Уроки по верстке - адаптивность | Отображения сайта на iphone >