#javascript #html #css
#javascript #HTML #css
Вопрос:
Здесь у меня есть Div (div1 на рисунке), который я хочу расположить по центру страницы (теперь я использовал левое поле, чтобы разместить его в центре моего собственного компьютера, но когда другой пользователь с другим разрешением экрана открывает его, он не находится в центре.) Я пытался сделать каждый относительный / фиксированный / абсолютный / отступ / поле и искать онлайн в течение двух дней, но либо каждая часть в div1 разваливается, либо это не работает.
И в то же время я добавил текстовый div (div2) и хочу, чтобы он располагался под этим текущим div (div1), и он не располагается под ним, а скрывается под div 1. Я искал в Интернете и знаю, что он сделает это, если перед ним есть div с относительной / фиксированной позицией, он будет проигнорирован. Таким образом, я могу использовать фиксированную позицию только для div 2. чего я не хочу.И я также хочу, чтобы он располагался в центре страницы.
Основная проблема здесь в том, что моя страница не фиксирует каждый экран и в центре.
посмотреть пример страницы наhttp://circleofallnations.ca большой круг — это div1, 5 частей в нем и образуют этот круг, вот почему div1 должен быть относительным div
текст под большим кругом — это div 2. (вы можете видеть, что это картинка на странице текстовых сообщений, и я изменил ее на текстовый div в приведенном ниже коде.)
html-код:
<!DOCTYPE html>
<html>
<title>circle of all nations home page</title>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<a href ="http://www.circleofallnations.ca/canhome">
<img onmouseover="circle2()" onmouseout="circle1()" src="pictures/circle.png" alt="centre circle" class="circle" id="circle"></a>
<a href ="http://develop.gcrc.carleton.ca:8053/index.html">
<img onmouseover="above2()" onmouseout="above1()" src="pictures/above.png" alt="above" class="above" id="above"></a>
<a href ="https://www.asinabka.com/">
<img onmouseover="left2()" onmouseout="left1()" src="pictures/left.png" alt="left" class="left" id="left"></a>
<div class="rightCon" onmouseenter="right2()" onmouseleave="right1()">
<img src="pictures/right.png" alt="right" class="right" id = "right">
<div id= "right1" class = "text1"><a href="http://www.angelfire.com/ns/circleofallnations/page3.html"><pre> 2000<br>ARCHIVAL<br> SITE<br></pre></a></div>
<div id= "right2" class = "text1"><a href="http://www.circleofallnations.ca/http___circleofallnations_2014NEW_Welcome.html/Welcome.html"><pre> 2012<br>ARCHIVAL<br> SITE<br></pre></a></div>
</div>
<div class="bottomCon" onmouseenter="bottom2()" onmouseleave="bottom1()">
<img src="pictures/bottom.png" alt="bottom" class="bottom" id = "bottom">
<div id="bottomtext"><center>
<div id= "bottom1" class = "text2"><a href="https://www.facebook.com/circleofallnations/">Circle of All Nations</a></div>
<div id= "bottom2" class = "text2"><a href="https://www.facebook.com/William-Commanda-124359520927182/">William Commanda</a></div>
<div id= "bottom3" class = "text2"><a href="https://www.facebook.com/William-Commanda-Legacy-Asinabka-701369829887220/">William Commanda Legacy - Asinabka</a></div>
<div id= "bottom4" class = "text2"><a href="https://www.facebook.com/romola.thumbadoo">Romola Vasantha Thumbadoo</a></div>
<div id= "bottom5" class = "text2"><a href="https://www.facebook.com/Romolas-Nature-CAN-TEACH-PhotoArt-Page-937319673008841/">Romola's Nature CAN Photo-Art</a></div></center>
</div>
</div>
<div class="footer" style="color:#FFFFFF; font-family:Arial black;font-size:13pt; "><center>
<div><center>WILLIAM COMMANDA LEGACY</div>
<div><center>A CIRCLE OF ALL Nations</div>
<div><center>GLOBAL ECO PEACE COMMUNITY</div>
<div><center>All the original material on this website is © 2020</div>
<div><center>Asinabka and Circle of All nations</div>
<div><center>Romola@circleofallnations.ca</div>
<div><center>All rights reserved</div>
</div>
<div class="lastLine">
<a href="http://www.circleofallnations.ca/canhome" id="line1" style="color:#FFFF00; font-family:Arial;font-size:13pt; ">CIRCLE OF ALL NATIONS (CAN) 2020 HOME PAGE |</a>>
<a id="sites">
<select onChange="window.location.href=this.value">
<option selected disabled hidden>CAN ARCHIVAL SITES |</option>
<option value="http://www.angelfire.com/ns/circleofallnations/page3.html">2000 Archival Site | </option>
<option value="http://www.circleofallnations.ca/http___circleofallnations_2014NEW_Welcome.html/Welcome.html">2012 Archival Site |</option>
</select></a>>
<a href="https://www.asinabka.com/" style="color:#FFFF00; font-family:Arial;font-size:13pt;">ASINABKA |</a>>
<a href="http://develop.gcrc.carleton.ca:8053/index.html" style="color:#FFFF00; font-family:Arial;font-size:13pt;">DIGITAL ATLAS |</a>
<a id="facebooks">
<select onChange="window.location.href=this.value">
<option selected disabled hidden>FACEBOOK PAGES</option>
<option value="https://www.facebook.com/circleofallnations/">Circle of All Nations |</option>
<option value="https://www.facebook.com/William-Commanda-124359520927182/">William Commanda |</option>
<option value="https://www.facebook.com/William-Commanda-Legacy-Asinabka-701369829887220/">William Commanda Legacy-Asinabka |</option>
<option value="https://www.facebook.com/romola.thumbadoo">Romola Vasantha Thumbadoo |</option>
<option value="https://www.facebook.com/Romolas-Nature-CAN-TEACH-PhotoArt-Page-937319673008841/">Romola's Nature CAN Photo-Art |</option>
</select></a>
</div>
<div class="under" style="color:#FFFF00; font-family:Arial;font-size:13pt; ">(under development)</div>
<div class="under2" style="color:#FFFF00; font-family:Arial;font-size:13pt; ">(under development)</div>
<script src="landingpage.js"></script>
</body>
</html>
и вот таблица css
body{
background-color: black;
}
img{
padding: 0px;
transition: transform .2s;
}
a{
color:black;
text-decoration: none;
}
pre{
font-family: "Arial black", sans-serif;
font-size: 25px;
}
select {
/* for Firefox */
-moz-appearance: none;
/* for Chrome */
-webkit-appearance: none;
color: #FFFF00;
background-color: transparent;
border-color: transparent;
cursor: pointer;
font-size: 13pt;
}
select option {
margin: 40px;
background: black;
color: #FFFF00;
border-color: black;
font-size: 13pt;
}
/* For IE10 */
select::-ms-expand {
display: none;
}
.text1{
font-family: "Arial black", sans-serif;
}
.text2{
font-family: "Arial black", sans-serif;
font-size: 15px;
}
a:hover {
color: blue;
}
.container{
position:relative;
margin-left:15%;
background-color: black;
}
.circle{
position:absolute;
left:480px;
top: 107px;
}
.above{
position: absolute;
top:10px;
left:437px;
}
.left{
position: absolute;
left:337px;
top:109px;
}
.right{
position: absolute;
left:813px;
top:109px;
}
.bottom{
position: absolute;
top:485px;
left:437px;
}
#first{
font-size: 45px;
}
#second{
font-size: 25px;
}
#last{
font-size: 12px;
}
.rightCon {
position: absolute;
color: white;
}
#right1{
z-index: 10;
position: absolute;
left:850px;
top:163px;
opacity: 0;
}
#right2{
z-index: 10;
position: absolute;
left:853px;
top:350px;
opacity: 0;
}
.bottomCon {
position: relative;
}
#bottomtext{
z-index: 10;
position: absolute;
left:520px;
top:545px;
opacity: 0;
}
.lastLine{
position: absolute;
top:930px;
left:450px;
}
.under{
position: absolute;
top:900px;
left:450px;
}
.under2{
position: absolute;
top:900px;
left:1170px;
}
js-код (не слишком важен)
if(performance.navigation.type == 2){
location.reload(true);
}
function circle2(){
document.getElementById("circle").src = "pictures/circle1.png";
}
function circle1(){
document.getElementById("circle").src = "pictures/circle.png";
}
function right2(){
document.getElementById("right").src = "pictures/right2.png";
document.getElementById("right1").style.opacity=1;
document.getElementById("right2").style.opacity=1;
}
function right1(){
document.getElementById("right").src = "pictures/right.png";
document.getElementById("right1").style.opacity=0;
document.getElementById("right2").style.opacity=0;
}
function bottom2(){
document.getElementById("bottom").src = "pictures/bottom2.png";
document.getElementById("bottomtext").style.opacity=1;
}
function bottom1(){
document.getElementById("bottom").src = "pictures/bottom.png";
document.getElementById("bottomtext").style.opacity=0;
}
function above2(){
document.getElementById("above").src = "pictures/above2.png";
}
function above1(){
document.getElementById("above").src = "pictures/above.png";
}
function left2(){
document.getElementById("left").src = "pictures/left2.png";
}
function left1(){
document.getElementById("left").src = "pictures/left.png";
}
Пожалуйста, помогите, заранее благодарю вас.
Комментарии:
1. как вы ожидаете, что контейнер сам расположится по центру, если вы просто скажете margin-left: 15%? 15% будут отличаться при разной ширине экрана
2. Я пробовал другие, такие как text-aligned: center, position: auto … но они также не сделали его центрированным, поэтому я меняю его обратно на 15%, чтобы сделать его по крайней мере центрированным на моем экране.
3. но это не приведет к его центрированию — посмотрите на использование flexbox для центрирования. google flexbox центрирует
Ответ №1:
Всем привет! Я думаю, вам следует попробовать свойство margin: auto. Прежде всего, удалите свойства position: relative и margin left из вашего контейнера. А затем добавьте ширину или высоту вашего контейнера (в соответствии с вашими потребностями) и добавьте к нему margin: auto. Вот пример кода:
.container {
display: block;
width: 500px;
height: auto;
margin: auto;
background-color: black;
}
Это определенно выровняет его по центру.
И если вы хотите, чтобы ваш div переходил на следующую строку, просто добавьте к нему свойство display: block; . И если он будет скрыт под div1, добавьте к нему свойство z-index: 1. Попробуйте все эти правки и дайте мне знать, устранило ли это вашу проблему.