Как разместить элемент по середине так, чтобы он не мог скролиться

@Intagan · Регистрация: 01.07.2019

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

Приветствую всех кто решит сюда заглянуть. Проблема такая я в пытался сделать свой сайт сам без всякой верстки т.е. у меня не было набросков и я все придумал сам, сел за обучалку по css и html чутка понял как все устроено и накидал набросок сайта, там вы увидите головную панель с поисковиком (который пока не работает), главная, мои покупки и аккаунт. Изначально я не планировал что этот элемент будет оставаться в верху и не будет скролится и сделал его как мог но тут я все таки решил что он не должен скроилится и всегда быть в верху экрана, дав ему свойство position: fixed вся верхняя панель съехала в лево и как это поправить я не знаю и прошу помочь с этим.

HTML5

<!DOCTYPE html>
<html leng="ru">
    <!--Нормализация стилей и подключение веб шрифтов-->
        <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">    
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title >BuyKey</title>
        <link href="css/style.css" rel="stylesheet" type="text/css">
        <link rel="shortcut icon" type="image/png" href="img/title/2wjflA7_tqs.png">
        <link href="https://fonts.googleapis.com/css?family=Comfortaa|Vollkorn&display=swap&subset=cyrillic-ext" rel="stylesheet">  
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">    
        <head>
    
