Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I'm actually coding a web page in HTML5/CSS3/JS. It's composed with images that are clickable with different effects (modals, hover, etc ..). I'd like to positions elements with precision in a container (in order to make the composition easyly usable) and not directly in the page. An arrow have to be centered in the box and different buttons have to be placed in different areas. (cf. image)
What is the best way to do that ? With relative or absolute positionning ? Will it be absolute comparatively to the container ?
How to make the content of the container responsive (in order to keep the proportions of the composition). Can I use Boostrap containers for that ?
This is a screenshot of what i what to do (an image for buttons and an image for the arrow) :
Thanks a lot for your help :)
Expanding on my comment here's one way you could do it(with the first two dots positioned):
.container {
position:relative;
}
img.point {
position:absolute;
}
img.point.one {
bottom:103px;
left:57px;
}
img.point.two {
bottom:21px;
left:57px;
}
<div class="container">
<!-- <img class="final" src="https://s31.postimg.org/70gvh473f/final.jpg" /> -->
<img src="https://s31.postimg.org/g5p8azai3/arrow.jpg" />
<img class="point one" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" />
<img class="point two" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" />
<img class="point three" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" />
<img class="point four" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" />
<img class="point five" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" />
<img class="point six" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" />
<img class="point seven" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" />
<img class="point eight" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" />
<img class="point nine" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" />
<img class="point ten" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" />
<img class="point eleven" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" />
<img class="point twelve" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" />
</div>
As far as responsiveness goes, you would just have to change the size of the dot images as well as the bottom/left values at each breakpoint. The easiest way to position the dots is to have the final image positioned within the container and then using the inspector to position the dots over the final image.
<span style="position:absolute;left:-50;top:-5;font-size:1px;width:250;height:10px;"> your code </span>
position: Absolute should be used more often. It is actually kind of counter intuitive of absolute and relative if you look up on CSS
position: Absolute helps you define the precise position related to the previous element, which is what you will be using for arrangement of lots elements .
Use variables instead of fix numbers to keep the elements spacing in a constant ratio.
Related
So I have a series of images in my image slider from Fotorama. My problem is that
there is a very slight delay when transitioning between different slides for the first time, I imagine because my images are all quite large. Is there any way to easily fix this through javascript or html/css? I read their documentation regarding 'lazy loading' but I'm not sure if that is really applicable for what I want to do. Any advice would be appreciated.
<div class="fotorama"
data-margin="0"
data-transition="slide"
transition-duration="0ms"
data-keyboard="true"
data-swipe="true"
data-click="false"
data-width="100%"
data-height="95%"
data-ratio="3/2">
<img src="images/bgardenflower2.jpg">
<img src="images/yellowflower.jpg">
<img src="images/lushflower.jpg">
<img src="images/flowerbee.jpg">
<img src="images/fly.jpg">
<img src="images/bgardenflower1.jpg">
<img src="images/toad.jpg">
<img src="images/algae.jpg">
<img src="images/lushscape1.jpg">
<img src="images/westvirginia1.jpg">
<img src="images/westvirginia2.jpg">
<img src="images/duskbridge.jpg">
<img src="images/lighthouse.jpg">
</div>
Using photoshop you can save images in webformat, so the images size will be reduced and load quickly...
I am working on website (HTML+PHP).Here is Fiddle of what I have done so far(sharing one for example).
Each image should point to different URLs.
There are few images whose color matches the font color.I want to change font size/color as image changes. Also URL should also change automatically as image changes.
HTML:
<div class="grid">
<figure class="effect-lexi effect-chocolate">
<div id="cf3" class="shadow">
<img src="http://tympanus.net/Development/HoverEffectIdeas/img/22.jpg" alt="Image" class="bottom" />
<img src="http://tympanus.net/Development/HoverEffectIdeas/img/21.jpg" alt="Image" class="top" />
</div>
<figcaption>
<h2>Dark <span>Chocolate Smoothie</span></h2>
<p>Description</p> View more
</figcaption>
</figure>
</div>
Is it possible ? Can anyone help me with it.?
Thanks,
Using CSS3, you might be able to wield the blend mode to accomplish this.
https://css-tricks.com/basics-css-blend-modes/
Also, you would need to use the JavaScript History to change the URL.
https://developer.mozilla.org/en-US/docs/Web/API/History
Probably the simplest solution is to set the font color as an rgba. For example
color:rgba(0,0,0,.5);
As long as the images aren't black, this will adapt nicely to the color of the background. If you don't have any info from the back end, something along these lines is will probably be the way to go.
I made a menu with images.
I have 2 divs with 3 images inside each so i make it to look like a menu. When I click the above image the image under it changes to highlight the above.
The JavaScript works but if I click the images many times some times its not working properly.
So how can I be certain that JavaScript wont lag? I cant figure out if its coding problem or placement or anything else...
By not working Properly i mean that if i click the images a lot of times some times the image that should change to highlight the top image arent changing i dont know if its my computer or not..
Here is Code http://codepen.io/DarkLord22/pen/Ghwbj
<div class="Menu1">
<div id="Menu1_1">
<img src="images/menu1/Landing_Campaign_Smartwatch_menu1_1.jpg" width="395" height="300" onclick="changeImage1() , removeImage1()"></div>
<div id="Menu1_1">
<img src="images/menu1/Landing_Campaign_Smartwatch_menu1_2.jpg" width="395" height="300" onclick="changeImage2(), removeImage2()">
</div>
<div id="Menu1_1">
<img src="images/menu1/Landing_Campaign_Smartwatch_menu1_3.jpg" width="395" height="300" onclick="changeImage3(), removeImage3()">
<div id="Menubluebuttondiv">
<div id="Menubluebutton">
<img src="images/Landing_Campaign_Smartwatch_blue_arrow.jpg" width="395" height="42" id="toChange1"></div>
<div id="Menubluebutton">
<img src="images/Landing_Campaign_Smartwatch_Bluearrow2.jpg" width="395" height="42" id="toChange2">
</div>
<div id="Menubluebutton">
<img src="images/Landing_Campaign_Smartwatch_Bluearrow2.jpg" width="395" height="42" id="toChange3">
</div>
</div>
Can I call mutiple tracking pixels with an image pixel?
My main tracking pixel would be -->
<img src="http://domain.com/pixel/123" alt="" style="height:1px;width:1px;border:0 none" />
However, if I do mod_rewrite, could I also call the other pixels in the phph file?
Basically, I can place only one tracking pixel, but would need to call all the pixels from below.
<img src="http://domain.com/pixel/123" alt="" style="height:1px;width:1px;border:0 none" />
<img src="http://domain1.com/pixel/232" alt="" style="height:1px;width:1px;border:0 none" />
<img src="http://domain2.com/pixel/745" alt="" style="height:1px;width:1px;border:0 none" />
<img src="http://domain3.com/pixel/478" alt="" style="height:1px;width:1px;border:0 none" />
<img src="http://domain4.com/pixel/894" alt="" style="height:1px;width:1px;border:0 none" />
Also, for the task, I can' use server to server tracking or iframe tracking. So I would need a way to load the pixels from above in one file.
You're loading 5 different resources (tracking pixels) from 5 different domains, so you need the client to do the 5 requests: no server-side stuff will work (server will only have HTTP headers for "domain.com", and no for "domain*.com").
You may use CSS with 5 background image layers:
external, loaded through <link rel="stylesheet" type="text/css" href="..."/>
internal with <style>...</style>
inside a style attribute)
Example with style attribute:
<div style="background-image: url('http://domain.com/pixel/123'), url('http://domain1.com/pixel/232'), url('http://domain2.com/pixel/745'), url('http://domain3.com/pixel/478'), url('http://domain4.com/pixel/894');">&#xnbsp;</div>
If CSS is not enabled, tracking won't work.
You can put the style attribute on an existing element.
There is no other way apart (edit in case I've forget some):
Multiple <img.../> tags
CSS background-image: url()...;
Multiple <iframe...></iframe>
Multiple <link.../> (then "tracking pixels" become "tracking CSS/external resource")
Javascript loading (XMLHttpRequest or others ways to load resources)
how to prevent image wrap in responsive mode. A simple code like below is break to new line in responsive mode.
<img src="image1.jpg" style="float:left;" />
<img src="image2.jpg" style="float:left;" />
<img src="image3.jpg" style="float:left;" />
<img src="image4.jpg" style="float:left;" />
<img src="image5.jpg" style="float:left;" />
please help
Edit:
see this jsbin: http://jsbin.com/AhIwiCA/1/edit
If you want to prevent the images from wrapping, then add a white-space: nowrap; to the parent element and remove the style="float:left; from the images.
http://jsfiddle.net/myajouri/gqxxC/
Bootstrap has a class called inline I believe which may bring the images in line with each other, failing that you may need to trawl through the css to find the relevant css class to prevent this behaviour.