Jump to content
  • 0

Помогите советом


nerei
 Share

Question

Добрый вечер!

 

Помогите советом касательно этого сайта testing-field.68edu.ru, хотел сделать его "резиновым", получилось шальное верхнее меню... 

 

Хотелось бы послушать, Ваше мнение, что не так, какие ошибки (не только меню), где фатальные ошибки, где тихий ужас ) Может там всё тихий ужас )

 

Думал, что бы сделать меню картинка-спрайт, ну не могу я выкинуть в топку эту мысль, что ублажался. Может я где то зациклился хз. ) 

Link to comment
Share on other sites

10 answers to this question

Recommended Posts

  • 0
.content {  background-color: #F7F7F9;  min-height: 600px;  max-height: 100%;  border: solid 2px #E9EDF1;  width: 100%;  margin: auto;  padding: 3px;  overflow: auto;  font-size: 16px;  word-wrap: break-word;  box-shadow: 0 0 5px rgba(0,0,0,0.5);

 

Фаталити.

С таким кодом вы будете очень долго строить этот сайт. Наймите профи, либо беритесь за книги. 

Edited by advokatua
Link to comment
Share on other sites

  • 0
Наймите профи, либо беритесь за книги. 

Ну как бы изначально целью темы было "взгляд со стороны" на мой подход к сайта-строению. Конкретно интересовало почему едет меню, почему я его не могу выровнять по центру, где конфликт, где ошибка. 

Это не совсем сайт на продажу, это мои мытарства, практика, обучение на практике если угодно ) 

Напомню, раздел: Для начинающих 

Link to comment
Share on other sites

  • 0

 

 

Это не совсем сайт на продажу,

Я о таком и не осмелился подумать. Понятно было только, что это какой-то свой проект. Если же это тупо черновичок, то так лучше и указывать сразу  ;)

 

Пока хорошее настроение:

.layer3 {

  border: 3px solid #2B332F;

  max-width: 100%;

  min-width: 787px;

  margin: 2px auto;

  min-height: 50px;

  border-bottom-right-radius: 40px 30px;

  border-bottom-left-radius: 40px 30px;

  box-shadow: 0 0 10px rgba(0,0,0,0.5);

  overflow: hidden;

}

Edited by advokatua
Link to comment
Share on other sites

  • 0
Пока хорошее настроение:

Ну тут я пытался нагло привязать ширину блока оставив её "резиновой" стояло просто width: 100%; падинг врапера прижимал блок с 2-х сторон.

.wraper {padding:0px 15%;overflow:auto;}

При уменьшение масштаба браузера меню в блоке .layer3 съезжает в лево, я не могу его привязать к центру блока.

Может не стоило злоупотреблять свойствами padding margin ? Слишком много обёрток ? Убрав рамку и overflow конечно много проще бы стало ...

 

На самом деле я "игрался" с элементами пока в конец всё не запуталось ) 

Link to comment
Share on other sites

  • 0
.wraper { margin: 0 auto; padding: 0 15%; width: 80%; }

Ну тогда это получается обращение к #top-menu{

 

Всё таки я наверное сглупил в том, что попытался css кнопки зажать дивом, но по сути это текст в блоке, кнопки не привязанны к друг другу и о того рушуться при ctrl+ ctrl-  если бы это была картинка она бы ровно встала по центру зажатая padding'ами, а если я хочу css конпку (как текст), то ограничивать его узким блоком нельзя иначе либо кнопки сыпятся либо вылезают за пределы дива ... получается, что так :\

Link to comment
Share on other sites

  • 0
Ну тогда это получается обращение к #top-menu{

 

у вас в первом посту был вопрос именно про меню.

резиновое меню (особенно списками) вообще трудно ровнять по центру.

как вы вообще себе представляете выравнивание резины по центру?

хотя... если в процентах и не 100%, а скажем 80-90% там... то можно в принципе.

Link to comment
Share on other sites

  • 0
если в процентах и не 100%, а скажем 80-90% там... то можно в принципе.

Ну получается, что нельзя именно в этом случае, % и пытался сделать, даже с ещё одно обётркой фиксированной ширины...выходит, что границы блоков в этом случае отталкиваются и layer3  расползается на суммарную ширину внтреннего блока + отступы.

 

как вы вообще себе представляете выравнивание резины по центру?

Меня мучала мысль, что как это так все блоки выровнял, а блок с меню нет, то он выезжает за пределы, то упирается в бок и разъежается. :\

Да всё верно тут не обмануть браузер, особенно список не станет "железным" на "резинке" ...

Edited by nerei
Link to comment
Share on other sites

  • 0

Всегда! Нужно начинать с продумывания структуры, каркаса кода, потом css для правильного поведения этого каркаса во всех браузерах, потом наполнение контентом, как небольшим, так и избыточным - для тестирования, ну а потом уже все остальное.

Link to comment
Share on other sites

  • 0

