Issue
I'm creating the footer of my website using html and css.
I want to have the two facebook and twitter images in line with the text so that everything in the footer is in line with eachother
At the moment my footer code is
HTML -
<div class="footer content">
<img src="Images/facebook.png">
<img src="Images/twitter.png">
<p> Address line 1
Address line 2
Address line 3
</p>
</div> <!--end of footer-->
Can anyone help please?
Solution
<p>
tags are block-level elements. Use an inline element such as <span>
:
<div class="footer content">
<img src="Images/facebook.png" />
<img src="Images/twitter.png">
<span>
Address line 1
Address line 2
Address line 3
</span>
</div>
Alternatively, if you're able to use CSS, you can define both elements as inline-block
:
.footer.content > img,
.footer.content > p {
display: inline-block;
}
EDIT: It might also be wise for semantics to use <address>
, rather than <span>
. For example:
<div class="footer content">
<img src="Images/facebook.png" />
<img src="Images/twitter.png">
<address>
Address line 1
Address line 2
Address line 3
</address>
</div>
Since <address>
is also a block-level element, you'll need to include the correct CSS as follows:
.footer.content > img,
.footer.content > address {
display: inline-block;
}
Answered By - BenM
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.