This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
I am looking how to overlay any Image in CSS to show as Panorama. I cannot find the right logic to build it. Maybe by hiding the Heights but this way did not help me.
Solved.. One more Idea brought me to clear my Problem.. Anyway if somebody needs it here is the Solution
<div style="position: relative; height:100px; overflow:hidden">
<img src="photo.jpg" style="margin-top:-50px;" />
</div>
Just set the height of DIV Tag and correct the image position with margin-top.
If anybody has another way please share. Thanks
Thanks for others who replied me.
An example for any size of image would be the following CSS:
div{
overflow: hidden;
padding-bottom: 56.25%;
padding-bottom: calc(100%*9/16);
position: relative;
}
div img {
top: 0;
bottom: 0;
position: absolute;
width: 100%;
margin: auto;
}
You can see an example in http://jsfiddle.net/poselab/9vWU8/4/
Related
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
Here is the site i am building from scratch. Suddenly at one point browser scroll bar disappears. How to fix it??
MY WEBSITE
Use (ctrl + (+)) OR (ctrl + (-)) to zoom in or zoom out the website.
The problem you are having is that you have a lot of things that are position: fixed;
If you are doing this from scratch... I suggest you start over. I built THIS in jsfiddle in 3 minutes. This is how you would build a site like this now days. This is starting mobile first as well... so with some media queries and a responsive slider, you should have a much more solid foundation. I hope it is helpful. Fixed positioning pulls the content out of flow and then the browser doesn't see how "long" it is, and therefore removes the need for scrolling. As you using dream weaver or something? If so, I can see how this happened. You should probably go with an html 5 doctype as well. Take a deep breath and rethink this.
HTML
<header class="global-header">
<div class="inner-w">
HEADER
</div> <!-- .inner-w -->
</header>
<section class="main-content">
<div class="inner-w">
<div class="block">block</div>
<div class="block">block</div>
<div class="block">block</div>
</div> <!-- .inner-w -->
</section> <!-- .main-content -->
CSS
html, body {
margin: 0;
padding: 0;
}
.global-header {
width: 100%;
float left;
min-height: 150px;
margin-top: 20px;
margin-bottom: 20px;
background-color: lightblue;
}
.main-content {
width: 100%;
float: left;
}
.inner-w {
margin: 0 auto;
max-width: 900px;
}
.block {
width: 100%;
float: left;
background-color: #f06;
min-height: 200px;
margin-bottom: 20px;
}
Don't Use position: fixed on everything. It takes them out of the flow of document. Use position: fixed for top blue banner if you want. But for rest, remove it. This will set it to position: static (default) which will solve the scroll problem
This is extremely wrong way to post a question.
But, I firebugged your site and found out that every thing has fixed position, that is the reason you don't have the scrollbar. use relative position
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
I have tried looking at similar questions, but I can't seem to find a solution. I'd appreciate it if someone could take a look here and see why the sidebar is not extending to the bottom of the content div: http://robert.io/posts/1.html
I definitely don't want to use Javascript for this. I appreciate the help!
The quick fix is to add these:
body { background-color: #2C3B63; }
#content { background-color: white; }
Make the following CSS changes:
<style type="text/css">
#page {
display: table;
height: 100%;
}
#sidebar, #content {
display: table-cell;
float: none;
clear: none;
}
#sidebar {
vertical-align: top;
}
</style>
Tested on Chrome 26 (OS X)
You can fix this by changing one line of code in your CSS: position: relative
#sidebar {
position: fixed;
}
But with how you have things setup, it causes your content to sit behind your sidebar. So just adjust your margin-left for #content. I plaid around with it, and looked about right around 325 (if I remember correctly).
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
There's a ton of questions about 100% height elements. There's also a ton of questions about how to keep footers down. Well, this is yet another one...
I've been building a site and I have problems with positioning my footer and having 100% height elements on the page. My page looks currently like this.
I've tried almost everything I could possibly have found but nothing seems to work. If you look at the CSS code, do you find something that breaks the footer positioning and the height settings?
Check out The css sticky footer
You want your HTML To resemble this:
<div id="wrap">
<div id="main">
</div>
</div>
<div id="footer">
</div>
So, in your example (your website) you would want the footer to be outside of the container. From here you can simply check the CSS on the link provided above and your footer will stick to the bottom of the page while your DIV expands full height.
#contentWrapper{
padding: 0;
margin-left: 230px;
height: 100%;
background-color: #FFFFFF;
overflow: auto; /*I added this*/
}
#grass {
background: url("../images/layout/grass.png") repeat-x;
width: 100%;
bottom: 59px;
height: 248px;
position: fixed; /*Change absolute to fiexed*/
}
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
I have created a web site that can be seen here. Can anyone tell me why the text goes below the "container" div and "footer" div only on this page.
Any help would be appreciated. It is probably something simple I am missing, just can't work it out.
Simple fix. Change this:
#about {
clear: both;
position: relative;
top: 100px;
}
to this:
#about {
clear: both;
position: relative;
padding-top: 100px;
}
The #about has a position: relative and a top: 100px. Please remove the top 100px.
Before the #about you should put a clear div. Which means nothing more than a DIV.
<div class="clear"></div>
With the CSS
.clear { clear : both; }
Now you should be fine!
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
I am working on my portfolio: www.bbellmedia.com/mywork
I want the text 'Bryan Bell' to be centered how it is, but also be fixed when a user scrolls.
What is the best way of achieving this?
Thank you very much!
#header {
position:fixed;
text-align:center;
width:100%;
}
if you want the image does not over your heading, use this
.header {
....
position: fixed;
top: 0px;
width: 100%;
background-color: black;
z-index: 300;
}
.app1{
margin-top: 184px;
}
Hey now used to this css *style-sheet*
.header to give position fixed and now give to left 0 right 0 top 0 and give z-index maximum
.header {
left: 0;
position: fixed;
right: 0;
text-align: center;
top: 0;
z-index: 999;
}