I have an image in my div.Image is nothing looking like box.Now i want to insert bar chart(highchart library dynamic content) over the image.I mean inside that box image.How to do that?
What i have tried
<div class="" style="position:relative">
<div style="position:absolute; top:0; left:0">
<img class="" src="img/card1.png" alt="" style="width:400px;" />
</div>
<div style="position:absolute; top:250px;">
<img class="" src="img/card1.png" alt="" style="width:400px;" />
</div>
<div style="position:absolute; top:500px;">
<img class="" src="img/card1.png" alt="" style="width:400px;" />
</div>
</div>
here card1.png is box image.There are three cards,i need to insert 3 charts inside the 3 boxes individually.
Code you sent is really ugly and isn't using CSS the right way.
You want to separate CSS in another file and include it to your html with LINK tag. You want to use cascading style sheets, so you don't have to repeat same code so many times.
But if you want to stick to this type of code you can do it this way:
<div class="" style="position:relative; width: 400px; height: 750px;">
<div style="position:absolute; top:0; left:0; z-index: 1;">
<img class="" src="img/card1.png" alt="" style="width:400px;" />
</div>
<div style="position:absolute; top:0; left:0; z-index: 2;">
Your first chart goes here
</div>
<div style="position:absolute; top:250px; left:0; z-index: 1;">
<img class="" src="img/card1.png" alt="" style="width:400px;" />
</div>
<div style="position:absolute; top:250px; left:0; z-index: 2;">
Your second chart goes here
</div>
<div style="position:absolute; top:500px; left:0; z-index: 1;">
<img class="" src="img/card1.png" alt="" style="width:400px;" />
</div>
<div style="position:absolute; top:500px; left:0; z-index: 2;">
Your third chart goes here
</div>
</div>
Do something like this:
<div style="background-image: url(); background-size: ; background-repeat: no-repeat;">
<p>whatever you want to put inside</p>
</div>
I suggest making the div have a class and doing all the css code in a .css document
Related
Hi so I have a few pictures on a website that im creating (Please not im learning as I go along). I would like users to be able to click the image and view a full a pop up of the image, so like the original size of the actual image, I have added the code for the pictures below.
<section id="main">
<div class="inner">
<section>
<div class="box alt">
<div class="row 50% uniform">
<div class="4u"><span class="image fit"><img
src="images/marble/1.jpg" width="321" height="230" alt="" /><h3>Marble</h3>
</span></div>
<div class="4u"><span class="image fit"><img
src="images/marble/2.jpg" width="321" height="230" alt="" /><h3>Marble</h3>
</span></div>
<div class="4u"><span class="image fit"><img
src="images/marble/3.jpg" width="321" height="230" alt="" /><h3>Marble</h3>
</span></div>
</div>
</div>
</section>
</div>
</section>
Hover:
.image.fit >img:hover {
width: 1000px;
height: 1000px;
position: absolute;
}
The span elements should be completely removed and its classes placed on the image elements themselves.
Also, you have a nested section element that isn't doing anything for you.
Lastly, do not use HTML heading elements (<h1>...<h6>) because of the way they style the text. Formatting is the job of CSS. Instead of headings, it is more appropriate to surround each image and its accompanying text with figure and figcaption elements.
img {
width:200px;
border:1px solid black; /* This is only added for testing purposes*/
}
.thumbnail:hover {
width: 500px;
height:auto;
position:relative;
/* push image to the right by 1/2 the screen width and 1/2 the image width */
margin-left:calc(50% - 250px);
}
<section id="main">
<div class="inner">
<div class="box alt">
<div class="row 50% uniform">
<div class="4u">
<figure>
<img src="https://pbs.twimg.com/profile_images/562466745340817408/_nIu8KHX.jpeg" alt="" class="thumbnail">
<figcaption>Marble</figcaption>
</figure>
</div>
<div class="4u">
<figure>
<img src="http://www.critterbabies.com/wp-content/gallery/kittens/cats-animals-kittens-background-us.jpg" alt="" class="thumbnail">
<figcaption>Marble</figcaption>
</figure>
</div>
<div class="4u">
<figure>
<img src="http://www.warrenphotographic.co.uk/photography/bigs/08482-Fluffy-ginger-female-kitten.jpg" alt="" class="thumbnail">
<figcaption>Marble</figcaption>
</figure>
</div>
</div>
</div>
</div>
</section>
I've taken Scott Marcus' answer and adapted to click, which was your original request.
The main diffence is the addition of a tags targeting elements on the page and using :target in the css.
img {
width:200px;
border:1px solid black; /* This is only added for testing purposes*/
}
.thumbnail:target {
width: 500px;
height:auto;
position:relative;
/* push image to the right by 1/2 the screen width and 1/2 the image width */
margin-left:calc(50% - 250px);
}
<section id="main">
<div class="inner">
<div class="box alt">
<div class="row 50% uniform">
<div class="4u">
<figure>
<a href="#image1">
<img src="https://pbs.twimg.com/profile_images/562466745340817408/_nIu8KHX.jpeg" alt="" class="thumbnail" id="image1">
</a>
<figcaption>Marble</figcaption>
</figure>
</div>
<div class="4u">
<figure>
<a href="#image2">
<img src="http://www.critterbabies.com/wp-content/gallery/kittens/cats-animals-kittens-background-us.jpg" alt="" class="thumbnail" id="image2">
</a>
<figcaption>Marble</figcaption>
</figure>
</div>
<div class="4u">
<figure>
<a href="#image3">
<img src="http://www.warrenphotographic.co.uk/photography/bigs/08482-Fluffy-ginger-female-kitten.jpg" alt="" class="thumbnail" id="image3">
</a>
<figcaption>Marble</figcaption>
</figure>
</div>
</div>
</div>
</div>
</section>
is it possible to combine a canvas and a div i have tried to work them together but i cant get it to work
here is my Div
<div href="#" class="item" data-bind="draggable:true,droppable:true">
<span data-bind="click:$parent.remove">[x]</span><br/><br/>
<center><span class="text" data-bind="text:$data"></span><input class="edit_text"/></center>
</div>
this is canvas
<canvas id=demo width=400 height=300></canvas>
here is the complete code it is not mine please view How to make rooftext effect and valley text effect in HTML5 (or Fabric.js)
You can place both in a container and use absolute positioning, as so:
<div id="container">
<canvas id=demo width=400 height=300></canvas>
<div href="#" class="item" data-bind="draggable:true,droppable:true">
<span data-bind="click:$parent.remove">[x]</span><br/><br/>
<center><span class="text" data-bind="text:$data"></span><input class="edit_text"/></center>
</div>
</div>
and then in the style sheet:
#container {
position: relative;
}
#demo, div[href="#"] {
position: absolute;
top: 0px;
left: 0px;
}
I'm currently trying to find the best way to add a drop-down menu that appears upon hover over my navigation bar. A few things to note:
1) I designed my own navigational header in Photoshop and spliced the images. My entire header will consist of nothing but .jpegs and I need to find a way to add a drop down menu when I hover over one of my "buttons" or "images".
2) This will be used for a business so it needs to be compatible with all browsers to a reasonable version date. I.E. included.
Please see my code below:
<html>
<head>
<title>DropDown Design2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Styles (DropDown Design2.psd) -->
<style type="text/css">
<!--
#Table_01 {
position:absolute;
left:0px;
top:0px;
width:864px;
height:216px;
}
#DropDown-Design2-01 {
position:absolute;
left:0px;
top:0px;
width:139px;
height:50px;
}
#DropDown-Design2-02 {
position:absolute;
left:139px;
top:0px;
width:131px;
height:50px;
}
-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<!-- ImageReady Slices (DropDown Design2.psd) -->
<div id="Table_01">
<div id="DropDown-Design2-01">
<img src="images/DropDown-Design2_01.jpg" width="139" height="50" alt="">
</div>
<div id="DropDown-Design2-02">
<img src="images/DropDown-Design2_02.jpg" width="131" height="50" alt=""
</div>
<div id="DropDown-Design2-03">
<img src="images/DropDown-Design2_03.jpg" width="22" height="50" alt="">
</div>
<div id="DropDown-Design2-04">
<img src="images/DropDown-Design2_04.jpg" width="133" height="50" alt="">
</div>
<div id="DropDown-Design2-05">
<img src="images/DropDown-Design2_05.jpg" width="20" height="50" alt="">
</div>
<div id="DropDown-Design2-06">
<img src="images/DropDown-Design2_06.jpg" width="134" height="50" alt="">
</div>
<div id="DropDown-Design2-07">
<img src="images/DropDown-Design2_07.jpg" width="18" height="50" alt="">
</div>
<div id="DropDown-Design2-08">
<img src="images/DropDown-Design2_08.jpg" width="1" height="50" alt="">
</div>
<div id="DropDown-Design2-09">
<img src="images/DropDown-Design2_09.jpg" width="132" height="50" alt="">
</div>
<div id="DropDown-Design2-10">
<img src="images/DropDown-Design2_10.jpg" width="134" height="50" alt="">
</div>
<div id="DropDown-Design2-11">
<img src="images/DropDown-Design2_11.jpg" width="347" height="166" alt="">
</div>
<div id="DropDown-Design2-12">
<img src="images/DropDown-Design2_12.jpg" width="103" height="142" alt="">
</div>
<div id="DropDown-Design2-13">
<img src="images/DropDown-Design2_13.jpg" width="223" height="166" alt="">
</div>
<div id="DropDown-Design2-14">
<img src="images/DropDown-Design2_14.jpg" width="191" height="166" alt="">
</div>
<div id="DropDown-Design2-15">
<img src="images/DropDown-Design2_15.jpg" width="103" height="24" alt="">
</div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>
I understand not much coding has been done in terms of the drop down but currently these images are all set up to form a header with a navigation bar at the very top. At the very least I would greatly appreciate it if someone could link me to a tutorial consisting of what I'm trying to accomplish.
Thank you!
The webpage: http://www.honlapkell.hu/room/fooldal/
The problem: the problem I want to solve is: when I clicked all of the 7 menu pictures upstairs, I would like to change the background elements' class, because in the CSS the new class's property redefines the color of the class elements (from grayscale to normal)
The html:
<div style="position:relative;">
<div class="aszoba" style="background-size: contain; position: relative; background-image: url(http://www.honlapkell.hu/room/wp-content/uploads/2015/01/hatterr.jpg); box-shadow: 0px 40px 40px #323131;"><img src="http://www.honlapkell.hu/room/wp-content/uploads/2015/01/3d-view-blue-minimalistic-wall-szines1.png" alt="3d-view-blue-minimalistic-wall-szines" width="1920" height="1197" class="alignnone butorok size-full wp-image-377" />
<div class="element" style="position: absolute; top: 41%; left: 75.5%;">
<div class="title" style="margin-bottom:14px; width:240px;">The Room in the Media</div>
<img class="nagyul teve" onclick="className='leesikk';i=i+1;" style="height:125px; margin-left:40px;" src="http://www.honlapkell.hu/room/wp-content/uploads/2015/01/tev.png" alt="tev" class="alignnone size-full wp-image-65" />
</div>
<div class="element" style="position: absolute; top: 41%;">
<div class="title" style="width:150px; margin-bottom:-0px;">Guestbook</div>
<img class="nagyul" onclick="className='leesikk'" style="width:80px; margin-left: 32px; height: 65px;" src="http://www.honlapkell.hu/room/wp-content/uploads/2015/01/visitor.png" alt="pen" class="alignnone size-full wp-image-76" />
</div>
<div class="element" style="position: absolute; top: 21%;">
<div class="title" style="width:100px; margin-left:10px;">Contact</div>
<img onclick="className='leesikk'" class="nagyul" style="height:70px;" src="http://www.honlapkell.hu/room/wp-content/uploads/2015/01/redphone.png" alt="pen" class="alignnone size-full wp-image-76" />
</div>
<div class="element" style="position: absolute; top: 1%;">
<div class="title" style="width:75px; margin-left:30px; margin-bottom:10px;">Gallery</div>
<img class="nagyul" onclick="className='leesikk'" style="height:110px;" src="http://www.honlapkell.hu/room/wp-content/uploads/2015/01/tumblr_lv3yt6QIMz1ql6a52o1_1280.png" alt="pen" class="alignnone size-full wp-image-76" />
</div>
<div class="element" style="position: absolute; top: 61%;">
<div class="title" style="width:75px; margin-left:30px; margin-bottom:10px;">FAQ</div>
<img class="nagyul" onclick="className='leesikk'" style="height:78px;" src="http://www.honlapkell.hu/room/wp-content/uploads/2015/01/faq.png" alt="pen" class="alignnone size-full wp-image-76" />
</div>
<div class="element" style="position: absolute; top: 81%;">
<div class="title" style="width:75px; margin-left:10px; margin-bottom:10px;">Booking</div>
<img class="nagyul" onclick="className='leesikk'" style="height:130px;" src="http://www.honlapkell.hu/room/wp-content/uploads/2015/01/calendar2.jpg" alt="pen" class="alignnone size-full wp-image-76" />
</div>
<div class="element" style="position: absolute; top: 101%;">
<div class="title" style="width:170px; margin-left:45px; margin-bottom:20px;">Our Rooms</div>
<img class="ajto" onclick="className='leesikk'" style="width:203px;" src="http://www.honlapkell.hu/room/wp-content/uploads/2015/01/Door-Skin-HD-8008-.jpg" alt="pen" class="alignnone size-full wp-image-76" /></div>
</div>
the javascript:
<script>
function myfunction()
{
var x = element.onclick(); var y=0;
if (x&&element.className==='leesikk') {y=y+1};
console.log(x);
if (y===7) {aszoba.className=leesikk}
}
</script>
Have a look at the following article. Particularly, the "removeClass" and "addClass" jQuery functions.
jQuery - Get and Set CSS Classes
Why not use something like this to change the class of the elements on click.
$('.element-you-click-here').on('click', function(){
$('#change-this').removeClass('current');
$(this).addClass('this-is-class-to-add');
});
JSfiddle
Note: This is jQuery and you will need the jQuery library for this.
This is the code to my carousel (image slider). I would like to know how to reposition the whole slider on my webpage. I basically want to move it a bit to the left as a whole. The website if link to this slider is http://www.menucool.com/javascript-image-slider and i also made a jsfiddle here http://jsfiddle.net/lasquish/cynar4ug/. Website code fiddle http://jsfiddle.net/lasquish/Low0emf1/
-Thanks for the help!
<div class="div1">
</div>
<div id="sliderFrame">
<div id="slider" style="text-align: center;">
<a href="file:///C:/Users/alex/Desktop/rootforsite/index.html" target="_blank">
<img src="images/firsttest.jpg" alt="Welcome to IGameX.com" />
</a>
<img src="images/image-slider-1.jpg" />
<img src="images/image-slider-3.jpg" alt="Trade your way to victory!" />
<img src="images/image-slider-4.jpg" alt="#htmlcaption" />
<img src="images/image-slider-5.jpg" />
</div>
<div id="htmlcaption" style="display: none;">
Click me: To start selling and trading!.
</div>
</div>
your fiddle isn't loading for me, but based in this code it would be like this:
#sliderFrame {
position: relative;
width: 960px;
margin: 0px auto;
left: -30px;
}
where -30px is the amount of pixels to the left you want to move the slider. An even better option would be to add the slider inside a container like
<div class="slide_contain">
<div id="sliderFrame">
<div id="slider" style="text-align: center;">
<a href="file:///C:/Users/alex/Desktop/rootforsite/index.html" target="_blank">
<img src="images/firsttest.jpg" alt="Welcome to IGameX.com" />
</a>
<img src="images/image-slider-1.jpg" />
<img src="images/image-slider-3.jpg" alt="Trade your way to victory!" />
<img src="images/image-slider-4.jpg" alt="#htmlcaption" />
<img src="images/image-slider-5.jpg" />
</div>
<div id="htmlcaption" style="display: none;">
Click me: To start selling and trading!.
</div>
</div>
</div>
Now in your CSS, you add this:
.slide_contain {
position:relative;
width:960px;
height:auto;
min-height:300px
}
#sliderFrame {
position: absolute;
width: 960px;
margin: 0px auto;
left: -30px;
}
This method will allow you to have better control and avoid problems when moving the sliderFrame div