Некорректно отображается мой первый сделанный сайт на html на телефоне и планшете

@kolya781 · Регистрация: 07.03.2015

Author24 — интернет-сервис помощи студентам

Первое фото это отображение сайта с телефона, а второе это с компьютера. Вопрос. Почему так получилось? Что надо сделать для этого, что бы было нормально?

@Mikhail Shell · 08.03.2015, 09:34

kolya781, покажите код, чтобы было ясно в чем проблема.

@kolya781 · 08.03.2015, 13:44 **[ТС]**

HTML5

<html>
    <head>
        <title>Главная-Сайт Клана |EMARICA|</title>
        <link href="style.css" rel="stylesheet" type="text/css">
    </head>
<body>
<script type="text/javascript">
    document.ondragstart = noselect; 
    // запрет на перетаскивание 
    document.onselectstart = noselect; 
    // запрет на выделение элементов страницы 
    document.oncontextmenu = noselect; 
    // запрет на выведение контекстного меню 
    function noselect() {return false;} 
</script>
<h1 align="center" style="color:red;">Сайт клана |EMARICA| CS:GO</h1>
<br>
<a href="index.html"><img src="CSGO-logo.png" class="glavnaya" width="170" height="120" style="margin-top:-50px;"></a>
<form>
<div align="right"><input type="search" placeholder="Поиск по сайту" style="border-radius:8px" class="search"></div>
<div align="right"><input type="submit" value="Поиск" class="iskat"></div>
</form>
<a href="index.html"><div class="menu">Главная</a></div>
<a href="#/"><div class="menu1">О Нас</a></div>
<a href="#/"><div class="menu2">Карты</a></div>
<a href="#/"><div class="menu3">Состав клана</a></div>
<a href="#/"><div class="menu4">О Кейсах</a></div>
<a href="#/"><div class="menu5">Ножи</a></div>
<a href="#/"><div class="menu6">Обратная связь</a></div>
<div class="diamond">Популярные карты CS:GO</div>
<span class="li">1.<img src="cache.jpg" width="400" height="225">
<br>
<span class="li">2.<img src="cbble.jpg" width="400" height="225">
<br>
<span class="li">3.<img src="cbble.jpg" width="400" height="225">
<div align="right"><a href="http://vk.com/club27240439" target="_blank" title="Наша группа в ВКонтакте"><img class="vk" src="ico-vkontakte.png"></a></div>
<div align="right"><a href="https://www.facebook.com/Colya.Cubarev" target="_blank" title="Создатель сайта в Facebook"><img class="facebook" src="ico-facebook.png"></a></div>
<div align="right"><a href="https://twitter.com/Nikolay__1995" target="_blank" title="Создатель сайта в Twitter"><img class="twitter" src="ico-twitter.png"></a></div>
<div align="right"><a href="https://instagram.com/kolya_kubarev/" target="_blank" title="Создатель сайта в Instagram"><img class="instagram" src="ico-instagram.png"></a></div>
<div align="right"><a href="http://www.youtube.com/user/kolya69rus" target="_blank" title="Создатель сайта в YouTube"><img class="youtube" src="ico-youtube.png"></a></div>

CSS

body{
background:#000080;
}
.glavnaya{
border-radius:70px 70px 70px 70px;
}
.glavnaya:hover{
border-color:red;
}
.search{
margin-right:90px;
margin-top:-110px
}
.iskat{
margin-top:-110px;
margin-right:30px;
border-radius:8px;
background:green;
}
.menu{                                                       /*Главная*/
background:yellow;
color:green;
border-radius:18px 18px 18px 18px;
width:107px;
margin-top:150px;
font-size:28px;
text-align:center;
}
A:visited{
color:green;
}
A:link{
color:green
}
A:link{
color:green;
}
A{
text-decoration:none;
}
.menu:hover{
background:black;
border-color:red;
}
.menu1{                                                      /*О нас*/
margin-left:150px;
margin-top:-32px;
background:yellow;
color:green;
border-radius:18px 18px 18px 18px;
width:107px;
font-size:28px;
text-align:center;
}
.menu1:hover{
background:black;
border-color:red;
}
.menu2{
margin-left:300px;
margin-top:-32px;
background:yellow;
color:green;
border-radius:18px 18px 18px 18px;
width:107px;
font-size:28px;
text-align:center;
}
.menu2:hover{
background:black;
border-color:red;
}
.menu3{
margin-left:450px;
margin-top:-32px;
background:yellow;
color:green;
border-radius:18px 18px 18px 18px;
width:170px;
font-size:28px;
text-align:center;
}
.menu3:hover{
background:black;
border-color:red;
}
.menu4{
margin-left:660px;
margin-top:-32px;
background:yellow;
color:green;
border-radius:18px 18px 18px 18px;
width:150px;
font-size:28px;
text-align:center;
}
.menu4:hover{
background:black;
border-color:red;
}
.menu5{
margin-left:860px;
margin-top:-32px;
background:yellow;
color:green;
border-radius:18px 18px 18px 18px;
width:150px;
font-size:28px;
text-align:center;
}
.menu5:hover{
background:black;
 
}
.menu6{
margin-left:1050px;
margin-top:-32px;
background:yellow;
color:green;
border-radius:18px 18px 18px 18px;
width:200px;
font-size:28px;
text-align:center;
}
.menu6:hover{
background:black;
}
.diamond{
background:yellow;
color:red;
height:35px;
width:400px;
font-size:28px;
margin-top:50px;
margin-left:14px;
font-style:italic;
}
.li{
color:red;
}
.vk{
margin-right:200px;
margin-top:-860;
}
.vk:hover{
border-style:outset;
color:white;
}
.facebook{
margin-top:-860;
margin-right:160px;
}
.facebook:hover{
border-style:outset;
color:white;
}
.twitter{
margin-top:-860;
margin-right:120;
}
.twitter:hover{
border-style:outset;
color:white;
}
.instagram{
margin-top:-860;
margin-right:80px;
}
.instagram:hover{
border-style:outset;
color:white;
}
.youtube{
margin-top:-860;
margin-right:40;
}
.youtube:hover{
border-style:outset;
color:white;
}

