2
Я создал веб-сайт с двумя белыми виджетами боковой панели, серой коробкой и некоторыми цветными кнопками. В настоящее время элементы виджета и круга позиционируются с использованием атрибута CSS left:175px; для #mw-panel, между тем #right-navigation li a размещается с использованием right: 30em;.CSS: настройка контейнеров Div с использованием поля
К сожалению, это только выглядит лучше всего на моем конкретном экране 1080p. Если окно браузера изменено, элементы виджета и кнопки начинают перекрывать основную статью.
Я попытался превратить left: 175px; в margin-right: 20px;, так что виджеты сохраняют постоянное расстояние 20px между изделием. Попробовав это, мои белые виджеты попали в левый край окна моего браузера. Затем я попытался изменить отображение: absolute; к чему-то другому, но я был не понятен.
Что мне нужно изменить в моем коде, чтобы получить тот же результат, что и на картинке?
#right-navigation li a {
font-size: 14px;
color: white;
text-shadow: 4px 4px 15px #000;
display: block;
padding-left: 60px;
opacity: 0;
-webkit-transition: all .4s cubic-bezier(.4, 0, .2, 2);
transition: all .4s cubic-bezier(.4, 0, .2, 2);
width: 250px;
}
#right-navigation li, #right-navigation li:after {
-webkit-transition: all .2s cubic-bezier(.4, 0, .2, 1);
transition: all .2s cubic-bezier(.4, 0, .2, 1);
}
#right-navigation li:after {
content:'';
width: 10px;
height: 10px;
border-radius: 50%;
left: 20px;
top: 20px;
}
#right-navigation li:hover:after {
width: 50px;
height: 50px;
left: 0;
top: 0;
}
#right-navigation li:hover > li {
transform: rotate(90deg);
}
#right-navigation li:hover a {
opacity: 1;
padding-left: 75px;
}
#right-navigation li{
border-radius: 50%;
margin-top: 10px;
width: 50px;
height: 50px;
box-shadow: 0 0 4px rgba(0, 0, 0, .11), 0 4px 8px rgba(0, 0, 0, .22);
transition: 0.2s opacity;
}
#left-navigation {
position: absolute;
}
#right-navigation{
position:absolute;
right: 30em;
top: 250px;
}
.content .entry {
background-color: #6b6b6b;
}
#mw-panel,#p-personal {
padding: 1em;
background: #fff;
border-radius: 10px;
position: absolute;
left: 175px;
width: 240px;
}
#ca-view{
top: 120px;
background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABi0lEQVRIS+3VvUuWYRQG8J99URZBo4MkNAgOhlBLlNoQFDhLCtIf0KJEYkRkH2RSCA3SILa2C4KDUhYEgUNDEARODkJTBJEffXHkvPFgr74avIt5TzfPfd33dc55znWdGlVeNVV+384kaEI76rGEd5jG13XlPIILOIlaLOAF3hdxxRI1YxRnE/ADe1gr4xc8xoP8dhPXECSxArs3929wNQP78w8aMZeAYTzHfEbWhgG0Yhz7cAWzeIhX+IYT6EZ/BnUKH0oZ3Mjo4pHXZTorMpnC+bw8g0v4WQZ7Lklv4X6JYBC38/JGnVvCxPndxJfDxptBfAeD/0qwdnkTDf3aJfiPS9SBPrTgWFrFR0zgIK5n5zxJRV9EQ4rvE95iBC836qIVLCYgvOUwTuMMlnEoCVZTM6Hi8KpQchCFNx3NYP7SwWX0pmLXt/hx3EMPoscjgyFE1MUVNtKJRxgrCq0Lk2lqm82gsJTPeFphUNWllTwrKTmYv29huu0vlKgS/ABWduZEq5T6ts6rXqLfh2hoGXiHSEYAAAAASUVORK5CYII=') no-repeat center,radial-gradient(#00FFFF, #00878E);}
#ca-ve-edit{
top: 180px;
background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABMklEQVQ4T53USytFURgG4IeBOz+GUiISUQYmLhGSKPlDp0SSlCQJuY0MlZl/Yqbc+7SPdqd9Oees6Vr72d+7vrVWi+ZHKypYxiqug2pp0gtsHxvJ9+9YwFWzYD+e0JYqKND5RsE+DOARszirQV8bAQN7QFT3Fy8DrdQL9ibYUO2epdA7zNUD9uAewzUN/G8ExvCMtzIwsPjzSM5pCHQQL9X5IrAbtxgtOFq72MFPGdiVYBElb+xhO43lHexO3GC8ADvAVi2WBQYWV2iiADvEJr6z1qT3sCPBJguwo+S6ZWLpCgO7xFQBdoz1vMrSTWlPsOkC7ARr+Cp7TCJyNGCmYOEpVurBqpH/z1AGGpc/3rvSytKR88BzLOGzLGZ6PiJngRdYbBTLixzdjufpo5HKqmt/AYr2Pul4ZEE5AAAAAElFTkSuQmCC') no-repeat center, radial-gradient(yellow, #BD9D01);
}
#ca-edit,#ca-viewsource{
top: 240px;
background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAtklEQVRIS92VwQ3CMAxFXyeBURgFJilMAqMwCmxSWYqlUuzEapJWai+92P/Z34kz0PkbOutzfMAZ+BRszMbkLLonYf17nGycB5CkEXgAEYAbawFUXCq+Aa+CRVfgmWL+CloC5uKR6pXt5s0BUXEZ6hs4AV/gkg6Cma+AWnG3EwG0EjchUYBnizX/n4IjFq0WF3dKQ64Sl/Y2PabWkJpftCUkctmya2W3ZaeddF3XTV7T4z+Z1TZNfeFJGe4QW0kAAAAASUVORK5CYII=') no-repeat center, radial-gradient(orange, #B75D00);
}
.site-inner,
.wrap{margin:0 auto;max-width:1200px;}
.site-inner{clear:both;padding-top:40px;}
body {
background-image: linear-gradient(#434343, #282828);
color: #555;
font-family: Open Sans, sans-serif;
font-size: 14px;
line-height: 24px;
margin: 0;
}<body class="full-width-content">
<link rel="stylesheet" id="child-theme-css" href="https://vocaloid.de/wp-content/themes/Vuturize/style.css" type="text/css" media="all">
<div id="mw-panel">
<div class="portal" role="navigation" id='p-navigation' aria-labelledby='p-navigation-label'>
<h3 id='p-navigation-label'>Box1</h3>
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</div>
</div>
<div class="site-inner">
<div class="content-sidebar-wrap">
<main class="content">
<article id="content" class="page type-page entry">
<h1>Demo</h1>
<div id="bodyContent" class="mw-body-content">
<div id="jump-to-nav" class="mw-jump">
<a href="#mw-head">Navigation</a>
</div>
</div>
</article>
</main>
</div>
<div id="mw-head">
<div id="p-personal" role="navigation" class="" aria-labelledby="p-personal-label">
<h3 id="p-personal-label">Box2</h3>
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST</div>
<div id="right-navigation">
<div id="p-views" role="navigation" class="vectorTabs" aria-labelledby="p-views-label">
<h3 id="p-views-label">Ansichten</h3>
<ul>
<li id="ca-view" class="selected">
</li>
<li id="ca-ve-edit">
</li>
</ul>
</div>
</div>
</div>
</div>
Пожалуйста, предоставьте остальную часть своего CSS и сделайте скрипку/codepen. Самый простой способ помочь кому бы то ни было - это повторить проблему. – theblindprophet
@theblindprophet В настоящее время внедрен полный CSS-код.Сознательно, я не добавлял CSS. Если бы у меня было, вам пришлось бы переопределить код. Осмотр элемента может сработать, по моему мнению .. Или это из-за решения проблем другим? Ну, я это исправлю. –