I am working in this site
https://barrecertification.com/
In this page you will notice that YES — I Want to Get Barre Certified! just below the video.
It is centered with reference to the video, but when I zoom in or out the browser the centered position get lost and the position changes.
How to achieve the center position irrespective of the browser zoom level?
I think your video and text element need to be contained in the same container. the reason your text moves is because it located on a separate row.
try dividing the row the text is on into the same as the row with the video.
Move the hyperlink inside the div "responsive-video".
<div class="col-xs-8">
<div class="responsive-video"
//Your Video file src:
<div class="text-center">
YES I WANT TO....
</div>
</div>
</div>
Try this markup. This should work. Avoid the whole margin-left and margin-top things from your class.
Related
I have a fullscreen Bootstrap container that's sitting in front of a color overlay I added. But it seems that the container blocks the overlay even though it is mostly empty, why is that so? I need it behind my container as the img inside the container needs to be on top of the color. The html's body's color is coming through, though. But I need both the html's body color and also the overlay to be seperate as I'm slowly fading the overlay out to show the body color... Wondering if it sounds confusing. =x Thanks in advance!
<div class="container-fluid">
<div class="row row-xs-center">
<div class="col-xs-12 text-xs-center">
<img src="../img/cover_coral.png" id="myCover">
</div>
</div>
</div>
<div id="myOverlay"></div>
Using Bootstrap's container-fluid class will cause your div tag to span the width of the page (with a bit of padding applied). If you have an overlay you want to show in front of it, your best option is to use CSS to add a z-index of say 2000 (any large number will do). When you fade out, simply animate the opacity of the overlay and/or change the z-index so it's behind the container.
I've got a Boostrap website with a navbar across the top and two columns divs in a row. The first column contains an image and should always stay fixed in position. The second column contains (potentially) a page or two of text and should scroll independently.
I've used position:fixed to hold the image in position, but my issue is that I would then like to add a link underneath it that links to the terms and conditions for the page.
BootPly
Is this possible?
Many thanks.
There a couple ways of doing this. I won't go into code since you don't have anything to work off of so I hope you can understand my explanations.
You can try simply putting the link position: fixed as well and set the top property of the link element so that it'll be positioned below your image (you can play around with this).
Use a div that is set to position: fixed that will contain both the image and the link. Then you can just simple put the image inside the div without any positioning and the link should go underneath the image without any positioning either.
You can set the text on the right side to be overflow: scroll and set the width/height of the right text in the div so that it can scroll. This will essentially keep the document still but allows the user to scroll up and down the text content inside the right side div.
Number 1 is the quickest solution, number 2 IMO is the best solution. If you need some help with the code, post a Fiddle so we can see what you're working with.
Try this:
DEMO
<div style="position:fixed">
<img src="http://placehold.it/100x300" class="img-responsive">
Terms and Conditions - Privacy Policy
</div>
Sorry guys I made new one for this because it couldn't be done like I previously explained.
I want image to go over previous div and so it stays always at the same exact spot.
It's an border image for portfolio div what I'm trying to align here correctly, so that it makes peek kind of effect over previous div.
<div id="previous">some content</div>
<div id="portfolio">
<div class="some-other-content">Whole lot of html</div>
</div>
Link to my jsfiddle
Use in your CSS
"position:absolut" to set a fix position in your Window.
see more options here:
http://www.css4you.de/position.html
I'm working on a site using Isotope from isotope.metafizzy.co.
Text works fine, Centering and fully showing up.
BUG: On Tiles that I'm placing an image into, the images starts at 50%. Even if the element is small, or width2, or clicked width. it is always starting halfway to the right of the element.
Any idea what I'm doing wrong?
Current Example: http://warpwars.net/Team/DanVioletSagmiller
Current Element Code (small part of the beginning):
<div id="container" class="clickable variable-sizes clearfix isotope">
<div class="element justMe width2 height2 isotope-item " data-symbol="Dan Violet Sagmiller" data-category="halogen">
Photo<br />
<img src="/Content/dvs/DanVioletSagmiller.png" width="556" height="736" />
</div>
<div class="element majorProj " data-symbol="Teams RPG" data-category="post-transition">
Teams RPG
</div>
I have been using Chrome's inspector to look through the CSS affecting the image, and I can't find anything that would seem to suggest the image should be in the middle.
Any ideas?
Adding an image directly to the root of the element does not work well. However, wrapping the image in another div tag works perfectly.
I am wondering it its possible to have a flash file contained in a <div> that covers the entire screen. I have already done that but my question is...
Can you still have the flash content in the <div> and have it transparent and use the html buttons below the <div>?
I would like to keep the flash layer active all the time but how can I use the buttons below? I can't even copy or highlight text.
Thanks for your time.
If the div covers the whole screen are the buttons below the screen and no longer visible or did you place the buttons so they are not below the div but are fixed in place at the bottom of the screen? In which case you should be able to give them a higher z-index than the div containing the flash. That way they are on top of the flash div and should be clickable.
<div id="flash" style="z-index:1;">
<div id="buttons" style="position:fixed; bottom:0px; z-index:4;">
You can also make the flash div clickable to show/hide the buttons that you've placed with fixed position in case the flash really does take up the whole screen. No need to make the flash transparent.