Fairly new to this. At the moment I have an image and a button in one of the containers in my front page. I'm trying to embed that button into that image. Should I
make part of that image clickable, and let that trigger a function?
or force that button to float on certain position of that picture?
Or is there another way that I should follow? and how do I implement this? Many thanks!
<div class="col-md-10 col-lg-offset-1 text-center">
<img src="../img/background.png" class="rounded" alt="">
<button type="button" id="s" class="btn" >Make payment</button> //I'm trying to have this button float on that image above
</div>
You can use position: absolute to make it float on the image. look at this
https://jsfiddle.net/5ueau24b/1/
#s
{
position: absolute;
margin-left: -200px;
margin-top: 130px;
}
<div class="col-md-10 col-lg-offset-1 text-center">
<img src="http://www.planwallpaper.com/static/images/images_1_05GM1zY.jpg" class="rounded" alt="">
<button type="button" id="s" class="btn" >Make payment</button> //I'm trying to have this button float on that image above
</div>
Try using imagemap of html. (map tag in specific)
Related
I have a Google Map within a responsive div so that the map changes size depending on screen size, which is working perfectly. I also have a button above the map. I need this button to always be the same width of the map, is this possible?
My column:
<div class="col-lg-6">
<br />
<p>
<button style="width:60vh" formtarget="_blank"
onclick="window.open('https://www.google.com/maps/search/?api=1&query=#Model.OfficialSchoolName+#Model.Address1+#Model.County+#Model.Eircode')"
type="button" class="btn btn-primary">
<span class="glyphicon glyphicon-road" aria-hidden="true"></span>
Get Directions
</button>
</p>
<div class="embed-responsive embed-responsive-16by9">
<div id="map" class="embed-responsive-item"
style="border: 1px solid black;"></div>
</div>
</div>
How it looks currently at full screen size (perfect):
How it looks currently at small screen size (button is too large):
At first: Please don't use a button when its purpose is the same as an link / anchor. So please use an <a href="…"> element and style it like a button.
The solution for your problem is to use relative sizes that doesn't depend on the screen size. You can use the following solution:
<p>
<a style="width:100%" href="https://www.google.com/maps/search/?api=1&query=#Model.OfficialSchoolName+#Model.Address1+#Model.County+#Model.Eircode"
class="btn btn-primary">
<span class="glyphicon glyphicon-road" aria-hidden="true"></span>
Get Directions
</a>
</p>
It's hard to replicate without having your google maps api key, however i would try and put the map and the button in the same div container and give the width of the button and map div the same percentage
<div class="container">
<div class="button">
<!-- button here -->
</div>
<div class="map">
<!-- map here -->
</div>
</div>
.button {
width: 100%;
}
.map {
width: 100%;
}
You will just then need to set the property of your button and map to 100% width as they will both be in their own containers
working example can be found here https://codesandbox.io/s/awesome-dust-7hkpz
I am using bootstrap for the following mark-up and adding in my own classes of css where needed to style the pages how they are required
.sm-margin {
margin-top: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col">
<div class="thumbnail">
<a href="menu.php">
<img src="img/turkey.jpg" alt="Turkey dinners" style="width:100%">
<div class="caption text-center sm-margin">
<p><button type="button" class="btn btn-success">Check out our menu</button></p>
</div>
</a>
</div>
</div>
I am unclear to why the .sm-margin doesn't add the small margin at the top - see it in effect on my website here
The margin is added to the top of your button in the website
U can inspect and un check the checkbox of your class to see the difference if u use that css class or not...
My code was correct, it was a browser error. I cleared my cache on the Chrome browser and it corrected it.
Thanks all for input.
The overview: I'm using Bootstrap 3 as my CSS Framework, thus the content is organized using its container/grid system. The background animation consists of blue/green diagonal strips that basically zig zag with each other. The animated background sequence is using two images that are repeated vertically. Currently the animation background images are in their own container/divs. Essentially I'm trying to fit a number of containers with the content above the background container.
My goal is to have the animated background responsive to device size but also able to have content anchored to specific places on the page background/animation. Eventually I would like to have additional events triggered according to the mouse's y-axis position.
Originally I thought I could have the background in its own container then have the containers/div's that contained the content set to a higher z-index so it would be positioned above the background animation. As you can see from looking at the jsfiddle I can't get the contents containers to be positioned above the background animation. It gets pushed to the bottom of the page.
I'm wondering if I need to make the background in its own non bootstrap div while only the contents use bootstrap? I could use width: 100% and height: 100% but then I I'm not sure if I would be able to anchor/fix certain content to specific points in the page.
I'm open to any and all suggestions. Simply put I want to have the contents position correctly over the animated background while also allowing the page to be responsive to device size.
<body>
<div class="container">
<div class="bluestrip">
<img src="http://i59.tinypic.com/rt0txj.jpg" />
</div>
<div class="greenstrip">
<img src="http://i57.tinypic.com/auv6fb.jpg" />
</div>
<div class="bluestrip extra">
<img src="http://i59.tinypic.com/rt0txj.jpg" />
</div>
<div class="greenstrip">
<img src="http://i57.tinypic.com/auv6fb.jpg" />
</div>
<div class="bluestrip extra">
<img src="http://i59.tinypic.com/rt0txj.jpg" />
</div>
<div class="greenstrip">
<img src="http://i57.tinypic.com/auv6fb.jpg" />
</div>
</div>
<div class='container zindex'>
<div class="row">
<div class='col-md-2'>
<img src="http://s26.postimg.org/8jazgghop/largest_iphone_3_of_3_14.gif">
</div>
<div class='col-md-2'>
<img src="http://s26.postimg.org/c46uzom89/medium_iphone_2_of_3_14.gif">
</div>
<div class='col-md-2'>
<img src="http://s26.postimg.org/c46uzom89/medium_iphone_2_of_3_14.gif">
</div>
</div>
</div>
</body>
http://jsfiddle.net/bismarck611/jt2k4o6z/
I was able to solve the problem with a few code changes. Never figured out if it was possible to have two containers stacked over each other with different z-index's.
<body>
<div class="background-content">
<div class="bluestrip">
<img src="http://i59.tinypic.com/rt0txj.jpg" />
</div>
<div class="greenstrip">
<img src="http://i57.tinypic.com/auv6fb.jpg" />
</div>
<div class="bluestrip extra">
<img src="http://i59.tinypic.com/rt0txj.jpg" />
</div>
<div class="greenstrip">
<img src="http://i57.tinypic.com/auv6fb.jpg" />
</div>
<div class="bluestrip extra">
<img src="http://i59.tinypic.com/rt0txj.jpg" />
</div>
<div class="greenstrip">
<img src="http://i57.tinypic.com/auv6fb.jpg" />
</div>
</div>
<div class='container zindex'>
<div class="row">
<div class='col-md-2'>
<img src="http://s26.postimg.org/8jazgghop/largest_iphone_3_of_3_14.gif">
</div>
<div class='col-md-2'>
<img src="http://s26.postimg.org/c46uzom89/medium_iphone_2_of_3_14.gif">
</div>
<div class='col-md-2'>
<img src="http://s26.postimg.org/c46uzom89/medium_iphone_2_of_3_14.gif">
</div>
</div>
</div>
</body>
The div that is holding the img's I changed the css class to the following:
.background-content {
position: absolute;
z-index: -1;
min-width: 100%;
min-height: 100%;
}
This allowed for the images to resize themselves according to screen size and fit below the page contents. Now I'm still able to use the bootstrap framework over my css animated background.
I've copied code from another page in my site that launches a video in a pop up window, but for some reason the code does not bring up the video on the new page.
However, I've taken the exact same code (except I cannot apply it to a DIV this time) and applied it to the P element, but it does not launch the video.
Here's my code:
<p onclick="javascript:launchActivity('C191D24F-9B1A-FB59-C4EE7E3257C019F4','video')" style="cursor:pointer;"><img class="top" src="/resource/uploads/left-navs/blue-camera.png" />
some text</p>
and I've taken it from the WORKING code:
<div onclick="javascript:launchActivity('C191D24F-9B1A-FB59-C4EE7E3257C019F4','video')" style="cursor:pointer;display:inline-block; margin-top:10px;">
<i>vid text launch<img border="0" src="/resource/uploads/PrebuildSNLO/text_arrow.png" style="padding-left: 3px;" /></div>
Thanks for taking a look.
The launchActivity function is using jQuery to search for an element on the page, which doesn't exist. There is an element on the old page with this id
C191D24F-9B1A-FB59-C4EE7E3257C019F4
I assume this is the video, so it will need copying to the new page.
<div class="videoPlayer" id="C191D24F-9B1A-FB59-C4EE7E3257C019F4" title="SN1 Common Core" video="http://d1by67ljd45m4v.cloudfront.net/media/C1920522-F3C9-DB50-3F3D3CC1CACC01B7.mov" videoendredirect="">
<div class="ui-dialog-content ui-widget-content">
<div style="background-color:white;">
<strong>Problem loading video..</strong></div>
</div>
</div>
I'm guessing you didn't copy this into your new page, from the original page:
<div videoendredirect="" video="http://d1by67ljd45m4v.cloudfront.net/media/C1920522-F3C9-DB50-3F3D3CC1CACC01B7.mov" id="C191D24F-9B1A-FB59-C4EE7E3257C019F4" class="ui-dialog ui-widget ui-corner-all ui-draggable ui-resizable videoPlayer" style="display: none; width: auto; min-height: 0px; height: 491.267px; visibility: hidden;" scrolltop="0" scrollleft="0" title="SN1 Common Core">
<div class="ui-dialog-content ui-widget-content">
<div style="background-color:white;">
<strong>Problem loading video..</strong></div>
</div>
</div>
The script you're trying to call is looking for an object with the ID of C191D24F-9B1A-FB59-C4EE7E3257C019F4. When it can't find it, it fails.
I am stuck. Here is what I have going on, I have an AddThis sharing widget next to a main image on a webpage. The image changes sizes and I need the AddThis to change its placement with the image dynamically. I asked this in another question and through another forum I was able to get some help. Now AddThis and the image align properly and everything seems to be going in the right direction, however the image is no longer centered. I need this image to be centered on the page but I cannot figure out how to do this because I had to float the div containing the image and AddThis. Here is the HTML:
<div class="feature-container">
<div style="min-height:100px; min-width:100px; position:relative; float:left; ">
<div style="text-align:center;"><img class="feature-image"
src="/Images/test.jpg" width="300px;" alt="test" /></div>
<div style="position:absolute; bottom:0px; right:-40px;">
<div class="addthis_toolbox addthis_floating_style addthis_16x16_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_email"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/300
/addthis_widget.js"></script>
</div>
</div>
</div>
Any ideas how to center this? I can use a straight CSS solution or a solution using jQuery and CSS. Please provide examples.
Here is a JSFIDDLE of the page.
Here is a page that has the most up to date code I am attempting.
try this:
var pos = $('.center').width() - $('img').width();
$('.center').css('margin-left', pos);
http://jsfiddle.net/WY9YX/4/
I am not sure the content of your 'im-center', since I add an inline style（text-align:center;） as below, tested it and works fine on ie 8.
<div class="img-center" style="text-align:center;">
<img src="test.jpg" alt="test" />
</div>
Define a fixed width for center div would be OK, if this not requries a fixed width, #Raminson's jquery solution is better. I really want to know if we can implement this with pure css
<div id="top" class="wrap_fullwidth">
<div class="center" style="width:400px;">
<div style="min-height:100px; min-width:100px; position:relative; float:left; ">
<div style="text-align:center;"><img src="http://www.ubhape2.com/Images/test.jpg" alt="test" /></div>
<div style="position:absolute; bottom:0px; right:-40px;">
<div class="addthis_toolbox addthis_floating_style addthis_16x16_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_email"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script>
</div>
</div>
</div>
</div>
Try to apply margin: 0 auto; CSS rule to the div.