i have a div that in some cases may be populated with a video. I tried to use
height:auto;
on the container div but when the video appears it passes outside the div container.
A fixed height solves the problem, but leaves a large area when the video does not appear.
You can try one of the two options listed below.
You can view the JSFiddle here. I also provide more comments within the JSFiddle to help guide you better.
Option 1 - Leave the height of that div holding the video blank and CSS will adjust automatically.
CSS:
.videoDivOption1 {
/* blank */
}
HTML:
<div class="videoDivOption1">
The text represents your video. Once your delete the text it represents no video.
</div>
Or you can use min-height for that div, but the parent div must have a property of height:100%; or the min-height will not work.
CSS:
.videoDivOption2_Container {
height:100%;
}
.videoDivOption2 {
min-height:0px;
}
HTML:
<div class="videoDivOption2_Container">
<div class="videoDivOption2">
The text represents your video. Once your delete the text it represents no video.
</div>
</div>
you need to set a min-height also for this div in which video appears for expmple
height:auto;
min-height:50px; /* or something else*/
Related
Jsfiddle
Im very new to HTML and CSS and my weakest points are positioning things.
1)Each picture has its respective green button but my question is how do i put these pictures next to each other instead of on top of each other?
2) how would I code it so that if I hovered over the picture, the corresponding button would still change color up and allow me to click the picture to go to the link?
HTML
<!DOCTYPE html>
<div id="chewning">
<img src="http://scontent-b.cdninstagram.com/hphotos-xap1/t51.2885-15/10518156_366963580136787_506416400_a.jpg" </img>
<a href="https://www.youtube.com/user/maxxchewning">
<div id="EFGREEN">
</div>
</a>
<div id="CG">
<img src="http://cdn.shopify.com/s/files/1/0232/0959/products/575757_10152033748519359_1620549997_n_2.jpg?v=1398666646"></img>
</div>
<a href="https://www.youtube.com/user/Christianguzmanfitne">
<div id="CGGreen">
</div></a>
</html>
CSS
#chewning {
display:inline-block;
margin-right:1000px;
margin-top:-40;
}
#EFGREEN {
background-color:green;
width:306px;
height:100px;
display:block;
}
#EFGREEN:hover{
background-color:red;
}
a:{
display:block;
}
#CG{
float:right;
}
#CGGreen{
background-color:green;
width:414px;
height:500px;
}
#CGGreen:hover{
background-color:red;
}
As already mentioned in some comments, the markup and CSS of your demo
could be improved and there are plenty of online resources (won't recommend
any specific).
But as you have 2 specific questions - how to display both images next to
each other and how to change the link in a way that also the image is linked and the button is displayed in hover state (changes the background color) when the image is hovered - I'd just like to give an answer as well as maybe providing some information on how to improve your code.
In this adjusted Fiddle I've kept but commented out your CSS and added the following new CSS instead:
.button {
background-color:green;
width:100%;
height:100px;
}
.item {
float:left;
}
.item:hover .button {
background-color:red;
}
To display both images next to each other, I've wrapped both items (image and button)
in a div with the class item. These items float left, so they're displayed
next to each other. I've added the class button to both buttons so it's not
necessary to repeat styles based on the buttons' ids.
You've set the width of both buttons to the different widths of the images which
can be handled in a more dynamic approach by just setting the width of the
buttons to 100% - based on the image width the surrounding item container
will have the width of the image, and the div with the class button automatically
has the same width (100% of the container).
I've moved the anchor tags that previously only wrapped the button div to wrap the
whole divs (which contain the image and the button) contained in each item, so the whole content is linked.
Adding .item:hover .button { background-color:red}, the buttons will be displayed
in red when hovering an item container.
Note that there are different ways to display content next to each other - just
to mention one of them using display:inline-block - Fiddle - instead of floats. As
you'll notice, then also the buttons are displayed aligned next to each other.
It depends on the required layout (and maybe also on one's personal preferences)
which to choose.
So, I'm trying to do something like this:
The web page is supposed to look like a phone app, and it has to be responsive. The problem is that I can't position the buttons right. They always move in relation to the 'tablet' whenever I'm re-sizing the browser window. This is what I've tried (with only one button):
CSS
img {
max-width: 100%;
}
#tabletBG {
width : 60%;
}
#buttons{
position:absolute;
width:10%;
left:40%;
top:12%;
}
HTML
<div id="content">
<div id="tablet">
<img id="tabletBG" src="images/tablet.png" alt="tabletBG"></img>
<div id="buttons">
<img id="quienes" src="images/quienes.png" alt="quienes"></img>
</div>
</div>
</div>
I just want the buttons to stick to the tablet. Even if i'm re-sizing the browser window. Is there an easier way of doing this? Thanks.
Regarding your original question above:
Try setting the position of your content div to absolute, fixed, or relative.
This will ensure that your absolutely positioned buttons div contained within it will use it as a reference point rather than referring its resizing/relocating to the window.
DEMO: http://jsbin.com/tixed/1/
Regarding your comment below:
It works, but for an extent. There's a point that if you keep expanding the browser window, the tablet will keep expanding, but the button won't. Here's a link.
The problem there is that your image is only 96 pixels wide, and you've set a CSS rule for all img elements to have a max-width: 100%. Under these conditions, the image will expand only to the point of its original size (the default action, and not what you want), and only to the point of its containing element (by your CSS rule, and to no noticeable effect).
To correct, ideally you would get a larger image. For a quick fix, change its rule to be simply width: 100%. This will ensure the image always expands to the point of its containing element.
Yes, whenever you re-size your browser the images will change their alignment and this is a default behavior of browsers. Only you can make this images to float.
Try this:
img{
float: left;
}
I am currently building a website that uses two columns, inside a position fixed box to make the heights stay at 100%.
I need the content div to scroll down if the content is longer than the page (on 11/13" screens, page is responsive) - but by setting overflow scroll on the content, the background does not drop, and there is still content at the bottom of the page.
There are two links here, one is the page as it is, and the other is the page with extra content (to make it longer than your viewport)
Link 1 link 2
If you can help my solve this, i'll be thankful :)
Add Overflow:auto; It works fine. I checked it with that page.
The problem is the .bf_page is set to height: 100% - this is getting the full height of the body, however the div doesn't start at the top of the page so it continues under the bottom of the body tag for 100 or so pixels, meaning the last bit of content is getting chopped off (hope that makes sense?!).
The height of the logo (which is causing the page to extend) is 121px so you could do the following:
Change .bf_page's height to:
.bf_page {
height: calc(100% - 121px);
}
Set .bf_content_text to overflow: auto
I've tested that and it seems to work.
Taking out the "position: fixed;" on the '.bf_menu' class works for me, if you're having trouble getting the menu to stick to the top of the page, just hide the blockquote div with display:none.
Example:
<div id="wrapper">
<div id="content">
<div id="data">
</div>
</div>
</div>
#wrapper {
height:100vh;
width:100vw;
background-color:black;
position:absolute;
}
#content {
background-color:red;
height:80%;
width:80%;
position:relative;
overflow-y:auto;
}
#data {
background-color:yellow;
width:80%;
height:1000px;
}
http://jsfiddle.net/nGU8R/1/
I am currently working on a site that requires a footer to be placed either at the bottom of the window, or the bottom of the page content, whichever is lower. I have tried using the height: 100% method, but this causes a problem.
I also have a position: fixed header, and some padding on my content (defined in pixels). Also, the height of the content may change after the page has loaded (use of accordions, etc.), so I wonder if there's a pure CSS way to position the footer to either the bottom of the window, or the bottom of the document, while still allowing pixel padding and so forth.
Here's an outlined structure of the HTML:
<header></header>
<div class="content">
<footer></footer>
</div>
I have also put together a Fiddle to demonstrate how the CSS works at the moment: http://jsfiddle.net/LY6Zs/. I am unfortunately unable to change the HTML structure (i.e. breaking out the footer element from .content.
You first need to have a container div just after the which contains all the content
.container
{
min-height:100%;
position:relative;
margin:0 auto;
}
.footer{
position:absolute;
bottom:0;
}
I want to create a layout where I want to display an image to the left and content on the right. The image should stay constant when the content scrolls.
The css I'm using:
<style type="text/css">
#page-container
{
margin:auto;
width:900px;
background-color:Black;
}
#header
{
height:150px;
width:650px;
}
#main-image
{
float:left;
width:250px;
height:500px;
background-image:url('../images/main-image.png');
position:fixed;
}
#content
{
margin-left:250px;
padding:10px;
height:250px;
width:630px;
background-color:Teal;
}
</style>
The HTML:
<div id="page-container">
<div id="header"><img src="someimagelink" alt="" /></div>
<div id="main-image"></div>
<div id="content"></div>
</div>
Alot of time on this site and I have understood that background-attachment:fixed positions the image in the entire viewport and not the element it is applied to.
My question is how do I go about creating that kind of layout?
I do not want to give that image as a background image, as if the window is resized, it might get hidden. I want scrollbars to appear if the window size is less than 900px( my page width) so that the image can be viewed at all times.
That happens with this code, however I would like the image to start at my element instead.
How do I go about doing this??
Thanks in Advance :)
Edited:
I took the advice and added a position:fixed property to #main-image. Using the HTML and CSS as shown above.
Now, I also want to fix the header so that it does not move. Basically, only my content section should scroll.
However, if I add a position:fixed to the header, my #main-image and #content now sit on top of my header.
If I add a margin-top:150px (since my header height is 150px) to the #main-image, it works fine and moves down appropriately.
However if I add a margin-top:150px to the #content, my header moves down by 150px and still sits on top of my #content.
Can someone please explain why this is happening?
Thanks in Advance :)
Take a look at this link:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
You can learn how to position Div's with it.
This will solve your problem:
#main-image {position:fixed;}
EDIT:
I'm not sure of what caused your problem but here is the solution:
#content{
position:relative;
top:150px;
}
My Guess:
I think that happened because when using position:fixed those 2 div's were positioned relative to the the browser window, while the other one was relative to the document itself.
In this link you will see more about positioning and you can test some of these features related to the position property:
http://www.w3schools.com/cssref/pr_class_position.asp
About the fact that one div was positioned over another, you should search for the 'z-index' property. Firefox has a 3D mode so you can see this more clearly:
http://www.addictivetips.com/internet-tips/browse-internet-in-3d-using-mozilla-firefox-11-tip/
Set a min-width on html and body.
Have you tried setting your #page-container to relative and your #main-image container to absolute and setting the position using top, bottom, etc. Then you should also be able to float your #content container to the right.