0
Так что я новичок в веб-деле, но я не могу найти решение моей проблемы. У меня есть два divs, и когда вы меняете экран браузера на самый маленький размер или открываете его на мобильных устройствах, мои два divs перекрываются. Два пузырька исследования будет просто перекрываться, если вы сделаете окно маленьким. Это веб-сайт в действии: http://gwensume.com/RKLResearch.htmlDiv перекрывается при изменении размера браузера
Там много кода здесь жаль, что ... Я попытался изменить в Div, чтобы относительная вместо абсолютной, но которые создают эти большие белые коробки ..
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Richard K. Larson</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- RKL CSS -->
<link type="text/css" rel="stylesheet" href="RKL.css"/>
</head>
<body>
<!-- ### Header Begin ### -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="name hidden-xs">
<h1>Richard K. Larson</h1>
<h4>Professor, Linguistics</h4>
/div>
<div class="navbar-header">
<button type="button" class="navbar-toggle " data- toggle="collapse" data-target=".navbar-collapse">
<span class = "sr-only">Toggle navigation</span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<a class="navbar-brand hidden-sm hidden-md hidden-lg">Richard Larson</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav nav-pills navbar-right " role = "navigation">
<li><a href="index.html">Home</a></li>
<li class="active"><a href="RKLResearch.html">Research</a></li>
<li class = "dropdown">
<a href="#" class = "dropdown-toggle" data-toggle = "dropdown" aria-expanded = "true"> Publications <b class = "caret"></b></a>
<ul class = "dropdown-menu">
<li><a href="RKLArticles.html"> Articles </a></li>
<li><a href="RKLBooks.html"> Books </a></li>
<li><a href="RKLSoftware.html"> Software </a></li>
<li><a href="RKLPresentations.html"> Presentations </a></li>
<li><a href="RKLUnpublished.html"> Unpublished </a></li>
</ul>
</li>
<li><a href="RKLPJ.html">Port Jefferson</a></li>
<li><a href="RKLContact.html">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="darkBG2 col-xs-9 col-sm-8 col-md-8 col-lg-8">
<h3>The Structure & Projection of DP:</h3>
<p>LOTS OF TEXT
</p>
</div>
<div class="darkBG3 col-xs-9 col-sm-8 col-md-8 col-lg-8">
<h3>The Comparative Grammar of Intensional Transitive Verbs: </h3>
<p>MORE TEXT!
</p>
<p>
EVEN MORE TEXT!
</p>
</div>
<div class="space"></div>
CSS:
html {
background: url(backgroundlyra.jpg) no-repeat center center fixed;
background-attachment: fixed;
background-size: cover;
position: relative;
min-height: 100%;
}
h1 {font-size: 4vw;}
h4 {margin-top: -10px;}
.navbar {
background-color: #B8B8B8;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
color: #CD5C5C;
opacity: .95;
position: fixed;
display: inline;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer p {
display: inline;
margin-right: 15px;
padding-top: 60px;
bottom: 0;
height: 60px;
width: 100%;
}
.navbar p {
margin-top: -10px;
font-size: 15px;
}
.darkBG {
background: #B8B8B8;
position: absolute;
top: 160px;
right: 50px;
border-radius: 10px;
opacity: .95;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
padding: 10px;
margin-left: 50%;
}
.darkBG2 {
background: #B8B8B8;
position: absolute;
top: 20vh;
border-radius: 10px;
opacity: .95;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
padding: 0 10px 10px 10px;
margin: 100px;
display: inline;
height: 30%;
}
.darkBG3 {
background: #B8B8B8;
position: absolute;
top: 55vh;
border-radius: 10px;
opacity: .95;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
padding: 0 10px 10px 10px;
display: inline;
margin: 100px;
height: 60%;
}
img {
margin-left: 4%;
top: 160px;
float: left;
position: absolute;
border-radius: 10px;
max-width: 100%;
height: 21vh;
width: 21vw;
}
.navbar-brand {
color: #CD5C5C;
}
.space {
opacity: 0;
}
Удивительный! благодаря! немного больше настроек и его идеальное спасибо! Помимо исправления navbar, что только что сделало его огромным, что было проблемой, которую вы видели с ним? – Gwen
@ Gwen - как этот принятый ответ? это взлом, и то, что я вам сказал, это правильный путь. – vsync
@vsync Как это взломать? Я просто удалил ненужные стили из своего кода. Его столбцы перекрывались из-за абсолютного позиционирования. Я удалил эту часть, и она работает так, как обычно должны стоять колонки начальной загрузки. Проверьте ссылку, которую он поделил. Я не сделал ничего плохого здесь. – tkay