Placing logos and usernames in the middle of the page - html

I'm super new to all of this, I can only do some small edits but nothing more.
I need to put logos and usernames for Instagram, Facebook, Snapchat, Telegram like in the image but I really can't find anything. My english is not good enough to use the right search keywords for this neither. I need help. How I want it to look.
Code: https://pastebin.com/dYHP8Rkb
<!DOCTYPE html>
<html lang="en">
<head>
<title>Nax Corp.</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700" rel="stylesheet">
<link rel="stylesheet" href="css/open-iconic-bootstrap.min.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/aos.css">
<link rel="stylesheet" href="css/ionicons.min.css">
<link rel="stylesheet" href="css/bootstrap-datepicker.css">
<link rel="stylesheet" href="css/jquery.timepicker.css">
<link rel="stylesheet" href="css/icomoon.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="colorlib-page">
<i></i>
<aside id="colorlib-aside" role="complementary" class="js-fullheight text-center">
<nav id="colorlib-main-menu" role="navigation">
<ul>
<li>Home</li>
<li class="colorlib-active">Contact</li>
</ul>
</nav>
<div class="colorlib-footer">
<div class="d-flex justify-content-center">
</div>
</div>
</aside> <!-- END COLORLIB-ASIDE -->
</div>
</div>
</div>
</footer>
</div><!-- END COLORLIB-MAIN -->
</div><!-- END COLORLIB-PAGE -->
<!-- loader -->
<div id="ftco-loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"><circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/><circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#F96D00"/></svg></div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-migrate-3.0.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/aos.js"></script>
<script src="js/jquery.animateNumber.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="js/jquery.timepicker.min.js"></script>
<script src="js/scrollax.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
<script src="js/google-map.js"></script>
<script src="js/main.js"></script>
</body>
</html>
I also need to change the pink color to Twitter logo blue one. Any help is appreciated. Thank you.