@Mikhail Shell · 08.03.2015, 15:47

Сообщение от kolya781

<a href="index.html"><div class="menu">Главная</a></div>

Открывать тег в одном теге и закрывать в другом теге - не самая лучшая идея
И также чтобы все на смартфонах не "ехало", желательно все меню, логотипы и прочее запихать в главный, большой блок. А еще меню, логотипы и прочее надо запихать тоже в отдельные блоки (div).
Попробуйте такой вариант решения задачи!

@kolya781 · 08.03.2015, 16:56 **[ТС]**

честно я не понял, что вы имели в виду. Вы можете показать на моем примере?

@RaZiL · 09.03.2015, 05:34

у тебя <a><div></a></div>
надо <a></a><div></div>

@Mikhail Shell · 09.03.2015, 08:47

Желательно все пункты меню (ссылки), поместить в список (ul).

HTML5

<ul>
<li><a href="#"><div>ссылка</div></a></li><!--в вашем случае это такое расположение эелементов-->
<li><a href="#"><div>ссылка</div></a></li>
<li><a href="#"><div>ссылка</div></a></li>
<li><a href="#"><div>ссылка</div></a></li>
<li><a href="#"><div>ссылка</div></a></li>
<li><a href="#"><div>ссылка</div></a></li>
</ul>

Также может возникнуть вопрос о том как их расположить по горизонтали, а делается это:

CSS

1	display:inline; /к li/

Далее чтобы убрать маркеры надо прописать к списку

CSS

1	list-style:none;

А затем пробуйте стилизовать с помощью вложенности елементов.
К примеру:

CSS

1	ul li a div{...}

@kolya781 · 09.03.2015, 11:34 **[ТС]**

Спасибо, в принципе я так хотел сделать, но что то передумал) попробую отпишусь)

@kolya781 0 / 0 / 0 Регистрация: 07.03.2015 Сообщений: 5
		1
	Некорректно отображается мой первый сделанный сайт на html на телефоне и планшете 07.03.2015, 13:05. Показов 2525. Ответов 7 Метки нет (Все метки) Первое фото это отображение сайта с телефона, а второе это с компьютера. Вопрос. Почему так получилось? Что надо сделать для этого, что бы было нормально? Миниатюры 0

@Mikhail Shell 52 / 52 / 39 Регистрация: 15.11.2014 Сообщений: 696
	08.03.2015, 09:34	2
	kolya781, покажите код, чтобы было ясно в чем проблема. 0

@Mikhail Shell 52 / 52 / 39 Регистрация: 15.11.2014 Сообщений: 696
	08.03.2015, 15:47	4
	Сообщение от kolya781 <a href="index.html"><div class="menu">Главная</a></div> Открывать тег в одном теге и закрывать в другом теге - не самая лучшая идея И также чтобы все на смартфонах не "ехало", желательно все меню, логотипы и прочее запихать в главный, большой блок. А еще меню, логотипы и прочее надо запихать тоже в отдельные блоки (div). Попробуйте такой вариант решения задачи! 0

@kolya781 0 / 0 / 0 Регистрация: 07.03.2015 Сообщений: 5
	08.03.2015, 16:56 [ТС]	5
	честно я не понял, что вы имели в виду. Вы можете показать на моем примере? 0

@RaZiL 2 / 2 / 3 Регистрация: 21.04.2013 Сообщений: 25
	09.03.2015, 05:34	6
	у тебя <a><div></a></div> надо <a></a><div></div> 0

@kolya781 0 / 0 / 0 Регистрация: 07.03.2015 Сообщений: 5
	09.03.2015, 11:34 [ТС]	8
	Спасибо, в принципе я так хотел сделать, но что то передумал) попробую отпишусь) 0