GodOfScience
Badges: 5
Rep:
?
#1
Report Thread starter 3 years ago
#1
Hello,

I am trying to move the headings down on my webpage so they are above the images and paragraph of text. I have tried to move them e.g. bottom: 200px but it doesn't move.

<!DOCTYPE html>

<html lang="en">

<head>

<title>The Music Department of the Performing Arts Academy</title>

<meta charset="utf-8">

<meta name="description" content="This is a paragraph of text that describes your website">

<link rel="stylesheet" type="text/css" href="CSS\style.css">

<script src="script.js"><!--Insert Google Analytics code here--></script>

</head>

<body>

<div class="wrapper"><!--open wrapper-->
<div class="headercontent"><!--open header-->
<h2>[email protected] 07111111111</h2>
<h1>The Music Department of the Performing Arts Academy</h1>


<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Sound Samples</a></li>
<li><a href="#">Performance Gallery</a></li>
<li><a href="#">Recording Gallery</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div><!--close header-->


</div><!--close menu-->

<div class="main"><!--open mains->

<!--use/amend/delete these divs as appropriate -->
<div id="bg"><!--Start of Slideshow-->
<div id="mainbox">
<div id="imgbox">
<img src="images/music performance/battle of the bands 04 3.jpg" height="500px" width="500px"/>
<img src="images/music technology/digital studio 5.jpg" height="500px" width="500px"/>
<img src="images/music technology/live sound 1.jpg" height="500px" width="500px"/>
<img src="images/music performance/residential 03 6.jpg" height="500px" width="500px"/>
<img src="images/music performance/music perf rehearsals 4.jpg" height="500px" width="500px"/>
</div>
</div>
</div><!--End of Slideshow-->


<h3>Performance Gallery</h3>
<h4>About the School</h4>
<h5>Recording Gallery</h5>
<div class="leftcontent"><!--open left-->
<img src="images/music performance/music perf rehearsals 4.jpg" height="250px" width="250px"/>
</div><!--close left-->
<div class="rightcontent"><!--open right-->
<img src="images/music technology/live sound 2.jpg" height="250px" width="250px"/>
</div><!--close right-->
<div class="centercontent"><!--open center-->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent malesuada metus eu convallis tempor. Sed tristique
dictum diam vel fermentum. Cras posuere ipsum dolor, et aliquet
massa laoreet ut. Mauris interdum imperdiet blandit. Phasellus
dapibus ante vitae lorem varius cursus. Donec sit amet nisl lacus.
Pellentesque eu tempor ipsum. Sed tincidunt velit quis orci facilisis vehicula.
Phasellus mollis velit sit amet tristique condimentum. Integer iaculis dolor lacus.
Nam quis nulla ac orci mollis pretium.</p>




</div><!--close center-->
<!--use/amend/delete these divs as appropriate -->


</div> <!--close main-->
<footer>
<div class="footer content"><!--open footer-->





<ul class="footercontents">
<li><a href="index.html">Home</a></li>
<li><a href="index.html">Sound Samples</a></li>
<li><a href="index.html">Performance Gallery</a></li>
<li><a href="index.html">Recording Gallery</a></li>
<li><a href="index.html">About Us</a></li>
</ul>

<div class="access"><!--open access-->

<li>
<a href="#">
<img src="images/SmallA.png" alt="Accessibility icon"></a>
</li>
<li>
<a href="#">
<img src="images/MidA.png" alt="Accessibility icon"></a>
</li>
<li>
<a href="#">
<img src="images/BigA.png" alt="Accessibility icon"></a>
</li>

</ul>
</div><!--close access-->
<div class="social"><!--open social-->
<ul class="social">
<li>
<a href="https://www.facebook.com/nameOfYourSite/">
<img src="images/facebook.png" alt="FaceBook Logo"></a>
</li>
<li>
<a href="https://twitter.com/nameOfYourSite">
<img src="images/twitter.png" alt="Twitter Logo"></a>
</li>
<li>
<a href="https://www.instagram.com/nameOfYourSite/">
<img src="images/instagramLogo.png" alt="Instagram Logo"></a>
</li>

</ul>


