0
У меня есть контактная страница с тремя значками, которые расположены горизонтально рядом друг с другом. Проблема возникает при изменении размера браузера на размер телефона (480 пикселей примерно так), divs начинают течь друг над другом, а стек изображений сверху, и на самом деле это не то, что я хочу. Я хочу, чтобы они либо шли ниже друг друга, либо масштабировались соответственно.Предотвращать перемещение divs друг от друга
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<!--===================================================css links===================================================!-->
<link href='http://fonts.googleapis.com/css?family=Raleway:600,500,400,200' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,900,100,300' rel='stylesheet' type='text/css'>
<link href="css/default_style.css" rel="stylesheet" type="text/css" />
<link href="css/contact_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--===================================================Header===================================================!-->
<div class="wrapper">
<div class="headerwrap">
<div class="social"> <a href="www.facebook.com"><img class="move" src="images/deviant.png"></a>
<a href="www.facebook.com"><img class="move" src="images/yt.png"/></a>
<a href="www.facebook.com"><img class="move" src="images/fb.png"/></a>
</div>
<!--close social!-->
<div class="header">
<div class="logo">
<img src="images/logo.png" />
</div>
<!--close logo-->
</div>
<!--close header!-->
<div class="menu">
<ul class="menutxt">
<li><a href="index.html">HOME</a>
</li>
<li><a href="about.html">PORTFOLIO</a>
</li>
<li><a href="manga.html">CONTACT</a>
</li>
</ul>
</div>
<!--close menu!-->
</div>
<!--close headerwrap!-->
<!--===================================================Contact===================================================!-->
<div class="toptxt">
<div id="test2">
<p class="menutxt">Get in touch...</p>
</div>
</div>
<div class="detailwrap">
<div class="contactspace"></div>
<!--close contactspace!-->
<div class="contact">
<img class="move2" class="hover" src="images/me2.png">
<p class="text">Luke Babich</p>
</div>
<!--close contact!-->
<div class="contact">
<img class="move2" class="hover" src="images/phone.png">
<p class="text">+27 72 836 0954</p>
</div>
<!--close contact!-->
<div class="contact">
<img class="move2" class="hover" src="images/mail.png">
<p class="text">[email protected]</p>
</div>
<!--close contact!-->
<div class="contactspace"></div>
<!--close contactspace!-->
</div>
<!--close detailwrap!-->
<!--===================================================Footer===================================================!-->
<div class="footerwrap2">
<p class="foottxt">Designed and developed by Luke Babich- All Rights Reserved ©2015</p>
</div>
<!--close footerwrap!-->
</div>
<!--close wrapper!-->
</body>
</html>
CSS:
@charset "utf-8";
/*---------------------------- Content ----------------------------*/
.toptxt{
margin-top:70px;
width:100%;
}
/*.contactwrap{
width:100%; change back if cant figure it out
margin-top:60px;
}*/
.detailwrap{
top:70px; /*remove if needed*/
position:relative;
width:100%;
}
/* clearfix */
.detailwrap:after {
content: "";
display: table;
clear: both;
}
.contact{
position:relative;
width: 15%;
float: left;
margin: 0 1% 2% 0;
}
.contactspace{
float:left;
width: 25%;
margin: 0 1% 1% 0;
}
.contact img{
width:90px;
display: block;
margin:0 auto;
}
.contact .text {
position:relative;
top:-15px;
text-align:center;
visibility:hidden;
}
.contact:hover .text {
animation: fadein 2s;
visibility:visible;
}
img.move2 {
bottom:0px;
transition: transform 1s cubic-bezier(0.2, 1, 0.44, 1.2);
}
img.move2:hover {
-moz-transform: translate(-2px, -2px);
-ms-transform: translate(-2px, -2px);
-o-transform: translate(-2px, -2px);
-webkit-transform: translate(-2px, -2px);
transform: translate(0px, -10px)
}
/*---------------------------- Content ----------------------------*/
.contentwrap{
margin-top:500px;
width:100%;
z-index:500;
background:#171717;
}
.textwrap{
position:relative;
width:100%;
-moz-box-shadow: 0px -10px 20px 0px #000;
-webkit-box-shadow: 0px -10px 20px 0px #000;
box-shadow: 0px -10px 10px 0px #000;
}
/* clearfix */
.textwrap:after {
content: "";
display: table;
clear: both;
}
.content,
.divider,
.content2,
.contentspace {
text-align:center;
float: left;
}
.divider{
width: 24%;
float: left;
margin: 0 1% 1% 0;
}
.divider img{
display: block;
margin-top:50px;
margin-left: auto;
margin-right: auto;
}
.content,
.content2 {
width: 15%;
float: left;
margin: 0 1% 1% 0;
}
.content img{
width:15%;
}
.contentspace{
width: 20%;
margin: 0 1% 1% 0;
}
.headertxt{
font-family: 'Roboto', sans-serif;
font-weight:600;
font-size:1.5vw;
}
/*---------------------------- Footer ----------------------------*/
.footerwrap2{
position:relative;
top:70px; /*remove if needed*/
width:100%;
z-index:501;
-moz-box-shadow: 0px -10px 20px 0px #000;
-webkit-box-shadow: 0px -10px 20px 0px #000;
box-shadow: 0px -10px 10px 0px #000;
}
/*---------------------------- Textfader ----------------------------*/
#test2 p {
animation: fadein 5s;
-moz-animation: fadein 5s; /* Firefox */
-webkit-animation: fadein 5s; /* Safari and Chrome */
-o-animation: fadein 5s; /* Opera */
transition: opacity 5s;
}
@keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
@-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
Я не уверен, если проблема возникает в том, что мои дивы все же class.contact (не уверен, что должно повлиять на положение переполненных делений)
даст это. Только причина, по которой я использовал это, была взята с моей предыдущей страницы, для которой нужен хороший образ. – factordog
все права, что, кажется, решает проблему. Единственное, что неправильно, что при 780px при смене браузера изображения выходят из строя. – factordog
Вне линии, каким образом? Я просто пробовал, и единственный момент, который они не вписываются в мой опыт, - это действительно низкие разрешения (sub 350px). – AndHeiberg