I have a problem that I just can't wrap my head around, it might be because that I'm tired. I'm using Ryan's Fait sticky footer which I'm sure the most of you are familiar with. I use it regularly and never had any problems with it until now. The design that I'm working has a footer with several inner child elements.
One of the elements .newsletter is using padding or margins to make a wide gap so that a background image can be placed on the body. This is causing a overflow even when entering the correct height. Deleting the padding corrects the problem. I know that using overflow: hidden is an option but I'd rather find out the cause.
Screenshot with margins or padding set within the news letter element:
Screen without margins or padding set in the news letters:
Not working CSS:
body {
background: #212121;
color: #ddd;
padding: 0;
margin: 0;
font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-weight: normal;
font-style: normal;
line-height: 1;
position: relative;
cursor: default;
height: 100%;
}
.maincontainer {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -424px;
width: 100%;
}
.mainfooter, .push {
height: 424px;
width: 100%;
}
.newsletter {
padding: 1.875rem 0 1.875rem;
}
.newsletter-fix {
background: #000;
padding: 3rem 0 1rem;
color: #ddd;
}
Working CSS:
Simply changing the following values from those mentioned above to the following resolves the issue but I want the padding, or margin gap between the newsletter.
.maincontainer {
margin: 0 auto -394px;
}
.mainfooter, .push {
height: 394px;
}
.newsletter {
padding: 0;
}
What if you put background-color : black to your .mainfooter instead of putting the background-color to the different element inside your footer?
It would seem that I'm extremely tried and stupid! I thank everyone for taking the time to take a look but it seems its as simple as a user error.
The problem was because I was counting from the very first bit of colour, in this case background: #000 on the .newsletterfix and not taking into consideration of the invisible padding above it. Stupid, me.
Example:
Related
I am getting a horizontal scrollbar; I don't need to set overflow-x to hidden as only one page might really still need the scrollbar. the point is that I don't understand why the scrollbar appear.
html {
min-height: 100%;
margin-left: 0px;
margin-right: 0px;
padding: 0px;
font-size: 14px;
font-family: 'itcmd' !important;
}
body {
margin-bottom: 50px;
display: flex;
flex-direction: column;
background-color: #F3F3F3 !important;
background-repeat: no-repeat;
}
as you see in some whitespace in red recatangle appear though there is nothing to show
the only way to avoid the scrollbar is by setting margin-right=15 in the css for html
html {
min-height: 100%;
margin-left: 0px;
margin-right: 15px;
padding: 0px;
font-size: 14px;
font-family: 'itcmd' !important;
}
why am I getting the scrollbar? is there a way to setup my css correctly to utilize the full width while avoiding scrollbar unless I need to
Some of your content is taking more width than it should which is causing the scrollbar. Check if you have used negative margin. You can try adding overflow hidden on inner divs one by one using dev tools until you find the culprit.
Or else share the complete code.
Can you try to add margin and padding 0 to both html and body
html, body{margin:0;padding:0;}
I'm almost there with my CSS design, but I'm just facing a small problem with my implementation.
What I'm trying to do is this:
I want the search bar in between my two color background. The problem is when I increase / decrease my search bar is moving up or down but not following the line and I don't want this.
I was wondering if there is a was to cheat.
For now I will try to do this :
And then adding a second div at the bottom. It's the only solution I've found for now. But maybe if somebody has a better way with linear-gradient or something like that why not!
I leave a link here if you want to see :
jsFiddle: https://jsfiddle.net/yo7pzfda/
Try using a negative margin for your input box and putting it at the top of the content div. This will shift it up a few pixels into the above div and keep it there when you resize the screen.
snippet:
body {
background-color: gray;
margin: 0;
padding: 0;
}
input {
height: 30px;
width: 300px;
border-radius: 5px;
margin-top: -5%;
}
#content {
background-color: blue;
padding: 0;
margin: 0;
margin-top: 7%;
min-width: 100vh;
min-height: 100vh;
text-align: center;
font-weight: bold;
font-family: Arial, sans-serif;
}
<div id="content">
<input placeholder="Search...">
</div>
I'm trying to build a page where I have two sidebars both in opposite direction. I'm using a metronic admin theme purchased from evanto, I want it to be fixed even page is being scrolled and the page content to be below that sidebar. I've placed these two menu inside a div with class page-container in which I'm having another div for the page content named page-content-wrapper.
here is the link to my problem
I tried using the following css in editor.css:
body {
color: #333333;
font-family: "Open Sans", sans-serif;
padding: 0px !important;
margin: 0px !important;
font-size: 13px;
direction: ltr;
}
body {
background: #e9ecf3;
}
.page-header-fixed {
margin: 0px;
padding: 20px 20px 0 20px;
position: relative;
z-index: 2;
}
.page-container {
margin-top: 75px;
padding: 0px;
z-index: 2;
}
.page-content-wrapper {
z-index: 3;
}
I tried using absolute position but it becomes more messy as both the sidebars collapse. I tried putting z-index too but its not helping.
Content is also coming down the sidebar.
Please help.
if you want to fix the position of the element with respect to the window even when scrolling then use position: fixed; on that specific element.
My own page doesn't have a scroll bar, no matter what I do, minimize or zoom in/out. It just doesn't appear, I've tried FF, Chrome and IE: all no. Other internet pages are fine. Here is the body element and css:
<body>
<div class="container" id="page">
The CSS is like:
html, body
{
margin: 0;
padding: 0;
color: #555;
font: normal 10pt Arial,Helvetica,sans-serif;
background: #EFEFEF;
overflow: scroll;
}
#page
{
margin-top: 5px;
margin-bottom: 5px;
background: white;
border: 1px solid #C9E0ED;
}
PS: I'm using YII framework.
UPDATE:
IT seems YII has some default css settings, in screen.css the div container is mentioned three times as follows:
.container {width:1250px;margin:0 auto;}
.container:after
{content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}
.container {display:block;}
I changed overflow:hidden to overflow:scrollbut still didn't work.
In order to see a scroll you'll have to define a height and or width in which creates a scroll. Not being able to see if you have content or what your mark-up is like -- declaring at the HTML or body tag will do the trick.
html, body
{
margin: 0;
padding: 0;
color: #555;
font: normal 10pt Arial,Helvetica,sans-serif;
background: #EFEFEF;
overflow: scroll;
height: 1000px; // toggle
width: 100% // toggle
}
#Evelyn1986
Force some width and it'll come up.
Try width:805px;
overflow:auto;
Then just have some content, that's 'big'
please add height on body tag..and add content more than what value you are give on height property....
body
{
margin: 0;
padding: 0;
color: #555;
font: normal 10pt Arial,Helvetica,sans-serif;
background: #EFEFEF;
overflow: scroll;
height:100px;
}
Fiddle : http://jsfiddle.net/nikhilvkd/rVd4M/
Bear with me as I try to describe my problem.
I have auto-aligned the content of a web page so that it appears in the center using the following code:
/* Universal Rules -------------------------------------------------- */
body {
margin: 0;
padding: 0;
background: #fff;
color: #333;
/* font sizing in ems, baby. if you want to change anything, just change this.*/
font: 75%/1.5 Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.ahem, hr { display: none !important; }
img { border: none; }
form { margin: 0; }
.floatleft, .alignleft { float: left; margin: 0 1em 1em 0; }
.floatright, .alignright { float: right; margin: 0 0 1em 1em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.clearboth { clear: both; }
All of my content is also wrapped in a div called "page" that has the following parameters:
#page {
width: 960px;
margin: 0 auto;
}
I don't understand why then, when you open up the page in a browser window that is clearly wider then the 960px width of the content, does the scroll bar on the bottom appear (as if there is more content to be seen on the edges).
Here is the website so you can play with it and see what I'm talking about. I hope my question is clear. Please don't hesitate for clarification. I'm hoping to solve this without changing my code too much.
Thanks
In your table, you set a min-width of 180px for the 'contact'. To make room, the page gets pushed to the right. Remove that if you can to fix this.
btw, you put a div inside the h2 element. This is not allowed and is invalid.
Alternatively, you can add the css overflow: hidden ; to the first table inside the div with id header.
What is happening is that the "Contact" table cell is wider than the table and is expanding the width of the page.