<body>
    <!--Шапка-->    
    <div class="head">
        <ul class="head-panel">
            <li class="c"><a href="#" class="legend">Главная</a></li>
            <li class="c" class="button"><input type="text" value="Что ищем?" class="obl"></li>
            <li class="c"><a href="#" class="buys">Мои покупки</a></li>
            <li class="c"><a href="#" class="buys">Аккаунт</a></li>
        </ul>
    </div>
    <br/>
    <br/>
  
   
    
    <!--Панель-->
    <div class="panel"> 
        <ul class="panel-float">
            <li class="c1"><img href="#" height="100" width="100" class="logo"></li>
            <li class="c1"><blockquote class="fey">Ключи стим по выгодным ценам и таам еще какойто текст корторый может
                тут
                
                
                </blockquote></li>
        </ul>
    </div><br/>
    <br/>
    <br/>
    <br/>
    
    
    
   
    <!--товаар-->
    <div class="tv">
        <!--tovar-->
    <ul class="tv1">    
        <li class="t1"><div class="tovar">
            <div class="img">
                <img class="img" src="img/tovar/1.jpg" alt="" title="" width="250" height="117">
            </div>
                <div class="tovar-info">
                    <div class="title">
                        <a href="№" title="Название игры">Название игры</a>
                    </div>    
                </div>
            </div></li>
        <!--tovar closer-->
        
         <!--tovar-->
    <ul class="tv1">    
        <li class="t1"><div class="tovar">
            <div class="img">
                <img class="img" src="img/tovar/1.jpg" alt="" title="" width="250" height="117">
            </div>
                <div class="tovar-info">
                    <div class="title">
                        <a href="№" title="Название игры">Название игры</a>
                    </div>    
                </div>
            </div></li>
        <!--tovar closer-->
        
         <!--tovar-->
    <ul class="tv1">    
        <li class="t1"><div class="tovar">
            <div class="img">
                <img class="img" src="img/tovar/1.jpg" alt="" title="" width="250" height="117">
            </div>
                <div class="tovar-info">
                    <div class="title">
                        <a href="№" title="Название игры">Название игры</a>
                    </div>    
                </div>
            </div></li>
        <!--tovar closer-->
         <!--tovar-->
    <ul class="tv1">    
        <li class="t1"><div class="tovar">
            <div class="img">
                <img class="img" src="img/tovar/1.jpg" alt="" title="" width="250" height="117">
            </div>
                <div class="tovar-info">
                    <div class="title">
                        <a href="№" title="Название игры">Название игры</a>
                    </div>    
                </div>
            </div></li>
        <!--tovar closer-->
        
         <!--tovar-->
    <ul class="tv1">    
        <li class="t1"><div class="tovar">
            <div class="img">
                <img class="img" src="img/tovar/1.jpg" alt="" title="" width="250" height="117">
            </div>
                <div class="tovar-info">
                    <div class="title">
                        <a href="№" title="Название игры">Название игры</a>
                    </div>    
                </div>
            </div></li>
        <!--tovar closer-->
        
         <!--tovar-->
    <ul class="tv1">    
        <li class="t1"><div class="tovar">
            <div class="img">
                <img class="img" src="img/tovar/1.jpg" alt="" title="" width="250" height="117">
            </div>
                <div class="tovar-info">
                    <div class="title">
                        <a href="№" title="Название игры">Название игры</a>
                    </div>    
                </div>
            </div></li>
        <!--tovar closer-->
        
         <!--tovar-->
    <ul class="tv1">    
        <li class="t1"><div class="tovar">
            <div class="img">
                <img class="img" src="img/tovar/1.jpg" alt="" title="" width="250" height="117">
            </div>
                <div class="tovar-info">
                    <div class="title">
                        <a href="№" title="Название игры">Название игры</a>
                    </div>    
                </div>
            </div></li>
        <!--tovar closer-->
        
         <!--tovar-->
    <ul class="tv1">    
        <li class="t1"><div class="tovar">
            <div class="img">
                <img class="img" src="img/tovar/1.jpg" alt="" title="" width="250" height="117">
            </div>
                <div class="tovar-info">
                    <div class="title">
                        <a href="№" title="Название игры">Название игры</a>
                    </div>    
                </div>
            </div></li>
        <!--tovar closer-->
        
         <!--tovar-->
    <ul class="tv1">    
        <li class="t1"><div class="tovar">
            <div class="img">
                <img class="img" src="img/tovar/1.jpg" alt="" title="" width="250" height="117">
            </div>
                <div class="tovar-info">
                    <div class="title">
                        <a href="№" title="Название игры">Название игры</a>
                    </div>    
                </div>
            </div></li>
        <!--tovar closer-->
        
         <!--tovar-->
    <ul class="tv1">    
        <li class="t1"><div class="tovar">
            <div class="img">
                <img class="img" src="img/tovar/1.jpg" alt="" title="" width="250" height="117">
            </div>
                <div class="tovar-info">
                    <div class="title">
                        <a href="№" title="Название игры">Название игры</a>
                    </div>    
                </div>
            </div></li>
        <!--tovar closer-->
        
         <!--tovar-->
    <ul class="tv1">    
        <li class="t1"><div class="tovar">
            <div class="img">
                <img class="img" src="img/tovar/1.jpg" alt="" title="" width="250" height="117">
            </div>
                <div class="tovar-info">
                    <div class="title">
                        <a href="№" title="Название игры">Название игры</a>
                    </div>    
                </div>
            </div></li>
        <!--tovar closer-->
        
         <!--tovar-->
    <ul class="tv1">    
        <li class="t1"><div class="tovar">
            <div class="img">
                <img class="img" src="img/tovar/1.jpg" alt="" title="" width="250" height="117">
            </div>
                <div class="tovar-info">
                    <div class="title">
                        <a href="№" title="Название игры">Название игры</a>
                    </div>    
                </div>
            </div></li>
        <!--tovar closer-->
        
         <!--tovar-->
    <ul class="tv1">    
        <li class="t1"><div class="tovar">
            <div class="img">
                <img class="img" src="img/tovar/1.jpg" alt="" title="" width="250" height="117">
            </div>
                <div class="tovar-info">
                    <div class="title">
                        <a href="№" title="Название игры">Название игры</a>
                    </div>    
                </div>
            </div></li>
        <!--tovar closer-->
        
         <!--tovar-->
    <ul class="tv1">    
        <li class="t1"><div class="tovar">
            <div class="img">
                <img class="img" src="img/tovar/1.jpg" alt="" title="" width="250" height="117">
            </div>
                <div class="tovar-info">
                    <div class="title">
                        <a href="№" title="Название игры">Название игры</a>
                    </div>    
                </div>
            </div></li>
        <!--tovar closer-->
        
         <!--tovar-->
    <ul class="tv1">    
        <li class="t1"><div class="tovar">
            <div class="img">
                <img class="img" src="img/tovar/1.jpg" alt="" title="" width="250" height="117">
            </div>
                <div class="tovar-info">
                    <div class="title">
                        <a href="№" title="Название игры">Название игры</a>
                    </div>    
                </div>
            </div></li>
        <!--tovar closer-->
         <!--tovar-->
    <ul class="tv1">    
        <li class="t1"><div class="tovar">
            <div class="img">
                <img class="img" src="img/tovar/1.jpg" alt="" title="" width="250" height="117">
            </div>
                <div class="tovar-info">
                    <div class="title">
                        <a href="№" title="Название игры">Название игры</a>
                    </div>    
                </div>
            </div></li>
        <!--tovar closer-->
         <!--tovar-->
    <ul class="tv1">    
        <li class="t1"><div class="tovar">
            <div class="img">
                <img class="img" src="img/tovar/1.jpg" alt="" title="" width="250" height="117">
            </div>
                <div class="tovar-info">
                    <div class="title">
                        <a href="№" title="Название игры">Название игры</a>
                    </div>    
                </div>
            </div></li>
        <!--tovar closer-->
         <!--tovar-->
    <ul class="tv1">    
        <li class="t1"><div class="tovar">
            <div class="img">
                <img class="img" src="img/tovar/1.jpg" alt="" title="" width="250" height="117">
            </div>
                <div class="tovar-info">
                    <div class="title">
                        <a href="№" title="Название игры">Название игры</a>
                    </div>    
                </div>
            </div></li>
        <!--tovar closer-->
         <!--tovar-->
    <ul class="tv1">    
        <li class="t1"><div class="tovar">
            <div class="img">
                <img class="img" src="img/tovar/1.jpg" alt="" title="" width="250" height="117">
            </div>
                <div class="tovar-info">
                    <div class="title">
                        <a href="№" title="Название игры">Название игры</a>
                    </div>    
                </div>
            </div></li>
        <!--tovar closer-->
        
    
       
        </ul>
   
     
 </div><br/>
    
    
    
