Hey guys I'm building my first website and I cannot figure how to get rid of the extra space on the right which brings up the horizontal scrollbar. The site is http://qtsocial.com/accounts/login/ ... If you can look at the css and give me a clue I would really appreciate it. Thanks!
body {
background: url(http://qtsocial.com/static/images/body-bkg.png) repeat scroll;
margin: 0;
padding: 0;
}
.container {
margin: 0pt auto;
width: 100%;
}
#header {
background: url(http://qtsocial.com/static/images/hdr-bkg.png);
background-repeat: repeat-x;
height: 181px;
position: absolute;
z-index: 100;
top: 0px;
left: 0px;
width: 100%;
margin: 0;
padding: 0;
}
#logo {
background-image: url(http://qtsocial.com/static/images/QTlogo.png);
background-repeat: no-repeat;
height: 88px;
position: absolute;
top: 40px;
left: 25px;
width: 100%;
}
#navigation{
height:40px;
z-index: -1;
}
You have the DIV with id of logo set to 100% width (which is setting it to the page width) then you're indenting it by 25px. Change the width of #logo on line 25 of login.css to be the width of the background image you're using (299px).
Logo is too wide
Inside #logo Change width: 100%; to width: 299px; (the actual width of the image)
Your logo div is whats causing it.
It is 100% of the width, but this does not include the 25px of the left of it, thus it is overflowing 25px to the right of your window.
Change the width of the logo div to the width of your logo image, and it won't overflow to the right.
Related
I've designed a new email layout for my website. it consists of three parts, header,body and footer. so 3 divs. the header background is done with an img tag cause there won't be anything on top of it. the body is a repeating thin line, and the footer as you see will have background and 4 img buttons for social networks. so it has to be background image not img but it must have a height cause as I searched A LOT! you can't control a div height by background image. but the problem is as the height is fixed, the background image will resize but the div won't, so I get background color on the extra part of the div. here's the file . any help will be appreciated. or even if you got an easier solution that would much much more appreciated. I know the coding is dirty I don't have much experience in it. keep in mind it's for an email so no hard stuff that mail clients can't handle. :D
Update : Well I decided to go with bottom padding, it almost fixes my problem Thank you.
This Is The Working Code:
<html>
<head>
<title>MissLand</title>
<style type="text/css">
html, body{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
text-align: center;
}
#Container{
text-align: center;
height: 100vh;
width: 100vh;
position: relative;
display: inline-block;
}
#Header{
background: url("./h.jpg");
min-height: 208px;
position: absolute;
left: 0px;
top: 0px;
z-index: 2;
}
#Body{
background: url("./b.jpg");
max-width: 600px;
min-height: 50px;
width: 100%;
float: left;
clear: both;
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
z-index: 0;
}
#Footer{
background: url("./f.jpg");
min-height: 380px;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
}
#Header, #Footer{
background-repeat: no-repeat;
background-size: contain;
background-clip: border-box;
width: 100%;
float: left;
clear: both;
margin: 0;
}
</style>
</head>
<body>
<div id="Container">
<div id="Header"></div>
<div id="Body"></div>
<div id="Footer"></div>
</div>
</body>
</html>
i think you need to put the footer always in bottom position, bcause there's no content again, so that's why it makes extra space in bottom,
add this style on your footer :
position: absolute;
bottom: 0;
width: 100%;
I have a single div that's 100% of the width and height of the page.
I've set the background of the div to an animated gif and made the height of the background change with the div's height (which is 100% the height of the page). The background image repeats horizontally and is positioned at the bottom of the page.
HTML / CSS
Run this snippet in Chrome, make it full-screen and then resize the window until the line appears.
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
}
.bottomAnim {
border: none;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: #2851A6 url("http://i.stack.imgur.com/spmUM.gif") left repeat-x;
background-size: auto 65%;
background-position: bottom;
z-index: 1000;
}
<div class="bottomAnim"></div>
The problem is that a gray, horizontal thin line appears on top of the background image. The background of the page is the same color as the top of the image, so I don't know where the line is coming from. When I make the browser's (Google Chrome) height very short, the line disappears. This problem doesn't occur on Safari.
As can be seen in the screenshot above, the repeating background image is positioned at the bottom. There is are no vertical liens between every repeated image but there is one horizontal line that goes across all of them. I've checked the image and the line is not there, it is produced by the browser. How do I get rid of this line? I've looked at other posts on this but none of the fixes work.
Here's the background image:
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
}
.bottomAnim {
border: none;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: #2851A6 url("http://i.stack.imgur.com/spmUM.gif") left repeat-x;
background-size: auto;
background-position: bottom;
z-index: 1000;
}
<div class="bottomAnim"></div>
Use this
background-size: auto;
instead of
background-size: auto 65%;
#media workaround
This bug only appears to occur with larger viewport heights. Luckily it is not as critical to scale the image down after a certain height. With that in mind we can use #media queries to apply the background-size scaling only when the viewports height is under a certain size:
#media (max-height: 700px) {
.bottomAnim {
background-size: auto 65%;
}
}
Working Example
As a jsBin as well
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
}
.bottomAnim {
border: none;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: #2851A6 url("http://i.stack.imgur.com/spmUM.gif") left repeat-x;
background-position: bottom;
z-index: 1000;
}
#media (max-height: 700px) {
.bottomAnim {
background-size: auto 65%;
}
}
<div class="bottomAnim"></div>
I'm trying to work out how to work with img divs on a grid. The background image of this grid contains a border, when I try to inspect the element element, the img divs start from the absolute top-left hand corner instead of slightly away from on the actual checkerboard patterned image, which has a thick border around it (950 * 500 - 18 columns wide by 9 rows). Does anyone know How I could tackle this problem?
CSS
body
{
background: #000000 url('gfx/bg.png') 0 0 no-repeat;
position: absolute;
width: 1280px; height:720px;
margin: 0; padding: 0;
overflow: hidden;
font-family: tivo-normal;
text-align: center;
color: #FFFFFF;
}
#GameGrid
{
position: absolute;
/*width: 806px; height: 496px; top: 120px; left: 92px;*/
width: 950px;
height: 500px;
top: 50px;
left: 92px;
background: transparent url('gfx/Game_0003_GAMEGRID.png') center center no-repeat;
}
#GameGrid > div
{
/*width: 62px; height: 62px;*/
width: 52px; height: 52px;
margin: 0;
float: left;
}
#GameGrid > div > img
{
/*width: 62px; height: 62px;*/
width: 52px; height: 52px;
margin: 0;
}
If I calculate by the values you are given: 18 columns each 52px wide that makes it 936px and your GameGrid is 950px. So I am assuming the 14px are taken by the border i.e. 7px each side
So, you can just add a padding in GameGrid
{
position: absolute;
/*width: 806px; height: 496px; top: 120px; left: 92px;*/
width: 950px;
height: 500px;
top: 50px;
left: 92px;
background: transparent url('gfx/Game_0003_GAMEGRID.png') center center no-repeat;
padding:7px;
}
Set specific top,right,bottom,left paddings if they are required specifically.
you can add the cellpading="0" attribute to your tag. You can also add a CSS rule to prevent padding, something like:
#GameGrid td, #GameGrid th{
padding:0px;
position:relative;
}
and maybe add top:0px; to your #GameGrid > div > img. An example could help us to understand better your problem :-)
Resorted to modify the image file and removed the border around the grid. Created another div with an image of just the grid border and aligned it to the grid div.
My objective is to make a website for my portfolio.
I have a div for the menu that wanted to be on top of another div that works as a container for all of my images. The images have to fill 100% height of the browser.
The problem is, that I wanted my website to scroll horizontally and when I start to add content, as soon as the width goes over the 100% of the browser window the new image goes under the first image making it scroll horizontally.
What can I do to correct this?
CSS
body, html {
height: 100%;
}
#main {
width: 100%;
height: 100%;
background-color: #000;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
#menu {
width: 200px;
height: 500px;
background-color: #fff;
position: absolute;
top: 10px;
left: 10px;
overflow: scroll;
z-index: 2;
}
#img {
height: 100%;
float: left;
overflow: scroll;
}
Remove the width from your #main tag. As soon as an element hits that 100% it's going to move down to the next line.
I'm trying to make a sidebar and this is what I'm expecting:
Header fixed top and Footer fixed bottom ( I don't know if 'fixed' is the right term, but I want them not to overlap the sidebar container )
Scrollable sidebar-container
I tried to play with position of the div but it didn't work.
I also tried sticky footer's approach and It didn't work so well.
I tried googling my problem, but most answers are the whole layout of the website.
I need it working inside my sidebar.
Here's my: jsFiddle
The code is kinda long so I'm just gonna post the CSS:
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
}
#push, #footer {
height: 60px;
}
.container-fluid {
width: 100%;
height: 100%;
}
#content {
position: absolute;
width: 100%;
bottom: 60px;
top: 42px;
right: 0px;
left: 0px;
padding: 0px;
}
#sidebar {
position:absolute;
width:300px;
height:100%;
}
#sidebar .ul-menu {
margin:0px;
}
#sidenavbar .tabs-left>.nav-tabs>li>a{
margin: 0px;
min-width: 30px;
width: 70px;
-webkit-border-radius: 0px 0 0 0px;
-moz-border-radius: 0px 0 0 0px;
border-radius: 0px 0 0 0px;
border: 0px;
}
.sidebar-tab-content {
background: #FFF;
position: absolute;
height: 100%;
left: 94px;
width:100%;
}
#sidenavbar .tabs-left>.nav-tabs {
border: 0px;
}
#footer {
color: #FFF;
background-color: #666;
}
.side-header, .side-footer {
background: #AAF;
}
h2 {
margin: 0px;
}
Thanks for the ideas. I solve my problem just now by adding these css codes:
.side-header {
position: absolute;
top: 0px;
right: 0px;
left: 0px;
}
.side-container {
position: absolute;
bottom: 40px;
top: 40px;
overflow-y: auto;
}
.side-footer {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
}
Here's the JSFiddle: http://jsfiddle.net/geddemet/XCn7C/
This community is really helpful. Cheers!
I use this for my footer. it works for me, the header and footer stay in the same place and the footer will expand if the content with the scroll bar gets bigger. As for the box with the scroll bar, I believe you need to have something like overflow:hidden in the CSS for the box that you want to have a scroll bar on.
You can apply overflow: auto to your content div.
See this minimal example of how it would work.
Take a look at my sample
sample
It was not good when you set place the side bar and right content into position absolute. Your design should have to get you in trouble if right content is not predictable and make more custom on it.
.sidebar-tab-content {
background: #FFF;
width: 100%;
height: 500px; /*you could change it to 100% depend your need*/
}
Edited: Please look inside my jsfiddle sample code instead, the above proportion of CSS which I placed here was just small one of the changes
Your looking for position: fixed
FIDDLE Full screen Normal Fiddle
CSS:
.side-header{
background: #AAF;
position: fixed;
width: 100%;
}
.side-footer {
background: #AAF;
position:fixed;
bottom:60px;
width: 100%;
}
But you are going to have to play around with the width's because it's taking the container width div.