HTML Aligning social media icons


Joined
Dec 6, 2020
Messages
1
Reaction score
0
Hi Guys,

Brand new to coding so please bear with me on here if I ask silly questions, each new trick is a brick for this house I am trying to build
smile.gif


I am trying to create a group of 4 social media icons that will sit side by side in the same location on the bottom right to my web pages. I was given some vague instructions by my tutor but they don't seem to be working, maybe you can see what I am doing wrong here.

An example of what they should appear like is in the image attached



This is my HTML


<!DOCTYPE html>
<html lang='en'>

<head>

<title> Home Page </title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<meta charset="utf-8">

</head>


<body>
<header>
<div class="container">
<img src='images/logo.png' style="width:180px;height:180px alt="logo"
class="logo">



<nav>
<ul>
<li><a href="index.html"> HOME </a></li>
<li><a href="tour.html"> TOUR </a></li>
<li><a href="tickets.html"> BUY TICKETS </a></li>
<li><a href="gallery.html"> GALLERY </a></li>
<li><a href="about.html"> ABOUT </a></li>
</ul>
</nav>
</div>
</header>

<img src='images/pic1.png' alt="home page image" class="image">


<div class="social-icons">
<img src='images/whatsapp.png' style="width:50px;height:50px" alt="whatsapp"
<img src='images/facebook.png' style="width:50px;height:50px" alt="facebook"
<img src='images/insta.png' style="width:50px;height:50px" alt="insta"
<img src='images/twitter.png' style="width:50px;height:50px" alt="twitter"
</div>






This is my CSS

body {
margin: 0;
background: #ffffff;
/* white */
color: white;
font-size: 18px;
font-family: "roboto", sans-serif;
font-weight: 300;
}

.container {
width: 80%;
margin: 0 auto;
}

header {
background: #121326;
height: 200px;
}

.logo {
float: left;
position: absolute;
left: 20px;
top: 0;
}

.image {
width: 100%;
}

nav {
float: right;
}

nav ul {
padding: 20px;
list-style: none;
}

nav li {
display: inline-table;
margin-left: 300px;
padding-top: 50px;
}

nav a {
color: #ffffff;
text-decoration: none;
text-transform: upper

}

nav a:hover {
color: #FCBA35;
}

.sidebar-image-gallery { width: 210px; }


.social-icons {

position: absolute;display: inline-block;
margin-left: auto;
margin-right: auto;
bottom:0;
right: 0;
}



I apologise if I didn't need to post the entire lines of code, and I am aware there is some code in there that should not be there, but I am learning. The issue is, my icons don't appear bottom right and seem to be on top of each other, but I can only see one.
 

Attachments

  • Home-Page.jpg
    Home-Page.jpg
    214.4 KB · Views: 39
Ad

Advertisements

Joined
Nov 13, 2020
Messages
43
Reaction score
6
Where are you learn to code the internet? Don't go back!! When you use position: anything; your on the highway to hell adding floats just makes things worst and spells trouble my friend. And your in trouble. The class LOGO uses both!! such a travesty.

Learn to do HTML with Grid-CSS. This is the year 2020 and this is how you code web sites. Your starting out, but on the wrong path.
Learn Grid-CSS

You should run the code you posted to see what we see. Hope you know we can't see things on your harddrive and that means the images.
 
Ad

Advertisements

Joined
Nov 13, 2020
Messages
43
Reaction score
6
Here's a little more info:
The IMG tag needs to have a closing '>'. None of yours does.
Your attachment shows three sections (divs if you like). They should be inside of a container. Yours arn't.
In the <body> tag you set the background color to white and the font color to white. Can't read anything.
<body>
<header>
<div class="container">

HEADER is just a simple name for a DIV. Both of these start together and end together
</nav>
</div>
</header>
SO they are the same thing. Only one of them is needed.

This
<img src='images/logo.png' style="width:180px;height:180px" alt="logo" class="logo">
One of the attributes of the IMG tag is the width and the height. You do not need to have a style attribute.
<img src='images/logo.png' width="180" height="180" alt="logo" class="logo">

I'd give you the HTML code, but you will/should know and understand CSS-Grid and/or flex box.
Learn them here https://css-tricks.com/snippets/css/complete-guide-grid/
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top