Hello everyone. I am pretty new at the actual coding of sites, but I'm to the point that I can pretty well make anything from css and html. So I spent quite a while making an html/css page from scratch to be my maintenance page. Everything looks great when I render the page from my local file, but when I put it in the maintenance message in the maintenance page, it's all messed up.
For starters, I'm having issues with images never being found, whether I put them in via cpanel or the graphics section of custom themes. So all of the images are gone, but I have my host looking into that.
The other problem is that all the text is all jumbled and all over the place (I used div tags to control the location of the text). Are my <style> tags being overridden or what?
I just don't have a clue what's going on. If anyone has any ideas, I'd really appreciate it.
We build. You grow.
Get best community software hereStart a social network, a fan-site, an education project with oxwall - free opensource community software
maintenance page html... | Forum
Team ross
Sep 14 '15
Please share your url, make sure maintenance page is enabled. provide the code you inserted in the maintenance page.
Tripp
Sep 14 '15
okay thanks.
URL: gamermeld.com
code:
<head>
<style>
div{
overflow: auto;
}
html, body{
margin: 0;
height: 100%;
}
h1, h2, h3, body{
font-family: "Arial", Helvetica, sans-serif;
}
.topp{
margin-right: 500px;
background-image: url('gamerbeta.jpg');
background-color: fff;
width: 100%;
height: 430px;
float: top;
box-shadow: 3px 3px 4px black;
}
.second{
position: relative;
top: 5px;
background-color: #white;
width: 100%;
height: 430px;
box-shadow: 3px 3px 4px black;
}
.secondword{
position:absolute;
top: -30px;
left: 435px;
font-size: 50px;
}
.secondp{
position:absolute;
top: 80px;
left: 1000px;
text-align: center;
font-size: 40px;
}
.secondimage{
position: absolute;
top: 190px;
left: 1230px;
}
.secondwordtwo{
position:absolute;
top: 300px;
left: 1180px;
font-size: 30px;
font-style: italic;
}
.arrow{
position: absolute;
top: 380px;
left: 900px;
}
.third{
position: relative;
background-color: #D8D8D8;
width: 100%;
height: 430px:
box-shadow: 1px 1px 4px black;
}
</style>
</head>
<body>
<div class=topp></div>
<div class=second>
<div class=secondword><h1>BETA</h1></div>
<div class=secondp>EXCLUSIVE ACHIEVEMENT<br>FOR JOINING BETA</div>
<div class=secondimage><img src="test.png" alt=""></div>
<div class=secondwordtwo>Beta Tester</div>
<div class=arrow><img src="arrow.png" alt="" height="42" width="42"></div>
</div>
<div class=third>
</div>
</body>
I'm not done with the page. I was just testing the top portion, and it looked horrible.
URL: gamermeld.com
code:
<head>
<style>
div{
overflow: auto;
}
html, body{
margin: 0;
height: 100%;
}
h1, h2, h3, body{
font-family: "Arial", Helvetica, sans-serif;
}
.topp{
margin-right: 500px;
background-image: url('gamerbeta.jpg');
background-color: fff;
width: 100%;
height: 430px;
float: top;
box-shadow: 3px 3px 4px black;
}
.second{
position: relative;
top: 5px;
background-color: #white;
width: 100%;
height: 430px;
box-shadow: 3px 3px 4px black;
}
.secondword{
position:absolute;
top: -30px;
left: 435px;
font-size: 50px;
}
.secondp{
position:absolute;
top: 80px;
left: 1000px;
text-align: center;
font-size: 40px;
}
.secondimage{
position: absolute;
top: 190px;
left: 1230px;
}
.secondwordtwo{
position:absolute;
top: 300px;
left: 1180px;
font-size: 30px;
font-style: italic;
}
.arrow{
position: absolute;
top: 380px;
left: 900px;
}
.third{
position: relative;
background-color: #D8D8D8;
width: 100%;
height: 430px:
box-shadow: 1px 1px 4px black;
}
</style>
</head>
<body>
<div class=topp></div>
<div class=second>
<div class=secondword><h1>BETA</h1></div>
<div class=secondp>EXCLUSIVE ACHIEVEMENT<br>FOR JOINING BETA</div>
<div class=secondimage><img src="test.png" alt=""></div>
<div class=secondwordtwo>Beta Tester</div>
<div class=arrow><img src="arrow.png" alt="" height="42" width="42"></div>
</div>
<div class=third>
</div>
</body>
I'm not done with the page. I was just testing the top portion, and it looked horrible.
The Forum post is edited by Tripp Sep 14 '15
Team ross
Sep 15 '15
the background image: background-image: url('gamerbeta.jpg');
of course it did not show up, you need to indicate correct paths where the image is located
here as well: <div class=secondimage><img src="test.png" alt=""></div>
<div class=arrow><img src="arrow.png" alt="" height="42" width="42"></div>
You can upload the image in the graphics section in the admin panel and use the path provided.
I believe that's the issue as images are not uploaded and other page elements are effected by images absence
Tripp
Sep 15 '15
My apologies. I'm really new to CSS/html coding myself, and I somewhat didn't expect it to work because I've been having problems where when I change an image file, it doesn't change on my site, so I didn't think it was my code.
Team