Я искал другой вопрос по Stackoverflow, и, хотя они похожи, они, похоже, не работают именно для того, что я хочу.
Я пытаюсь сделать следующее: переместить красный div с содержимым всправа от экрана, пока плавающий вертикально в центре.Проблема с использованием абсолютного позиционирования заключается в том, что я хочу, чтобы вся страница реагировала на высоту текста на экране.за исключением случаев, когда он достигает 600 пикселей, чем я хочу, чтобы он перемещался влево на навигацию.
Проблема, с которой я продолжаю сталкиваться, заключается в том, когда я использую поле сверху: 50%;он не смещается к центру, когда я уменьшаю% выше, он выглядит хорошо на одном экране, но не на другом.Я пробовал transform translate -50%, но это делает что-то странное.
@charset "utf-8";
/* CSS Document */
html {
height: 100%;
width: 100%;
float: left;
}
body {
height: 100%;
width: 100%;
float: left;
margin: 0;
padding: 0;
background-repeat: no-repeat;
background-image: url(../img/bg.jpg);
background-size: cover;
}
footer{
background-color:rgba(34,34,34,0.5);
margin-top:10px;
display: block;
float: left;
height: auto;
width: 100%;
color:rgba(198,198,198,1.00);
position: fixed;
left: 0;
bottom: 0;
font-size: 20px;
}
#phone{
margin-top: 15px;
margin-left: 20px;
height: auto;
width: auto;
float: left;
clear: none;
display: inline-block;
vertical-align: middle;
}
#address{
display: inline-block;
float: right;
clear:none;
padding: 5px;
margin-right: 20px;
}
#BoarLogo {
width: 30%;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0.7;
z-index: -1;
}
#MainNav {
position: fixed;
float: left;
display:table;
width: 80px;
height: 100%;
}
#MainNav ul {
display: table-cell;
vertical-align: middle;
position: relative;
width: auto;
height: auto;
list-style: none;
padding: 0;
margin: 10px;
;
}
.placeholder {
padding: 10px;
height: 80px;
width: 250px;
overflow: hidden;
position: relative
}
.placeholder a img {
display: block;
float: left;
margin-right: 10px;
}
.placeholder a span {
width: auto;
height: auto;
position: relative;
float: left;
display: inline-block;
margin-top: 20px;
color: #FFF;
font-family: 'Fredericka the Great', serif;
font-size: 30px;
text-align: left;
}
.placeholder:hover {}
.linkItem:hover {
padding-left: 20px;
}
.linkItem {
height: auto;
width: auto;
display: block;
position: relative;
float: left;
}
.linkItem img {
height: 80px;
width: 80px;
}
.linkItem span {
display: none;
opacity: 0;
transition: all 1s ease;
}
#BoarLogo img {
height: auto;
width: 100%;
}
.linkItem:hover span{
opacity: 1;
}
#Social{
width: auto;
height: auto;
padding: 10px;
margin: 0;
display: block;
position: fixed;
top: 0;
right: 1px;
float: right;
}
.social_icon{
display: inline-block;
float: left;
width: 60px;
height: 60px;
margin:0;
padding: 10px;
opacity: 0.7;
transition: all 0.5s ease;
}
.social_icon:hover{
opacity: 1;
transition: all 0.5s ease;
}
.social_icon a img{
height: 60px;
width: 60px;
}
#BodytextOuter{color: #FFFFFF;
height: auto;
width: 35%;
position: relative;
float: right;
transform: translateY(-50%);
margin-top: 30%;
text-align: right;
background-color: rgba(141,0,2,0.60);
}
#Bodytext{
}
h1{
font-size: 30px;
font-family: 'Fredericka the Great', serif;
font-weight: 300;
}
h2{
font-size: 18px;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
}
#parContainer{
font-family: 'Montserrat', sans-serif;
}
@media screen and (max-width: 600px) {
/* handles css for smart phones.*/
#BoarLogo {
width: 80%;
height: auto;
opacity: 0.4;
z-index: -1;
}
footer{
padding: 5px;
background-color:rgba(0,0,0,1.00);
display: block;
float: left;
position: relative;
}
#address{
margin: 0px auto;
text-align: center;
float: left;
clear: both;
width: 100%;
height: auto;
line-height: 1;
}
#phone{
margin: 0px auto;
text-align: center;
padding: 0;
float:left;
clear:both;
width: 100%;
height: auto;
line-height: 1;
}
#Social{
background-color: rgba(0,0,0,0.75);
margin-bottom: 5px;
width: 100%;
text-align: center;
position: relative;
top: 0;
}
#Social ul{
text-align: center;
margin: 0 0 0 15% ;
display: block;
float: left;
width: 100%;
height: auto;
}
.social_icon{
width: 30px;
height: 30px;
}
.social_icon a img{
height: 30px;
width: 30px;
}
#BodytextOuter{
border-radius: 10px;
width: 50%;
float: none;
margin: 10px auto;
}
#Bodytext{
border-radius: 10px;
padding: 5px;
text-align: center;
}
.linkItem img{
width: 50px;
height: auto;
margin: 0;
padding: 0;
}
.placeholder{
width: 50px;
}
.placeholder a img{
margin: 0;
}
.linkItem{
width: 50px;
}
#MainNav{
position: fixed;
}
.linkItem:hover span{
display: none;
}
.linkItem span{
display: none;
height: 0;
width: 0;
}
#MainNav ul li{
width: 50px;
}
#MainNav ul{
width: 40px;
}
}
<!doctype html>
<html lang="en">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<meta charset="utf-8">
<title>Wild Boar Homepage</title>
<meta name="description" content="Wild Boar Cafe Restaurant is a coffeehouse in Fort Collins Colorado. ">
<meta name="keywords" content="wild boar cafe, fort collins, local business, Restaurant, Latte, Mocha, Food, Mocha, local, Cafe ">
<link href="css/main.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="file:///D|/Site/js/main.js"></script>
<link href="https://fonts.googleapis.com/css?family=Fredericka+the+Great|Montserrat" rel="stylesheet">
<link rel="icon" type="image/png" href="file:///D|/Site/img/favicon.png"/>
</head>
<body>
<div id="Social">
<!-- Social Icons upper right-->
<ul>
<li class="social_icon">
<a href="https://www.facebook.com/wild.b.coffee/" target="_blank">
<img alt="Facebook Icon" tabindex="6" src="img/Facebook_icon.png" />
</a>
</li>
<li class="social_icon">
<a href="https://www.yelp.com/biz/wild-boar-cafe-fort-collins" target="_blank">
<img alt="Yelp icon" tabindex="7" src="img/yelp_icon.png" />
</a>
</li>
<li class="social_icon">
<a href="https://www.zomato.com/northern-colorado/wild-boar-coffee-fort-collins/info" target="_blank">
<img alt="Zomato icon" tabindex="8" src="img/Zomato_icon.png" />
</a>
</li>
<li class="social_icon">
<a href="https://www.google.com/maps/place/Wild+Boar+Cafe/@40.5681612,-105.0787607,17z/data=!3m1!4b1!4m5!3m4!1s0x87694affb7c2a167:0x645c58eace5e253c!8m2!3d40.5681612!4d-105.076572" target="_blank">
<img alt="Google Maps icon" tabindex="9" src="img/Google_icon.png" />
</a>
</li>
</ul>
</div>
<nav id="MainNav">
<ul>
<li class="placeholder">
<a class="linkItem" href="#">
<img tabindex="1" alt="Home icon" src="img/home.png">
<span>Home</span>
</a>
</li>
<li class="placeholder">
<a class="linkItem" href="#">
<img tabindex="2" alt="About icon" src="img/info.png">
<span>About</span>
</a>
</li>
<li class="placeholder">
<a class="linkItem" href="#">
<img tabindex="3" alt="Menu icon" src="img/menu.png">
<span>Menu</span>
</a>
</li>
<li class="placeholder">
<a class="linkItem" href="#">
<img tabindex="4" alt="Catering icon" src="img/Catering_icon (1).png">
<span>Catering</span>
</a>
</li>
<li class="placeholder">
<a class="linkItem" href="#">
<img tabindex="5" alt="Contact icon" src="img/contact.png">
<span>Contact</span>
</a>
</li>
</ul>
</nav>
<div id="BoarLogo">
<img alt="Wild Boar Cage Logo" src="img/BoarLogo.png"/>
</div><!-- End main background logo-->
<div id="BodytextOuter">
<div id="Bodytext">
<h1 id="HomepageHead1">
Welcome to the Wild Boar Cafe
</h1>
<h2 id="HomepageHead2" style="color: rgba(183,183,183,1.00)">
We are a local cafe and restaurant in down-town Fort Collins.
</h2>
<article id="parContainer">
<p>Welcome to the new Wild Board Cafe Website! Here at the wild Boar Cafe we pride ourselves on delivering quality food and quality service. We started in 2002 and continue the tradition today. Be sure to check out our new gift cards available online.</p>
</article>
</div><!-- End Bodytext div-->
</div><!-- End BodytextOuter Div-->
<footer><!-- Adress Bar Area Div-->
<div id="phone">(970)472-1074</div>
<div id="address">1510 S. College Ave.<br>Fort Collins, CO 80524</div>
</footer>
</body>
</html>
Я в недоумении, что мне здесь делать, пожалуйста, помогите?!