I'm having issues with some padding/margin issues on a site. It's a WP site that I am building for a client - not my original code. I am using a child theme to customize styles.
My staging site is here http://7a9.007.myftpupload.com/
If you scroll to the bottom there is a white margin between the teal section and the gray/blue footer. Additionally there is excessive top padding on the footer that does not exist on the other pages (for example: http://7a9.007.myftpupload.com/services/)
I want both the white margin and the extra top padding on the footer area removed but checking in chrome developer mode shows nothing to target. What am I missing?
Remove the following: margin-bottom: -89px; and top: -149px; it's commented out below, but should give you an idea where to look.
style.css
.home #main-content.trans-header, .page #main-content.trans-header {
/* margin-bottom: -89px; */
}
layout.css
.home #main-content.trans-header, .page #main-content.trans-header, #archive #main-content.trans-header {
position: relative;
/* top: -149px; */
}
#header-wrap {
position: absolute;
background: #29333d;
width: 100%;
}
To reduce the white-space for the both pages, pull the footer up using negative top margin like this:
#footer-widgets {
margin-top: -100px;
}
And then fix the little bit of white-space between the blue tweets div and the footer on this(http://7a9.007.myftpupload.com/) page, left using the above code:
.vc_custom_1492563370829 {
margin-bottom: -50px !important; /*add this*/
border-bottom-width: 0px !important;
background-color: #1c89ab !important;
}
Related
Is there something wrong with my code that makes this green css div block not show up in the exact same place on each page?
On the index page it's perfect, right under the nav bar. But on the page "This" it's not in same place. The stripe also changes position with any additional content. Why is that if it's set to relative? Isn't it floating and other content shouldn't disrupt its postioning? I'm so confused. PLEASE take pity on me as I am not great at CSS as you will see from my code:
/* green stripe */
.stripe
{
padding: 0.25rem 9999rem;
background-color: #4ea647;
z-index: 889;
position: relative;
top: -1200px;
left: -500px;
height: 50px;
}
THIS IS THE SITE:
https://andrea-levin-7gzp.squarespace.com/
Currently, I am using a text widget with HTML and CSS to create my footer. For some reason, on a specific page on my website there is a huge white space above my footer. The space also increases as the resolution increases. It can mainly been seen starting with resolution widths 1440x900 and up. I am sure it has something to do with my footer but I am not sure what exactly.
Can be seen here: http://museiam.ca/vault/
Footer CSS:
.gbtr_dark_footer_wrapper .container_12 .grid_3 {
z-index:99999 !important;
background-color: #fff;
background:rgba(255,255,255);
background:rgba(255,255,255, 0.5);
position: fixed;
bottom: 0 !important;
left:0;
width: 100%;
}
Thanks for looking!
Your footer is fixed to the bottom of the window due to
.gbtr_dark_footer_wrapper .container_12 .grid_3 {
position: fixed;
bottom: 0 !important;
}
As your resolution increases, the content will fill up only the top of the page, and the footer will stay at the bottom, leaving a huge whitespace in between.
I want to implement a "center frame" like a narrow and tall page in the center of my webpage.
And I want to make sure it has 200 pixels of space both in left and right. The following css rule works for left, but right is nearly on the right of body.
div#centerframe
{
background:rgba(255, 255, 255, 0.85);
box-shadow:0em 0.5em 2em 0.3em;
margin-left: 200px;
margin-top: 200px; /* top works too */
margin-right: 200px;
float:left; /* because I want it to expand with its content */
padding-top: 90px;
padding-bottom: 90px;
padding-left: 90px;
padding-right: 90px;
}
I made a fiddle to show you the bad behaviour, but it behaves as I want in this fiddle :
http://jsfiddle.net/UMscz/
however, with the same dom, it doesn't work on my site.
the body rule is like this :
body
{
position:relative;
width:100%;
height:100%;
padding:0;
margin:0;
overflow:auto;
}
and my dom is like
<body>
<div id='centerframe'>
<div id='article_wrapper'>
</div>
</div>
</body>
So how can I make sure that '#centerframe' has a certain pixels of space in right and left ?
The reason I'm trying to do is I want to show fixed size ads on the page.
Thanks !
Edit :
And I'm sure that nothing in the content "pushes" it to stretch. I don't set any width rules in the content so that it resizes according to centerframe and its padding.
Edit 2:
I spotted the problem. But it is still strange. I had some elements that pushes its width, in index.php (inline style). But when I click to a link, and go to show_article.php, the width of the centerframe remains as in the index.php.
So when I removed the width rule in index.php, it also fixed the width in show_article.php, even though the width rule was only in index.php.
So, does the css rule remain when going to another page? It shouldn't, right ?
this will work :
div#centerframe
{
background:rgba(255, 255, 255, 0.85);
box-shadow:0em 0.5em 2em 0.3em;
margin-left: 200px;
margin-top: 200px; /* top works too */
margin-right: 200px;
padding-top: 90px;
padding-bottom: 90px;
padding-left: 90px;
padding-right: 90px;
max-width:100%;
}
(remove float left and add max-width)
you can also wrap your center div with 2 fixed size div.
I guess you're using a Framework like drupal or Joomla.
View source of show_article.php from your browser (ctrl+u), that must contain index.php header with your css rules
Have been trying to sort out a centering of the navigation bar, just above the banner (link). Ran through a few solutions on here, and I have played around with custom CSS to try certain variations, but still cant get what i am after. Put simply, i am just wanting to get the menu centered. I have read that it had to be fixed width, but then heard otherwise. Hopefully the solution is something i can get my head around.
Thanks
You need to remove some of css rules from your style sheet and add few - see below css to get desired layout.
CSS:
#header #navigation {
/*float: left;*/ /* remove this property*/
}
#header #navigation {
background: none repeat scroll 0 center transparent;
box-shadow: none;
clear: none;
/*float: right;*/ /* remove this property*/
/*width: auto;*/ /* remove this property*/
width: 285px; /* add width here to get the actual width of menu so we can make it center*/
}
See screen shot:
I have a problem of howto remove the white space caused on the bottom of the page - when i remove the gear image it works fine.
html, body{
height: 100%;
width: 100%;
font-size:10pt;
}
.footer_fg{
float: left;
position: relative;
width:455px;
height:358px;
background: url('/include/images/Final-Website2_11a.png') no-repeat 0 0;
top: -150px;
border:0;
}
this is the CSS for the site.
Using position: relative it is not the same as margin-top. position:relative first places the item on it's original position (and messures the size of the parent element with this position) and then just moves it. So there will always be white space where this item was before. If you just want to move it without leaving this white space you should think about using margin-top: -150px instead. As we don't see the rest of your code it is hard to tell if this would work for your site.