I have a popup overlay that I'm currently resizing with some jquery code. I'm looking to change this implementation to work only with CSS. This is the general setup I have along with the jsFiddle
<div id="BigDiv"></div>
<div id="Overlay"></div>
#Overlay{
background:red;
opacity:0.6;
position:absolute;
top:0;
left:0;
width:100%;
height:100%}
#BigDiv{
height:2000px;
width:2000px;
background:blue;}
As you can see, the overlay is sized at 100% width and height so when the user looks at the overlay, it fills the screen. However, when the user scrolls, the overlay isn't resized. How can I change this to make the resize work only with CSS, if at all possible.
Thanks.
Using position:fixed instead of absolute which will place the overlay at a
specified position relative to the screen's viewport and doesn't move when scrolled
You can keep the width:100%;height:100% or use a full top:0;right:0;bottom:0;left:0; positioning system - both should make the overlay cover the whole viewport.
Related
I'm designing a chat UI for WebView and Mobile only and I was wondering on how do you keep the edit box always on the bottom like WhatsApp or Telegram. The content in the chat box is scrollable depending on the amount of messages like mobile apps and the chat box is fixed. I tried applying fixed height but it will be messed up for different devices.
How do I make the edit box always on the bottom no matter the device height? (Just like WhatsApp or Telegram)
So far only when defining the height will allow the content to be scrollable, percentages don't work.
height:640px;
Here is the fiddle:
https://jsfiddle.net/rrL0nkq7/
To fix your editbox in the bottom you need to give it a position:fixed; and bottom:0;
And if the height is known lets say height:50px;then you must add padding-bottom to chatcontainer padding-bottom:50px;because if you don't you will not see the last content of your chatbox
Make textarea for chat box and give it this css
textarea{
position:fixed;
bottom:0;
left:0;
width:100%;
height:60px;
}
.chatcontainer{
height: 100px;
position:fixed;
bottom:0;width:200px;right:0; /*edit your wish*/
font-size: 0.6em;
overflow-y: scroll;
}
This will give the container a fixed height and overflow-y scroll which will make your chat scrollable. Is this what you are looking for?
I am trying to fit an image to its full width of the browser. Please let me know CSS code for that. I am using px for container. So let me know according to that. I don't want scroll bars to full screen of the browser. I am trying width:100%, width in px. But nothing works I see scroll bar.
Images have their own display type in CSS, so when you say something like width:100%, it fills to 100% of the original image's dimensions rather than acting like a block and expanding to fill 100% of the parent element.
You can fix that by changing the display type, though only for that one image:
<style type="text/css">
img.big-img {
display:block;
width:100%;
}
</style>
…
<img src="my_image.jpg" class="big-img">
If you want it to depend on browser's viewport add this to your element's css and it will stretch automatically
background-size: 100% 100%;
img{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
How to clip my top bar with screen. So as I goes down on page i mean scrolling down the page the top bar should also move. Just like in Facebook the top bar moves on screen.
I am searching google from last 2 hours. But unable to get, that what we calls it.
and my HTML/CSS is ..
#topnavbar
{
width:100%;
height:50px;
background-image:url('top.jpg');
background-repeat:repeat-x;
}
HTML
<div id="topnavbar">
</div>
You're talking about fixing the position of the navbar to the top of the screen, right?
top:0;position:fixed;
-
#topnavbar {
width:100%;
height:50px;
background-image:url('top.jpg');
background-repeat:repeat-x;
top:0;
position:fixed;
}
In CSS, positioning elements is a fundamental concept. In this case, you want a fixed position. According to MDN, you should adhere to the following guidelines for fixed position elements:
Do not leave space for the element. Instead, position it at a
specified position relative to the screen's viewport and doesn't move
when scrolled. When printing, position it at that fixed position on
every page.
To reiterate, if you want to keep an element in the same position, regardless of where the page is scrolled, use position:fixed
#topnavbar{
position:fixed;
}
Example
It seems there are some sort of image slider on your page. So what I will suggest you to include z-index also.
#topnavbar
{
width:100%;
height:50px;
background-image:url('top.jpg');
background-repeat:repeat-x;
position:fixed;
z-index:500;
}
What you need to search for is how to use the css attribute position: fixed; to have a div or other element 'stay where you put it' relative to it's containing element.
Really quick and rough example:
http://jsfiddle.net/c93cK/
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.
So, I have this wonderful image here:
And what it is is a header for a website - click it to view it full size..
I need to re-create this using HTML/CSS/images and I can't figure out how. It has to be 100% width yet, the point where the gradient turns from one type to the other, has to remain in the same place on resize. To illustrate:
The area that is not blacked out must stay in the center of the page at all times and not move. The areas in black must extend to 100% of the screen width and have a tiled background gradient.
How can this be done?
I have tried something like this:
Where green is a div with a fixed width and centered yellow is the 'twirl' gradient bit and then red/blue are the tiling gradients. But this does not work because the tiling gradients to not match the position of the 'twirl' when the browser is resized.
Note: This must support IE7+ and must be cross-browser compatible and preferably uses no javascript.
I’m not sure why do you actually want to make this so hard by cutting the image up into pieces?
Take the image, extend the canvas to let’s say 5000px and just repeat the gradients to both sides. You’ll maybe add about 200 bytes (yes, bytes, not kilobytes) to the image size, but you’ll make it all up without adding 2 more requests for the separate backgrounds to the page.
And then just set the image to background-position: center top;
And as the center DIV is fixed width, you can either add a container to have the background or add the background to BODY for example.
Well, I think I've managed to do it..
<header>
<div id="bg-left"></div>
<div id="bg-right"></div>
<div id="header-content">
My header contents
</div>
</header>
And
header {
height:88px;
}
header #header-content {
width:1004px;
height:88px;
position:absolute;
left:50%;
margin-left:-502px;
background-image:url("/img/header-bg-middle.png");
}
header #bg-left, header #bg-right {
position:absolute;
height:88px;
}
header #bg-left {
background-image:url("/img/header-bg-left.png");
width:50%;
}
header #bg-right {
width:50%;
background-image:url("/img/header-bg-right.png");
right:0px;
}
So basically, I am creating a fixed width div in the center of the page, and then behind that I create two 50% width divs that have the appropriate gradient background.
Id do the same thing as you started doing with the one 'twirl' being centered, with two divs on the outside... the way I would do this is like this:
this is what i have:
<div style="width:100%">
<div style="background:#333; position:absolute; left:50%; top:0; width:50px; margin:auto; height:50px; z-index:10;">
</div>
<div style="width:50%; position:absolute; left:0; top:0; background-color:#060; height:50px; margin:0; z-index:1">
</div>
<div style="width:50%; position:absolute; right:0; top:0; background-color:#060; height:50px; margin:0; z-index:2">
</div>
</div>
</div>
which can be viewed here: http://sunnahspace.com/TEST.php
basically you have a container div, which if you decide to move this around at all id make relative positioned. then youd take the piece where the gradients change and make that your 1st inner div, with the different gradients your 2nd and 3rd div. Basically, the 1st div (the "twist") is positioned to stay in the same place of the browser (the middle, see the 50%, but this can be set to say 200px from the right, etc.) with the other two divs expanding when browser window sizes change. The z-index layers the css, so the 1st one having a z-index of 10 is on top (the number hardly matters so long as it is the highest number, but leaving it like this allows you to add more layers underneath without having to change the z-index, with the other two having z-indexes of 1 and 2, doesnt matter which order so long as they are less than the top div, this lets the first div sit on top of these two divs, hiding where they meet. Should work, let me know how it goes, and if need be ill fix a few things.
Is this what you want to do? http://jsfiddle.net/nnZRQ/1/