hariskar

Problem in aligning picture with text in logo

3 posts in this topic

In my webpage I would like to put an image in the text logo I have now. I would like the image to be in the right of mikroviologos.gr.

 

Now the code is:

<div id="logoArea" class="col-3" title="Μικροβιολογικό Εργαστήριο στην Καβάλα"><h1><a href=/><div id="l1">mikroviologos.gr</div><div id="l2">Εργαστήριο Μικροβιολογίας</div></a></h1></div>

If I change it to

<div id="logoArea" class="col-3" title="Μικροβιολογικό Εργαστήριο στην Καβάλα"><h1><a href=/><div id="l1">mikroviologos.gr<img src="image.png"></div><div id="l2">Εργαστήριο Μικροβιολογίας</div></a></h1></div>

and try to apply some margin-top the whole logo moves.

 

How can I make only the picture move? I want to align it to the text.

 

Thank you!

Share this post


Link to post
Share on other sites

You could maybe try to float:right the image. I'm also new , but I had a similar problem and it worked when I used this float:right.

1 person likes this

Share this post


Link to post
Share on other sites

You shouldn't use div block elements within h1 block element, since img by default is inline, instead of div, use span which is also inline, they should act as text and align side by side. IF width or height is required give these elements display: inline-block;. Using div block elements mean they will break to a new line, and the same for every block element following it, unless there is available width and float is used, but! As already mentioned block element within block header element is not allowed.

Edited by dsonesuk
1 person likes this

Share this post


Link to post
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