To make it more simple, i'm working on this site https://webdev02.amontagnana.it/ and on the 4th row we can see a text block and an embedded video.
I need to make the video's height just like the block on the left. (it has to be relative too because it has to be responsive to desktop and mobile)
Your site are loading and loading
If you are cover an entire DIV . you need to fixed position and increase z-index as much as possible.
you can simply add a custom class on tatsu-column-inner and add the background color black on it
See the attached screenshort
Related
First time on stackoverflow, also my first time with HTML and CSS.
Basically I want a transparent image to be kind of "hooked" on to one specific point on the background, i.e. if I resize the browser window, the image should maintain its position relative to the background and should get smaller accordingly.
The reason I need this is because the image is animated and positioned to a certain spot on the background.
The easiest way I could show it is by actually showing it so: www.opinionoto.com
As you can see I want the speech bubble to always be right beside her face and maintain its position no matter what device or browser size.
This would be great help for me, I'm a super begginer! Thanks in advanced!
why not use multiple background images and position the second one accordingly where ever you need it?
Does the bubble move after the initial move? Can you just make the background a GIF image?
http://jsfiddle.net/LFtHg/
I'm trying to create my first responsive website. For this, I'm including an image. This image has a caption which should be displayed in a transparent overlay. However because opacity settings are passed to child elements, I have removed the text from the container.
I cant get the overlay to display, at all (because it has no content inside it). I cant really add a fixed height as I want to image to respond to changes in browser size. How can I ensure this is displayed?
Thank you,
J
Edit, also what would the best way to scale the overlay as the browser resizes. I'm unsure if this approach is even possible.
First of all, you can use an RGBA background ( background: rgba(0,0,0,.5); ) instead of using opacity.
Secondly, you need explicitly set a width for your span.figcaption (you can also do that by specifying both left and right offset properties)
Perhaps this demo http://dabblet.com/gist/2778608 might also help you (image can be of any size - resize the browser window to see how everything resizes).
Adding the following rules to your existing sample effectively stretches the .figcaption elements to fully cover the .figure, fiddle:
.figure {position:relative;}
/*these could be different so that the overlay appears larger than the caption*/
span.figcaption {position:absolute;top:0;right:0;bottom:0;left:0;}
p.figcaption {position:absolute;top:0;right:0;bottom:0;left:0;}
You can arbitrarily adjust the values to a % setting so that the caption appears centered etc.
BTW, you know that your implementation is not yet liquid, right?
Hello I'm trying to make a very simple website consisting of a background image and a floating youtube video. My problem is that I need the youtube video to be on a specific place and resize to fill that determined space regardless of resolution or browser window.
The video needs to go in the dark area middle left; I'm not too sure what to do I haven't coded in a while. I've got the background to resize adequetly but other than that. I've tried to follow these guides.
http://css-tricks.com/fluid-width-youtube-videos/
I would appreciate any help. You can find the image here
http://i.stack.imgur.com/rkYos.jpg
Put the iframe into a div and position it absolute where you want
http://www.zachgraeve.com/2006/10/01/center-abosulte-position-div/
make sure you set the z-index to a higher positive value to make it stay "on top"
See also https://stackoverflow.com/search?q=absolute+position+div
I'm working on my first website and I've stumbled across a problem.
How do i make my main contentBox cover the subNav? Img Here
You can set the z-index property.
To get an image over another image:
Using CSS, absolutely position your image and set the top value to 0 for both images.
However, I am not sure you are asking the correct question as in your image, your content areas seem to be above the area you want them to be placed.
Also - are your web page areas all images?
I have a problem I haven't found an answer to in similar questions:
I have a site that dynamically resizes a horizontal scrolling image gallery and some text as you resize the browser. That part I have working OK, I just can't seem to get proper control of each respective element.
Take a look: http://john-godwin.co.uk/testsite
If you resize the browser, the large text overlaps the gallery before the gallery starts shrinking, and if you resize the browser small enough, the gallery eventually overlaps the footer as well.
Does anyone know what changes I need to make to the code to make everything stay within a boundary and resize respective of the other elements without encroaching into each elements space?
Thanks in advance.
The CSS can be found in http://john-godwin.co.uk/testsite/css/style.css
Remove z-index:500; in the .content class