</div><!--close social-->
</footer>
</div><!--close footer-->





</div><!--close wrapper-->

<script src="JavaScript/myJavaScript.css" type="text/javascript"></script>

</body>
</html>



*{
margin: 0;
padding: 0;
border: 0;

}

html, body{
height: 100%
}

body{
margin: 0;
padding: 0;
font-family: Ariel;
background: #c40000;
}



h1{
color: white;
font-size: 30px;
text-align: center;
font-family: trebuchet ms;


}

.gallery contents > li{
text-decoration: none;

}

h2{
color: white;
text-align: right;
font-size: 10px;
padding-right: 285px;
padding-top: 10px;
font-family: cursive;
}

.main{
margin; 10px;
border-radius: 5px;
padding: 20px;
background-color: #ffffff;
height: 1010px;
width: 100%
display: inline-block;
}

.centercontent{
width: 300px;
height: 300px;
position: relative;
left: 500px;
bottom: 150px;
}

.leftcontent{
position: relative;
top: 370px;

}

.rightcontent{
position: relative;
left: 1055px;
top: 120px;
}

h3{
font-size: 20px;

}

h4{
text-align: center;
top: 300px;
font-size: 20px;


}

h5{
text-align: right;
font-size: 20px;

}







.wrapper{
width:65%;
margin:0 auto;
padding:1em;
}




#mainbox{
width: 500px;
height: 500px;
position: center;
overflow: hidden;

}

#imgbox{
width: 300%;
position: relative;
left: 0;
animation: slidemove 30s infinite;
}

#imgbox img{
width: 33.33%;
float: left;
}

@-webkit-keyframes slidemove{
0%{
left: 0;
}
25%{
left: -100%;
}
50%{
left: -200%;
}
75%{
left: -200%;
}
100%{
left: 0;
}
}
#bg{
height: 25%;
width: 25%;
padding-left: 400px;
}


.left{
width:30%;
float:left;


}

.right{
width:30%;
float:right;
margin-bottom:1em;
}



.footercontents{
color: #ffffff;
list-style-type: none;
text-align: center;
padding: 20px 0 20px 0;

}

.footercontents > li{
display: inline-block;
padding-right: 5px;
float: top;

}

.footercontents > li > a{
text-decoration: none;
color: #ffffff;
font-size: 10px;
font-family: Lato;
}

.footercontents > li >a:hover{
color: #c1c1c1;
}

.nav{
background-color: #c40000;
color: #ffffff;
list-style-type: none;
text-align: center;
padding: 15px 0 15px 0;

}

.nav > li{
display: inline-block;
padding-right: 50px;
}

.nav > li > a{
text-decoration: none;
color: #ffffff;
}


.nav > li >a:hover{
color: #FCB5B5;
}

.access{
bottom: 5px;
list-style-type: none;
position: relative;
margin-top: 20px;
text-align: center;

}

.access > li{
display: inline-block;

}

.social > li{
display: inline-block;

}

.social{
bottom: 5px;
list-style-type: none;
text-align: center;
}
0
reply
choco_monsterxo
Badges: 17
Rep:
?
#2
Report 3 years ago
#2
oh nooooooo
0
reply
GodOfScience
Badges: 5
Rep:
?
#3
Report Thread starter 3 years ago
#3
It's H3 H4 and H5 I am trying to move down the page
0
reply
X

Quick Reply

Attached files
Write a reply...
Reply
new posts
Back
to top
Latest
My Feed

See more of what you like on
The Student Room

You can personalise what you see on TSR. Tell us a little about yourself to get started.

Personalise

Do you think receiving Teacher Assessed Grades will impact your future?

I'm worried it will negatively impact me getting into university/college (161)
44.48%
I'm worried that I’m not academically prepared for the next stage in my educational journey (40)
11.05%
I'm worried it will impact my future career (29)
8.01%
I'm worried that my grades will be seen as ‘lesser’ because I didn’t take exams (76)
20.99%
I don’t think that receiving these grades will impact my future (34)
9.39%
I think that receiving these grades will affect me in another way (let us know in the discussion!) (22)
6.08%

Watched Threads

View All
Latest
My Feed