In my webpage, I have a header DIV, whose position is set to fixed. This means it should remain in the same position on page scrolling, shouldn't it?
On the bottom part of the same webpage, there is a footer DIV, which contains an input text. The position is set to fixed for it too. That should go without any problems, but unfortunately the fixed property seems not to work at all.
On my iPhone, when I click on the input field, the keyboard obviously comes up, scrolling the page... The same behaviour on Windows Phone's Internet Explorer. I've not tested it in any Android devices so far, but I'm sure it won't work.
So my question is: how do I make a really fixed position DIV? When the keyboard is opened, I want my header DIV to remain in the top of my screen.
Thanks!
<div style="border-bottom:1px solid #D3D3D3;text-align:center;background-color:#ff9e42;position: fixed;width:100%;padding-top:1px;padding-bottom:1px;">
<p>This is my DIV content</p>
</div>
<div id="Body" style="padding-top:50px;">
<iframe src="..." />
</div>
<div id="FOOTER" style="position:fixed;bottom:0px;background:#EFEFEF;color:gray;width:100%;border-top:1px solid #D3D3D3;">
<p>Footer</p>
<input type="text" />
</div>
Try this:
header {
position: fixed;
top: 0; // add this to set proper positioning
left: 0; // add this to set proper positioning
}
Related
Please help me with this responsive design.
This is my HTML layout:
<body>
<div id="container">
<div id="wrapper">
<div id="images">
<div id="cats">
<img src="cat-image-1.png" />
<img src="cat-image-2.png" />
</div>
<div id="dogs" style="display: none;">
<img src="dog-image-1.png" />
<img src="dog-image-2.png" />
</div>
</div>
<div id="chat_wrapper">
<div id="chat_messages">
Chat messages in here
</div>
<div id="chat_input">
<input type="text" value="Type to chat" />
</div>
</div>
</div>
</div>
</body>
Now let me explain what the CSS should do:
There is a div #images and a div #chat_wrapper in #wrapper.
The divs #cats and #dogs in #images have an unknown number of images in them (= height is unknown).
The #chat_wrapper should always try to fill the entire screen, but if the div #cats or #dogs is visible the #chat_wrapper should collapse to avoid the document element to have a height greater than window height. (min-height should be at least 400px, so if let's say #dogs fills 100% of the window height, you should be able to scroll down to the chat.
I don't known if it's possible with CSS only, can you help? :)
Thanks a lot!
Screenshot #1:
#dogs is visible, the #chat_wrapper fills the rest of the remaining space, you just can scroll the #chat_messages div (the #chat_input doesn't move)
Screenshot #2:
Just chat is visible, you just can scroll the #chat_messages div (the #chat_input doesn't move)
Screenshot #3:
#dogs is visible with some images, you can scroll the entire window, the chat is 400px high, you can scroll the #chat_messages div (the #chat_input just moves if you scroll the entire window)
I edited the 3rd link to add http://.
The #dogs div could be scrollable.
Fix a max-height to the div and use the overflow property to make it scrollable.
As described here : Mozilla Developer Network - overflow property
div {
width:150px;
height:150px;
overflow:scroll;
}
Note : Note: The value "inherit" is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports "inherit".
If you don't want a scrollable #dogs div, then use display: block for img
Try :
img {
display: block;
}
#chat_input {
position: fixed;
background-color: white;
padding: 5px;
witdh: 100%;
bottom: 0px;
}
And fix a max-height for the message-container if you want to.
I dont have any HTML or CSS experience, so pretty much coding illiterate.
The issue I am having is the Paypal logo that I have inserted on my Bigcommerce site, stays static in the same position as the Homepage. So if I am on a product page it creates a gap between the last line of the page and paypal logo.
http://www.mariamseddiq.com/ -> Paypal logo is in the correct position
http://www.mariamseddiq.com/bridal/ -> theres a big gap between the last line of this page and the botton of the page.
Heres the Footer code:
<div id="ContainerFooter">
<div class="Center">
<div id="FooterUpper">
<div class="Column">%%Panel.FooterCategoryList%%</div>
<div class="Column">%%Panel.SideShopByBrand%%</div>
<div class="Column">%%Panel.HomeRecentBlogs%%</div>
<div class="Column NewsletterColumn">
%%Panel.SideNewsletterBox%%
%%Panel.SocialLinks%%
</div>
</div>
<div id="Footer">
%%Panel.PagesMenu%%
<p>Copyright %%GLOBAL_Year%% %%GLOBAL_StoreName%% : %%SNIPPET_SitemapLink%%</p>
https://store-mc6v042j.mybigcommerce.com/product_images/uploaded_images/paypal-logo-transparent1.png "style="width: 150px; margin-left:750px;position:absolute; top:2100px;">
%%GLOBAL_AllPricesAreInCurrency%%
The problem is the combination of position:absolute; and top:2100px. The absolute attribute tells the browser that the item you are positioning will be positioned in a fixed position relative to it's parent. The top:2100px tells it to position it 2100 pixels from the top of the parent. Instead of positioning it this way try to position it within a box (such as a div) below the element where you want it to display.
Edit: Just by using the Chrome browser tools I disabled both of those css elements and the logo appears where it should. Try just removing position:absolute;top:2100px;
The issue is, you have 2 line break <br> and on image you have style position:absolute; top:2100px. Just remove these two line breaks, and also style position:absolute; top:2100px. and place margin-top to fix the position.
<br>
<br>
<img src=" https://store-mc6v042j.mybigcommerce.com/product_images/uploaded_images/paypal-logo-transparent1.png "
style="width: 150px; margin-left:750px;position:absolute; top:2100px;">
Change it to
<img src=" https://store-mc6v042j.mybigcommerce.com/product_images/uploaded_images/paypal-logo-transparent1.png "
style="width: 150px; margin-left:750px; margin-top: -50px;">
css changes :
position:relative; top:-90px;
try this , i meant in both the pages
Add position:relative to the footer div and set the top:2100px from the image to top:15px or what else you like.
<html>
<head>
</head>
<body>
<div style="height:9.5in;width:7in;position:relative;overflow:hidden;">
<div style="position: absolute;left: 204px; top: 64px;">
<h1>One</h1>
</div>
</div>
<div style="page-break-after: always"></div>
<div style="height:9.5in;width:7in;position:relative;overflow:hidden;">
<div style="position: absolute;left: 204px; top: 64px;">
<h1>Two</h1>
</div>
<div style="position: absolute;left: 204px; top: 164px;">
<h1>Three</h1>
</div>
</div>
</body>
</html>
The above code displaying properly in brower, but in print/print-preview in firefox, the 2nd page css top is not working. Both the words "Two" and "Three" overwritten. Please help me to align it properly.
There is a tricky print-rendering bug in Firefox that causes this behavior. The top margin of the 2nd (or more) printed page in Firefox is 1px too high. Being inside what I will call the "y-pos dead zone" the y-positioning of elements is ignored, thus causing the text "Two" and "Three" to render on top of each other as if they both had the css definition top:0px.
The easiest fix/hack is to add a margin-top:1px onto any page past the first.
If you want a better visualization of this problem add a border onto the absolutely positioned divs.
(If you want some insight into how Firefox is doing the rendering try setting a negative margin-top:-80px which will still have the rendering bug. But if you go up to -85px suddenly the bug goes away. This begins to show that the bug has something to do with how Firefox is trying to render around the gutter between pages.)
I was fighting all day with this bug until I found this Question, thx a lot! That pointed me to the right direction. The fix from purgatory101 did not work for me, but at least I could see, that FF is not capable to print anything with absolute position. We changed it to relative and now it seems to work. There is still a bug, that when it comes out of the printer, it is moved to the right a bit (the preview is ok, the papers not), but this is a big success for me.
So my solution: put everything you need positioning to a div wrapper with absolute positioning and inside you can put relative divs with the same coordinates as you used earlier.
<div style="position: absolute;">
<div style="position: relative; top: ...">
blah
</div>
<div style="position: relative; top: ...">
bleh
</div>
</div>
Update: I realized that IE sufferfs with similar bugg - all absolute positioned elements loose the css styles from the 2nd page (eg. z-index or opacity), but at least they stay on right coordinates. Just chrome seems to me now doing everything right.
I am working on this page here for a client of mine http://sw6.us/scott/index.html
Notice the site is all based within a div, the problem is the scroll bar that is produced because the text is to long. I have edited my CSS and changed "overflow" to hidden instead of auto but this just makes the text run off the screen and you can not scroll at all.
Here is my refined HTML code
<div class="main">
<div class="blk">
....
</div>
<div class="navbar">
....
</div>
<div class="programs">
.....
</div>
<div class="blk2">
...
</div>
</div>
</body>
</html>
The site is built out of the .main div
How can I make that scroll bar appear at the far right of the browser and scroll the .main div?
If this is not possible how can I achieve this exact look with a set up that will place the scrollbar on the right edge of the browser? The reason I am doing it like this is because the client want's the site looking exactly like his .pdf mock up.
Thanks!
If you want to scroll the main div change the CSS as follows...
html, body { overflow: hidden; }
div.main { overflow: auto; }
You should also set some bottom margin to leave some space for the shadow at the bottom...
Maybe posting the PDF would help better understand for me...
try this:
<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: scroll;></div>
And if you want to hide horizontal scroll: overflow-x:hidden ;
I'm helpless, tried my best understanding CSS but it's just not for me.
I would like to make a really simple MasterPage:
at the top a div of full width and height 40px (1)
at the bottom also a div of full width and height 40px (2)
in the middle:
on the left: a div of width 200 px (3)
on the right side of the left div: a div with contentPlaceHolder (4)
What I would like to get is: if i make some site that uses my master page and place a panel in the contentPlaceHolder that has width 800px, I would like my site to adjust to it - top, middle and bottom divs to have their width of 1000px (200 + 800). I also wouldn't like (and I have a huge problem with that) the (4) to move down if I resize (shrink) the browser window - I would like all the divs to be blocked.
This is my master page html:
<div>
<div class="header">
</div>
<div>
<div class="links">
</div>
<div class="content">
</div>
</div>
<div class="footer">
</div>
</div>
What kind of CSS do I have to write to make this finally work?
Not sure if you have checked into this or not, but we use the YUI-Grids CSS Framework for our layouts. It keeps us from having to spend a lot of time on CSS, which we are not great at being developers.
There is even a grid builder which will let you graphically layout a page, and then copy and paste the required HTML to make it happen :)
To prevent floated divs from being "squeezed" out of the alignment you want, you usually use either width or min-width.
For example, in this code the div containing the links and content will never be smaller than 1000 pixels. If the screen is smaller than 1000 pixels, a scrollbar is displayed.
<div style="min-width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
You could also use width instead of min-width:
<div style="width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
The difference between the two is simple: if you specify min-width, the div CAN grow to be larger if it needs to. If you specify width, the div will be exactly the size you specified.
Be aware that min-width is not supported by IE6.
Here's a quick stab at specific CSS/Markup for this problem.
Markup:
<!-- Header, etc. -->
<div class="contentView">
<div class="links">
</div>
<div class="content">
</div>
</div>
<!-- Footer, etc. -->
CSS:
.contentView {
/* Causes absolutely positioned children to be positioned relative to this object */
position: relative;
}
.links {
position: absolute;
top: 0;
left: 0;
width: 200px;
}
.content {
padding-left: 200px;
}
You might want your footer to be "sticky." Check here for information on that: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
How appropriate this is depends on precisely what the design calls for. This makes the links section more of a floating box on the left than a column for example.
This ends up looking like this (.content is green, .links is red):