Как оптимизировать этот код CSS?

Я - CSS новичок. Я просто тяну основную страницу HTML со следующим кодом:

<html>
  <head>
    <title>Hey</title>
    <link href="style.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    
    <div class="container">
      <div class="left-side"></div>
      <div class="main-content"></div>
    </div>
    <div class="foot"></div>
  </body>
</html>

Вот style.css:

.top-menu{
    position: fixed;
    top: 0;
    left: 70px;
    right: 70px;
    height: 50px;
    background-color: #000000;
}
.container{
    margin: 70px 70px 20px 70px;
    display: inline-block;
    width: 91%;
}

.left-side {
    width: 30ex;
    min-height: 30ex;
    float: left;
    background-color: blue;
}
.main-content {
    width: 80ex;
    float: right;
    background-color: red;
    min-height: 100ex;
}
.foot {
    background-color: green;
    height: 5ex;
    width: 91%;
    margin-left: 10ex;
}

Цель прямая. Но CSS смотрит crap.even некоторые проблемы. Я хочу задать некоторые вопросы:

1. Левый и правый край контейнера составляет 70 пкс, и то же самое к главному меню, но от хромового просмотра, почему делает это не выровненный?

2. Почему появляется горизонтальная полоса прокрутки, когда я установил 'контейнерную ширину в 100 процентов (то же самое как часть ноги)?

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

4. Могли вы парни давать мне лучший код стиля css?

2
nl ja de

3 ответы

I understand that you prefer to use CSS3 and the latest html standard but the

tag has not been adopted by that many browser vendors. I would stray away from using it. IE9 is the first IE to adopt it and there is plenty of users still on IE6/7.

Take

out and replace with a normal <div class="header">...</div> and then reference using CSS .header { }.

Чтобы ответить на № 2 - вы не можете заявить ширину: 100%; и затем добавляют слева/справа края и не ожидают горизонтальную полосу прокрутки. В принципе контейнер охватит вне 100%.

Я не уверен, почему вы добавляете показ: действующий блок; контейнерному отделению. Только у действующих элементов должна когда-либо быть эта декларация (т.е. текстовые элементы). Есть ли определенная причина почему так?

Кроме того, когда вы сначала создаете шаблон HTML и проверяете его, удостоверьтесь, что вы всегда добавляете содержание в отделения и не просто оставляете их незаполненный. Добавление минимальная высота:... не надежная система. Я всегда добавляю в поддельном тексте - "привет привет", достаточен.

Lastly, add an appropriate html doctype. Perhaps you trimmed it for the question part but is this xhtml or html? This relates further with the use of

. Not all doctypes support
.

0
добавлено
Слава Богу это не больше, чем 0.3% использует IE6. Я просто ссылался на идею, что принятие html5 займет время, и в этот переходный период мы должны опасаться определенных тегов HTML <�заголовок> , который не мог бы работать как ожидалось.
добавлено автор ProfileTwist, источник
IE6 не причина рекомендации; IE9 первый, чтобы поддержать <�заголовок> подразумевать, что IE8 не поддерживает его. P.S.> theie8countdown.com
добавлено автор ProfileTwist, источник
Есть not' t, что многие люди, использующие IE6/7 больше. 0.3& IE6 и IE7 на 1.2%. Большинство пользователей IE использует IE8, но OP может всегда использовать что-то как ie9.js, чтобы вызвать совместимость с элементами HTML5.
добавлено автор Kyle, источник
Спасибо за ваши советы. Я просто получил поездку всей минимальной высоты от всех элементов. Причина, которую я должен заявить показу контейнера, состоит в том, что часть ноги была бы, накладываясь к контейнерной части, если я просто получаю поездку атрибута дисплея. какие-либо идеи?
добавлено автор LeoShi, источник
IE6 не достаточно хорошая причина рекомендовать заменить семантическое повышение отделениями, особенно когда это берет скромную сумму JS, чтобы заставить его работать. P.S. ie6countdown.com
добавлено автор cimmanon, источник

2. Почему появляется горизонтальная полоса прокрутки, когда я установил 'контейнерную ширину в 100 процентов (то же самое как часть ноги)?

Поскольку, у вас есть край, который делает общую ширину больше чем 100%.

0
добавлено
Чувак спасибо. Это среднее, если я хочу выровнять контейнер, расстаются с частью главного меню, я должен установить ширину в магическое число?
добавлено автор LeoShi, источник
Нет можно всегда использовать проценты, но иметь в виду, что края / граница всегда добавляют к общей ширине элемента. Просто установите все быть в подобных 98%.
добавлено автор ATOzTOA, источник

Apart from what's been already said, have you tried to use the chrome inspector to tackle theses issues? Just point the mouse on the page, right click and choose Inspect Element. There you can enable/disable some CSS properties and quickly find out what's wrong. For firefox, the equivalent is http://getfirebug.com/

Что касается вашей проблемы расположения: не волнуйтесь, это было реальной болью для всех нас, когда мы начали. Если ваш пункт не должен на самом деле изучать css, если все, что вы хотите, должно сделать это, чтобы работать раз и навсегда и вовремя, мой совет: использование структура CSS с сеткой .

У структур CSS обычно есть опрятная особенность, которую мы называем "сеткой". Это позволит вам установить расположение как ваше через 5 минут и прекратить вызывать беспокойство о том, как это отделение плавает в этом или том браузере.

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

Возьмите простую Структуру, чтобы начаться. У всех есть его фаворит, но я могу рекомендовать BluePrint начаться. И вот небольшая демонстрация сверхдержавы объединенной энергосистемы;)

0
добавлено
Чувак спасибо. Я знаю, как использовать ремешок ботинка Твиттера и другую систему насмешки. Но я просто хочу изучить реальный CSS теперь.
добавлено автор LeoShi, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)