I would suggest a simple HTML table:
<table style="height: 500px; margin-left: auto; margin-right: auto;" border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<!-- LOGO 1 -->
<td style="width: 100%;">
<p style="text-align: center;"><img src="/logo1.jpg" alt="" width="50" height="50" /></p>
<p style="text-align: center;">Username1</p>
</td>
</tr>
<tr>
<!-- LOGO 2 -->
<td style="width: 100%;">
<p style="text-align: center;"><img src="/logo2.jpg" alt="" width="50" height="50" /></p>
<p style="text-align: center;">Username2</p>
</td>
</tr>
<tr>
<!-- LOGO 3 -->
<td style="width: 100%;">
<p style="text-align: center;"><img src="/logo3.jpg" alt="" width="50" height="50" /></p>
<p style="text-align: center;">Username3</p>
</td>
</tr>
<tr>
<!-- LOGO 4 -->
<td style="width: 100%;">
<p style="text-align: center;"><img src="/logo4.jpg" alt="" width="50" height="50" /></p>
<p style="text-align: center;">Username4</p>
</td>
</tr>
</table>
There are other options you could use, which would be more ideal, such as CSS containers etc. But if you're looking for a quick fix, you can use the above.
(Please note, you need to change /logo#.jpg to your own images and Username# to your own text.)

Related

Reducing the space between nav bar and the browser window

I have the following code on my web page:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:bundlereference runat="server" path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="Styles/new.css" />
<style>
.navbar-brand {
display: flex;
white-space: normal;
}
</style>
</head>
<body style="background-color:cadetblue">
<form id="form1" runat="server">
<asp:ScriptManager ID="s" runat="server"></asp:ScriptManager>
<nav class="navbar" style="background-color: #264653; margin:0px auto; max-width:900px; ">
<div class="container-fluid">
<span class="navbar-brand" style="display:flex; white-space: normal;">
<img src="~/Images/Logo_Circle.png" alt="RCA" width="80" height="80" class="d-inline-block align-middle mr-2" runat="server" />
<span style="font-size:25px;color:white;"><span style="color:#e4b16d">City of Testing</span><br />This is the company name</span>
</span>
</div>
</nav>
<div style="background-color:white;border-radius:10px;align-content:center;align-self:center;vertical-align:middle;width:100%" class="container max-width-940 body-content">
<div style="margin-top: 0px">
<asp:UpdatePanel ID="updatePanel2" runat="server">
<ContentTemplate>
<div style="align-items:center; justify-content:left;display:flex;font-size:24px"><b>Recording test testing</b></div>
<div> </div>
<div>
<span style="font-size:18px"> This is a test1. This is a test2.This is a test3.This is a test4.This is a test5.This is a test6.This is a test7.This is a test8.This is a test9.This is a test10.This is a test11This is a test12This is a test13This is a test14This is a test15This is a test16This is a test17This is a test18This is a test19This is a test20This is a test21This is a test22This is a test23This is a test24.</span>
</div>
<div> </div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
I want the navbar to be totally flushed to the top of the browser window. I see a space between the browser window and the navbar. below is the screenshot. I want to get rid of the space where the red arrow is. while attempting to flush the navbar at the top, I want the page to be responsive too.
I want something like this:
#media (min-width: 992px) {
.container.max-width-940 {
max-width: 1390px !important;
}
}
#media (min-width: 1200px) {
.container.max-width-940 {
max-width: 1390px !important;
}
}
.container.max-width-940 {
min-width: 1390px !important;
}
Your navbar-brand class has the white-space property set to nowrap, which prevents the text wrapping if the container becomes smaller than the text inside it.
If you change it to normal the text will break, and allow the container to become smaller.
Additionally, your navbar is absolutely positioned, which is taking it out of the document flow. If you centre it with margin:0px auto and remove the absolute positioning, your content below it will be automatically pushed down if its height changes.
.navbar-brand {
display: flex;
white-space: normal;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:bundlereference runat="server" path="~/Content/css" />
-->
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!--
<link rel="stylesheet" href="Styles/new.css" />
-->
</head>
<body style="background-color:cadetblue">
<form id="form1" runat="server">
<asp:ScriptManager ID="s" runat="server"></asp:ScriptManager>
<nav class="navbar" style="background-color: #264653; margin:0px auto; max-width:900px; ">
<div class="container-fluid">
<span class="navbar-brand" style="display:flex; white-space: normal;">
<img src="~/Images/Logo_Circle.png" alt="RCA" width="80" height="80" class="d-inline-block align-middle mr-2" runat="server" />
<span style="font-size:25px;color:white;"><span style="color:#e4b16d">City of Testing</span><br />This is the company name</span>
</span>
</div>
</nav>
<div style="background-color:white;border-radius:10px;align-content:center;align-self:center;vertical-align:middle;width:100%" class="container max-width-940 body-content">
<div style="margin-top: 0px">
<asp:UpdatePanel ID="updatePanel2" runat="server">
<ContentTemplate>
<div style="align-items:center; justify-content:left;display:flex;font-size:24px"><b>Recording test testing</b></div>
<div> </div>
<div>
<span style="font-size:18px"> This is a test1. This is a test2.This is a test3.This is a test4.This is a test5.This is a test6.This is a test7.This is a test8.This is a test9.This is a test10.This is a test11This is a test12This is a test13This is a test14This is a test15This is a test16This is a test17This is a test18This is a test19This is a test20This is a test21This is a test22This is a test23This is a test24.</span>
</div>
<div> </div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</form>
</body>
</html>
Try doing some "#media" rule, wherein if the page has reach a certain size, it will be reorganize base on the conditions that you have set in classes or id. Check this link.
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Use overflow-wrap: break-word; css property on the container

Bootstrap table with scrollable attribute non generated correctly

I want to generate in PHP/Bootstrap a table with a scrollbar. I would like my table contains 2 lines visible and the rest visible using scrollbar.
Here is a working example : https://codepen.io/yavuzselim/pen/LNYrBd
Someone could fix my code ? I don't know where is the problem because I put the necessary CSS attributes in the tbody.
Here is the rendering of the page :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="">
<title>Title</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="ressources/style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/examples/sign-in/signin.css" integrity="sha384-mKB41Eu6sQQvXR8fqvXcVe8SXodkH6cYtVvHkvLwE7Nq0R/+coO4yJispNYKy9iZ" crossorigin="anonymous">
<style>
</style>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div id="welcomeid">
<h4>Welcom to the page</h4> </div>
</div>
<div class="row">
<div id="mybutton">
<div id="buttonid">
Button
</div>
</div>
</div>
<div class="row">
<div id="livraison_chauffeur">
<div class="table-wrapper-scroll-y my-custom-scrollbar">
<table class="table table-bordered table-striped mb-0">
<tbody style="height:50px;overflow-y:scroll;">
<tr>
<th scope="row">1</th>
<td>11/04/2020 10:18</td>
<td>Value1</td>
<td>Value2</td>
</tr>
<tr>
<th scope="row">2</th>
<td>11/04/2020 10:18</td>
<td>Value3</td>
<td>Value4</td>
</tr>
<tr>
<th scope="row">3</th>
<td>11/04/2020 10:19</td>
<td>Value5</td>
<td>Value6</td>
</tr>
<tr>
<th scope="row">4</th>
<td>11/04/2020 10:20</td>
<td>Value7</td>
<td>Value8</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row d-flex justify-content-around text-button">
<label>A future button1</label>
<label>A future button2</label>
<label>A future button3</label>
</div>
</div>
</body>
</html>
I would change the height in the tbody, 74px instead of 200px.
Table with new height
tbody{
height:74px;
overflow-y:auto;
width: 100%;
}
Change the tbody height to 74px
Also, add "table-responsive" class on table tag.
tbody{
height:74px;
}
Solution : Just add to tbody the attributes : height:150px; width: 100%; display:block;overflow-y:auto
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="">
<title>Title</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="ressources/style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/examples/sign-in/signin.css" integrity="sha384-mKB41Eu6sQQvXR8fqvXcVe8SXodkH6cYtVvHkvLwE7Nq0R/+coO4yJispNYKy9iZ" crossorigin="anonymous">
<style>
</style>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div id="welcomeid">
<h4>Welcom to the page</h4> </div>
</div>
<div class="row">
<div id="mybutton">
<div id="buttonid">
Button
</div>
</div>
</div>
<div class="row">
<div id="livraison_chauffeur">
<div class="table-wrapper-scroll-y my-custom-scrollbar">
<table class="table table-bordered table-striped mb-0">
<tbody style="height:150px;width: 100%;display:block;overflow-y:auto">
<tr>
<th scope="row">1</th>
<td>11/04/2020 10:18</td>
<td>Value1</td>
<td>Value2</td>
</tr>
<tr>
<th scope="row">2</th>
<td>11/04/2020 10:18</td>
<td>Value3</td>
<td>Value4</td>
</tr>
<tr>
<th scope="row">3</th>
<td>11/04/2020 10:19</td>
<td>Value5</td>
<td>Value6</td>
</tr>
<tr>
<th scope="row">4</th>
<td>11/04/2020 10:20</td>
<td>Value7</td>
<td>Value8</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row d-flex justify-content-around text-button">
<label>A future button1</label>
<label>A future button2</label>
<label>A future button3</label>
</div>
</div>
</body>
</html>

How to fix: "Social Media Sprites not Displaying Correctly in Portrait Mode"

My real estate team is integrating our database into a new CRM system and our email signatures are not mobile responsive. In landscape mode the social media sprites display correctly. The tables stack correctly when in portrait mode but the sprites are stretched to the width of the container.
We hired an outside group to develop the system, we cannot modify the CSS code just the HTML source code on the signatures. Is there any fix we can do to the HTML or one we can suggest to the developers to make the look consistent? I am the most computer literate in the office and was given the task of finding an answer.
Thanks to Munni's help below, the images are at least clear but HUGE. We are now a little closer to what would make sense on a mobile display. See the subsequent image for the result.
Full Source Code
[
<html>
<head>
<title></title>
<link href="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/ckscayt/css/wsc.css" rel="stylesheet" type="text/css" />
<link href="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/ckscayt/css/wsc.css" rel="stylesheet" type="text/css" />
<link href="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/ckscayt/css/wsc.css" rel="stylesheet" type="text/css" />
<link href="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/ckscayt/css/wsc.css" rel="stylesheet" type="text/css" />
<link href="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/ckscayt/css/wsc.css" rel="stylesheet" type="text/css" />
<link href="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/ckscayt/css/wsc.css" rel="stylesheet" type="text/css" />
<link href="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/ckscayt/css/wsc.css" rel="stylesheet" type="text/css" />
<link href="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/ckscayt/css/wsc.css" rel="stylesheet" type="text/css" />
<link href="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/ckscayt/css/wsc.css" rel="stylesheet" type="text/css" />
<link href="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/ckscayt/css/wsc.css" rel="stylesheet" type="text/css" />
<link href="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/ckscayt/css/wsc.css" rel="stylesheet" type="text/css" />
<link href="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/ckscayt/css/wsc.css" rel="stylesheet" type="text/css" />
<link href="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/ckscayt/css/wsc.css" rel="stylesheet" type="text/css" />
<link href="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/ckscayt/css/wsc.css" rel="stylesheet" type="text/css" />
<link href="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/ckscayt/css/wsc.css" rel="stylesheet" type="text/css" />
<link href="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/ckscayt/css/wsc.css" rel="stylesheet" type="text/css" />
<link href="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/ckscayt/css/wsc.css" rel="stylesheet" type="text/css" />
<link href="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/ckscayt/css/wsc.css" rel="stylesheet" type="text/css" />
</head>
<body aria-readonly="false">
<p> </p>`
<div class="wrapper" style="margin: 0px;max-width: 680px;min-width: 200px;background: #fff;text-align: left;">
<div class="email-container" style="background: white;font-family: sans-serif;margin: 0 auto;overflow: hidden;">
<div class="accentline" style="margin: 0px;font-size: 28px;font-weight: 400;color: #fff;line-height: .33;text-align: center;margin-bottom: 0px;background: black;"> </div>
<div class="accentlinediamond" style="margin: 0px;font-size: 28px;line-height: .75;text-align: center;margin-bottom: 5px;width: 200px;background: #fff;margin-left: 0;color:#93f542;">▼</div>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="row" style="padding: 0px;" width="100%">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="deviceWidth" style="padding-right: 10px; width: 150px;"><a class="userphoto" href="http://www.realvolve.com" style="width: 150px;text-align: center;"><img alt="" class="unique-inline-img-class" dir="" document_id="337728" id="" lang="" longdesc="" src="https://realvolve-production.s3.amazonaws.com/message_templates/879660270d928312088b/Headshot_5.jpg" style="width: 150px; height: 150px; float: right;" title="" /></a></td>
<td class="deviceWidth" style="padding: 0px;">
<div class="signature-name" style="margin: 0px;font-size: 26px;font-weight: 600;color: #000;line-height: 1.00;text-align: left;margin-top: 5px;margin-bottom: 2px;"><span style="font-size:16px;">[[CurrentUser#FirstName]] [[CurrentUser#LastName]]</span></div>
<div class="signature-team" style="margin: 0px;font-size: 22px;font-weight: 300;color: #000;line-height: 1.00;text-align: left;margin-top: 0px;margin-bottom: 2px;">[[TeamName]]</div>
<div class="signature-company" style="margin: 0px;font-size: 22px;font-weight: 300;color: #000;line-height: 1.00;text-align: left;margin-top: 0px;margin-bottom: 2px;">[[CurrentUser#Company]]</div>
<div class="signature-phone" style="margin: 0px;font-size: 20px;font-weight: 300;color: #000;line-height: 1.00;text-align: left;margin-top: 0px;margin-bottom: 2px;">c: [[CurrentUser#CellPhone]]</div>
<div class="signature-phone" style="margin: 0px;font-size: 20px;font-weight: 300;color: #000;line-height: 1.00;text-align: left;margin-top: 0px;margin-bottom: 2px;">o: [[CurrentUser#WorkPhone]]</div>
<div class="signature-link" style="margin: 0px;font-size: 20px;font-weight: 300;color: #000;line-height: 1.00;text-decoration: none;text-decoration-color: dodgerblue;text-align: left;margin-top: 0px;margin-bottom: 2px;"><a class="signature-link" href="mailto:[[CurrentUser#EmailAddress]]" style="margin: 0px;font-size: 20px;font-weight: 300;color: #000;line-height: 1.00;text-decoration: none;text-decoration-color: dodgerblue;text-align: left;margin-top: 0px;margin-bottom: 2px;">[[CurrentUser#EmailAddress]]</a></div>
<div class="signature-link" style="margin: 0px;font-size: 20px;font-weight: 300;color: #000;line-height: 1.00;text-decoration: none;text-decoration-color: dodgerblue;text-align: left;margin-top: 0px;margin-bottom: 2px;"><a class="signature-link" href="[[CurrentUser#Website]]" style="margin: 0px;font-size: 20px;font-weight: 300;color: #000;line-height: 1.00;text-decoration: none;text-decoration-color: dodgerblue;text-align: left;margin-top: 0px;margin-bottom: 2px;">[[CurrentUser#Website]]</a></div>
</td>
</tr>
<!––Part of source code that houses the social media sprites, not sure if other code effects the display properties––>
<tr>
<td class="deviceWidth" colspan="2" style="padding-right: 10px; width: 100%; text-align: center;"><img border="0" height="32" src="https://s3.amazonaws.com/realvolve-public/template-photos/facebook.png" style="max-height: 32px;max-width: 32px" width="32" />
<img border="0" height="32" src="https://s3.amazonaws.com/realvolve-public/template-photos/youtube.png" style="max-height: 32px;max-width: 32px" width="32" />
<img border="0" height="32" src="https://s3.amazonaws.com/realvolve-public/template-photos/linkedin.png" style="max-height: 32px;max-width: 32px" width="100%" />
<a href="https://www.instagram.com/houses_and_bikes" target="_blank"><img border="0" height="32" src="https://s3.amazonaws.com/realvolve-public/template-photos/instagram.png" style="max-height: 32px;max-width: 32px" width="100%" />
</a> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
We want the social media icons to display correctly on portrait or landscape mode. See Image for visual of problem. Is there anything we can change in the code to get the desired result?
You need to put exact height and width instead of max-height and max-height in the social media image. I have modified your code here is the link https://jsfiddle.net/jhqdbeog/3/

Input fields becoming empty

I'm working on a function that inserts data to a database from a form, Whenever i use the masterpage and send the form to add a data, it breacks and stores nothing, the input fields seem to be empty.
but when i detach the masterpage, the functions works fine and data is stored eventually, i tried this with a new masterpage and the problem persists, i really don't know what is the problem.
Here is the MasterPage code :
<%# Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="backOffice_MasterPage" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<asp:ContentPlaceHolder runat="server" ID="title">
</asp:ContentPlaceHolder>
<meta http-equiv="Content-Type" content="text/html" name="viewport" charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!--Styles bootstrap-->
<link href="../styles/bootstrap/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />
<link href="../styles/bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="../styles/simple-sidebar.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!--Add a condition so that less than ie9 understands html5 tags such as header, article ...-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- jQuery -->
<script src="../scripts/jquery.1.11.3.js" type="text/javascript"></script>
<link rel="stylesheet" href="../styles/cyllene.css" type="text/css" />
<script type="text/javascript" src="../include/ctrlsaisie.js"></script>
<script type="text/javascript" src="../include/CBrowser.js"></script>
<script src="../include/CEditor.js" type="text/javascript"></script>
<script src="../include/CIconList.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Start Bootstrap
</a>
</li>
<li>
Dashboard
</li>
<li>
Liste des pays
</li>
<li>
Liste des villes
</li>
<li>
Liste des activités
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<asp:ContentPlaceHolder id="cphMain" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- Bootstrap Core JavaScript -->
<script src="../scripts/bootstrap/bootstrap.min.js" type="text/javascript"></script>
<asp:ContentPlaceHolder ID="script" runat="server">
</asp:ContentPlaceHolder>
</body>
And here is the page code :
<%# Page Language="VB" AutoEventWireup="false" MasterPageFile="~/backOffice/MasterPage.master" CodeFile="GestPays.aspx.vb" Inherits="GestPays" %>
<asp:Content ContentPlaceHolderID="cphMain" runat="server">
<form id="FrmMain" runat="server">
<div class="frmContent">
<afc:wccFilAriane ID="WccFilAriane1" runat="server">
<afc:woStep ID="WoStep1" runat="server" Text="Accueil" NavigateUrl="../FrmAccueilGestion.aspx"></afc:woStep>
<afc:woStep ID="WoStep3" runat="server" Text="Liste des pays" NavigateUrl="ListPays.aspx"></afc:woStep>
<afc:woStep ID="WoStep2" runat="server" Text="Modification d'un pays" NavigateUrl="#"></afc:woStep>
</afc:wccFilAriane>
<asp:HiddenField runat="server" ID="KEY" />
<asp:HiddenField runat="server" ID="C_PAGE" />
<fieldset>
<legend>
<asp:Label runat="server" ID="lblTitle" Text="Pays" /></legend>
<table width="70%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<asp:Label runat="server" ID="lblLib" Text="Désignation" />
:
</td>
<td>
<asp:HiddenField ID="ID_LIBELLE" runat="server" />
<afc:wccMaskEdit ID="SYS_ID_LIBELLE" runat="server" MaxLength="250" Width="320px" />
<afc:wccPopUpCaller ID="TRAD_ID_LIBELLE" runat="server" ImageUrl="../images/trad.gif" Visible="false"
Text="Traduire" WindowHeigth="120" WindowWidth="550" Title="Traduction" />
</td>
</tr>
</table>
</td>
<td style="height: 40px; vertical-align: top;">
<afc:wccButton runat="server" ID="btnValider" Text="Valider" Width="75px" />
<br />
<br />
<afc:wccButton runat="server" ID="btnAnnuler" Text="Retour" Width="75px" />
</td>
</tr>
</table>
</fieldset>
</div>
</form>
The code behind works fine when not using the masterpage so it's not necessarry i guess.
Thank you for your help.
The tags should be in the masterpage not the content page

i have a slide show code in HTML, but when using chrome or mozzila sometimes when refreshing the page all the images get stacked

i am trying to make a slidehsow using HTML+ CSS
but when using chrome or mozzila sometimes when refreshing the page all the images get stacked
works fine on IE.
enter code here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A.R.Grada</title>
<link data-turbolinks-track="true" href="/assets/custom.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/inscricaos.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/static_page.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/users.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/inscricaos.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/slideShow.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="b/G7IFct+anugyX+DeDZhI5xYSzmREjC2Y2uPXx7HHA=" name="csrf-token" />
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
</script>
<![endif]-->
</head>
<body>
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
Associação Recreativa de Grada
<nav>
<ul class="nav navbar-nav pull-right">
<li>Pagina inicial</li>
<li>Mapa</li>
<li>xxx</li>
</ul>
</nav>
</div>
</header>
<div class="container">
<div class="center jumbotron">
<div id="slideShowImages" class="slideshow">
<img alt="1" src="/assets/1.jpg" />
<img alt="2" src="/assets/2.jpg" />
<img alt="3" src="/assets/3.jpg" />
<img alt="4" src="/assets/4.jpg" />
<img alt="5" src="/assets/5.jpg" />
<img alt="6" src="/assets/6.jpg" />
</div>
<script src="slideShow.js"></script>
</h2>
|Inscrição |
| Lista incritos|
</div>
<div class="logo">
</h1>
<img alt="xxx_logo" src="/assets/logo.png" />
</div>
<footer class="footer">
<nav>
<ul>
<li>About</li>
<li>Contact</li>
<li>News</li>
</ul>
</nav>
</footer>
</div>
</body>
</html>
CSS code:
.slideshow
{
background-colour:#F5F5F5; border:1px solid #FFFFFF; height:340px; margin:150px auto 0; position:relative; width:640px; -moz-box-shadow:0 0 22px #111; -webkit-box-shadow:0 0 22px #111; box- shadow:0 0 22px #111;
}
The images become stacked on above anothe. to resolve the issue i must press CTRL F5.
i can not upload a imge so i try to explain with this:
it look like that:
image1
image2
image3
image4
it should look like that
image1
wait 1 sec
image2
...
Try to hide the images using CSS first. The page must not have been loaded fully for the script to run.