I have some div containers which expand when the 'view recipe button is clicked, but all 3 across the bottom will hide underneath the footer container, i'm unsure which element to alter to have the expanded containers appear above and not underneath.
live url: http://bit.ly/1hQuzRI
I've attached the css of the elements which are appearing underneath the footer and some from the footer too. I can paste the html but there is loads which will end up showing up. maybe best to just view direct on site.
.box2-container-collapsed {
padding: 10px;
width: 270px;
height: auto;
background-color: #F5F2E9;
display: block;
float: left;
margin-right: 20px;
margin-top: 20px;
position: relative;
}
.box2-content {
margin-left: 0px;
font-size: 0.9em;
min-height: 200px;
display: none;
}
#footer {
background-color: #F3F3F3;
padding-top: 10px;
padding-bottom: 0px;
bottom: 0;
position: relative;
margin: 0 auto;
width: 100%;
}
Set the z-index in the footer to a negative number. Also try setting the z-index for the div that expands to a higher number.
Edit:
Your div with the class="content-container" has overflow:hidden. I removed that in my Chrome-Dev tools and the expanding div was visible after that. Side Note: It's difficult to see where the recipe ends and the footer begins. You may want to put a light border around the recipe div, too.
Related
My footer is having some odd issues when the screen resolution gets to a certain point - it responds and works with the screen size, but only the upper half of the footer has a background. I have bottom set to 0; and position set to absolute but it just isn't looking good. Any help would be appreciated.
Link to webpage (be sure to play with the responsiveness to see what I'm talking about): http://cardspoiler.com/Cardspoiler/MSoG/Navbar/Mage.html
HTML: https://github.com/Bonteqq/Cardspoiler/blob/gh-pages/Cardspoiler/MSoG/Navbar/Mage.html
CSS: https://github.com/Bonteqq/Cardspoiler/blob/gh-pages/Cardspoiler/Cardspoiler.css
The issue I am seeing is in the .left and .right classes. You have a transform: translateY(25%); attribute on them which is pushing them down past their natural positions. If you want your footer to sit at the bottom of the page and have the same look they do now change your CSS like so:
footer {
position: absolute;
bottom: 0;
width: 100%;
background-color: rgba(128,128,128,.3);
text-align: center;
border-top: 1px solid #232526;
}
.left, .right {
display: inline-block;
list-style-type: none;
width: auto;
font-size: 100%;
vertical-align: top;
bottom: 0;
margin-bottom: 0;
padding-bottom: 10px;
}
.right li {
text-align: left;
}
Basically I just removed all of the translate properties from those divs removed the margin-bottom from the uls and adding some padding-bottom to them. With the max-height removed from the footer tag the padding gives some space from the bottom of the page and expands the footer background so it doesn't leave a gap at the bottom.
I've created a navigation list with plain and simple HTML and some CSS. It should be on the right side of the page and shouldn't move neither if there is a lot of content on the page nor if the user scrolls down.
After I added some sample text to my website I recognized that the navigation element is more in the left side. Why is this happening and how can I fix this?
This is the first minimal example with just some text:
https://jsfiddle.net/sck6nL6w/2/
And a snippet with some more text where the navigation list is more on the left side than in the first example:
https://jsfiddle.net/7Lsew6gg/3/
Note: Both have the same CSS styles defined:
ul {
list-style-type: none;
padding: 0;
width: 200px;
float: right;
margin: 0 5em 0 0;
right: 0%;
top: 5%;
position: fixed;
}
li a {
display: block;
padding: 8px 16px;
text-decoration: none;
}
.navigation div {
margin-left: 60px;
}
#content div {
width: 65% !important;
}
Edit:
As #Autista_z mentioned the navigation bar gets moved when there is a scrollbar but I don't want to always show a scrollbar. Isn't there a better way to fix this?
as said by #Autista_z it's just because of scrollbar.
`https://jsfiddle.net/sck6nL6w/4/'
check this updates fiddle.
it's not fix but i want to show you how it's not an issue at all.
all i did is added this line of code
body {
overflow: scroll;
}
I'm currently having a problem with a website's footer.
When working on it at 100% size (normal size) the footer is nicely aligned. However, when I resize it it goes totally out of alignment and sits to the left, it needs to stay centred.
Screen shot:
Relevant CSS:
/* Dark blue area above the main part of the footer, stays aligned */
#footerUpper {
clear: left;
width: 100%;
vertical-align: top;
background-color: #252B76;
text-align: center;
color: #FFFFFF;
margin-top: 30px;
/* padding: 5px;*/
}
#footerUpper ul {
padding: 0;
margin: 25px 0px;
list-style: none;
}
#footerUpper li {
display: inline;
padding: 0 52px;
font-size: 14px;
font-weight: bold;
}
#footerUpper li a {
text-decoration: none;
color: #FFFFFF;
}
/* Main part of the footer */
#footer {
float: left;
width: 100%;
color: #252B76;
background-color: #89B0F1;
padding: 5px;
}
/* Table within the footer */
#footerTable {
width: 980px;
margin-left: 150px;
}
Thanks.
Without seeing more of the code, or a working example of it it's difficult to get too much of an idea about what's going wrong.
But I think a solution might be to have a static width on the inner-content, so for example the content that is mis-aligning itself, which I think is your "footerTable" - apply "margin:0 auto" to it to centre align it, this is assuming it's parent is 100% width, which I believe it is. Also, remove any other margin rules that apply to it.
It's because you're floating the footer to the left, and then there's no container of the footer which is centrally aligned. You can either:
Remove float: left and instead do a margin-left: auto; and margin-right: auto;
Make a container for your footer (or preferably your entire layout if it's all to be centrally aligned) and align the container to the center using margin-left: auto; and margin-right: auto;
There are of course other ways to centrally align block elements, but these are the most effective and recommended.
Since you have no reason to be floating the footer (so you say):
Remove the following styles:
float: left;
width: 100%;
Then, to make sure the table is centered, add this style:
text-align:center;
And you should find the footer stretches to the page width, no matter what zoom.
Live site.
Toward the bottom of the page "Parlour Policies" is floating in the middle of the page, though it should be styled according to this:
.content {
height: 100%;
padding-bottom: 40px;
padding-left: 20px;
width: 600px;
}
Any ideas what's causing the location shift? I didn't see anything in Firebug, and the few validation errors(which I'm working to fix right now) all pertain the WP generated header and don't negatively effect any of the other <div class="content"> on different pages.
Just add overflow: hidden to .content - it will clear your floats
.content {
height: 100%;
padding-bottom: 40px;
padding-left: 20px;
overflow: hidden; /* this */
width: 600px;
}
I admit, I'm not that good at CSS. Must be my lack of design skills.
So I am trying to accomplish four small tasks.
Move the time box (i.e '01:04' and '12:13') so it floats to the right top edge of the image?
Move the description of the workout to display to the right of the image beneath the time box and the routineID?
Allow the bottom border of class 'routine' to always be right beneath the image just like it is to the top of the image.
keep class 'routine' the same size even if more text in description is added. I want every 'routine' to have the same width and height dimensions.
I have everything layed out here: http://jsfiddle.net/n2learning/xMsrN/
Sorry to be that annoying guy with four questions in one question. Any help is appreciated!
Here is an updated jsfiddle link: http://jsfiddle.net/n2learning/xMsrN/22/
Follow up questions and comments -
The 'workout description' is still jacked up. Trying to get this to display beneath the top row, which includes the 'time' and 'ID'. The top row will also (eventually) include small image symbols.
I just noticed that the image sizes are different. I tried modifying '.routineImage' to give it a width and height property, but doing that screwed things up. How/where do I standardize the size of each image? (the images are coming from youtube and other video sources)
<ul id="routinefilter">
<li class='routine' data-id="15">
<div class='routineImage'><img src=http://img.youtube.com/vi/UheCchftswc/2.jpg></div>
<div class="routineTimeID"> <!-- added wrapper to keep it a single row -->
<div class='routineID'>16</div>
<div class='routineTime'>01:04</div>
</div>
<div class='routineDesc'>Use lighter weights on a barbell due to higher counts</div>
</li>
</ul>
CSS
#routineframe {
height: 400px;
border: dashed;
font-family: Arial,helvetica,sans-serif;
cursor: pointer;
width: 60%;
overflow: auto;
}
#routinefilter {
list-style: none;
clear: both; /*keeps each <ul> seperate*/
}
.routine{
background: #F4F4F4;
color: #41383C;
font-size: 18px;
border:2px solid #666;
margin:5px;
padding:5px;
width: 95%;
overflow: hidden; /*allows this to contain the floats*/
}
.routine .routineImage{
position: relative;
float: left;
display: inline;
margin-left: auto;
margin-right: auto;
}
.routine .routineTime{
position: relative;
top: 0;
float: left; /*this was floated the wrong way*/
margin-left: auto;
margin-right: 3px;
border: 1px solid #666;
background: white;
color: navy;
}
.routineTimeID { /*class added to keep the description from being in between the two elements*/
width:140px;
float: left;
}
.routine .routineID{
top: 0;
float: right;
margin-left: auto;
margin-right: auto;
border: 1px solid #666;
background: white;
}
.routine .routineDesc{
top: 0;
margin-left: auto;
margin-right: auto;
font-size: 16px;
}
I tried to notate all the changes I made and why. I think i got all of them...
For the last question, though, you can't do this with CSS. As I understand it, you want the text size to automatically shrink if more text is added? That will have to be done with JavaScript, solution here