The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Aligning social media icons, Looking to align icons on bottom right
Satoriwolf
post Dec 6 2020, 07:37 AM
Post #1





Group: Members
Posts: 3
Joined: 6-December 20
Member No.: 27,673
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.

This is an example of what they should appear like
DB Link


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.

This post has been edited by Satoriwolf: Dec 6 2020, 07:38 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 6 2020, 10:28 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,732
Joined: 9-August 06
Member No.: 6
You've forgotten the closing '>' in all the image tags. I think putting that in will help greatly. biggrin.gif


<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" <--
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 6 2020, 10:31 AM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,732
Joined: 9-August 06
Member No.: 6
QUOTE
I apologise if I didn't need to post the entire lines of code


No need. That's a good thing. Often people post a snip that they think contains everything needed to sort the problem. More often than not the problem lies elsewhere or is hard to understand without knowing the context.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Satoriwolf
post Dec 6 2020, 05:53 PM
Post #4





Group: Members
Posts: 3
Joined: 6-December 20
Member No.: 27,673
QUOTE(pandy @ Dec 6 2020, 10:28 AM) *

You've forgotten the closing '>' in all the image tags. I think putting that in will help greatly. biggrin.gif


<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" <--


So simple but there you go haha, thanks for pointing that out smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 6 2020, 07:27 PM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,732
Joined: 9-August 06
Member No.: 6
You are welcome. laugh.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 27th April 2024 - 12:55 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC