Intereting Posts
Проверьте все остальные флажки, если один из них отмечен AngularJS, работает только правильно в firefox, почему? Как изменить цвет курсора без изменения цвета текста? Как я могу автоматически выбирать определенные переключатели с помощью Greasemonkey? Как защитить файлы PHP от загрузки? Удалите параметр «Все файлы» из ввода файла HTML Угловой компонент разрушает информацию о высоте гибкой коробки для ее дочерних элементов Intro.js 2 страницы, затем вернитесь домой Добавление отступов для выбора параметров Возможно ли создать polymerный элемент без Html? 6 .htaccess Rewrites: Удалить index.html, Удалить .html, Force non-www, Force Trailing Slash Строка запроса: может ли строка запроса содержать URL-адрес, который также содержит строки запроса? Bootstrap 4 – Липкий нижний колонтитул – Динамическая высота нижнего колонтитула Изменение липкого навигационного цвета на основе цвета div ниже сохранить выбранное значение в форме html, после нажатия кнопки Submit

Позиции элементов при изменении размера браузера или масштабировании в / из

Я очень новичок в HTML / CSS, и я до сих пор не знаю некоторых важных атрибутов при сохранении элементов на своих позициях, даже когда браузер масштабирует / удаляет или когда размер браузера изменяется.

Мне удалось сохранить некоторые изображения, зафиксированные на их позиции, но искаженные при изменении размера браузера.

Вот моя работа:

HTML

home.php

p.copyright { font-weight: bold; text-align: center; font-style: regular; } .clear { clear: both; } #header { display: block; width: 80%; top: 0; z-index: 1; text-align: center; position: fixed; overflow: hidden; margin-left:10%; } #footer { width: 80%; position:fixed; display: block; bottom: 0px; overflow: hidden; margin-left:10%; } #logo { position: relative; text-align: left; margin-left: 0; float: left; height: 95px; width:300px; } #navcontainer { display: block; margin-right:0; float: right; position: relative; } #textbox { position: relative; float: right; height: 95px; width:300px; } #htimg, #bb-sb { position: relative; } #navcontainer ul { padding:0px list-style-type: none; text-align: center; } #navcontainer ul { list-style-type: none; } #navcontainer ul li { display: inline; } #navcontainer ul li a:hover { color: red; background-color: #; } 

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

Решение состоит в том, что вы изучаете Twitter Bootstrap: http://twitter.github.io/bootstrap/

Это набор библиотек для CSS, который делает ваш сайт «отзывчивым», что означает, что он в основном изменяет размеры и перемещает вещи в зависимости от размера браузера.

Попробуйте resize, и вы увидите разницу: http://twitter.github.io/bootstrap/examples/hero.html

Сделать это вручную по частям собирается свести вас с ума, если ваши знания по CSS / HTML бедны, как вы сказали.

Немногие быстрые вещи должны заставить работу работать немного лучше.

Сначала удалите 2 ссылки rels, нужно только один раз. Next Wrap #Header, table, #footer в div и установите css для

 width:940px; margin:0 auto; 

Эффект состоит в том, что компоненты будут центрированы, и когда вы уменьшите размер браузера, страница не изменит размер. Отзывчивый (т. Е. Изменение вида по мере изменения размера) немного более активен.

Хотя я согласен с загрузкой PP, это хороший способ пойти, не зная, как это происходит, это вызовет проблемы в долгосрочной перспективе

РЕДАКТИРОВАТЬ

header, footer.html не нужно иметь заголовок или html, чтобы это было так.

header.html

   

footer.html

   

Файл PHP предоставляет tags html, head, body.

Также я отметил в вашем css вашу используемую позицию: исправлено много не нужно для этого 🙂

EDIT2

Вот скрипка с рабочим примером, мне пришлось удалить файл style.css, но вы можете видеть здесь, что он работает без него.