The panel height is fixed at 300px, the header and content might change but the footer should stay fixed at the buttom.
What is the best way to achieve this ?
Setting
.panel {
height : 250px;
}
.panel .panel-footer {
position : absolute;
bottom : 0;
}
Cause the footer to slightly slide outside the border of the panel and to lose width.
I'm trying to find a solution with as little fixed sizing as possible.
Bootply example here
Thanks.
I think this solution may help you
http://www.bootply.com/giovapanasiti/126477
Good day!
the panel slides out because it's wrapper has margin-bottom wich bottom: 0 does not account for.
A simple solution wold be to apply this css:
.panel {
height : 250px;
margin-bottom:0;
position: relative;
}
.panel .panel-footer {
position : absolute;
bottom : 0;
margin-bottom:1px;
width : 100%;
}
http://www.bootply.com/126692
Related
Design question here. How can I make the #main-wrapper slide over the #single-carousel on the following page: http://duijnisveld.wpengine.com/
Right now it moves up when scrolling, I need the carousel to stay put and make the main wrapper slide over it when scrolling down.
giving .header-foto-wrapper position: fixed and #main-wrapper position: relative gives unexpected behaviour for me, I'm clearly missing something important.
*note, in the url, the .header-foto-wrapper does not have the position fixed as it breaks the layout and it's a live site for the client to see.
Thanks!
You'll need to apply width. Things go a little wonky when a container calculates width once you pull it out of the content flow. A width:100% will fill the page width. You'll also want to move the content area down and apply a background color.
.header-foto-wrapper {
position: fixed;
width: 100%;
}
#main-wrapper {
position: relative;
top: 100%;
background: #fff;
}
By setting the position as absolute.
.wrapper {
position: absolute;
left: 100px;
top: 150px;
}
http://www.w3schools.com/cssref/pr_class_position.asp
I've just got started with Material Design Lite. I want to change the width of the drawer.
What I have tried is something along these lines:
.mdl-layout__drawer {
width: 25%;
}
This results in the drawer overlapping the content area.
How do I correct this issue?
The drawer is an absolute component that rest in it's parent container a defined left position. When you change it's width, you'll need to alter it's position too.
Here's the css only solution for a width of 500px -
.mdl-layout__drawer {
width: 500px;
left: -250px;
}
.mdl-layout__drawer.is-visible {
left: 0;
}
Here's a codepen example -http://codepen.io/mdlhut/pen/pJmjBe
I am developing a webpage for images on a carousel. How can I move an image down in a DIV, or even center it vertically?
Here is my CSS code:
.carousel .item {
height: 900px;
background-color: #777;
}
.carousel-inner > .item > img {
display: block;
margin-left: auto;
margin-right: auto
}
Here is a URL to the webpage in question to show you that the image is too high: http://www.canninginc.co.nz/canluciddream/screenshots.html
EDIT
Ok, I have edited the code by changing the:
margin-top: 50px;
I am still after the image to be lower in the div. I can increase the top margin, but this leaves a white background. What would be the best way to move the image a little bit lower?
First of all make the .item position relative and then
on css:
.carousel-inner > .item > img {
position:absolute;
top:25%;
left:25%;
}
This will center the image vertically
Give margin top of 130px to the image and it looks cool!
margin-top: 130px;
Put image inside the main body, set the main body to position: relative, then set the image to position: absolute; top: 0; left: 0;
If you can't put the image inside the main body, then add a negative margin-top to the main body.
Your problem is not the image being placed too high - it is fixed header. So set margin-top:50px instead of -80px for .myCarousel.
The reason the image is going behind the navigation bar at the top is because you have the navigation bar's position set to fixed. This removes it from the rest of the page for styling purposes, in that the other divs/elements do not recognize it when they position themselves. If you remove the position: fixed; css on that item, the other elements will position relative to that one. Another option would be to add enough of a top margin to the image element to push it down below the top bar by default, whichever you prefer.
I am working on Bootstrap theme where its responsive. I disable the responsiveness on a child theme by adding a code in functions.php. All works well , no problem.
Now the parent container, is now fixed:
HTML:
<div class="container">
CSS:
.container{width: 940px;}
But I would like the footer section to have sitewide background color. How do I able to do this?
I have tried setting different methods like width:auto, width: 200% ,but its not giving me the desired result.
Supposing this is the footer section:
<footer>
My footer
</footer>
My attempted CSS on a child theme(not working)
footer {
background: #CCCCCC;
width:100% !important;
position:absolute !important;
}
Also is this possible without setting too many !important on CSS property? Thanks.
If your footer is inside the div.container which has width:940px; then giving your footer 100% width will make it 940px wide.
You need to have the footer outside the container to give it 100% width of the body.
When you give 100% width, the element gets its container's width. So in your code, even with the important keyword, it'll get the container's width (because that what 100% is supposed to do).
Just take the footer outside of the container.
Then it'll work and you won't need this !important keyword.
As others have mentioned, removing the footer from the parent container of .container will allow the width of it to be the entire size of the viewport/document.
If you are unable to change this level of structure of the HTML due to your template, you can fake the width using pseudo-elements, like so:
footer {
position: relative;
background-color: lightblue; /* Match the color of the body background */
}
footer::before, footer::after {
content:"";
position: absolute;
top: 0;
bottom: 0;
width: 9999px;
/* some huge width */
background-color: inherit;
}
footer::before {
right: 100%;
}
footer::after {
left: 100%;
}
See jsFiddle.
Taken from CSS Tricks: Full Browser Width Bars
Is there anyway to make a a child element 100% width of the screen while it's parent is only 50%?
For example, I need to make the black footer for this site extend the full width of the screen while maintaining the integrity of the rest of the site. msdnw.com/
I created my custom div of #blackback and have tried various ways to make it work and just can't. Any ideas? P.S. Yes I've already tried placing the div below the footer code as apposed to wrapping the footer. But perhaps the code I was using was not working how I needed.
Thanks for any help :)
Update your #blackback css to:
#blackback {
width: 100%;
height: 300px;
background-color: #000;
position: absolute;
left: 0;
}
should do it.
You want to go and use Absolute positioning:
.child {
left: 0;
right: 0;
position: absolute;
}
hope that helps