I'm trying to put a header on top of my pages. It works fine with IE 8. It moves slightly down and blocking my page content on the newest IE and apple safari. Can anyone show me what I need to put so that it is compatible for all search engines? I am PHP Including my header to all my pages. Below is my header code.
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
</head>
<body>
<div style="position: absolute; width: 1280px; height: 92px; z-index: 1; left: 1px; top: 0px" id="layer1">
<div style="position: absolute; width: 660px; height: 22px; z-index: 1; left: 238px; top: 52px" id="layer2">
<font face="Arial">|<b>
New Cost </b>| <b>
</b>|<b> <a href="http://www..net/carriers/newcarrier.php">New
Carrier</a></b> | <b>
</b>|<b> <a href="http://www..net/carriers/search.php">Carrier
Board</a></b> | </font></div>
<p>
<img border="0" src="/carriers/.png" margin= 0 auto width="100%" height="73"></div>
</body>
</html>
Assuming this is the header you're talking about...
<img border="0" src="/carriers/echoheader.png" margin= 0 auto width="100%" height="73">
...it should look something like this. I think you'll need to specify top and make its position absolute.
HTML:
<img class='header' />
CSS:
img.header {
position:absolute;
top:0;
...other styles...
}
Try to avoid "inline styling" - this is where you set the style of the element directly in the HTML.
It is good practice to split the style from the markup, since later, in a more complex page, you can find your way around more easily.
Related
I am trying to finish a project but I am stuck on the final step.
All I want to do is put some text on the side of an interactive google map. However so far no matter what I have tried the text stays underneath. Here is the HTML code:
<!--Reach out section begins-->
<section id="reach-out" class="contact">
<h2 class="section-title secondary-border">
<p>Reach Out</h2></p>
<div class="contact/info">
<iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d12182.
30520634488!2d-74.0652613!3d40.2407219!2m3!1f0!2f0!3f0!3m2!1i1024!
2i768!4f13.1!5e0!3m2!1sen!2sus!4v1561060983193!5m2!1sen!2sus"
>
</iframe>
</div>
<div>
<h3>Pump Buddy</h3>
<p>
Any questions or concerns before signing up? <br />
Let us know, and we will be happy to talk to you.
</p>
<address><!-- <address>: Defines the contact information
for the author or owner of the document or parent element.-->
55 Main Street<br />
Some Town, CA<br />
12345<br />
P: 555.PUMP.BUDZ (555.786.2839)<br />
E: info#pumpbuddy.io
<!-- Using the mailto: prefix in the anchor tag's href attribute
instructs the browser to open the default mail client application
upon clicking the link and then populates the address field with
the email address listed in the href value. -->
</address>
</div>
</section>
</body>
and this is the corresponding CSS:
/* REACH OUT STYLES START */
.contact {
text-align: center;
background: #024e76;
}
.contact h2 {
color: #fce138;
}
.contact-info iframe {
width: 400px;
height: 400px;
}
/* This is a potentially
dangerous choice due to possible side effects
(unless a global rule is needed). By using the
class (contact-info) as the CSS selector, also called a class
selector, we can safely target the <iframe> that
is a descendant or child of the element with this class.*/
.contact-info div {
width: 410px;
display: inline-block;
vertical-align: top;
text-align: left;
margin: 30px 0 0 60px;
color: white;
}
.contact-info h3 {
color: #fce138;
font-size: 32px;
}
.contact-info p, .contact-info address {
margin: 20px 0;
line-height: 1.5;
font-size: 20px;
font-style: normal;
}
.contact-info a {
color: #fce138;
}
/* REACH OUT STYLES END */
Any kind of help would be greatly appreciated!
Try this:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container mt-5">
<h2 class="text-center mb-5">Reach Out</h2>
<div class="row">
<div class="col">
<div class="text-right">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d12182.
30520634488!2d-74.0652613!3d40.2407219!2m3!1f0!2f0!3f0!3m2!1i1024!
2i768!4f13.1!5e0!3m2!1sen!2sus!4v1561060983193!5m2!1sen!2sus"
></iframe>
</div>
</div>
<div class="col">
<div class="">
<h3>Pump Buddy</h3>
<p>Any questions or concerns before signing up? <br> Let us know, and we will be happy to talk to you.</p>
<address>
55 Main Street<br>
Some Town, CA<br>
12345<br>
P: 555.PUMP.BUDZ (555.786.2839)<br>
E: info#pumpbuddy.io
</address>
</div>
</div>
</div>
</div>
</body>
</html>
Use z-index and set position property to absolute or fixed for the text you want to display over the map.
I want to open two URLs in different target frames by clicking on an map.
Below is required image of my page. The pages linked with map parts (1-9) are different. I have 18 external linkes for 9 map parts (1-9). So , I want to click on 1....9 map parts to open different pages. Note 1,2,3--- are not aligned and represents coordinates of map (strees/cities, etc).
By clicking on map-part(1).... it should open two pages simulateously
1-right frame, e.g., google, youtube, etc.
2-bottom frame, e.g.,google, youtube, etc.
The code should work for pc as well as mobile also. Here is my try code...
main.html
<html>
<frameset rows="50%,50%">
<frameset cols="50%,50%">
<frame src="inside.html" name="left">
<frame <p>Locked in a frame? Click here!</p> name="right">
<frame src="bottom.htm" name="bottom" >
</frameset>
</frameset>
</html>
I want to open, e.g., http://www.w3schools.com link in right frame, and another link, e.g. to Google, in the bottom frame:
inside.html
[![<html>
<head>
<title>CSS </title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
body {
height: 100%;
}
* {
box-sizing: border-box;
}
.image-wrap {
width: 750px;
height: 500px;
padding:2px;
background:url('pic.jpg');
}
.image-wrap a#S000 {
display:block;
text-indent:-10000px;
height:500px;
width:500px;
position:absolute;
left:5px;
top:50px;
}
</style>
</head>
<body>
<div class="image-wrap"> <p><big>overview</big></p>
<a id="S000" href="http://www.w3schools.com"target="_blank">S000</a>
</div>
</body>
</html>]
I know one can do it by using a script, but how can I do it in my code?
Here is a start for you
Do note that some web sites won't run in iframes for security reasons
Updated based on comment using an image map instead, click on the planets to load the iframes
var ais = document.querySelectorAll('.images area');
for (var i = 0; i < ais.length; i++) {
ais[i].addEventListener('click', function(e) {
document.querySelector('iframe[name="right"]').src = e.target.dataset.nr1;
document.querySelector('iframe[name="bottom"]').src = e.target.dataset.nr2;
})
}
html, body {
margin: 0;
}
.container {
display: flex;
flex-direction: column;
}
.row {
display: flex;
height: 50vh;
}
.left {
width: 40vw;
}
iframe[name="right"] {
width: 60vw;
height: 50vh;
box-sizing: border-box;
}
iframe[name="bottom"] {
height: 50vh;
box-sizing: border-box;
}
<div class="container">
<div class="row">
<div class="left">
<span><b>Overview</b></span>
<div class="images">
<img src="http://i.stack.imgur.com/HpWre.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="" href="#"
data-nr1="http://www.w3schools.com"
data-nr2="http://www.apple.com">
<area shape="circle" coords="90,58,3" alt="" href="#"
data-nr1="http://www.w3schools.com"
data-nr2="http://www.apple.com">
<area shape="circle" coords="124,58,8" alt="" href="#"
data-nr1="http://www.w3schools.com"
data-nr2="http://www.apple.com">
</map>
</div>
</div>
<iframe name="right" src=""></iframe>
</div>
<iframe name="bottom" src=""></iframe>
</div>
Below code works. You will have to remove the styles and use a stylesheet instead.
<iframe name="left_side" src="http//www.google.com" width="50%"
height="50%" frameBorder="0"></iframe>
<iframe name="right_side" src="http//www.google.com" width="50%"
height="50%" frameBorder="0"></iframe>
Good day.
I need help in options Google maps.
My site has block with Google maps. The map has options to display avatar user if he registered in Google+ (gmail). The avatar has circle form with diametr about 32px (how in the example: https://developers.google.com/maps/documentation/javascript/examples/map-coordinates?hl=ru).
I want that avatar has square form with size 60x60px and margin-right 70px.
How do it?
Thank you advance!
The code avatar on Google maps:
<iframe src="https://www.google.com/maps/api/js/widget?pb=!1m2!1u22!2s12a!2sru#WzEsMTUxXQ.."
frameborder="0" allowtransparency="true" scrolling="no"
style="border: 0px; overflow: hidden; position: absolute; right: 0px; visibility: visible; width: 37px; height: 37px;">
<html jstcache="0">
<head>
<link id="__2__" type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<style>div.login-control{color:white;font-family:Roboto,Arial;font-size:11px;font-weight:500}div.login{border-radius:2px;background-color:#5f84f2;padding:4px 8px 4px 8px;cursor:pointer}.login-control .tooltip-anchor{color:#5B5B5B;display:inline;font-family:Roboto,Arial;font-size:13px;font-weight:normal;-moz-user-select:text;-webkit-user-select:text;-ms-user-select:text;user-select:text;width:50%}.login-control .tooltip-content{background-color:white;font-weight:normal;right:0px}div.login a:link{text-decoration:none;color:inherit}div.login a:visited{color:inherit}div.login a:hover{text-decoration:underline}div.profile-photo{border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,0.2);width:32px;height:32px;overflow:hidden}div.profile-photo-light{background-color:white}div.profile-photo-light div{color:black}div.profile-photo-dark{background-color:black}div.profile-photo-dark:hover{background-color:white;color:black}div.profile-photo img{float:right;width:32px;height:32px}.tooltip-anchor{width:100%;position:relative;float:right;z-index:1}.tooltip-anchor>.tooltip-tip-inner{background-color:transparent;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid white;height:0;left:-8px;position:absolute;top:5px;width:0;z-index:1}.tooltip-content{border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,0.2);display:inline-block;line-height:100%;padding:10px 11px 9px 11px;position:absolute;margin:0;top:10px;white-space:nowrap}.tooltip-content a{color:#3a84df;text-decoration:none}.tooltip-content a:hover{text-decoration:underline}.tooltip-content .user-email,.tooltip-content .user-name{padding-right:12px}.sign-in-explanatory-text{margin-bottom:6px}.tooltip-content a{overflow:hidden}.g-logo{background-image:url(https://maps.gstatic.com/mapfiles/api-3/images/white_google_icon.png);background-size:14px 12px;display:inline-block;height:12px;padding-right:6px;vertical-align:middle;width:8px}.gm-china .g-logo{background-image:url(http://maps.gstatic.cn/mapfiles/api-3/images/white_google_icon.png)}#media (-webkit-min-device-pixel-ratio:1.2),(min-resolution:1.2dppx),(min-resolution:116dpi){.g-logo{background-image:url(https://maps.gstatic.com/mapfiles/api-3/images/white_google_icon_hdpi.png)}.gm-china .g-logo{background-image:url(http://maps.gstatic.cn/mapfiles/api-3/images/white_google_icon_hdpi.png)}}.sprite-sheet{background-image:url(https://maps.gstatic.com/mapfiles/api-3/images/signed_in_api_icons2.png);background-size:100px 50px}.gm-china .sprite-sheet{background-image:url(http://maps.gstatic.cn/mapfiles/embed/images/signed_in_api_icons2.png)}#media (-webkit-min-device-pixel-ratio:1.2),(min-resolution:1.2dppx),(min-resolution:116dpi){.sprite-sheet{background-image:url(https://maps.gstatic.com/mapfiles/api-3/images/signed_in_api_icons2_hdpi.png);background-size:100px 50px}.gm-china .sprite-sheet{background-image:url(http://maps.gstatic.cn/mapfiles/embed/images/signed_in_api_icons2_hdpi.png)}}</style>
</head>
<body jstcache="0" style="overflow: hidden;">
<script>
window.parent.frames['gm-master'].initWidget(window);
</script>
<div jstcache="0" style="position: absolute; top: 0px; right: 0px; width: 500px; height: 500px;">
<div jstcache="0" style="position: absolute; top: 0px; right: 4px;">
<div jstcache="69" class="login-control" jsaction="mouseenter:loginControl.resize;mouseleave:loginControl.resize;loginControl.resize">
<div jstcache="2" jsaction="loginControl.login" class="login" style="display: none">
<a jstcache="3"> <span class="g-logo"> </span><span>Войти</span></a>
</div>
<div jstcache="4" class="profile-photo-light profile-photo" jsan="7.profile-photo-light,7.profile-photo">
<img jstcache="5" src="https://lh5.googleusercontent.com/-R_xY89bx5Ss/AAAAAAAAAAI/AAAAAAAAABg/xx_czODJ35o/s32-c/photo.jpg">
</div>
<div class="tooltip-anchor">
<div class="tooltip-tip-inner"></div>
<div class="tooltip-content">
<div jstcache="6" class="sign-in-explanatory-text" style="display: none">Войдите в свой аккаунт, и Google Карты станут ещё удобнее</div>
<div>
<a jstcache="7" class="" style="display: none"></a>
<a target="_blank" jstcache="8" href="https://plus.google.com/113092786366482147078?socpid=238&socfid=maps_api_v3:logincontrol" class="user-name" jsan="7.user-name,8.href,0.target">+aleksandr</a>
<a target="blank_" jstcache="9" href="https://support.google.com/maps/?p=thirdpartymaps&hl=ru" jsaction="mouseup:loginControl.learnMore">Подробнее...</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
tag:
<img jstcache="5" src="https://lh5.googleusercontent.com/-R_xY89bx5Ss/AAAAAAAAAAI/AAAAAAAAABg/xx_czODJ35o/s32-c/photo.jpg">
It's currently not possible to customize the UI for the Signed In experience. I'd recommend opening a feature request on the Google Maps API Issue Tracker describing your use case so the team can start tracking interest in it.
I know this is 2 months old question and already chosen an answer, but if anyone else if looking for this. you can achieve the margin thing applying css directly to the iframe element.
This is the code i'm using
iframe[src^="https://www.google.com/maps/api/js/widget?"] {
margin-top: 50px;
margin-right: 52px;
}
How it looks
First of all, sorry for my english I'm still learning so I will try to explain myself as best as possible.
My question is, how can I fit the iframe height at 100%? I tried different solutions but anything works. This is my code:
HTML:
<div id="header_PA">
<div id="menu_PA">
<div id="logo_PA">
<img src="_images/1.png" title="Local PA" id="logo">
</div>
<div id="sections_PA">
...
</div>
<div id="user_box">
...
</div>
</div>
<div id="sub_menu_PA"> </div>
</div>
<iframe id="iframe_PA" src="_local_pa/dashboard.php" ></iframe>
<div class="smallFooter">
...
</div>
CSS:
#header_PA{
position: fixed;
width: 100%;
height: 70px;
z-index: 999;
}
#iframe_PA{
width: 100%;
height: 100%;
margin-top: 73px;
}
.smallFooter {
background: #121212;
}
I have skipped unnecessary parts of the HTML and CSS code.
The result of that, you can see it in this picture:
Screen Capture
Apparently the width property works but the height no. Anybody knows how can I solve it?
Thanks in advance!
Try this code to set the iframe width and height,
<iframe src="_local_pa/dashboard.php" width="100%" height="200"></iframe>
You need a little bit of javascript to adjust the height of the iframe element.
this works:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...nsitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>auto iframe height adjust</title>
<style>
</style>
<script type="text/javascript">
<!--//
function sizeFrame() {
var F = document.getElementById("myFrame");
if(F.contentDocument) {
F.height = F.contentDocument.documentElement.scrollHeight+30; //FF 3.0.11, Opera 9.63, and Chrome
} else {
F.height = F.contentWindow.document.body.scrollHeight+30; //IE6, IE7 and Chrome
}
}
window.onload=sizeFrame;
//-->
</script>
</head>
<body>
<iframe width="100%" id="myFrame" src="thispage.htm" scrolling="no" frameborder="0">
An iframe capable browser is
required to view this web site.
</iframe>
</body>
</html>
Original source: http://w3schools.invisionzone.com/index.php?s=59fbfe0376deb43204ffff5aaf04736f&showtopic=26417#entry145317
Basically I am trying to create an email template using HTML and Dreamweaver. It's my first template. The fact that I cannot use <div> tag for email templates is really giving me headache. I am having difficulty aligning the social icons with the "I am social text". They both are assigned with align="center" inside the td tag. The image that is displayed below is "footer" section of my email template.
Here's the screenshot:
I am only posting the code for footer section because my content and header section is working fine.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TrickyPhotoshop Newsletter</title>
<style type="text/css">
body {
font-family: Tahoma, Geneva, sans-serif;
font-size: 15px;
background: #CCC;
}
h4.copyright, p.copyright {
padding-left: 50px;
color: #FFF
}
h4.social {
padding-left: 50px;
color: #fff;
}
p.footer {
color: #FFF;
}
</style>
</head>
<body>
<table width="600" align="center" bgcolor="#999999">
<tr>
<td align="center"><h4 class="social">I am also social</h4></td>
</tr>
<tr>
<td align="center"><p class="footer">
<a href="http://www.facebook.com/trickyphotoshop">
<img src=
"images/Facebook-256.gif" width="25px" height="25px"/>
</a>
<a href="http://www.tricky-photoshop.com">
<img src="images/g+.gif" width="25px" height="25px" />
</a>
<a href="http://www.twitter.com/trickyphotoshop/">
<img src="images/twitter.gif" width="25px" height="25px" />
</a>
</p></td>
</tr>
<tr>
<td height="10"><h4 class="copyright">Copyright Area</h4></td>
</tr>
<tr>
<td height="10"><p class="copyright">
© All rights reserved
</p></td>
</tr>
</table>
</body>
</html>
Basically I want two things:
I want to properly align "I am also social" text with the three icons i.e. facebook, twitter, google+
As you can see there is a huge space between "Copyright Area" and "All Rights Reserved". I want to remove this space.
I know that my code is not too much professional but it's my first HTML code.
You should change the style as follows:
h4.social {
/* remove: padding-left: 50px; */
color: #fff;
}
h4.copyright, p.copyright {
padding-left: 50px;
margin: 0px; /* add this line */
color: #FFF;
}
I recommend using this chrome extension for "playing" with CSS changes