creating a basic HTML page, should show a logo as the banner, with a hyperlink on the bottom right of the logo.
Then an iframe as the page.
Storing the image and the iframe inside 2 seperate divs, then put that inside a div.
Problem is when I try to add the time, it loads it below the image, and the iframe sits ontop of that blocking it out. Have tried Z Index and messing about with divs...any ideas?
<!DOCTYPE html>
<head>
<title>Interactive Map - Meath Field Names Project</title>
<style>
*{margin:0;padding:0}
html, body
{
height:100%;
width:100%;
overflow:hidden;
background-color:#E0DEDF;
}
iframe
{
height:100%;
width:100%
}
.content
{
width: 100%;
height:90%
}
.logoheader
{
width: 100%;
height: 10%;
}
.fullPage
{
height:100%;
width: 100%;
}
.hlink
{
z-index: 1;
color:#ACD0D4;
font-size:26px;
font-family:verdana
}
</style>
</head>
<body>
<div class="fullPage">
<div class="logoheader">
<img src="images/banner.png" alt="IMAGES" width="100%" />
<a class="hlink" href="http://www.google.com/">Help Page</a>
</div>
<div class="content">
<iframe class="wrapper"//linktoIFrame</iframe>
</div>
</div>
</body>
</html>
The following two solutions seem to work:
Negative margin-top with float right on the link
Adding a wrapper with position relative and absolutely positioning the link;
a.hlink {
position: relative;
margin-top: -1.5em;
float: right;
z-index: 5;
}
#wrapper {
position; relative;
}
#wrapper .otherlink{
position: absolute;
bottom: 3px;
right: 3px;
}
<img src="images/banner.png" alt="IMAGES" width="100%" height="75" />
<a class="hlink" href="http://www.google.com/">Help Page</a>
<p>more content</p><hr/>
<div id="wrapper" style="position:relative">
<img src="images/banner.png" alt="IMAGES" width="100%" height="75" />
<a class="hlink" href="http://www.google.com/">Help Page</a>
</div>
Related
I am just learning HTML. Is there a way without using image mapping to split a background image into 50-50%, with each half linking to an external link? I put style=0% and 50% to split the links into the top 50% and bottom 50%, but it doesn't split the image in two.
This is what I have:
<!DOCTYPE html>
<html>
<head>
<title>Page 2</title>
<link href="https://fonts.googleapis.com/css?family=Proxima+Nova" rel="stylesheet">
</head>
<body>
<div class="image">
<center><img src="{% static 'picture.png' %}" alt="image" /></center>
</div>
</body>
</html>
Thanks in advance!
Just put the img as a background-image via css, then position the links on top of a container with that background-image:
.split-link-image {
height: 400px;
background: transparent url(http://placekitten.com/400/400) no-repeat 0 0;
background-size: cover;
width: 400px;
position: relative;
}
.split-link-image a {
position: absolute;
left: 0;
right: 0;
height: 50%;
display: block;
}
.split-link-image a:first-child {
top: 0;
}
.split-link-image a:last-child {
bottom: 0;
}
<div class="split-link-image">
</div>
This is a simple sample:
<div style="position: relative; width:500px; height:500px; background-color: #667799">
<a style="display: inline-block; position: absolute; top:0; left:0; height:50%; width:100%; box-sizing: border-box; border:solid 1px red" href="addr1"></a>
<a style="display: inline-block; position: absolute; top:50%; left:0; height:50%; width:100%; box-sizing: border-box; border:solid 1px orange" href="addr2"></a>
</div>
My wrapper is div and i use background-color for wrapper of links ;you must use background-image:url(imageAdress);
Also you don't need border of a tags.
I have created something that does what you are looking for. It has the following limitations:
You need to know the height of the image you are using in pixels and code the top half to be exactly half that many. When I use % instead, I wind up with the top link being bigger than the bottom. I didn't do much playing around to try and get around that.
The image actually is loaded twice, so if your images are very big, this may be a concern for you.
* {
margin: 0px;
padding: 0px;
}
.top {
height: 200px;
overflow: hidden;
position: absolute;
z-index: 2;
}
.bottom {
position: absolute;
}
<a class="top" href="https://www.google.com"><img src="https://placeholdit.co//i/400x400" /></a>
<a class="bottom" href="https://www.cnn.com"><img src="https://placeholdit.co//i/400x400" /></a>
I have a scrolling a gallery that looks like this, I need to add an option that on click on one of the pictures, the clicked picture will cover 100% height and width of the screen, and the scrollbar will still appear under the picture in order to move to the next or the previous pictures that also will be in size of 100% of the screen.
It should look like this.
This is the gallery that on the first example:
$('.imageWrapper img').click(function() {
$('.scrolls img').css({
'width': '100%',
'height': '100%'
});
$('.footerclass').css({
'display': 'none'
});
});
.wrapper {
margin: auto;
text-align: center;
position: absolute;
bottom: 0;
width: 100%;
}
.scrolls {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.scrolls img {
width: 275px;
cursor: pointer;
display:inline-block;
display:inline;
margin-right: -5px;
vertical-align:top;
}
.imageWrapper {
display: inline-block;
position: relative;
margin-bottom: 120px;
}
.imageWrapper img {
display: block;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="wrapper" id="column">
<div class="scrolls">
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<?php include 'footer.php';?>
</div>
</div>
</body>
I tried to add a JS that will change the size of all pictures to 100% height and width on click on one the picture. You could see that in the snippet.
My problem is how to display the specific picture that the user clicked on in 100% and still to have an option to scroll to previous or next pictures.
If you want to display the specific picture that the user clicked then I would suggest using $(this).css() selector instead of $(.scrolls img).css() to point more accurately to the image you're looking to render 100%.
so I have some HTML that looks like this:
<div id="container">
<svg id="chart1"></svg>
<div id='logo'>
<img id="logo" src="cubs_best.png";>
</div>
</div>
With corresponding CSS like,
svg {
/*display: block;*/
position: relative;
z-index: 1;
}
html, body, #container, svg {
margin: 0px;
padding: 0px;
height: 80%;
width: 100%;
}
#logo {
position: absolute;
z-index: 10;
top: 15px
left: 15px;
}
you would think that the div with the image would be placed on top, right? (there's no separate CSS styling for chart1)
But this is what it shows, and it won't budge.
Edit
#container {
position: relative;
}
didn't change anything sadly enough.
The whole code (minus Javascript underneth that makes the D3 graph/svg):
Have you tried following sequence to get logo to the top of the chart:
<div id="container">
<div id='logo'>
<img id="logo" src="cubs_best.png";>
</div>
<svg id="chart1"></svg>
</div>
Also, remove semicolon at the end of img holder <....src="cubs_best.png";>
I am making a webpage. Code can be found here:
https://jsfiddle.net/saTfR/43/
HTML:
<body>
<img id="map" src="http://www.local-guru.net/img/guru/worldglow.png"
alt="map">
</body>
<div id="sidebar">
<div class="logo">
<img id="logo" src="logo2.png" alt="Logo">
</div>
</html>
CSS:
* {font-family: Lucida Console; }
#sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 230px;
height: 100%;
background-color: #CD6A51;
}
</style>
I want to insert some text which will have a "pop out" effect on top of the map image. How would I be able to do that?
On top of your map image. I assume you want it in the "center" of your image even if you scroll to the right you still want it to stick there.
You can easily create this by using the fadeIn method (jquery)
Here is the code:
HTML:
<p class="text">asdfasdfaa</p>
<img id="map" src="http://www.local-guru.net/img/guru/worldglow.png" alt="map"/>
<p class="text">asdfasdfaa</p>
<div id="sidebar">
<div class="logo">
<img id="logo" src="logo2.png" alt="Logo">
</div>
CSS: (adjust css to your needs)
* {font-family: Lucida Console; }
#sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 230px;
height: 100%;
background-color: #CD6A51;
}
.text{
color:white;
z-index:999;
position:fixed;
left:60%;
font-size:25px;
}
JS
pop-up effect that you specified in the comment:
$(".text").hide().fadeIn(2000);
Here is also the code for your header text to disappear once you scroll down. When you scroll up it will reappear again.
var mywindow = $(window);
var pos = mywindow.scrollTop();
mywindow.scroll(function() {
if(mywindow.scrollTop() > pos)
{
$('.text').fadeOut();
}
else
{
$('.text').fadeIn();
}
pos = mywindow.scrollTop();
});
and here is the fiddle(updated) URL: https://jsfiddle.net/eugensunic/saTfR/48/
I need to insert a image to be zoom in and out but some website told me that it is suppose to be use with path="image url". The image didn't appear so i want to use background-image: url("image url"). So how do i put it in to allow image to show?
<style type="text/css">
#html{
height:100%;
}
#body{
height:100%;
margin:0px;
padding:0px;
}
#hr{
border:0;
width:50%;
}
</style>
<body>
<div id="outerDiv0">
<div id="outerDiv" style="position:relative;height:99%;width:100%;border:1px solid black;overflow:hidden;">
<div style="position: absolute; top: 10px; left: 10px; z-index: 1">
<img src="zoomin_off.gif"
onclick="ZoomIn()" alt="zoomin"/>
</div>
<div style="position: absolute; top: 10px; left: 90px; z-index: 1">
<img src="zoomout_off.gif"
onclick="ZoomOut()" alt="zoomout"/>
</div>
<div id="Nav" style="display:none;position: absolute; top: 70px; left: 20px; z-index: 1"><div><img src="prev.gif" alt="prev"/></div>
<div style="position: absolute; top: 0px; left: 79px;"><img src="next.gif" alt="next"/></div></div>
<div id="imageTiles" style="position:relative;top:0;left:0;z-index:0;width:100%;"></div>
<div id="imageLabels" style="position:relative;top:0;left:0;z-index:1;width:900000px;height:900000px;"></div>
</div>
<div id="overlay"><div id="theScale"></div><div id="theInfo">
</div>
<div id="Thumb0"><div id="Thumb"></div><div id="Thumb2"></div></div>
</div>
<div id="wheelMode">Mouse Wheel:<input type="radio" onclick="wheelMode1()" /> Zoom<input type="radio" onclick="wheelMode2()" /> Next/Prev</div>
<div id="coords" style="position:absolute;top:2px;right:10px;z-index:10;"></div>
</div>
Without any example code we can only guess. Maybe your div did not have any dimensions. Try adding width and height with css to your div:
<div style="width:300px;height:300px;background:url('http://webpage/path/to/image.jpg')"></div>
Can you try this,
CSS:
.Bg{
width:300px;
height:300px;
background-image:url('imagepath');
}
HTML:
<div class='Bg'></div>
Its hard to understand what exactly you want to do,however if you want to add background image to div you can do it as follows
<div class="show">
some text
</div>
in CSS
.show
{
background-image:url('paper.gif');
//other css properties of div
}
ref