I have created http://amitchauhan.site88.net/EPC%20Website/Website%201/ as you can see on the home page the site fits perfectly without giving excess blank space on the right but on the rest of the pages i get excess space on the right. Can some one help me sort this problem as i dont think there is a problem in the css.
reolaces the existing CSS declarations for id address2 with this.
#address2 {
position: absolute;
/* width: 100%; */
height: 29px;
z-index: 3;
left: 21%;
top: 1526px;
}
The div with the id of address2 is the problem. If you remove the width: 100% it will fix this problem
You can fix this by adding html {overflow-x:hidden;} to you CSS.
This tells the browser to crop anything out of view that is out of the 100% width on the right or left.
Another option is to add html {width:100%;} to your CSS.
This tells the browser to move all elements into the 100% visible width. It would eliminate scrolling left or right, but may disposition elements if your site is not responsive.
Hope this helped!
Related
I added code to my css so my background would stop stretching, when content is on the page. However now my content is being cut off, and I think its because the footer is not staying at the bottom of the page. Its visible if the page loads a little slow, but once the content loads you can't see the footer anymore. Nor can you scroll down without changing the height. I've tried plugins, and additional code suggested on other post. None have helped. Is there a way I can keep my footer at the bottom, while keeping the code that keeps my background from stretching? edit I'm sorry left out the code that used to stop the stretching. It can be seen below. Also, an example of what is happening can be seen here.
#primary
{
position: absolute;
left: 0;
height: 100%;
background-size: cover;
background-attachment: fixed;
}
This is a screenshot of the original issue.. My content (the player) can be seen completely, but the background is stretched. By adding position: absolute;I got the background to load correctly, but now the content is cut off. A screenshot of results can be seen here for my mobile device, and Here for my desktop. As you can see, the player cuts off on mobile, and both don't show the footer. At first I thought the footer was loading. After changing the value of top, I can see the footer which seems to be behind the content. I changed it to top: 370, and I got this for on my mobile, and this on my desktop.. The social icons in the footer is there, but its loading behind the content, and in the middle of the page. It appears that is why my content is being cut off.
I'm not sure I entirely understand your question... but I think the issue with your CSS is the height: 100%;. Adding 100% height makes it 100% height of the screen - and because it doesn't start at the top of the page it extends down below the bottom of the visible area. If you add the CSS top: 0; then you'll see what I mean - it no longer goes below the bottom of the screen, however it now overlaps the header. To get around this, you can change the CSS to:
position: absolute;
left: 0;
height: calc(100% - 54px); /*Minus the height of the header*/
top: 54px; /*The height of the header*/
background-size: cover;
background-attachment: fixed;
I hope this helps, if not please explain the issue in more detail and I'll see if I can help!
After a few days of troubleshooting and searching the web, I found a solution for my problem. I added code to put the footer at the bottom of the page. The code left the footer stickied, instead of at the bottom of all the content. It also didn't change the cutting off of my content. So I knew it wasn't the footer.
The way I wanted the footer to be at the bottom of the content. So a fixed footer isn't what I needed, but I found out a pushing footer would do the trick. Apparently, when the its not a lot of content on the page, sometimes the footer will push up to where the content stops. So my next step was to find out exactly what was cutting the conter off.
It the container that was cutting off in the middle of the layout. #primary in the code the make background stop stretching was the wrong selector, so I changed it to body. I also added a code to make the height and width of the container 100%. Then BOOM it worked. Below is all the additional css I used to fixed the problem. Thank you to everybody who helped me.
body {
width:100%;
height:100%;}
body {
position: absolute;
background-size: cover;
background-attachment: fixed;}
This wordpress website http://www.sulu13.net/14 has a responsive logo and menu that I wanted centered in order to line up with the edges of the content below in the posts. So I added:
.tc-header .brand a { /* Logo */
position: relative;
left: 200px; }
.navbar .navbar-inner { /* Navbar */
position: relative;
top: 130px;
left: 380px; }
Upon adding this CSS, the screen gets a horizontal scroll bar and has white space (equal to the left: 380px) on the right side of the screen. Something tells me it has to do with the responsive menu button sharing the same classes, .navbar .navbar-inner as the non-responsive menu. I would change this, but my knowledge of PHP is limited so I wouldn't know where to start.
I've tried removing the JQuery menu itself, but this had no effect, (my guess is..) because I didn't actually remove the responsive menu button/menu.
Here's the main CSS file - http://www.sulu13.net/14/wp-content/themes/customizr/inc/css/green.css?ver=3.1.6
Any ideas would be appreciated, thanks in advance for your time.
Ian
width:100% (default width) + 380px (left value) = 100% + 380px
You would need to resize the navigation to compensate for the moving over if you want it to leave it the way it is, meaning something like width:calc(100% - 380px);
However, I'd recommend not using absolute position to be more responsive and not require the manipulation of values.
Remove the left:380px
Apply this:
#menu-my-menu {
float:right;
}
This approach also allows more list elements to be added and they will automatically be positioned correctly
Use this:
.navbar .navbar-inner { /* Navbar */
position: relative;
top: 130px;
}
So, remove the left:380px. I don't understand what you mean by centering the menu and aligning with the text below, as the container of the text is wider than the one of menu and logo together and if you align the menu with the post below it will not be centered anymore. But removing left property should give you what you want.
Thanks for the help guys!
I went back and gave it a closer look, turns out I was able to solve the issue with a wrapper and a few media queries for width adjustments.
On my Website Homepage I inserted a grey strip container containing social network links. I want it to go all the way to the edges of the page like my footer.
This is the code I used;
.outer {
float: left;
width: 100%;
height: 80px;
background-color: #f8f8f8;
margin-left: -178px;
padding-right: 349px;
position: relative;
}
I know it's an amateur attempt, can someone show me a better way to code this? At the moment when zooming out it detaches from the edges of the page.
Will need to see the html also
Maybe try taking away the margin if that div isn't contained by another one
I'm looking at your site, and I'm not so sure the problem is with the CSS that you've printed out for us.
Your social networks strip is inside a section tag with class ".wrapper" which is set to width 1640px, and the strip is adjusting to the width of that wrapper. Is there a reason you've set that ".wrapper" class so wide?
Your footer, on the other hand, is not inside that same "section.wrapper" element, so it is adjusting to the width of the browser.
I'm trying to place an img to the bottom of the outer div.
Sadly it is not working as the default styles from wordpress are making it impossible...
My Project
The img I'm talking about is the small image on the left next to the big main one...
I would appreciate any help as this is already driving me crazy for hours!
Any help is appreciated!
Thanks
edit:
Here's a picture of what it should look like later:
It would help if you posted a picture of what you want the end result to be, but to put an element at the bottom of a container the usual way is setting it's style to something like position: absolute; bottom: 0 you can put a small value in bottom: to offset it a bit to match, you can then use left or rightto set the offset with the other limits of the container.
Edit: I tried this code in the img tag with firebug, seemed to work like in your picture:
element.style {
bottom: 90px;
position: absolute;
right: 350px;
}
I'm working on a site that has a wrapper element, with a left and right sidebar, each floated within the wrapper. The left sidebar (which contains navigation) is clearing the right sidebar and pushing it to the bottom for some reason. I've tried fixing it in about 50 different ways. I originally thought changing the size and or margin would help. It didn't. I tried the 'display:inline' fix to no avail. I've tried a ton of other tweaks but I can not get it to work. You can view the site at www.ibgs2010.org and the css is www.ibgs2010.org/css/style.css (I'm trying to use a IE7 specific stylesheet to fix it). If anyone can help, I'd really appreciate it. I've burnt about 3 hours today just trying to fix this one little issue.
Looks like the problem is with the ajaxloader div - set its width to 697px (same as sidebar right) and that should fix your problem.
Try to remove the margins and paddings on your sidebar classes and have a inside wrapper with the margin and padding set to it. More failsafe this way so that margins don't increase the size of your div element. Browsers have a different way of rendering margins and paddings to elements.
Hope that helped you out.
Cheers
I think it's just that the floating content is being considered too wide to fit -- so, it's floating it down to where it will.
Instead of float, you might try position with left and right, respectively:
.content.wrapper {
position: relative; /* establish boundary for absolute positioning */
}
.sidebar.left {
position: absolute;
top: 0px;
left: 0px;
}
.sidebar.right {
position: absolute;
top: 0px;
right: 0px;
}
I propose you add the following:
#ajaxloader {
width: 737px;
float: left;
}
The width of 737px is derived from the 697px width plus the 40px left padding of of .sidebar.right
With this addition the IE7 and Firefox versions should look the same, give or take a pixel.
I include the yahoo reset css as the begining of every page (or css file). It really helps to level the playing field. Also with IE, always remember to specify width (even if it's 100%) and if your floating, make sure to display:inline.