I'm creating a website with a videoheader.
Everything goes fine with the implementation.
Though one thing isn't going good.
Actually I should be able to reposition the video within a div in orde to see another piece of the content. (see screenshot)
What I want is that the video will go up, so that I can see the lower part of the video.
Now there is an overflow after 505px of height.
Can someone help me with this?
The css I used:
#cover
{
width: auto;
height: 505px;
}
.header-unit1
{
height: 505px;
border-right:none;
border-left: none;
position: relative;
padding: 20px;
}
#video-container1
{
position: absolute;
z-index:-10;
}
#video-container1
{
top:0%;
left:0%;
height:505px;
width:100%;
overflow: hidden;
}
#testvid video
{
position:absolute;
}
#testvid video.fillWidth1
{
width: 100%;
}
Any tips would be nice!
Here's the general idea of what (I think) you're trying to accomplish:
HTML:
<div class="container">
<video ...></video>
</div>
CSS:
.container {
width:100%;
height: 505px;
position:relative;
overflow:hidden;
}
video{
max-width:100%;
position:absolute;
top:0px;
}
Then animate the video top position. You can do this with Javascript or add another class like video.animated { top: 50px; }
Thanks for the reactions.
I applied margin-top: -250px; to the video element which gave me another frame of the video, exactly what I needed.
For example, I now see the people walking in stead of the blue sky.
Related
I have got issue with sub navigation list hiding behind the main div. I have used z-index. I know the problem is because of following block, tried different things but couldn't resolve it.. I am creating dynamic web design and what I want is the width of .contact_No_01 fill rest of right space, that is why I am using contact_No_01.
To refer code: jsFiddle
#header_block2 {
margin:0 auto;
width:90%;
position:relative;
overflow:hidden;
background-color:aqua;
}
#contact_strip {
position:absolute;
width:5%;
right:0;
height:62px;
top:50px;
z-index: 1;
overflow: hidden;
background-color:green;
}
you need to remove overflow:hidden; from this CSS and set it to visible:
jsFiddle (hover service menu)
#header_block2 {
margin: 0 auto;
width: 90%;
position: relative;
overflow: visible; /* change is here */
background-color: aqua;
}
I've come across a very peculiar situation and I'm not sure what is happening.
I'm trying to arrange my web page so that you have a collection of same sized images all squished together in a grid sort of pattern- these images will be links to articles.
For my images each has the code:
<div class="linkyimage">
<img src="image/lblue.png" alt"blue" />
<p class="description">
Oy oy oy
</p>
</div>
And my css:
.description{
background-color:#000;
position: absolute;
color:#fff;
opacity:0;
top:150px;
left:10px;
}
.linkyimage{
position: relative;
display: inline;
float: left;
height: 250px;
width: 250px;
margin:0px;
white-space:nowrap;
overflow:hidden;
}
.linkyimage:hover img{
opacity:0.5;
}
.linkyimage:hover .description{
opacity: 1;
}
But this doesn't work. It seems to squish the images down and put them in containers that are 250px squared, the effect is really rather bizzare, however the descriptions display perfectly.
So I had an idea. Maybe I just format them as images.
I change it to
.linkyimage img{
blah blah
}
This makes my images display perfectly....but now the descriptions display off on the far left of the screen rather than over the images like they used to.
Can anyone explain what is actually happening here? How does merely formatting the images of linky image (thats all the boxes contain) mess up the formatting of the box?
Why do the images get compressed and not fill the entire box if I only format their container and not the images?
All rather peculiar.
Edit:
With linky image left open:
http://jsfiddle.net/28n9p/
With just linky image's images handled:
http://jsfiddle.net/XJq5W/
So you can see this jsFiddle
.description{
background-color:#000;
color:#fff;
height:30px;
opacity:0;
position: absolute;
margin-top: 120px;
}
.linkyimage img{
position: relative;
display: inline;
float: left;
height: 150px;
width: 150px;
margin:0px;
white-space:nowrap;
overflow:hidden;
}
and add this class to your divs..
.linkyimage{
margin-right:5px; // optional
border: 2px solid #000; //optional
float:left;
}
I'm trying to accomplish this design:
Where the sidebar will be fixed, but the right side (the main content) will scroll vertically (and potentially horizontally if the user's browser window is smaller). What is the best way to achieve this?
I tried making the sidebar be "fixed" with a fixed width of 200px, and then the main content just has a margin-left of 200px. However, if the user's browser is then smaller than the main content, the sidebar overlaps all the content as the user tries to scroll horizontally.
Is there a smarter way to achieve this? Thanks!
Use the content div as your container for the page.
.sidebar {
position: fixed;
width: 200px;
height: 400px;
background: #000;
}
.content {
margin-left: 200px;
height: 500px;
width: auto;
position: relative;
background: #f00;
overflow: auto;
z-index: 1;
}
.info {
width: 1440px;
height: 300px;
position: relative;
background: #f55;
}
<div class="sidebar"></div>
<div class="content">
<div class="info"></div>
</div>
Your content will need to be the container to put the page in. The values here are my test to see if I am correct in this. If your width and height exceeds the values you set for content, the scroll bars will appear.
Have a fiddle: http://jsfiddle.net/djwave28/JZ52u/
edit: responsive sidebar
To have a responsive fixed sidebar, simply add a media-query.
Example:
#media (min-width:600px) {
.sidebar {
width: 250px;
}
.content {
margin-left: 250px;
}
}
Here's another fiddle: http://jsfiddle.net/djwave28/JZ52u/363/
Here is an alternative: http://jsfiddle.net/BoyWonder/8mVQX/embedded/result/
body{
padding-left:200px;
margin:0;
}
div#sidebar{
position:fixed;
height:100%;
width:200px;
top:0;
left:0;
background:grey;
}
div#content{
background:black;
width:100%;
height:1600px;
}
Here is another alternative by using only two CSS lines
.sidebar {
position: sticky;
top: 0;
}
and the credit goes to this post.
You can also experiment with the code over here.
Basically I have a Picture in a div nested in 2 divs. I wanted to overlay a piece of tape onto it at the corner of the picture.
So I made a div for that piece of tape image and put it at the bottom of the document giving it the position of relative and giving it these attributes.
#tape
{
width: 100px;
height: 65px;
position:relative;
left: 25px;
top: -662px;
}
And here is the Picture's attributes:
#character-spotlight
{
margin-left:50px;
width:250px;
height:250px;
float:left;
z-index:1;
}
Bot of these Div's are nested into
#content
{
width:800px;
height:1360px;
background-image:url(Cork.Board.png);
background-size:100%;
float:left;
display:block;
}
Which is itself nested into
#container
{
width: 1024px;
height:1600px;
margin-left:auto;
margin-right:auto;
margin-top: 50px;
display:block;
}
Here is the webpage
www.workaholicsfans.com/characters-files/Adam-Demamp.html
It works fine in Chrome but not IE and Firefox.
Any help would be greatly appreciated
(There is no link in your post) I can hardly believe the situation you described and provided css could work. The fact that you have it working in Chrome is just pure luck i guess, are you might have been playing with the numbers to make it fit.
The solution is actualy rather simple.
<div class='picture-wrapper'>
<img class='picture' src='picture.../>
<img class='tape' src='tape... />
</div>
then in the css
.picture-wrapper {
position: relative; /* this now acts as the reference for position absolute of the children */
}
.tape {
display: block;
position: absolute; /* position according to its parent */
top: 0; /* top position */
left: 0; /* left position */
z-index: 5; /* bring to front */
}
That should do the trick.
edit:
i just saw you added the link. If you want the piece of tape to overflow the picture edges, the easy way would be to add some padding-top and padding-left to the wrapper. something like this:
padding: 8px 0 0 8px;
Or if you want it to be absolute positioned according to the page container:
#tape {
height: 65px;
left: 325px;
position: absolute;
top: 300px;
width: 100px;
}
(But I must admit that I like PeterVR's code better since this keeps things relative, which comes in handy if you position 'new' stuff above the #tape div).
Alright, so I've got a couple divs wrapped in a container. The two interior divs overlap each over by 15px; The problem is I'm not able to layer them like I want.
<div class="headerButtons">
<div id="WorkTableButton" class="WorkTableButtonActive">
Work Table
</div>
<div id="additionalCostsButton" class="additionalCostsButtonInactive">
Additional Costs
</div>
</div>
and the CSS looks like so,
.headerButtons{
margin:auto;
text-align:center;
}
.headerButtons div{
text-align:center;
height:27px;
text-indent:-9999%;
display:inline-block;
cursor:pointer;
}
#WorkTableButton{
width: 195px;
}
.WorkTableButtonActive{
background: url(ui_images/WorkTableActiveButton.png) no-repeat;
z-index:99999;
}
#additionalCostsButton{
width: 192px;
position:relative;
left: -15px;
}
.additionalCostsButtonInactive{
background: url(ui_images/AdditionalCostsInnactiveButton.png) no-repeat;
z-index:0;
}
The problem is, the #WorkTableButton div still shows up behind the #additionalCostsButton even though the WorkTableButtonActive class is applied to it which layer the div above the other... Right?
What am I doing wrong?
The z-index property only works on elements that have been specifically positioned.
You need to add a position to your #WorkTableButton, like this:
#WorkTableButton{
width: 195px;
position: relative;
}
#additionalCostsButton will appear behind #WorkTableButton after that.
Change
#additionalCostsButton {
left: -15px;
}
to
#additionalCostsButton {
margin-left: -15px;
}