Всегда! Нужно начинать с продумывания структуры, каркаса кода, потом css для правильного поведения этого каркаса во всех браузерах

 

Да, на первом этапе я не думал про валидность кода и кроссо браузерность, просто игрался с кодом смотря "как", "что","зачем","почему", потом после того, как тот бы заработал в основных браузерах, хотел отлавливать ошибки, погрузить его в ietester'e, посмотреть как он себя поведёт, куда съедет, посмотрел бы на свои ошибки, потом адаптация, что в css для ie писать, какие "костыли" придумывать, что любит, что не люит ... да я знаю в htmlboor всегда указывается где что работает, а где нет, но я лучше запоминаю на практике. Меню вывело меня из калеи, я зациклился и хорошо, что спросил здесь на форуме.

 

Я очень сильно "не подумал", что это списки, что элементы списка привязаны друг к другу флоатом и отступами, что конечно он посыпится, если я попытаюсь его зажать.

Можно было бы сдеалть вертикальное меню, прижать его к левой стенке к примеру, можно даже сделать было бы выпадающие списки ...

 

Вот сейчас думаю ещё с гридами повозится, давно советовали, но всё не как не доходил до них :\

 

Спасибо всем, кто помог советом, рад, что откликнулись ))

Edited by nerei
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By qqruz
      Мне нужен код для автоматической публикация последних видео с нескольких каналов ютюб, что бы они шли последовательно. Я перерыл весь интернет и нечего не нашел, сам тоже пытался написать, но из-за слабого знания языка и малого количества видео не могу. Надеюсь на чью-то поддержку.
    • By fooxy96
      Здравствуйте! Нужна помощь хорошо разбирающихся людей в верстке. Написал часть сайта (html, css) адаптив. На сайте только шапка, поисковая форма, вход и корзина.
      Подскажите, что я сделал не правильно в коде.
      Какими способами можно реализвать форму поиска с кнопкой, вход, и корзину. Я понимаю что много ошибок, хоть код и не большой.
      Буду благодарен за любой отзыв и разбор.
      Спасибо!!!
      ссылка на сайт — u1071267.isp.regruhosting.ru
    • By FotGOD
      Здравствуйте. Верстаю макет, но чтото не так. Подобные верстал раньше, все было хорошо, даже сверяю, все чуть ли не под копирку написал. Но в Этом коде почему-то строки в меню слиплись и не могу их раскинуть. на рисунке как должно быть, и как выходит. Что не так делаю?
       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; }  


    • By plarfox
      Здравствуйте, помогите разобраться, делаем кастомные радиобаттоны, скрываем те что по умолчанию, с помощью span рисуем новые (псевдокласс :before для состояния отмеченности), стилизуем поведение в разных состояниях, :hover  :focus  :checked
         Проблема в том что после задания стилей  для :focus (которые передают обводку со скрытых радиобаттонов) эта обводка отображается не только после использования tab и нажатий с клавиатуры, но и при нажатии мышкой. В общем цель в том что-бы обводка от фокуса появлялась только при манипуляции с клавиатуры, а при нажатии с мыши и разных состояний (:hover :checked) ее не было , для них свои стили
      P. S. Изучаю пока-что HTML и CSS, надеюсь это можно сделать без Javascript
      <ul> <li class="filter-option"> <label><input class="visually-hidden filter-input-radio" type="radio" value="one" name="radio"> <span class="radio-indicator"></span> Радиокнопка 1 </label> </li> <li class="filter-option"> <label><input class="visually-hidden filter-input-radio" type="radio" value="two" name="radio"> <span class="radio-indicator"></span> Радиокнопка 2 </label> </li> <li class="filter-option"> <label><input class="visually-hidden filter-input-radio" type="radio" value="three" name="radio"> <span class="radio-indicator"></span> Радиокнопка 3 </label> </li> </ul>  
      .visually-hidden input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0); } .filter-option { position: relative; margin-bottom: 25px; padding-left: 38px; } .filter-option label { cursor: pointer; } .radio-indicator { content: ""; position: absolute; top: -3px; left: 0; width: 21px; height: 21px; border: 4px solid #4d4d4d; border-radius: 50%; opacity: 0.5; } .filter-input-radio:checked + .radio-indicator::before { content: ""; position: absolute; top: 7px; left: 7px; width: 8px; height: 8px; background-color: #4d4d4d; border-radius: 50%; opacity: 0.5; } .filter-option:hover, .filter-option:hover .radio-indicator, .filter-option:hover .radio-indicator::before { color: #000000; opacity: 1; } .filter-input-radio:focus + .radio-indicator { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; opacity: 1; } .filter-input-radio:focus + .radio-indicator::before { opacity: 1; }  
    • By turre
      Здравствуйте.
      Помогите с Html и css
      Сам я начинающий и пока только учусь.
      Есть index.html к нему style.css получается криво, а надо одинаковые строчки.
      Спасибо.
      P.S. буду признателен если подскажите как сделать что бы текст был строго по центу.
      index.html
      style.css

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy