Что не так с кодом?
я только недавно начала программировать, хотела этот код опубликировать на netlify, и тут проблема, мой сайт показывает серый экран, без всяких ошибок. при том в браузере хром все хорошо работало, но как только я кидаю сайт на хост, то все, тоже самое на всех бесплатных хостах было, не знаю в чем проблема, второй день маюсь на счет этого, и в тупую что то могла не замечать
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="css/styles.css" /> <title>Social</title> </head> <body> <!--instagram--> <div class="inst"> <a href="http://surl.li/ovyqo"> <img src="img/inst.png" width="305" height="305" alt="instagram" /> <span class="inst-txt">@zjedn.oczeni</span> </a> </div> <!--facebook--> <div class="fb"> <a href="http://surl.li/owbzh"> <img src="img/face.png" width="305" height="305" alt="facebook" /> <span class="fb-txt">Zjednoczeni</span> </a> </div> <!--tiktok--> <div class="tt"> <a href="http://surl.li/owcdk"> <img src="img/TikTok.svg" width="305" height="305" alt="tiktok" /> <span class="tt-txt">Zjedn.oczeni</span> </a> </div> <!--web--> <div class="web"> <a href="https://kossowskimarcin07.wixsite.com/zjednoczeni"> <img src="img/web.png" width="305" height="305" alt="website" /> <span class="web-txt" >https://kossowskimarcin07.wixsite.com/zjednoczeni</span > </a> </div> </body> </html> |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="css/styles.css" /> <title>Social</title> </head> <body> <!--instagram--> <div class="inst"> <a href="http://surl.li/ovyqo"> <img src="img/inst.png" width="305" height="305" alt="instagram" /> <span class="inst-txt">@zjedn.oczeni</span> </a> </div> <!--facebook--> <div class="fb"> <a href="http://surl.li/owbzh"> <img src="img/face.png" width="305" height="305" alt="facebook" /> <span class="fb-txt">Zjednoczeni</span> </a> </div> <!--tiktok--> <div class="tt"> <a href="http://surl.li/owcdk"> <img src="img/TikTok.svg" width="305" height="305" alt="tiktok" /> <span class="tt-txt">Zjedn.oczeni</span> </a> </div> <!--web--> <div class="web"> <a href="https://kossowskimarcin07.wixsite.com/zjednoczeni"> <img src="img/web.png" width="305" height="305" alt="website" /> <span class="web-txt" >https://kossowskimarcin07.wixsite.com/zjednoczeni</span > </a> </div> </body> </html>
html, body { margin-top: 0; height: 100%; font-family: "Montserrat", sans-serif; background: #d9d9d9; width: 1760px; height: 768px; } * { margin: 0; padding: 0; outline: 0; box-sizing: border-box; } .inst { position: fixed; top: 776px; left: 2100px; } .inst-txt { color: #575757; font-family: Inter; font-size: 170px; font-weight: 300; position: fixed; top: 825px; left: 2450px; } .fb { position: fixed; top: 1176px; left: 2100px; } .fb-txt { color: #575757; font-family: Inter; font-size: 170px; font-weight: 300; position: fixed; top: 1247px; left: 2470px; } .tt { position: fixed; top: 1576px; left: 2100px; right: 887px; } .tt-txt { color: #575757; font-family: Inter; font-size: 170px; font-weight: 300; position: fixed; top: 1630px; left: 2470px; } .web { position: fixed; top: 1976px; left: 2100px; right: 887px; } .web-txt { color: #575757; font-family: Inter; font-size: 80px; font-weight: 300; position: fixed; top: 2075px; left: 2470px; } |
html, body { margin-top: 0; height: 100%; font-family: "Montserrat", sans-serif; background: #d9d9d9; width: 1760px; height: 768px; } * { margin: 0; padding: 0; outline: 0; box-sizing: border-box; } .inst { position: fixed; top: 776px; left: 2100px; } .inst-txt { color: #575757; font-family: Inter; font-size: 170px; font-weight: 300; position: fixed; top: 825px; left: 2450px; } .fb { position: fixed; top: 1176px; left: 2100px; } .fb-txt { color: #575757; font-family: Inter; font-size: 170px; font-weight: 300; position: fixed; top: 1247px; left: 2470px; } .tt { position: fixed; top: 1576px; left: 2100px; right: 887px; } .tt-txt { color: #575757; font-family: Inter; font-size: 170px; font-weight: 300; position: fixed; top: 1630px; left: 2470px; } .web { position: fixed; top: 1976px; left: 2100px; right: 887px; } .web-txt { color: #575757; font-family: Inter; font-size: 80px; font-weight: 300; position: fixed; top: 2075px; left: 2470px; }
сайт если что, должен выглядеть вот так
Дополнительно:
Можешь дашь ссылку на то, что выкладываешь? По твоему описанию проблему не понять.
Нажмите несколько раз на ctrl + - до тех пора пока не увидите свои ссылки.
Вы пишете фиксированным элементам left 2100px
Если ширина окна браузера будет больше, то увидите и так...
Ну и вниз тоже очень много.
Уберите все position: fixed
Почитайте основы верстки, про поток документа, флексы, гриды и т.д.
Про флексы я вам уже в прошлый раз писала и даже пример показывала, но вы проигнорировали..
Полно видео на ютубе или тренажерчики от HTML Academy
1. Уберите всюду position: fixed и координаты left и top
2. У html и body уберите размеры
3. Для body задайте
body { display: flex; flex-direction: column; gap: 50px; justify-content: center; align-items: center; min-height: 100vh; margin: 0; } |
body { display: flex; flex-direction: column; gap: 50px; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }
4. Уменьшите размер шрифта до приличных размеров
В браузере поставьте масштаб 100% (можно с помощью сочетания кнопок Ctrl + 0)
Да, всё встанет не совсем так, как вам хочется, иконки не будут друг под другом, но это уже отдельная история.
Это будет первым шагом к нормальному отображению.
А дальше придется пойти изучать теги, атрибуты, свойства и т.д.
при том в браузере хром все хорошо работало
Угу
Если вы в том окне хрома сделаете масштаб 100%, то тоже останется только фон.
Списку задать flex или grid и width: fit-content
Будет ровнее.
Стратегия может быть разной.
Я бы, всё таки потратила бы некоторое время на изучение основ. Чтобы получить представление о том, какие теги, атрибуты и свойства вообще есть и что они делают.
А потом, разбивая задачу на мелкие, гуглила бы при необходимости.
Ответы:
Ну во-первых такую верстку через position: fixed делать это то еще извращение
А во-вторых, что это вообще за координаты в 2000+ пикселей, при каком это разрешении должно быть в центре экрана?
.inst { position: fixed; top: 776px; left: 2100px; } |
.inst { position: fixed; top: 776px; left: 2100px; }
И вот это еще:
html, body { margin-top: 0; height: 100%; font-family: "Montserrat", sans-serif; background: #d9d9d9; width: 1760px; height: 768px; } |
html, body { margin-top: 0; height: 100%; font-family: "Montserrat", sans-serif; background: #d9d9d9; width: 1760px; height: 768px; }
Зачем делать жесткие размер html и body? И самое главное почему эти размеры меньше тех, которые для ссылок прописаны? Это даже не верстка, это чисто ЛОГИКА
Почитай хотя бы про флексы что ли
- у меня размеры баговались по полной, делала все что могла, что бы нормально выглядело
только учусь, не знаю как это все работает - Fasolll,
Почитай хотя бы про флексы что ли
И тогда в 3 строки кода эти ссылки будут расположены ровно по центру экрана
- Fasolll, подозреваю что ты пытаешься верстать просто копируя размеры из макета на фигме или подобного графического редактора. Уже второй вопрос с такими размерами. Подсказка - чем копировать неизвестно что начни читать с самого начала - про html, css, js. Времени потратишь больше, зато толк будет.
Проблема явно с вёрсткой, как уже писали нужно делать иначе. У тебя на компьютере работает, возможно, из за того что ты уменьшила масштаб на странице. Попробуй покрутить масштаб странице, которую ты захостила и убедиться что твой сайт на месте
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Чтобы определить, что именно не так с кодом, необходимо изучить его внимательно и выявить возможные ошибки. Вот несколько шагов, которые помогут вам разобраться с проблемой:
1. Проверьте синтаксис кода. Убедитесь, что все скобки, точки с запятой, кавычки и другие символы используются правильно и стоят на своем месте.
2. Проверьте правильность написания ключевых слов и функций. Возможно, вы ошиблись в названии переменной или вызвали функцию с неправильными аргументами.
3. Проверьте логику вашего кода. Убедитесь, что алгоритм работы программы правильный и не содержит логических ошибок.
4. Проверьте область видимости переменных. Убедитесь, что все переменные объявлены и используются в правильной области видимости.
5. Проверьте наличие ошибок в логике условий. Удостоверьтесь, что все условия в ваших операторах if, else if, else написаны правильно и не пропущены.
Если после выполнения этих шагов проблема не будет решена, вам может потребоваться более подробный анализ кода. В таком случае, вы можете задать вопрос на форуме или обратиться к специалисту по программированию для дальнейшей помощи.
Пример использования тега
для подсветки синтаксиса PHP: <pre lang="php">