coolgirl1 Posted June 5, 2012 Share Posted June 5, 2012 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 More sharing options...
niche Posted June 5, 2012 Share Posted June 5, 2012 Please post your code. How do you have your margins set? Link to comment Share on other sites More sharing options...
coolgirl1 Posted June 5, 2012 Author Share Posted June 5, 2012 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 More sharing options...
Don E Posted June 5, 2012 Share Posted June 5, 2012 (edited) 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 June 5, 2012 by Don E Link to comment Share on other sites More sharing options...
coolgirl1 Posted June 8, 2012 Author Share Posted June 8, 2012 (edited) Thanks. But, it still doesnt work. Even when I try to do a paragraph or anything, it still pushes all links down. Is it possible that you can't do that? Edited June 8, 2012 by coolgirl1 Link to comment Share on other sites More sharing options...
Don E Posted June 8, 2012 Share Posted June 8, 2012 I see. Best would be to post your updated/recent code. This can help in determining where the problem is. Link to comment Share on other sites More sharing options...
coolgirl1 Posted June 8, 2012 Author Share Posted June 8, 2012 (edited) 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 June 8, 2012 by coolgirl1 Link to comment Share on other sites More sharing options...
dsonesuk Posted June 8, 2012 Share Posted June 8, 2012 float the div containing social network icons/links left (float:left;) ,and place ocean class image BELOW these. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now