<body> 
</html>

CSS

/*font-family: 'Comfortaa', cursive;
font-family: 'Vollkorn', serif;*/
 
html {
    font-family: 'Comfortaa', cursive;
    font-size: 16px;
    line-height: 1.5;
}
 
body{
    background-image:url("https://upload.wikimedia.org/wikipedia/commons/4/46/%D0%A1%D0%B5%D1%80%D1%8B%D0%B9_%D1%86%D0%B2%D0%B5%D1%82-_2014-03-15_18-16.jpg");
}
 
.head {
    width: 960px;
    margin: 0 auto;
    color: aliceblue;
    position: fixed;
    
}
.head:before{
    content: '';
    display: block;
    height: 50px;
    width: 100%;
    background: #000;
    position: absolute;
    left: 0;
    z-index: -1; 
    
}
 
.head-panel{
    margin: 0;
    padding: 0;
    list-style: none;
    height: 50px;
}
 
.c{
    float: left;
    padding: 0 30px;
    line-height: 50px;
}
 
.legend{
    transition:0.5s all;
    color: #d13a26;
    display: block;
    height: 50px;
    padding: 0 30px;
    text-decoration: none;
    font-size: 20px;
    border-radius: 30px;
    font-weight: bolder;
}
.legend:hover {
    transform:scale(1.5);
    transition:0.5s all;
}
 
.obl {
    transition:0.5s all;
    width: 300px;
    height: 30px;
    opacity: 0.5; 
}
.obl:hover {
    opacity: 1;
    transition:0.5s all;
}
 
.panel-float{
    margin: 0;
    padding: 0;
    list-style: none;
    height: 50px;
    
    
    
}
 
.buys {
    display: block;
    padding: 0 3px;
    height: 50px;
    text-decoration: none;
    font-size: 20px;
    border-radius: 30px;
    font-weight: bolder;
    color: #d13a26;
    transition:0.5s all;
}
 
.buys:hover {
    transition:0.5s all;
    transform: scale(1.5);
}
 
 
.panel {
    display: block;
    width: 1000px;
    margin: 0 auto;
    color: aliceblue;
    background-attachment: fixed;
    background-position: center center;
}
.panel:before {
    content: '';
    display: block;
    height: 100px;
    width: 1000px;
    background: #34baeb;
    position: absolute;
    z-index: -1; 
    
}
 
.c1 {
    float: left;
    right: auto;
    padding: 0 5px
    
    
    
}
.katalog{
    display: block;
    width: 100px;
    margin: 0 auto;
    color: aliceblue;
    background-attachment: fixed;
    
    
    
}
 
.katalog:before{
    content: '';
    display: block;
    height: 300px;
    width: 1000px;
    background: ;
    position: absolute;
    z-index: -1; 
    
    
}
 
.tv{
    
    display: block;
    width: 1000px;
    margin: 0 auto;
    color: aliceblue;
    background-attachment: fixed;
    background-position: center center;
}
 
