Need help with my website

+7 Reece Ellis-Imber · January 19, 2017
I'm continuing Bucky's tutorial and I can't get the main image to change vertically, any attributes I can use? I've tried margin-top but it isn't changing the position
Here is my HTML and CSS Code:
HTML:
<!DOCTYPE html>
<html lang="en"
<head>
<title>Reece's Room</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="MenuBar">
<div class="button">
Home
</div>
<div class="button">
About me
</div>
<div class="button">
Portsmouth
</div>
<div class="button">
Facebook
</div>
</div>
<img src="file:///C:/Users/User/Pictures/Reeces%20Room.jpg" style="display: block; margin-left: auto; margin-right: auto;" />


</body>
</html>
CSS:
body{
background: url(darkm.jpg) repeat;

}
img{
max-width: 100%;
margin-top: 100px;
}
.MenuBar{
color: white;
text-align: center;
}
.button{
background: #777777;
width: 24%;
margin: 0 .5%;
float: left;
}

Post a Reply

Replies

Oldest  Newest  Rating
+1 Goldy Suryan · April 23, 2017
clear the float by adding clear:both to the image style tag
or just add a in your css:-
div.button:after { content: ""; display: block; clear: both; }
+1 Gloria Moore · April 23, 2017
Check this out and see if it helps.
https://www.w3schools.com/tags/tag_div.asp
+1 vineet singh · April 23, 2017
background-image: url("darkm.jpg") ;
use this
  • 1

HTML / CSS / Web Design

130,921 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators