Jump to content

Link menu gets pushed down when I center image


coolgirl1
 Share

Recommended Posts

Hi,On my main web page, I made a menu link list. It is to the left. I made it a class and styled them. On the top, I have a typical h1 but, I want to insert an image in the center below h1 and next to the link menu. I did the margin auto to center and it worked. But, it does not line up on the same line as my link menu. Instead, it pushes the menu down. Any ideas on how to fix this? Thanks.

Link to comment
Share on other sites

Thank you for responding. This is my code for my menu. CSS a.menu{color:blue;font-family:comic sans ms;font-size:20px;text-align:left;} a.menu:hover{color:green;font-family:comic sans ms;font-size:20px;} This is my code for my html menu part <a href="http://www.facebook.com" class="menu"> Facebook </a><br /><a href="http://www.twitter.com" class="menu"> Twitter </a> Image CSSIMG.ocean { display: block; margin-left: auto; margin-right: auto }HTML<img src="ocean.jpeg" class="ocean" />

Link to comment
Share on other sites

It maybe because you set the image to display: block. A block element will take up all available space thus pushing something up or down. One thing you can try is put the links in a <ul>(since I believe you want them links to be stacked on top of another), float that left and then float the image right. They should be on the same line. The only problem with this though is the ul might be way on the left of the screen and the image on the right. What you can do for that is put them inside a container like a div and give it a specific width and then to center the container, you can do margin: 0 auto; but of course this all depends on the overall layout of your page.

Edited by Don E
Link to comment
Share on other sites

html <!doctype html><head><title> Website </title><link rel="stylesheet" type="text/css" href="styles.css" /></head><body> <h1> The Official Website For me </h1> <br /><br /><br /><br /><br /> <a href="http://www.facebook.com" class="menu"> Facebook </a><br /><a href="http://www.twitter.com" class="menu"> Twitter </a> <br /><br /><br /><br /><br /><br /><br /><br /><br /> <div><a href="http://www.facebook.com"><img src="facebook.ico" /> </a> <a href="http//www.twitter.com"><img src="twitter.ico" /> </a> <a href="http://www.plus.google.com"><img src="google.ico"> </a></div> CSS body{background-color:powderblue;} h1{color:blue;font-family:comic sans ms;text-align:center;} p{text-align:center;color:blue;font-family;comic sans ms;} a.menu{color:blue;font-family:comic sans ms;font-size:20px;text-align:left;} a.menu:hover{color:green;font-family:comic sans ms;font-size:20px;} div{text-align:center;} div a{text-decoration:none;} Thank you.

Edited by coolgirl1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...