I have an existing Gmail signature that works fine. It was saved and implemented over a year ago. I tried copying/pasting the same signature, but even it breaks. It's almost like Gmail has changed the way they allow HTML signatures.
I wanted to ask if anyone had any tips for me. I tried changing all classes to inline styles but still no luck. To be clear, it breaks to a new line right after the logo image, but only after its sent.
When I'm composing and in the Drafts, the signature is fine. Only after sending does it break to a new line after the logo.
Any tips? Can anyone can offer any guidance into formatting this HTML to work as a Gmail signature?
Here is my code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
img { margin: 0; padding: 0; outline: none; border: none; }
h1, h2, div, a { font-family: Tahoma, Sans-Serif; }
h1, h2 { margin: 0 0 0 0; font-weight: 500; }
a, a:hover { color: #000; text-decoration: none; }
h1 { font-size: 16px; }
h2 { font-size: 14px; }
.column { display: inline-block; }
.column:first-of-type {
margin-right: 5px;
padding-right: 5px;
border-right: 1px solid #343a40;
}
img.logo {
width: 55px;
height: 55px;
}
.contact { margin: 0 0 0 0; font-weight: 500; }
.contact > a:first-of-type {
display: inline-block;
font-size: 14px;
color: #777;
margin-right: 25px;
padding-top: 3px;
}
.social-icons { float: right; }
.social-icons img {
width: 18px;
height: 18px;
margin: 4px 0 0 5px;
line-height: 0;
}
</style>
</head>
<body>
<section class="email-signature-container">
<div class="column">
<img class="logo" src="https://i.imgur.com/x8NDcYM.png" alt="SISYN Networking" />
</div>
<div class="column">
<h1>Dan Lindsey</h1>
<h2>Full Stack Engineer, <a target="_blank" href="http://luxdig.com">LuxDigital</a></h2>
<div class="contact">
336-355-5575
<div class="social-icons">
<a target="_blank" href="https://linkedin.com/in/mdlindsey"><img src="https://i.imgur.com/tkL1tNk.png" alt="LinkedIn" /></a>
<a target="_blank" href="https://stackoverflow.com/users/9468754/lux"><img src="https://i.imgur.com/0luxbot.png" alt="StackOverflow" /></a>
<a target="_blank" href="https://github.com/sisyn"><img src="https://i.imgur.com/pBv6GHr.png" alt="GitHub" /></a>
<!--
<a target="_blank" href="Skype:336-355-5575"><img src="https://i.imgur.com/83Jil5D.png" alt="Skype" /></a>
<a target="_blank" href="https://fb.com/dan.sisyn"><img src="https://i.imgur.com/LU362Re.png" alt="Facebook" /></a>
<a target="_blank" href="#"><img src="twitter.png" alt="Twitter" class="social-icon" /></a>
<img src="youtube.png" alt="YouTube" class="social-icon" />
<img src="google.png" alt="Google+" class="social-icon" />
-->
</div>
</div>
</div>
</section>
</body>
</html>
I see you were missing display block, borders on your images and you are using divs. I have added display block to images and borders. Also i placed a table around the social media icons.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
img { margin: 0; padding: 0; outline: none; border: none; }
h1, h2, div, a { font-family: Tahoma, Sans-Serif; }
h1, h2 { margin: 0 0 0 0; font-weight: 500; }
a, a:hover { color: #000; text-decoration: none; }
h1 { font-size: 16px; }
h2 { font-size: 14px; }
.column { display: inline-block; }
.column:first-of-type {
margin-right: 5px;
padding-right: 5px;
border-right: 1px solid #343a40;
}
img.logo {
width: 55px;
height: 55px;
}
.contact { margin: 0 0 0 0; font-weight: 500; }
.contact > a:first-of-type {
display: inline-block;
font-size: 14px;
color: #777;
margin-right: 25px;
padding-top: 3px;
}
.social-icons { float: right; }
.social-icons img {
width: 18px;
height: 18px;
margin: 4px 0 0 5px;
line-height: 0;
}
</style>
</head>
<body>
<section class="email-signature-container">
<div class="column">
<img class="logo" src="https://i.imgur.com/x8NDcYM.png" alt="SISYN Networking" style="display: block;border:0px;" />
</div>
<div class="column">
<h1>Dan Lindsey</h1>
<h2>Full Stack Engineer, <a target="_blank" href="http://luxdig.com">LuxDigital</a></h2>
<div class="contact">
336-355-5575
<div class="social-icons">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><a target="_blank" href="https://linkedin.com/in/mdlindsey"><img src="https://i.imgur.com/tkL1tNk.png" alt="LinkedIn" style="display: block;border:0px;" /></a></td>
<td><a target="_blank" href="https://stackoverflow.com/users/9468754/lux"><img src="https://i.imgur.com/0luxbot.png" alt="StackOverflow" style="display: block;border:0px;" /></a></td>
<td><a target="_blank" href="https://github.com/sisyn"><img src="https://i.imgur.com/pBv6GHr.png" alt="GitHub" style="display: block;border:0px;" /></a></td>
</tr>
</tbody>
</table>
<!--
<a target="_blank" href="Skype:336-355-5575"><img src="https://i.imgur.com/83Jil5D.png" alt="Skype" /></a>
<a target="_blank" href="https://fb.com/dan.sisyn"><img src="https://i.imgur.com/LU362Re.png" alt="Facebook" /></a>
<a target="_blank" href="#"><img src="twitter.png" alt="Twitter" class="social-icon" /></a>
<img src="youtube.png" alt="YouTube" class="social-icon" />
<img src="google.png" alt="Google+" class="social-icon" />
-->
</div>
</div>
</div>
</section>
</body>
</html>
Let me know if this works for you ( i think it will)
Related
I'm trying to make a custom home page for my PC web browsers but when I scroll, the navbar is behind the divs. I'd be grateful to test a few solutions :D
Note: The icons and the weather, clock and calendar scripts are in separate files so it'll be broken for you but it's not what I need to fix so don't worry if these things are missing/broken.
I was expecting the divs to go behind the navbar but the divs are showing in the foreground...
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="theme.css">
<title>Accueil Perso</title>
<link rel="icon" href="./resources/favicons/home.ico">
</head>
<body>
<style>
#import url('https://fonts.cdnfonts.com/css/product-sans');
</style>
<nav>
<ul>
<li class="calendar"><img alt="" src="./resources/icons/calendrier.png"><span id="date"></span></li>
<script src="calendar.js"></script>
<li class="clock"><img alt="" src="./resources/icons/montre.png"><span id="time"></span></li>
<script src="clock.js"></script>
<li class="weather">
<img alt="" src="./resources/icons/soleil.png">
<span id="description"></span>
<span id="temp"></span>
<span id="location"></span>
</li>
<script src="weather.js"></script>
</ul>
</nav>
<main>
<h1><noscript>You need to enable JavaScript for this page to be able to work properly.</noscript></h1>
<div class="CommunicationBox">
<h1>Communication</h1>
<div class="column">
<p><a target="_blank" rel="noopener noreferrer" href="https://discord.com/channels/#me"><img alt="" src="./resources/icons/discord.png">Discord</a></p>
<p><a target="_blank" rel="noopener noreferrer" href="https://mail.google.com/mail/u/0/?hl=fr#inbox"><img alt="" src="./resources/icons/gmail.png">Gmail</a></p>
<p><a target="_blank" rel="noopener noreferrer" href="https://www.messenger.com"><img alt="" src="./resources/icons/messenger.png">Messenger</a></p>
<p><a target="_blank" rel="noopener noreferrer" href="https://teams.live.com/_#/conversations/?ctx=chat"><img alt="" src="./resources/icons/microsoft-teams.png">Microsoft Teams</a></p>
<p><a target="_blank" rel="noopener noreferrer" href="https://outlook.live.com/mail/0/inbox"><img alt="" src="./resources/icons/outlook.png">Outlook</a></p>
</div>
<div class="column">
<p><a target="_blank" rel="noopener noreferrer" href="https://mail.proton.me/u/0/inbox"><img alt="" src="./resources/icons/protonmail.png">Proton Mail</a></p>
<p><a target="_blank" rel="noopener noreferrer" href="https://web.skype.com"><img alt="" src="./resources/icons/skype.png">Skype</a></p>
<p><a target="_blank" rel="noopener noreferrer" href="https://web.snapchat.com"><img alt="" src="./resources/icons/snapchat.png">Snapchat</a></p>
<p><a target="_blank" rel="noopener noreferrer" href="https://web.telegram.org/z"><img alt="" src="./resources/icons/telegram.png">Telegram</a></p>
<p><a target="_blank" rel="noopener noreferrer" href="https://web.whatsapp.com"><img alt="" src="./resources/icons/whatsapp.png">WhatsApp</a></p>
</div>
</div>
<div class="SocialNetworksBox">
<h1>Réseaux Sociaux</h1>
<div class="column">
<p><a target="_blank" rel="noopener noreferrer" href="https://www.facebook.com"><img alt="" src="./resources/icons/facebook.png">Facebook</a></p>
<p><a target="_blank" rel="noopener noreferrer" href="https://www.instagram.com"><img alt="" src="./resources/icons/instagram.png">Instagram</a></p>
<p><a target="_blank" rel="noopener noreferrer" href="https://www.reddit.com"><img alt="" src="./resources/icons/reddit.png">Reddit</a></p>
<p><a target="_blank" rel="noopener noreferrer" href="https://stackoverflow.com"><img alt="" src="./resources/icons/stack-overflow.png">Stack Overflow</a></p>
<p><a target="_blank" rel="noopener noreferrer" href="https://www.tiktok.com"><img alt="" src="./resources/icons/tiktok.png">TikTok</a></p>
</div>
<div class="column">
<p><a target="_blank" rel="noopener noreferrer" href="https://www.twitch.tv"><img alt="" src="./resources/icons/twitch.png">Twitch</a></p>
<p><a target="_blank" rel="noopener noreferrer" href="https://twitter.com"><img alt="" src="./resources/icons/twitter.png">Twitter</a></p>
<p><a target="_blank" rel="noopener noreferrer" href="https://www.youtube.com"><img alt="" src="./resources/icons/youtube.png">YouTube</a></p>
<p><a target="_blank" rel="noopener noreferrer" href="https://studio.youtube.com"><img alt="" src="./resources/icons/youtube-studio.png">YouTube Studio</a></p>
</div>
</div>
<div class="ShoppingBox">
<h1>Shopping</h1>
<div class="column">
<p><a target="_blank" rel="noopener noreferrer" href="https://fr.aliexpress.com"><img alt="" src="./resources/icons/aliexpress.ico">AliExpress</a></p>
<p><a target="_blank" rel="noopener noreferrer" href="https://amazon.fr"><img alt="" src="./resources/icons/amazon.png">Amazon</a></p>
<p><a target="_blank" rel="noopener noreferrer" href="https://www.cdiscount.com"><img alt="" src="./resources/icons/cdiscount.ico">Cdiscount</a></p>
<p><a target="_blank" rel="noopener noreferrer" href="https://www.ebay.fr"><img alt="" src="./resources/icons/aide.png">eBay</a></p>
<p><a target="_blank" rel="noopener noreferrer" href="https://fr.ifixit.com"><img alt="" src="./resources/icons/ifixit.png">iFixit</a></p>
</div>
<div class="column">
<p><a target="_blank" rel="noopener noreferrer" href="https://www.leboncoin.fr"><img alt="" src="./resources/icons/leboncoin.png">leboncoin</a></p>
</div>
</div>
</main>
</body>
CSS file that gives a nice look to the page
body {
background-image: url(https://bing.biturl.top/?resolution=1920&format=image&index=0&mkt=fr-FR);
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin: 0;
padding: 0;
}
main {
margin: 25px;
padding: 25px;
}
main img {
vertical-align: middle;
margin-right: 5px;
}
h1 {
color: black;
text-align: center;
font-family: 'Product Sans', sans-serif;
font-weight: normal;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
ul img {
vertical-align: -8%;
margin-right: 5px;
}
li {
font-family: 'Product Sans', sans-serif;
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
.active {
background-color: #04AA6D;
}
p {
font-family: 'Product Sans', sans-serif;
font-size: 20px;
}
.calendar {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.clock {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.weather {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
float: right;
}
.CommunicationBox {
border: 2px outset rgb(0, 0, 0);
border-radius: 20px;
box-shadow: 0px 0px 5px 2px rgb(0, 0, 0);
text-indent: 5%;
text-align: left;
height: 20%;
width: 40%;
margin-top: 40px;
margin-left: 40px;
float: left;
overflow: hidden;
}
.SocialNetworksBox {
border: 2px outset rgb(0, 0, 0);
border-radius: 20px;
box-shadow: 0px 0px 5px 2px rgb(0, 0, 0);
text-indent: 5%;
text-align: left;
height: 20%;
width: 40%;
margin-top: 40px;
margin-right: 40px;
float: right;
overflow: hidden;
}
.ShoppingBox {
border: 2px outset rgb(0, 0, 0);
border-radius: 20px;
box-shadow: 0px 0px 5px 2px rgb(0, 0, 0);
text-indent: 5%;
text-align: left;
height: 20%;
width: 40%;
margin-top: 60px;
margin-left: 40px;
margin-bottom: 60px;
float: left;
overflow: hidden;
}
div {
backdrop-filter: blur(10px);
}
div h1 {
color: white;
}
a img {
height: 32px;
width: 32px;
}
p a {
color: white;
text-decoration: none;
}
.column {
float: left;
width: 50%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
add z-index: 10 property in Unordered List(ul) it will work.
ul {
z-index: 10
}
I have given header, a menu bar and a hero image, after that created image gallery using lightbox. I have create 4 columns with 3 images each, but in the lightbox gallery it's showing 3 columns with 4 images each.
I have given new row called My Videos but the css taking the previous row into consideration not the new one. I placed a video but it's not moving according to the margins given.
Lastly, my footer is not showing up..
<!doctype html>
<html>
<head>
<title> Project One </title>
<link rel="stylesheet" href="C:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/main.css">
<link rel="stylesheet" href="C:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/lightbox.css">
</head>
<body>
<header>
<div class="header-section">
<div class="header-logo">
<h1> Superstar </h1>
</div>
<div class="header-right">
<p> Plot No.33,Mahalaxmi Nagar, Vizianagaram-535 002.<br>
email:saisankarmandala#gmail.com.
</p>
</div>
</div>
</header>
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</nav>
<div class="container"></div>
<div class="hero-text">
<h1> I am Creative </h1>
</div>
<div class="row">
<h1> My Gallery </h1>
</div>
<div class="col col-md-8-pushdown-sm">
<div class="column">
<div class="thumbnails">
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb1.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb1a.jpg" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb2.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb2a.jpg" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb3.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb3a.jpg" width="200" height="200"></a>
</div>
</div>
<div class="column">
<div class="thumbnails">
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb4.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb4a.jpg" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb5.png" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb5a.png" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb6.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb6a.jpg" alt="thumb" width="200" height="200"></a>
</div>
</div>
<div class="column">
<div class="thumbnails">
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb7.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb7a.jpg" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb8.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb8a.jpg" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb9.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb9a.jpg" alt="thumb" width="200" height="200"></a>
</div>
</div>
<div class="column">
<div class="thumbnails">
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb10.jpeg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb10a.jpeg" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb11.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb11a.jpg" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb12.png" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb12a.png" alt="thumb" width="200" height="200"></a>
</div>
</div>
</div>
<div class="row">
<div class="heading">
<h1> My Videos </h1>
</div>
</div>
<div class="column">
<div class="video-area">
<video height="150" width="200" controls>
<source src="C:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/vids/vid1.mp4" type="video/mp4" >
<source src="C:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/vids/vid2.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="clearfix"></div>
<footer>
<p>© 2021, All rights reserved </p>
</footer>
<script type="text/javascript" src="C:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/lightbox-plus-jquery.js"></script>
</body>
</html>
This is my CSS Code
html {
height: 100%;
}
body {
position: relative;
margin: 0;
height: 100%;
}
/*styling the header section */
.header-section {
display: flex;
flex-wrap: wrap;
border-bottom: 2px solid purple;
background-color: purple;
margin-bottom: 0;
overflow: auto;
}
/* divide the header area into two and make width adjustments */
.header-logo {
width: 66%;
float: left;
flex: 1;
}
h1 {
font-family: Helvetica, arial, sans-serif;
font-size: 300%;
color: #fff;
font-weight: bold;
padding: 10px 0px 0px 40px;
box-sizing: border-box;
}
.header-right {
width: 34%;
float: right;
flex: 1;
}
p {
font-size: 110%;
font-weight: bold;
color: #fff;
padding: 40px 0px 0px 150px;
box-sizing: border-box;
}
nav li {
list-style: none;
float: left;
display: inline;
margin-top: -5px;
}
nav {
float: left;
margin-top: 0px;
bottom-border: none;
border-top: 0px solid purple;
width: 100%;
background-color: purple;
width: 100%;
height: 42px;
overflow: hidden;
}
nav a {
color: white;
text-decoration: none;
}
nav a {
display: inline;
font-family: Helvetica, arial, sans-serif;
text-decoration: none;
padding: 10px 20px;
border: 1px solid white;
border-bottom: 1px;
border-spacing: 3px;
background-color: purple;
color: white;
margin-right: 2px;
margin-top: -2px;
}
/* hero image area */
.container {
max-width: 100%;
margin-top: 45px;
background-image: url('C:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/nude.jpg');
height: 75%;
position: relative;
background-repeat: no-repeat;
background-size: cover;
background-position: right center;
}
/* hero text on the image */
.hero-text {
background-color: rgba(0, 0, 0, 0.4);
/* Black w/opacity/see-through */
color: purple;
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
width: 80%;
padding: 30px;
text-align: center;
}
/* row heading */
.row h1 {
margin-top: -10px;
font-size: 150%;
font-family: Helvetica, arial, sans-serif;
font-weight: bold;
text-align: center;
color: #fff;
background-color: purple;
}
/* image gallery settings */
.column {
display: flex;
align-items: stretch;
column-gap: 20px;
}
.thumbnails img {
float: left;
width: 25%;
margin: 0 auto;
display: block;
max-width: 100%;
padding: 10px 20px 10px 30px;
margin-left: 40px;
margin-right: 10px;
margin-bottom: 15px;
transitiion: all 2s ease-in-out;
border: 1px solid grey;
box-sizing: border-box
}
.thumbnails img:hover {
transform: rotate(2deg);
box-shadow: 0 0 7px rgba(0, 0, 0, .5);
opacity: 1;
transform: scale(1)rotate(2deg);
.thumbnails:hover img {
opacity: .5;
transform: scale(.92);
}
.row::after {
content: "";
clear: both;
display: table;
}
.heading h1 {
font-size: 150%;
font-family: Helvetica, arial, sans-serif;
font-weight: bold;
text-align: center;
color: purple;
}
.video-area video {
margin: 0 auto;
display: block;
}
.footer {
position: fixed;
width: 100%;
bottom: 0;
}
html {
height: 100%;
}
body {
position: relative;
margin: 0;
height: 100%;
}
/*styling the header section */
.header-section {
display: flex;
flex-wrap: wrap;
border-bottom: 2px solid purple;
background-color: purple;
margin-bottom: 0;
overflow: auto;
}
/* divide the header area into two and make width adjustments */
.header-logo {
width: 66%;
float: left;
flex: 1;
}
h1 {
font-family: Helvetica, arial, sans-serif;
font-size: 300%;
color: #fff;
font-weight: bold;
padding: 10px 0px 0px 40px;
box-sizing: border-box;
}
.header-right {
width: 34%;
float: right;
flex: 1;
}
p {
font-size: 110%;
font-weight: bold;
color: #fff;
padding: 40px 0px 0px 150px;
box-sizing: border-box;
}
nav li {
list-style: none;
float: left;
display: inline;
margin-top: -5px;
}
nav {
float: left;
margin-top: 0px;
border-bottom: none;
border-top: 0px solid purple;
width: 100%;
background-color: purple;
width: 100%;
height: 42px;
overflow: hidden;
}
nav a {
color: white;
text-decoration: none;
}
nav a {
display: inline;
font-family: Helvetica, arial, sans-serif;
text-decoration: none;
padding: 10px 20px;
border: 1px solid white;
border-bottom: 1px;
border-spacing: 3px;
background-color: purple;
color: white;
margin-right: 2px;
margin-top: -2px;
}
/* hero image area */
.container {
max-width: 100%;
margin-top: 45px;
background-image: url('C:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/nude.jpg');
height: 75%;
position: relative;
background-repeat: no-repeat;
background-size: cover;
background-position: right center;
}
/* hero text on the image */
.hero-text {
background-color: rgba(0, 0, 0, 0.4);
/* Black w/opacity/see-through */
color: purple;
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
width: 80%;
padding: 30px;
text-align: center;
}
/* row heading */
.row h1 {
margin-top: -10px;
font-size: 150%;
font-family: Helvetica, arial, sans-serif;
font-weight: bold;
text-align: center;
color: #fff;
background-color: purple;
}
/* image gallery settings */
.column {
display: flex;
align-items: stretch;
column-gap: 20px;
}
.thumbnails img {
float: left;
width: 25%;
margin: 0 auto;
display: block;
max-width: 100%;
padding: 10px 20px 10px 30px;
margin-left: 40px;
margin-right: 10px;
margin-bottom: 15px;
transition:all 2s ease-in-out;
border: 1px solid grey;
box-sizing: border-box
}
.thumbnails img:hover {
transform: rotate(2deg);
box-shadow: 0 0 7px rgba(0, 0, 0, .5);
opacity: 1;
transform: scale(1)rotate(2deg);
}
.thumbnails:hover img {
opacity: .5;
transform: scale(.92);
}
.row::after {
content: "";
clear: both;
display: table;
}
.heading h1 {
font-size: 150%;
font-family: Helvetica, arial, sans-serif;
font-weight: bold;
text-align: center;
color: purple;
}
.video-area video {
margin: 0 auto;
display: block;
}
.footer {
position: fixed;
width: 100%;
bottom: 0;
}
<!doctype html>
<html>
<head>
<title> Project One </title>
<link rel="stylesheet" href="C:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/main.css">
<link rel="stylesheet" href="C:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/lightbox.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<header>
<div class="header-section">
<div class="header-logo">
<h1> Superstar </h1>
</div>
<div class="header-right">
<p> Plot No.33,Mahalaxmi Nagar, Vizianagaram-535 002.<br>
email:saisankarmandala#gmail.com.
</p>
</div>
</div>
</header>
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</nav>
<div class="container"></div>
<div class="hero-text">
<h1> I am Creative </h1>
</div>
<div class="row">
<h1> My Gallery </h1>
</div>
<div class="col col-md-8-pushdown-sm">
<div class="column">
<div class="thumbnails">
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb4.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb4a.jpg" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb5.png" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb5a.png" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb6.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb6a.jpg" alt="thumb" width="200" height="200"></a>
</div>
</div>
<div class="column">
<div class="thumbnails">
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb4.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb4a.jpg" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb5.png" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb5a.png" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb6.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb6a.jpg" alt="thumb" width="200" height="200"></a>
</div>
</div>
<div class="column">
<div class="thumbnails">
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb7.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb7a.jpg" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb8.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb8a.jpg" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb9.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb9a.jpg" alt="thumb" width="200" height="200"></a>
</div>
</div>
<div class="column">
<div class="thumbnails">
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb10.jpeg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb10a.jpeg" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb11.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb11a.jpg" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb12.png" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb12a.png" alt="thumb" width="200" height="200"></a>
</div>
</div>
</div>
<div class="row">
<div class="heading">
<h1> My Videos </h1>
</div>
</div>
<div class="column">
<div class="video-area">
<video height="150" width="200" controls>
<source src="C:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/vids/vid1.mp4" type="video/mp4" >
<source src="C:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/vids/vid2.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="clearfix"></div>
<footer>
<p>© 2021, All rights reserved </p>
</footer>
<script type="text/javascript" src="C:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/lightbox-plus-jquery.js"></script>
</body>
</html>
I have a page on my site that uses an iframe to display another file on the server, everything looks good except for this issue:
https://www.dropbox.com/s/dyez8mbeb792udg/2016-03-08-1639-59.flv?dl=0
Here is my code for the page showing the iframe:
<!DOCTYPE html>
<html>
<head>
<title>Online FoodTube - Home</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
</head>
<body>
<div id="MasterHead-Container">
<img title="Online FoodTube Home" src="foodtube.png" width="80.5" height="32">
<!--<a id="TitleUrl" href="ayy">ayy</a>
<a id="UserUrl" href="ayy">ayy</a>-->
</div>
<iframe id="VideoIframe" src="new/index.php" onload="resizeIframe(this)"></iframe>
<div id="MasterFooter-Container">
<img title="Online FoodTube Home" src="foodtube.png" width="80.5" height="32">
<span id="MasterFooter-Thanks">Thank you for visiting Online FoodTube.</span>
<br>
<a id="SimpleUrl" href="copyright">Copyright Info</a>
<span id="UrlSpacer">--</span>
<a id="SimpleUrl" href="ayy">The Author</a>
<span id="UrlSpacer">--</span>
<a id="SimpleUrl" href="/">StratHaxxs Co. Home</a>
</div>
</body>
</html>
Here is the iframe php file code:
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="VideoContainer">
<div id="VideoThumbnail">
<span id="VideoTime">5:25</span>
<img src="//i.ytimg.com/vi/xyAICqyWbes/mqdefault.jpg" alt="" height="110" width="196">
</div>
<a id="TitleUrl" href="ayy" target="_parent" >ayy</a>
</div>
<div id="VideoContainer">
<div id="VideoThumbnail">
<span id="VideoTime">5:25</span>
<img src="//i.ytimg.com/vi/xyAICqyWbes/mqdefault.jpg" alt="" height="110" width="196">
</div>
<a id="TitleUrl" href="ayy" target="_parent" >ayy</a>
</div>
<div id="VideoContainer">
<div id="VideoThumbnail">
<span id="VideoTime">5:25</span>
<img src="//i.ytimg.com/vi/xyAICqyWbes/mqdefault.jpg" alt="" height="110" width="196">
</div>
<a id="TitleUrl" href="ayy" target="_parent" >ayy</a>
</div>
<div id="VideoContainer">
<div id="VideoThumbnail">
<span id="VideoTime">5:25</span>
<img src="//i.ytimg.com/vi/xyAICqyWbes/mqdefault.jpg" alt="" height="110" width="196">
</div>
<a id="TitleUrl" href="ayy" target="_parent" >ayy</a>
</div>
<div id="VideoContainer">
<div id="VideoThumbnail">
<span id="VideoTime">5:25</span>
<img src="//i.ytimg.com/vi/xyAICqyWbes/mqdefault.jpg" alt="" height="110" width="196">
</div>
<a id="TitleUrl" href="ayy" target="_parent" >ayy</a>
</div>
<div id="VideoContainer">
<div id="VideoThumbnail">
<span id="VideoTime">5:25</span>
<div id="test" style="" ></div>
</div>
</div>
<a id="TitleUrl" href="ayy" target="_parent" >ayy</a>
They both use the same exact style sheet:
* {
font-family: Verdana, Arial, sans-serif;
}
body {
background-color: #fff;
cursor: default;
}
h1 {
font-size: 15pt;
}
p {
font-size: 10pt;
}
#MasterHead-Container {
background: #fff;
border-bottom: 1px solid #e8e8e8;
min-width: 0;
padding-bottom: 8px;
padding-top: 7px;
position: relative;
}
#MasterFooter-Container {
width: 100%;
height: 100px;
position: absolute;
bottom: 0;
left: 0;
text-align: center;
background: #fff;
border-top: 1px solid #e8e8e8;
min-width: 0;
padding-top: 10px;
}
#MasterFooter-Thanks {
position: relative;
top: -10%;
}
#TitleUrl {
color: #167ac6;
text-decoration: none;
}
#TitleUrl:hover {
text-decoration: underline;
}
#UserUrl {
color: #767676;
text-decoration: none;
}
#UserUrl:hover {
color: #167ac6;
text-decoration: none;
}
#SimpleUrl {
color: #767676;
text-decoration: none;
color: #666;
font-size: 11px;
font-weight: 500;
}
#SimpleUrl:hover {
color: #167ac6;
text-decoration: underline;
}
#UrlSpacer {
color: #666;
font-size: 11px;
font-weight: 500;
}
#VideoThumbnail {
position: relative;
height: 110px;
width: 196px;
}
#VideoTime {
font-size: 15px;
background-color: #000;
color: #fff !important;
height: 14px;
opacity: .75;
filter: alpha(opacity=75);
padding-bottom: 4px;
position: absolute;
bottom: 0;
right: 0;
}
#VideoContainer {
display: inline-block;
}
#VideoIframe {
height: 100%;
width: 100%;
display: block;
border: none;
}
Please help me fix this.
Since we don't have a way to inspect this with a devtool, the only thing that I see would be to add vertical-align:top; to #VideoContainer.
Also you have to change id="VideoContainer" to class="VideoContainer" since ID are unique. Every ID should appear only once, if it appears more than once, switch the id for a class.
I'm new at html and css and i would appreciate if someone would give me a hand with this on. Thank you for all you anwsers in advance.
A strange thing happened when because i added the background and i can't figure out why my hover and active are disabled.
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Project1</title>
<link href="cssprojectgallery.css" rel="stylesheet" type="text/css">
<div class="logo" >
<img src="../MT portfolio/lg.png" alt="" width="180" height="178" class="logo"/>
</div>
</head>
<body>
<nav>
<li><a< href".html">Home</li></a>
<li><a< href"projects.html">Projects</li></a>
<li><a< href"about.html">About</li></a>
<li><a< href"contact.html">Contact</li></a>
</nav>
<div class="gal">
<img src="LOGOS/Ampire.jpg" width="800" alt=""/>
<img src="LOGOS/Pacakama.jpg" alt="" width="800"/>
<img src="LOGOS/Zoom.jpg" alt="" width="800"/>
<img src="LOGOS/Futura.jpg" alt=""width="800""/>
<img src="LOGOS/Soundgrounded.jpg" alt=""width="800""/>
<img src="LOGOS/Gams.jpg" alt=""width="800""/>
<img src="LOGOS/Bullseye.jpg" alt=""width="800""/>
<img src="LOGOS/Union.jpg" alt=""width="800""/>
<img src="LOGOS/Skylinq.jpg" alt=""width="800""/>
</div>
</body>
</html>
CSS
#charset "utf-8";
.logo {
padding-bottom: 30px;
text-align: center;
}
nav {
font-family: "Proxima Nova ScOsf ExCn Rg";
text-align: center;
font-size: 35px;
word-spacing: 80px;
padding-right: 50px;
padding-bottom: 2%;
padding-left: 50px;
color: #000000; }
li {
display: inline;
color: #000000;
}
a {
text-decoration: none;
color: black;
}
a:hover {
color: lightgray;
}
a:active {
color: black;
}
body {
background-image: url(../mt/back.jpg);
background-sizce: cover;
}
.gal {
text-align: center;
background-color: #000000;
background-size: 0% auto;
margin-top: 0.5%;
padding-top: 2%;
padding-bottom: 0.5%;
border-top-left-radius: 0px;
margin-right: 20%;
margin-left: 20%;
margin-bottom: 5%;
}
.gal img {
vertical-align: middle;
padding-top: 1%;
padding-bottom: 2%;
}
Your markup is not valid that is why hover and active states are not responding. Please correct your HTML code as follows.
<nav>
<ul>
<li>
Home
</li>
<li>
Projects
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</nav>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Jack Yuan | Web Developer</title>
<link rel="stylesheet" href="CSS/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="CSS/main.css">
<link rel="stylesheet" href="CSS/responsive.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Jack Yuan</h1>
<h2>Web Developer</h2>
</a>
<nav>
<ul>
<li>About</li>
<li>Portfolio</li>
<li> Items For Sale <li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="sec">
<section>
<ul id="item_gallery">
<li>
<a href="itemImg/001.JPG">
<img src="itemImg/001.JPG" width="100" height="100" alt="">
<p> Hard Choices </p>
</a></li>
<li>
<a href="itemImg/002.JPG">
<img src="itemImg/002.JPG"width="100" height="100" alt="">
<p> Linear Algebra </p>
</a></li>
<li>
<a href="itemImg/003.JPG">
<img src="itemImg/003.JPG"width="100" height="100" alt="">
<p> Physics 111 + 112 </p>
</a></li>
<li>
<a href="itemImg/004.JPG">
<img src="itemImg/004.JPG"width="100" height="100" alt="">
<p> For BUS 111</p>
</a></li>
<li>
<a href="itemImg/005.JPG">
<img src="itemImg/005.JPG" width="100" height="100" alt="">
<p> Chemistry for G11 </p>
</a></li>
<li>
<a href="itemImg/006.JPG">
<img src="itemImg/006.JPG"width="100" height="100" alt="">
<p> Chinese-English Dictionary </p>
</a></li>
<li>
<a href="itemImg/007.JPG">
<img src="itemImg/007.JPG"width="100" height="100" alt="">
<p> English-Chinese Dictionary </p>
</a></li>
<li>
<a href="itemImg/008.JPG">
<img src="itemImg/008.JPG"width="100" height="100" alt="">
<p> Amath 250</p>
</a></li>
<li>
<a href="itemImg/009.JPG">
<img src="itemImg/009.JPG"width="100" height="100" alt="">
<p> STAT 230 </p>
</a></li>
<li id="ten">
<a href="itemImg/010.JPG">
<img src="itemImg/010.JPG"width="100" height="100" alt="">
<p> CS116 </p>
</a></li>
<li id="eleven">
<a href="itemImg/011.JPG">
<img src="itemImg/011.JPG"width="100" height="100" alt="">
<p> For CS245</p>
</a></li>
</ul>
</section>
</div>
<footer>
<div id="mus">
<embed src="夜空中最亮的星 Calculasian.mp3" loop="true" autostart="true" height="55mm">
<p> 夜空中最亮的星 </p>
<p>Presented by Calculasian </p>
</div>
<div id="logo">
<a href="https://www.facebook.com/jackyuan.jack">
<img src="img/facebook.gif" alt="FaceBook Logo" class="icon">
</a>
<a href="https://twitter.com/Jack19909100">
<img src="img/twitter.png" alt="Twitter Logo" class="icon">
</a>
</div>
<p>Jack Yuan</p>
<p>All Rights Reserved.</p>
</footer>
</body>
</html>
This is my CSS
a {
text-decoration:none;
}
#logo {
text-align: center;
margin: 0;
}
h1 {
margin: 0;
padding-top: 4mm;
font-size: 2em;
font-family: 'Lobster', cursive;
font-weight: normal;
line-height: 0.8em;
}
h2 {
font-family: 'Gloria Hallelujah', cursive;
font-size: 1.5em;
margin: -5px 0 0;
font-weight: normal;
}
body{
font-family: 'Gloria Hallelujah', cursive;
}
a {
color: #6ab47b;
}
header{
background: #6ab47b;
border-color:#599a68;
float:left;
margin: 0;
padding: 5px 0 0 0;
width: 100%;
}
nav{
background: #599a68;
text-align: center;
margin: 20px 0 0;
}
nav a, nav a:visited {
color:#fff;
}
nav ul{
list-style: none;
margin: 0 10px;
padding: 0;
}
nav a{
font-weight: 800;
padding: 15px 10px;
}
h1, h2{
color:#fff;
}
h3{
margin: 0 0 1em 0;
}
nav a.selected , nav a:hover {
color:#32673f;
}
footer{
font-size: 1em;
text-align: center;
clear:both;
padding-top: 20px;
color: #ccc;
line-height: 0.8em;
background: black;
padding-bottom: 1mm;
}
img{
max-width: 100%;
}
#gallery img{
width: 100%;
}
#gallery{
margin:0;
list-style: none; /** remove bullet point **/
}
#gallery li{
float:left;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
#gallery li a p{
margin: 0;
padding: 0;
font-size: 1.5em;
color: #bdc3c7;
}
.icon{
width: 40px;
height: 40px;
margin: 5mm 5px;
}
body{
background: orange;
margin:0;
color:#999;
}
/******
Page about
******/
.profile-photo{
display:block;
max-width:600px;
margin:0 auto 30px;
border-radius: 100%;
padding-top: 10mm;
}
#confu{
margin-top: 70mm;
}
#context{
font-family: 'Montserrat', sans-serif; font-size: 1.5em;
}
#aboutsec{
font-family: 'Pacifico', cursive; font-size:1.5em;
text-align:center;
}
#mus p{
margin-top:0;
padding-top:0;
line-height: 0.8em;
}
#item_gallery{
margin:0;
list-style:none;
}
#item_gallery li{
float: left;
padding-top: 22px;
padding-right: 26px;
padding-left: 26px;
width:110px;
}
#item_gallery p,img{
margin:0;
padding: 0;
}
#sec{
height:40cm;
}
I am trying to build a gallery here. But when i was trying to add one more img to the 2nd line, it started at the middle of the line instead of the leftmost position. I've tried "clear:left", but it did not work. Anyone can help? Thanks!
fiddle link: http://jsfiddle.net/Arh63/
You can try this:
Remove float:left and use display:inline-block;
Demo
#item_gallery li{
display:inline-block;
padding-top: 22px;
padding-right: 26px;
padding-left: 26px;
width:110px;
vertical-align:top;
}
I have just remove the line <link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'> and it is started working. May be this font settings have some styles.
Really Wondering!!
DEMO