How to make my div(a relative one) in center of a page and another div go below it, not under it(without make it fixed)
Question
Here I have a Div(div1 in figure) that I want it to center in the page(now I used margin-left to forced it at a center place of my own pc, but when other person with different resolution screen open it, it is not at the center.) I have tried make each relative/fixed/absolute/padding/margin, and search online for two days, but either each part in div1 falls apart or it doesn't work.
And At the same time, I added a text div(div2) and want it to below this current div(div1), and it doesn't goes below it, it goes hide under div 1. I searched online and know that it will do this if there is a relative/fixed position div before it, it will be ignored. So i can only use fixed position for div 2 as well. which I don't want it to.And I also want it go to the center of the page.
The main problem here is my page is not fix every screen and at the center.
view example page at http://circleofallnations.ca/ the big circle is the div1, 5 parts in it and form that circle, thats why div1 has to be a relative div
the text under the big circle is div 2.(you can see it is a picture on texting page, and I changed it to a text div in below code.)
html code:
<!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>
and here is css sheet
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 code(not too important)
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";
}
Please help, thank you in advance.
1 answers
solution1
0 ACCPTED 2020-08-18 02:39:27
Hello There: I think you should try margin. auto property, First of all: remove the position.relative and margin left properties from your container, And then add a width or height to your container(according to your need): and add margin.auto to it: Here's an example code:
.container {
display: block;
width: 500px;
height: auto;
margin: auto;
background-color: black;
}
This will definitely center align it. And if you want to make your div go to next line, just add display: block; property to it. And if it gets hide under div1, add z-index: +1 property to it. Try all these edits, and let me know if it fixed your problem.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.