Проблема с разрешением и гипертекста

150

25 ноября 2018, 15:10

Сайт должен быть таким:

Но при изменении разрешения все изменяется на такое:

Так же при наведении курсора на текст Chat, он не меняет цвет и не изменяется шрифт ссылки. Так же пробывал a.hover, style italic. Но не работает, а на других ссылках работает]3

Так же эта ссылка работает не только когда на нее нажмешь, а и с боку (справа). Хотя мышка не на ссылке а с боку, а она работает.

'https://jsfiddle.net/buk2q1xc/1/'

Answer 1

Не понятно вы хотите использовать flex-box или нет. Очень много элементов подогнано вручную. Я бы выполнял примерно так:

* { 
  margin: 0; 
} 
body{ 
  background-color:black; 
} 
.header{ 
  display:flex; 
  justify-content: center; 
  align-items: center; 
  height: 110px; 
  background-color:#101417; 
} 
h1{ 
color:white; 
margin:0; 
} 
.menu { 
  background-color:red; 
} 
 
.menu ul { 
  display:flex; 
  flex-direction: row; 
  justify-content: center; 
  list-style-type: none; 
} 
 
.menu li { 
  margin: 10px 20px 10px 20px; 
} 
.container{ 
  margin:20px 0px 0px 0px; 
  background-color:balack; 
  display:flex; 
  justify-content: space-around; 
} 
.left{ 
  height:500px; 
  width:20%; 
  background-color:black; 
  border:1px solid grey; 
} 
 
.center{ 
  height:500px; 
  width:50%; 
  background-color:black; 
  border:1px solid grey; 
} 
.right{ 
  height:500px; 
  width:20%; 
  background-color:black; 
  border:1px solid grey; 
}

<div class='header'> 
  <h1 align="center">Tunika7</h1> 
</div> 
<div class='menu'> 
  <ul> 
    <li>Главная</li> 
    <li>Создатели</li> 
    <li>Логин</li> 
  </ul> 
</div> 
<div class="container"> 
  <div class="left"></div> 
  <div class="center"></div> 
  <div class="right"></div> 
</div>