All geek questions in one place

Unable to get image next to another image

I'm trying to get the Facebook logo next to the store’s photo, but it just doesn’t work.

enter image description here Here are some of my HTML and CSS codes.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Menz store</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="Main.css"/>
</head>
<body>
<header>
    <img src="images/MenzHeader2.jpg" alt="De logo van Menz"/>
</header>
<table>
    <h1>Locaties van de Men<span class="menz">z</span> store's</h1>
    <tr>
        <th><h3>Stad:</h3></th>
        <th></th>
        <th><h2>Antwerpen</h2></th>
        <th></th>
        <th><h2>Schaarbeek</h2></th>
    </tr>
    <tr>
        <td>Straat:</td>
        <td></td>
        <td>Offereande 9 & 71</td>

        <td></td>
        <td>Chaussée de waterloo</td>
    </tr>
</table>
</br>
<img src="images/MenzStore.jpg" alt="Menz winkel" class="Menz1"/>

<div id="TwitterAndInsta">
    <!---->
    <a href="https://twitter.com/MenzStore">
        <img src="images/Twitter2.jpg" alt="Logo van twitter" id="twitterLogo">
    </a>
    <a href="http://instagram.com/menzstore">
        <img src="images/instagram.png" alt="Logo van Instagram" id="instagramlogo">
    </a>
</div>
<div id="Facebook">
    <a href="https://www.facebook.com/menzstore">
        <img src="images/Facebook.jpg" alt="Logo van Facebook"/></a>
</div>

</body>
</html>

CSS

    body {
    text-align: center;
    float: left;
    margin-left: 18%;
    background: #F2F2F2;
}

header {
    height:305px;
    width: 800px;
    margin-top: 5%;
    margin-bottom: -10%;
    margin-left: 10%;
}

table {
    margin-left: 27%;
    width: 400px;
    line-height: 0px;
}
img.menz1 {
    display: block;
    margin-right: auto;
    margin-left: auto;
}
span.menz {
    color: darkblue;
}
div#TwitterAndInsta a img {

    width:250px;
    height: 250px;
    float: left;
    margin-left: -49%;
    margin-top:4444444444444444444%;
    position: fixed;
}

div#TwitterAndInsta a img#twitterLogo {
    margin-top:-43%;

}
div#TwitterAndInsta a img#instagramlogo {
    margin-top: -63%;
}

div#Facebook img {
    height: 250px;
    width:250px;
    margin-right: -20%;
    float: right;
}

If you want more information, let me know :)

+4
source share
2 answers

move #facebook div is ABOVE the image, now it floats right after the image, so it appears below it

in any case, this is not clear, the expected result, maybe you need some fields or something else

+1
source

Remove the float from your body and move the facebook image over your main image.

    body {
    text-align: center;
    margin-left: 18%;
    background: #F2F2F2;
}

Fiddle at: http://jsfiddle.net/6Pkz5/

+1

Source: https://habr.com/ru/post/1538406/

More articles:


All Articles