On a webpage I have a wide image, which should take up the right 50% of the screen. It appears as I want it to, but it produces an unwanted horizontal scroll bar. I don't want the image to scale down, I want it to remain looking exactly as it does, but to not produce a horizontal scroll bar. How could I do this?
HTML:
<div class="image">
</div>
CSS:
.image {
position:absolute;
left:50%;
background-image: url('Images/banneriPhone.png');
width:774px;
height:759px;
}
EDIT: I had some suggestions that i remove the overflow option. This didn't work, so i changed the code around (put the image in the html) but this still didn't work. Here's the CSSDesk link:
http://cssdesk.com/mqZpC
Use this in your CSS to hide the scrollbar of the CSS class image:
.image {
position:absolute;
left:50%;
background-image: url('Images/banneriPhone.png');
width:774px;
height:759px;
overflow-x:hidden;
overflow-y:hidden;
}
overflow-x will hide the horizontal scrollbar
overflow-y will hide the vertical scrollbar
Edit: Here you can see some example of the overflow property: http://www.brunildo.org/test/Overflowxy2.html
To remove the scrollbar on the image, I did the following and it worked. Add the below to your class where the image is on CSS:
overflow:hidden;
Apply the following css rules on the element:
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
And set your margins:
margin:0;
The paddings can be left intact because of the box-sizing rules (the padding is not included in the width of the image, which is probably set to 100%).
Related
I had a footer on my site which stayed at the bottom of the visible screen at all times. I added the following piece of CSS to make the screen stay centered when the browser is resized:
CSS
position: absolute;
left: 50%;
transform: translateX(-50%);
min-width:600px;
And now the footer is no longer stuck to the bottom of visible screen. On pages with lots of content, the footer is at the very bottom of the page, but on pages with little content, it is just floating in the center of the page.
Here is the footer CSS:
Footer.css
#footer{
position:fixed;
bottom:0;
left:0;
right:0;
min-width:100%;
width:100%;
height:50px;
opacity:0.8;
}
And here is a before and after Image of what it did and now does look like:
Before & After
Can anyone help fix this?
Thanks!
The problem is caused by the translateX applied on the HTML tag, so try to remove that style from applying on the HTML tag.
In order t solve this try to add a wrapper for your content <div id="main"> and applying your style there #main{}.
Live example here:
https://jsfiddle.net/cwmz9r7u/1/
Generally how you have keep the footer at the bottom on the screen was good but if you move your content including the footer using translateX on HTML, your position is not kept any longer as your user case.
I try to make a responsive design but when I resizing its getting messy.. My css code is until line 15 the other is the menu css Click here for code
So my code is only:
html,body {
margin: 0;
height:100%;
}
main {
margin:0;
height: 85%;
}
body > footer {
overflow: hidden;
text-align:center;
background-color:#dedede
}
Here is the jsFiddle: http://jsfiddle.net/shaansingh/kac8p/6/. I cleaned up your footer code a little (you can leave that there though). I made the footer a class and wrapped it in a <div>. Then, I gave the footer a margin on the top. This makes it so the footer doesn't "mess up" when resized. Go ahead and look at the full size fiddle and resize your browser to see the result: http://jsfiddle.net/shaansingh/kac8p/6/embedded/result/
EDIT: I have a solution for what you want. This fiddle shows the footer all the way at the bottom of the screen, below the browser's scroll. I utilized things like width, height, and clear for this CSS. http://jsfiddle.net/shaansingh/kac8p/13/embedded/result/
I'm redesigning my website, and at the moment I'm just blacking out the layout. I have a class that centres everything:
.centre
{
position:absolute;
left:50%;
top:50%;
}
everything is then offset using a margin.
I have a wrapper that gives the min-height and min-width
#wrapper {
position:relative;
left:0px;
top:0px;
min-height:600px;
min-width:600px;
}
The min-width and min-height both do their job but for some reason after this wrapper is applied the website is no longer centered vertically.
You can see the website here: http://testerwebby.tumblr.com/
I'm wondering what's the cause of this, and what's the solution.
Thanks,
Dillon Brannick.
Your problem is that your page's body does not fill the whole browser window vertically. You can check this by using Firebug and hovering your body element - not the whole browser window will get a blue hue.
Try to fix this with the following CSS:
html, body
{
height: 100%;
}
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.
Go to unboundsonics.com to see it.
At the top of the header and bottom of the footer, you can see the diagonal pinstripes don't line up. Everything is contained in a <div> (<div id="wrap"> to be exact) tag whose margins are automatic horizontally and 15px vertically.
If I change the vertical margins to auto, this problem doesn't occur. Any tips or observations i'm overlooking?
Any help appreciated!
PS: I know my script & styles are a mess but it's a work in progress. I just need to have a rough version for a project due tomorrow.
You problem is that you set BG picture for BOTH html and Body, and the body is little smaller, thats why they don't line up.
As a quick fix you can set bg to apply only to HTML,
But a better would be to set margin for html and body to 0px, padding for html 0px, and set you padding for body, and apply a bg to body.
EDIT
Quickfix:
body,html {
margin:0;
padding:0;
color:#B8C2C9;
background-image:url('bgstripes.png');
background-repeat:repeat;
}
change to:
body,html {
margin:0;
padding:0;
color:#B8C2C9;
}
html {
background-image:url('bgstripes.png');
}
Also note, its not necessary to use background:repeat, as that's the default behaviour
EDIT2
Well I would personally do something like this:
body,html {
margin:0;
padding:0;
}
body{
background:url(bgstripes.png) #B8C2C9;
padding:15px 0 15px 0;
}
#wrap {
width:900px;
margin:0 auto;
background:#0D1325;
border:1px outset white;
}
Normally we would put a bg to the body, but instead of margins on the container we would better do padding to the parent. Because margins will not necessary pull the height of the container, especially if the parent doesn't have a padding or border. This you can notice in IE7, it would probably collapse the bottom margin.