I am trying to write my contact page, it's for a personal website that I write as part of a project for school. I am trying to display little logos of certain social media sites, and my profile name/mail address next to the images. I have set up an unordered vertical list, I have elements for each individual < li > tag and here comes the problem: Facebook, for example, works fine. The logo is there, and a link to my profile next to it, with the text perfectly aligned vertically right in the center. The problem comes with paragraphs. For my Yahoo Mail address, for example, I cannot provide a link to my profile, so I instead just write my address as simple text between < p >< /p > tags. This text will not align. I don't know what to do. I've been trying stuff out and looking for solutions all over the internet for hours and nothing works. I do admit my HTML and CSS experience is very limited, but please help me. I will attach both my HTML code and the CSS file and I hope someone will take the time to see how they render and maybe help me out. Thanks in advance!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="Description" content="Pagina de contact">
<meta name="author" content="Matei Popa">
<link rel="stylesheet" type="text/css" href="css/contactstyle.css">
</head>
<body>
<div class="container">
<ul>
<li>
<div class="navlink">
<div class="img">
<a href="https://www.facebook.com/matei.popa.332" target="_blank">
<img class="image" src="img/contact-pg/facebooklogo.jpg" alt="Logo
Facebook">
</a>
</div>
<a href="https://www.facebook.com/matei.popa.332" target="_blank">
Matei Popa
</a>
</div>
</li>
<li>
<div class="navlink">
<div class="img">
<a href="https://www.instagram.com/matei.popa.332/" target="_blank">
<img class="image" src="img/contact-pg/instagramlogo.jpg" alt="Logo
Instagram">
</a>
</div>
<a href="https://www.instagram.com/matei.popa.332/" target="_blank">
matei.popa.332
</a>
</div>
</li>
<li>
<div class="navlink">
<div class="img">
<a href="https://twitter.com/mateiutz2001" target="_blank">
<img class="image" src="img/contact-pg/twitterlogo.jpg" alt="Logo Twitter">
</a>
</div>
<a href="https://twitter.com/mateiutz2001" target="_blank">
@mateiutz2001
</a>
</div>
</li>
<li>
<div class="navlink">
<div class="img">
<img class="image" src="img/contact-pg/yahoomaillogo.jpg" alt="Logo Yahoo
Mail">
</div>
<div class="paragraph">
<p>alex.matei1808@yahoo.com</p>
</div>
</div>
</li>
<li>
<div class="navlink">
<div class="img">
<img class="image" src="img/contact-pg/gmaillogo.jpg" alt="Logo Gmail">
</div>
<div class="paragraph">
<p>
mattx1829@gmail.com
</p>
</div>
</div>
</li>
</ul>
</div>
<!-- add Phone number, Yahoo Mail, Gmail, Whatsapp, Skype, Reddit, Quora -->
</body>
</html>
@font-face
{
font-family: Sansation;
src: url(../font/Sansation_Regular.ttf)
}
body
{
background-color: #000;
width: 100%;
height: 100%;
margin: 0;
}
div.container
{
padding-top: 50px;
padding-left: 40px;
margin: 60px;
align-content: flex-start;
}
ul
{
list-style-type: none;
}
li
{
flex-direction: row;
width: 100%;
display: flex;
float: left;
height: 50px;
}
div.navlink
{
display: flex;
flex-direction: row;
width: 100%;
float: left;
text-align: left;
font-family: Sansation;
font-size: 24px;
padding: 10px;
}
a:link
{
color: #FFFFFF;
text-decoration: none;
background-color: transparent;
}
a:hover
{
color: #D1DC19;
background-color: transparent;
text-decoration: underline;
}
a:visited
{
color: #E47507;
background-color: transparent;
text-decoration: none;
}
a:active
{
color: red;
background-color: white;
text-decoration: underline;
}
div.img
{
display: flex;
flex-direction: row;
float: left;
align-content: center;
overflow: hidden;
}
div.paragraph
{
display: table;
margin: 0 auto;
color: #FFFFF;
font-family: Sansation;
padding-left: 0px;
width: auto;
height: 100%;
float: left;
overflow: hidden;
align-content: center;
text-align: center;
}
p
{
height: 100%;
vertical-align: top;
align-content: center;
}
.image
{
vertical-align: middle;
padding-right: 15px;
width: 30px;
height: 30px;
}
Aucun commentaire:
Enregistrer un commentaire