.tv:before{
    content: '';
    display: block;
    height: 1000%;
    width: 1000px;
    background: #34baeb;
    position: absolute;
    z-index: -1; 
    
}
 
 
.tv1 {
    border: 0px solid black;
    margin: 0;
    padding: 0;
    list-style: none;
    height: 50px;
    
    
}
 
 
 
.t1 {
    float: left;
    padding: 0 30px;
    line-height: 30px;
    max-width: 1000px;
    
}
 
.podval {
    float: right;
    
    
    
}

Также вот файл с моим сайтом полностью кому требуется

Комментарий модератора

Используйте соответствующие теги в редакторе для форматирования кода!

@Intagan · 14.01.2020, 10:11 **[ТС]**

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

@Intagan · 14.01.2020, 10:12 **[ТС]**

Вот так

@gogolik · 14.01.2020, 10:43

Для .head делаем ширину 100% и чёрный фон, внутрь ещё один блок с меню шириной 960px.
Код особо не читал, так как не читабельно. Учитесь использовать теги форматирования.

@Intagan · 14.01.2020, 11:07 **[ТС]**

googlik Простите за такой код просто при отправке вся табуляция сбилась к сожалению.

Добавлено через 4 минуты
К сожалению ваш способ не работает при приближении все элементы панели просто накладываются друг на друга так как их ширина постоянно 100% от размера страницы.

@Alex Web · 14.01.2020, 11:25

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

К сожалению ваш способ не работает при приближении все элементы панели просто накладываются друг на друга так как их ширина постоянно 100% от размера страницы.

значит надо адаптировать под мобильные и планшеты

@Intagan · 14.01.2020, 11:31 **[ТС]**

Ох если бы я знал как это делается, я совсем недавно этим занялся и мало что знаю. Именно по этому у меня возникаю такие проблемы, вот знал бы я все особенности этих языков разметки тогда бы все сделал бы сам. )))

@Alex Web · 14.01.2020, 11:36

CSS

.head {
        width: 100%;
        color: aliceblue;
        position: fixed;
    }
 
  .head-panel{
    margin: 0 auto;
    padding: 0;
    list-style: none;
    height: 50px;
    width: 1000px;
    }

@Intagan · 14.01.2020, 12:26 **[ТС]**

Боже да вы гений спасибо да это помогло.

@Intagan 0 / 0 / 0 Регистрация: 01.07.2019 Сообщений: 58
	14.01.2020, 10:11 [ТС]	2
	Вот как это у меня выглядит, а должно как на панели только не должно скролится. Миниатюры 0

@Intagan 0 / 0 / 0 Регистрация: 01.07.2019 Сообщений: 58
	14.01.2020, 10:12 [ТС]	3
	Вот так Миниатюры 0

@gogolik Модератор 2687 / 1759 / 761 Регистрация: 13.03.2010 Сообщений: 5,846
	14.01.2020, 10:43	4
	Для `.head` делаем ширину 100% и чёрный фон, внутрь ещё один блок с меню шириной 960px. Код особо не читал, так как не читабельно. Учитесь использовать теги форматирования. 0

@Intagan 0 / 0 / 0 Регистрация: 01.07.2019 Сообщений: 58
	14.01.2020, 11:07 [ТС]	5
	googlik Простите за такой код просто при отправке вся табуляция сбилась к сожалению. Добавлено через 4 минуты К сожалению ваш способ не работает при приближении все элементы панели просто накладываются друг на друга так как их ширина постоянно 100% от размера страницы. 0

@Alex Web 238 / 161 / 67 Регистрация: 18.06.2016 Сообщений: 509
	14.01.2020, 11:25	6
	Сообщение от Intagan К сожалению ваш способ не работает при приближении все элементы панели просто накладываются друг на друга так как их ширина постоянно 100% от размера страницы. значит надо адаптировать под мобильные и планшеты 0

@Intagan 0 / 0 / 0 Регистрация: 01.07.2019 Сообщений: 58
	14.01.2020, 11:31 [ТС]	7
	Ох если бы я знал как это делается, я совсем недавно этим занялся и мало что знаю. Именно по этому у меня возникаю такие проблемы, вот знал бы я все особенности этих языков разметки тогда бы все сделал бы сам. ))) 0

@Intagan 0 / 0 / 0 Регистрация: 01.07.2019 Сообщений: 58
	14.01.2020, 12:26 [ТС]	9
	Боже да вы гений спасибо да это помогло. 0

Как разместить элемент по середине так, чтобы он не мог скролиться

Решение