I'm relatively new to CSS, so please pardon me for the odd gaffe. I defined a footer to have absolute position, and it stays at the bottom for all all but one pages on my website.
...>The footer here behaves perfectly, i.e., it's position is glued to the bottom of the screen regardless of the content.
...>Whereas, the footer below behaves abnormally, it's position isn't glued to the bottom of the page.
I am using the same footer class on both the pages, so I'm not sure what's wrong here, mentioned below -
.shell3-Footer {
box-sizing: border-box;
padding: 0.9375rem;
border-top: 0.0625rem solid #dcdcdc;
overflow: hidden;
max-height:40px;
width:100%;
background-color:#f5f5f5;
position:absolute; }
Note that if I change the position to fixed, then the problem is only partially solved, as I need the footer to be seen only when we scroll to the bottom of the page. Also, when the position:fixed is used, I'm not able to view the down-arrow of the scroll bar - which is not desired behavior.
Additionally, there is a slight whitespace beneath the faulty footer which I corrected by adding bottom:0pxto it.
Can someone help why the same footer class would behave differently on two pages? Thoughts?
Try this:
body {
display: flex;
flex-direction: column;
height: 100vh;
}
/* Put this class on everything that is not the footer */
.content {
flex: 1 0 auto;
}
.shell3-Footer {
flex-shrink: 0; /* new stuff */
width:100%;
background-color:#f5f5f5;
box-sizing: border-box;
padding: 0.9375rem;
border-top: 0.0625rem solid #dcdcdc;
overflow: hidden;
}
Related
I am creating a website with Wordpress for my mother-in-law (that's for the girly design). Basically I am near completion, but I am way over my head with two issues in the CSS. These seem very basic issues even from my standpoint of view, but with hours and hours of tinkering I am fresh out of ideas and Google didn't help me this time. It's been a while since I have had to create or modify any CSS.
First problem:
I cannot get the horizontal menu to center. I have tried to remove the float:left, I have tried to replace it with float:none and I have changed the display: block and display:inline lines to inline-blocks but the menu stays in its position. Only difference I have managed to make is to move the whole menu to the top of the page and that's not desired. What could be the issue in this?
Second problem:
There seems to be padding (the white lines) at the top of the menu and at the bottom and top of the small menu (mobile). I have tracked down all the padding-lines in the CSS but none of them really make a difference, only one which removed the horizontal paddings and that's not desired.
I would be really glad if somebody spots where I have gone wrong!
The website is at http://janenlahwr.cluster020.hosting.ovh.net/
Thanks in advance!
Best regards,
Tero Korhonen
Lappeenranta, Finland
Hi Tero,
the first problem has really quick solution - CSS3 Flexbox. You can read about it on this w3schools site.
Remove unnecessary float: left and add display: flex and justify-content: center to .main-navigation ul. So it should looks like this:
.main-navigation ul {
margin: 0px 0 0 0;
padding: 0px 0;
padding-left: 0px;
list-style-type: none;
display: flex;
justify-content: center;
}
Second problem you can fix with setting div.site-logo max-height = height your logo (I see that is 200px). So in this case should looks like this:
.site-logo {
min-height: 70px;
padding: 0px;
float: left;
line-height: normal;
max-height: 200px;
}
Edit:
Sorry, I forgott check for lower resolutions. There is problem with overflow. You set in style.css:640 overflow: hidden and it works correctly since resolution is above 800px. If not then activates this rule:
#media only screen and (max-width: 800px) {
#main {
overflow: visible;
}
}
that overwrites previous correct rule for #main overflow: hidden. So you have two options: delete this rule for screens over 800px or change this property from visible to hidden.
I hope I helped you with your problems :) Good luck!
For the menu problem, change your CSS rules like this:
.main-navigation ul {
margin: 0px 0 0 0;
padding: 0px 0;
padding-left: 0px;
list-style-type: none;
/* remove float: left; */
text-align: center; /* added */
width: 100%; /* added */
}
.main-navigation ul li {
position: relative;
display: inline-block;
/* remove float: left; */
text-align: center; /* not necessary */
}
Jsfiddle to demonstrate my issue.
I have a SPA (Single Page Application).
In the appliation several dialogs can popup on the screen.
Every popup has it own width and height.
The title and content of the dialogs are added by angularJs
The problem i have here is the size of the dialog.
Currently all popups are made and added seperatly. I want to change this into one popup with variable content. The problem that comes with this is that the popup must wrap the contents width.
Example (as shown in the Jsfiddle)
<div class="dialog">
<div class="titlebar"></div>
<div class="content">
The content that is added has css that tells it has a width of 400px
This means the dialog needs to wrap to this 400px
</div>
</div>
How do i solve this by only using CSS?
Some examples of the variation of popups (although the width of both look the same, this is not the case)
Use display:table for the dialog.
Here is your Updated Fiddle.
For young browser you may use :
1) display:flex; property (includes centering) DEMO
.backdrop {
position: fixed;
top:0;
}
.backdrop {
width: 100%;
height: 100%;
z-index: 100;
background-color: rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
}
.dialog {
margin:auto;
position:relative;
}
2) max-content as value for width and not set any width to inner
content . (exept some padding to keep room for the close button) :
DEMO
Info on W3C about those new keywords value, soon avalaible i hope.
CSS updated
.dialog {
width: max-content;
z-index: 101;
margin: auto;
/* basic way t o center */
top:50%;
left:50%;
margin:-80px -150px;
}
.titlebar {
height: 50px;
line-height: 50px;
background-color: #000000;
border-radius: 10px 10px 0px 0px;
}
.title{
color:#FFFFFF;
font-size: x-large;
padding:0 50px 0 10px;
}
.close_button {
position: absolute;
right: 0px;
top: 0px;
line-height:30px;
padding: 5px;
margin: 5px;
border-radius: 10px;
background-color: #ffd549;
color: #000000;
}
.content {
background-color: #FFFFFF;
}
.content-width {
background-color:#FFF000;
}
or as already said , use the display: table, inline-table
Using display: inline-block; text-align: center;
Works in ie >= 8.
Fiddle.
I don't understand the problem.
If you want to center the content-width div element, simply add margin: auto;.
If you want the container to fit the WIDTH of its content, you must change the display property from block to something else, like inline-block or table (as suggested by #jacelysh).
What is it exactly that you are trying to do?
A div without a set width will take up the width of the parent.
try this.
.content {
background-color: #FFFFFF;
min-width: 100%;
}
.content-width {
width: 100%;
background-color:#FFF000;
}
http://jsfiddle.net/VQA4k/6/
Checking again now. You can just remove the width from those two classes and it will work.
This is what you want I think.
http://jsfiddle.net/VQA4k/16/
The site in question is 1000freewebsites.com. The specific pages I'm struggling with are:
1000freewebsites.com/signup.php
1000freewebsites.com/login.php
This site uses the skeleton framework and Ryan Fait's sticky footer. On these pages I have a div with the ID of #bluestripe that should fill the vertical space between the header and the footer.
There are three parent elements; #html, #body and .wrapper. All are set to height:100%; in the stylesheet. #bluestripe is also set to height:100% and min-height:100%. As I understand it, this should achieve the effect I desire. Do I have my theory wrong?
Using Chrome Inspector I find that the height attribute is crossed out for .wrapper. If my theory is correct, this explains why #bluestripe is not expanding to fill the vertical space.
I cannot find any element that over rides .wrapper's height setting. Can you see what I am missing?
Your CSS rule for .wrapper has 2 height declarations. Get rid of the one setting height to auto.
.wrapper {
min-height: 100%;
height: auto !important; /* <- Get rid of this one */
margin: 0 auto -40px;
height: 100%;
}
this is your css:
.wrapper {
min-height: 100%;
height: auto !important; //height here
margin: 0 auto -40px;
height: 100% ;//height again here
}
you are defining two times the height and as the first one got !important its overriding the second one
this cause another error, because the paddings and the other elements are pushing the .container div down, so if you change a few properties you can get rid of this behavior:
#bluestripe {
background: #0099cc;
width: 100%;
padding: 40px 0px 40px 0px;
border-top: 10px solid #666666;
/*height: 100%; drop this line*/
}
.wrapper {
background: #0099cc; /*add this line*/
min-height: 100%;
margin: 0 auto -40px;
height: auto; /*acording to ryanfaits's css this is what mades the footer stick to the botom*/
}
this will made the .bluestripe shrink again but as the .wrapper still has the same background color, it doesn´t matters
We've got a sticky footer that is working great in anything WebKit based but doesn't seem to work in Firefox (Or new versions of IE either).
There is extra space being generated below the footer of around 200px in height that is inheriting the background colour of body.
The extra space does not seem to be part of any div that we can find, including html, body, content, wrapper etc. etc. It also does not seem to be caused by any sort of padding or margins on any elements.
We've built it on Ryan Fait's CSS Sticky Footer method that uses a push div inside of the wrapper div, with a separate footer div.
You can check it out at redesign.treepuncher.com/freetrial/
Iframe at the bottom of your page and copyright is creating unnecessary space. You can stop iframe from being displayed if that does not affect your website's functionality.
Try this code:
.copy {
color: #FFFFFF;
float: right;
font-weight: 100 !important;
margin: 95px 15px 0 15px; //Fixes margin at the bottom of this div
}
iframe {
display: none; //Stops iframe from being displayed
}
The following css should make it sticky and remove unnecessary space at bottom
.footer {
background-color: #006837;
bottom: 0;
color: #FFFFFF;
font-family: "roboto",sans-serif;
font-size: 12px;
font-weight: 100;
height: 120px;
position: fixed;
width: 100%;
}
.wrapper {
height: auto !important;
margin: 0 auto;
min-height: 100%;
}
I have a need for my links and buttons to look the same, but I've been unable to vertically align the text within an "a" tag in the same manner as the "button" tag. It is important to note that the tags need to be able to handle multiple lines of text (so line-height will not work).
a,button {
display: inline-block;
-moz-box-sizing: border-box;
width: 150px;
height: 150px;
vertical-align: middle;
border: 1px solid #000;
text-align: center;
}
See the jsfiddle below:
http://jsfiddle.net/bZsaw/3/
As you can see, I can get it to work with a combination of a span tag inside and setting "display:table" to the "a" and setting "display:table-cell" and "vertical-align:middle" to the span, but that doesn't work in IE7.
a,button {
width: 150px;
height: 150px;
border: 1px solid #000;
text-align: center;
}
a {
display: table;
-moz-box-sizing: border-box;
}
a span, button span {
vertical-align: middle;
text-align: center;
}
a span {
display: table-cell;
}
Looking for a simple CSS only solution.
The only reliable way to I've found align text vertically and allow wrapping of the text if it gets too long is with a 2 container approach.
The outer container should have a line height of at least double that specified for the inner container. In your case, that means the following:
a {
width: 150px;
height: 150px;
border: 1px solid #000;
text-align: center;
line-height: 150px;
display: block;
}
a span {
display:inline;
display:inline-table;
display:inline-block;
vertical-align:middle;
line-height: 20px;
*margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");
}
Add float left on the a tag if you want everything inline. Here's the updated example with long text in the A tag too..
http://jsfiddle.net/bZsaw/13/
You can set the line height on the span to whatever you like and if it is less than half of the line height of the parent, it will center AND allow text wrapping if your text exceeds the parent container width. This works on all modern browsers as far as I know.
All answers are not updated,and all of them are basically hacks, you should use new CSS3 features, in this case flexbox
a,button {
-moz-box-sizing: border-box;
width: 150px;
height: 150px;
display:flex;/*CSS3*/
align-items:center;/*Vertical align*/
justify-content:center;/*horizontal align*/
border: 1px solid #000;
}
<span>Testing 1,2,3</span>
<button><span>Testing 1,2,3</span></button>
That should work for your problem, note that align-items and justify-content will behave the opposite if set flex-direction:vertical, default is flex-direction:row.
Feel free to use, all browsers support it caniuse.com/#search=flex
Also check out the free and excellent course flexbox.io/ he is the best teacher at this
Also check out css-grid, also new in CSS3
If your text won't be larger than the width of the box you could set the line-height equal to the height of the box.
line-height:150px;
The cleanest and most consistent way I found is this
display: grid;
place-items: center;
https://jsfiddle.net/j8bktum9/
Use line-height:150px; and display-inline:block;