My website
style css can be found here
I'm looking at my website on firefox, and I notice that the site is not stretching to the full width. You can tell by maximizing the page and then looking at the menu at the top right.
Also, there seems to be a horizontal scroll bar at all times which I don't need unless the site is showing the full content area in the middle.
Any suggestions on how I can fix?
To get rid of the horizontal scroll bar, try the following:
On DIV #master_wrapper remove:
float:left;
width:100%;
And add
overflow:hidden;
margin:0 auto;
On DIV #outer_wrapper remove:
float:left;
width:100%;
And add
overflow:hidden;
The site seems to go full width on Chrome ok.
Related
I have at the top of my page a div dedicated as a top bar. I want the position to be fixed so that it stays in the same place when scrolling. BUT.. once I apply the fixed positioning, all of the content moves up by about 30px (the size of the bar) and sits behind the bar making the header appear smaller in height than what it should be.
Once the css for position:fixed is removed from #topbar the content moves down to it's desired place
code via codepen: http://codepen.io/Hafkamp/pen/jabmE
css
#topbar{position:fixed}
To the #topbar, add CSS:
#topbar{
top:0;
}
Also, to the #header add:
#header{
margin-top:30px;
}
This way, your #topbar will stick to the top of the page and the following html will be pushed down by 30px(the height of the #topbar)
Just give the margib top to the header of 30 px
Im working on a website template and i want to make photo on the top.
Well I used the position absolute then I set top to -50px and left to -50px.
It work perfectly but I have one issue the scroll bar appear on bottom.
This is the css for the div :
#moon {
background-image:url('img/moon.png');
width:289px;
height:289px;
position:absolute;
top:-150px;
left:-160px;
overflow:hidden;
}
Give the body overflow-x: hidden
Also notice that on small screens there will be no horizontal scrollbar(!), unless you'll handle it specifically with responsive CSS.
I have some text that I display in a div with the following CSS:
.fixed-box {
position:fixed;
top:10px;
width: 270px;
}
This is so that when I scroll it always shows on the top of the screen. However when there is a lot of text the div gets cut off, because the position:fixed prevents it from scrolling down with the page it's on.
I was going to switch to an iframe, but is this really the best way to go?
Add overflow:auto; and set height property either to 100% or manually.
Here is code example http://jsfiddle.net/7ZVb8/
I have a fluid width site with a logo centered in the header area. The logo stays in the center regardless of the window size. Works in all browsers except ie9. In ie9 it is stuck on the right. If I could get it stuck on the left that would be an ok compromise but the right will not do. My best guess is that ie9 does not support the css code:
.logo {
width:100%;
position:relative;
}
.logo img {
margin-left:auto;
margin-right:auto;
display:block;
}
Here is the website http://www.cyberdefenselabs.org/
Anyone know a workaround for ie9 that will not affect other browsers or involve drastic recode?
Your .social-header-wrap element contains floating elements that are not properly cleared. Add this style:
.social-header-wrap {overflow:hidden}
The person above is correct - you have floats that are not properly cleared.
But you should sort out your layout before making style changes as you have the same main menu 3 times but with 1 of them hidden and 1 (the first one) with white on white links.
Simply removing the first main menu (the div with the class "social-header-wrap") also solves the problem.
When using
margin:auto;
you should say
margin:0 auto;
Get rid of margin-left and -right and change to margin:0 auto;
Also the containing element needs to be text-align:center which you undo by putting text-align:left in the element you are centering.
I am designing a responsive layout and have positioned a grungy png overlay on top of background using the following CSS:
#bg{
background:url(images/top1.png) no-repeat;
position:absolute;
width:1423px;
height:350px;
top:0;
left:50%;
margin-left: -711px;
}
This way, the image is always centered regardless of the page width. My problem occurs when the browser window is reduced to a width smaller than the background image for the #bg overlay. A horizontal scrollbar appears and the background extends far to the right (especially when the browser is very small).
You can see a DEMO of this here: http://pixelcakecreative.com/cimlife/responsive2/
As you can see a horizontal scrollbar appears, I would like browser window to shrink and not retain the full width of the image! Any ideas?
try this css code:
#bg{
background:url(images/top1.png) no-repeat center;
position:absolute;
width:100%;
height:350px;
top:0px;
left:0px;
}
Just had a quick look at your code. Check out your nav, this one produces the scrollbar.
Have a look on how to enable developer tools in your browser to inspect your page. It's a good way to check on your elements attributes.
Here's an good introduction for Chrome: Link
And for Safari: Link