Jump to content
  • 0

Как делаются мультибраузерные сайты?


м.н.с.
 Share

Question

Привет всем!

Я новичок, делаю свою первую простую персональную страничку. Нужна помощь.  

В хроме сайт выглядит нормально, а в мозиле и IE все сдвинуто в право и увеличен масштаб. Картинка становится дефектной. Уменьшил масштаб страницы в браузере со 100% на 80 % и вид сайта нормализовался.

Сделал проверку кодов Dreamweaver-ом, он что то исправил, нашел ошибку  "удвоение поля потока" у непринципиальной линии, короче не помог исправиить дело.

Сайт еще не загружен в интернет, открываю его через нотпад.

Вот эта страничка  html форума с моим вопросом в хроме выглядит нормально, а в мозиле ее масштаб увеличен, но это не портит общую картину. Все блоки находятся на своих местах.

А в моем случае увеличение масштаба привело к сильному сдвиганию центральных блоков в право. Не красивая картинка.

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

 

В чем может быть дело?

1. в фиксированной ширине и выравнивании по центру на сайте и увеличении масштаба в браузере?

2. говорят, что добротная вёрстка получается при использовании float:left и float:right, а я применял в css position:absolute; top:...px; left:...px;

3.....

 

Я попробую проверить эти два совета в меру своего понимания их сути, а вопрос такой - 

есть ли шаблоны мультибраузерных сайтов с объяснениями, что бы посмотреть их коды и использовать.

Я смотрел код этой страницы (htmlforum), но ничего не понял.

Зарание спасибо.

 

Link to comment
Share on other sites

12 answers to this question

Recommended Posts

  • 0

Спасибо за отклики. Заменил в css position:absolute; top:...px; left:...px; на margin и картинка в мозиле выравнялась. Хоть масштаб картинки и увеличен по сравнению с таковым в хроме, но общий вид в мозиле теперь приемлем.

Теперь в хроме проблемы. При масштабе страницы 100% в header блоки с заголовком и меню заметно сдвинуты в лево. Если увеличиваю масштаб страницы до 110% все нормализуется, вид примерно такой же как в мозиле.

Как же всетаки добиться мультибраузерности сайта?

firebug стоит, пользуюсь. А как выложить код на sfiddle ? На ютубе есть видео, но все на английском. Есть ли инструкции по работе на этом сайте на русском?

Link to comment
Share on other sites

  • 0

Ну инструкцию нашел - Вставлять нужно и css и html и js - если есть и только потом нажимать на "run"... В 4-ом блоке увидите результат.

Вставил. В 4-ом блоке мой сайт, где нет картинок в header и нет картинок кнопок меню, только их названия.

В блоке  html   на желтом фоне сообщения -

No need for the META tags.
No need for the HEAD tag, it's already in the output.
For JavaScript use the panel below or the Resources panel for external files.
For external CSS files use the Resources panel on the left.
Перевод -
"Нет необходимости в тегах META.
Нет необходимости в теге HEAD, это не уже на выходе."

Что практически нужно делать по таким результатам?

Link to comment
Share on other sites

  • 0

Ввел весь код начиная с body - "run" =  В 4-ом блоке мой сайт, где нет картинок в header и нет картинок кнопок меню, только их названия. Никаких сообщений. Либо ошибок нет, либо все там ушли на обед. Что то это смахивает на "а король то голый"...

Link to comment
Share on other sites

  • 0

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

 

Как подправите - напишите здесь ссылку на ваш проект в фиддл (в фиддле кнопочка save), и после перезагрузки там появится ссылка. вот её сюда в напишите.


Если не разберётесь - пишите мне в скайп, попробую помочь.

Link to comment
Share on other sites

  • 0

Ок. save работает после регистрации. Как зарегистрироваться на этом сайте не понятно.

Спасибо видеокурсам Е.Попова по html - пальцем паказал на сайты валидаторы: https://ru.wikipedia.org/wiki/%D0%92%D0%B0%D0%BB%D0%B8%D0%B4%D0%B0%D1%82%D0%BE%D1%80_%D1%84%D0%BE%D1%80%D0%BC%D0%B0%D1%82%D0%B0

Тут:

Результаты проверки моих 6 css файлов - ошибок нет.

Результаты проверки html файла - 12 ошибок с описанием, указанием номера строки.

0c6e18e46b93t.jpg

 

ЭТО понять не возможно.

И главное, Попов говорит, что даже если все коды соответствуют требованиям, это не является 100% гарантией того, что сайт будет выглядеть на разных сайтах одинаково.

Сухой осадок - путь добиться мультибраузерности сайта валидацией кодов - тупиковый.

 

Так как же делаются мультибраузерные сайты?

У меня сайт в хроме и в мозиле выглядят по разному (дальше не цензурно...).

Edited by м.н.с.
Link to comment
Share on other sites

  • 0

Что-то я не наблюдаю у вас открывающего тега 

<html>

На эту первую ошибку и ругается валидатор. + у вас кажется доктайп строгий.

 

Читаем о доктайпе

 

<html xmlns="http://www.w3.org/1999/xhtml">

 

Это вторая ваша ошибка. 

 

И пишите все теги в нижнем регистре.

Edited by Q4Dizzy
Link to comment
Share on other sites

  • 0
Большое спасибо всем за неравнодушие! В основном все получилось. Помогла подсказка -

 

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

 

Прошу помощи еще в двух мелочах:

1.     Сайтом jsfiddle.net пользоваться придется. Прошу помочь разобраться и в этом, а то я дальше этого не двигаюсь -

9deec2239e64t.jpg

Как правильно работать здесь?

 

2. Сейчас в хроме из динамической кнопки меню выпала вниз черта. 

43b4c035db08t.jpg

В мозиле все нормально. Что тут надо предпринимать?
Link to comment
Share on other sites

  • 0

Сохраните ваш код на фидле. и напишите сюда ссылку.. сохранение можно сделать и без регистрации..


Картинок нет,потому что скорее всего в css написан относительный путь к ним. так как проект на фиддле, картинки обычно заливаются в инет на радикал или другой пообный сервис. И после этого  в фиддле уже в колонке css пишется абсолютный путь к ним.   Как подправите - напишите здесь ссылку на ваш проект в фиддл (в фиддле кнопочка save), и после перезагрузки там появится ссылка. вот её сюда в напишите.
 
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

×
×
  • 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