I want my footer to always be on the bottom and move to adjust to the size of the content inside the page. Right now I have dynamic content that covers the footer because it's to much content.
How can I fix my CSS:
div#Footer {
width: 100%;
height: 80px;
padding: 1px;
-moz-border-radius: 35px;
border-radius: 35px;
background-color: Black;
color: #ffffff;
position: fixed;
bottom: 0;
text-align: center;
margin-left: auto;
margin-right: auto;
}
Its a little unclear what you want but this code has worked well for me.
Credit - http://css-tricks.com/snippets/css/fixed-footer/
#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
This is a simpler solution.
#footer {
bottom: 0%;
position: fixed;
}
You need to post more html/css to be positive of what is going on here, but it sounds like your footer is being covered by your content page. If this is the case then setting a z-index on the footer will probably sort the issue.
z-index: 1000;
This can also typically be sorted by making sure your footer appears at the end of your html, as elements declared later appear on top of previous ones.
Had a similar issue.
Set "position" to "relative". The position of the element can't change based on the page length if it's set to "fixed".
i think you actually need the align:joe; inside of a candice div to accurately place the element on the deez axis.
Related
I need a horizontal scrollbar to show on my website when I make the browser window smaller. When I put {overflow-x:auto;} I get a scrollbar instantly even when browser is maximized, and I get like 100 pixels of blank space of my body on the right side.
body {
padding: 0;
margin: 0;
}
.container {
font-size: 0;
height: 100%;
width: 100%;
position: fixed;
top: 0px;
bottom: 0;
overflow-y: scroll;
overflow-x: hidden;
}
Try to use this
body {
padding:0;
margin:0;
}
.container {
font-size: 0;
height: 100%;
width: 100%;
position: fixed;
top: 0px;
bottom: 0;
overflow-y:scroll;
margin-right: -10px;
overflow-x:hidden;
} `
If you still face any issue. Can you please share fiddle link where I can check and provide you more accurate solution.
If you want to show the scrollbars only when needed, then you need to use overflow:auto, for more reference please have look here.
The structure of the page is quite messy so I won't go into fixing the structure, but will provide the answer how I got the horizontal bar to show.
The problem is in the div#navbar child elements. And the way you are using margin and padding properties. For some information how to use them have look here.
The div#ctu element has the margin-left property active which expands the element outside its inherited sizes.
#ctu{
margin-left:20px --> padding-left:20px;
}
#ft{
position:absolute; ---> position:relative;
padding-left:10px --> padding-left:0px;
}
.container{
overflow-y: scroll; ---> overflow-y:auto;
overflow-x: hidden !important; overflow-y:auto;
//OR
overflow:auto;
}
I have been trying to edit my header in Joomla. I have added following class to my template to round the corners and add the background:
.holola {
background: #FFF!important;
border-top-left-radius: 15px;
border-top-right-radius: 15px; }
How I can bring the logo up and make it look offside the header, like in attached image. I know how to make this happen using image in header, but I want to make it pure CSS to make the page look better in mobile version.
I have tried to add padding but I think it should be more complicated code to use?
Remove the padding you've added.
Then add some top margin to the .wrapper to push the main content down a bit.
body.boxed .wrapper {
margin: 60px auto 0 auto
}
And now add margin-top to the logo to move it up.
#header_logo {
margin-top: -60px
}
Try adding these also
#zo2-header{
margin-top: 50px;
}
#header_logo .logo_normal{
position: absolute;
top: -103px;
}
Remove your padding: 60px 0; from #zo2-header and replace with margin-top: 60px;.
Add
#header_logo {
position: relative;
top: -60px;
}
You would want to use position relative. See this jsfiddle for a simple example that should work for you situation.
#img {
background-color:red;
height: 80px;
width: 80px;
position:relative;
top: -40px;
}
Basically the important parts here is the combination of position: relative and top: -40px. This says position the element relative to the parent element and "anchor" its top -40 pixels from where it would normally be (top aligned with the header's top)
I currently have the following layout for my webpage:
<div class="content-body">
<div class="left-content-bar siteborder"></div>
<div class="inner-content">
... some content
</div>
<div class="right-content-bar siteborder"></div>
</div>
I have made a repeating background-image for left and right content bar. I want the bar to always go from the top of the page to the end of the page. My current problem is, that the bars only take as much space as the inner-content (the bars end at the bottom end of the content)
I found a solution, so that the bars will always go to the bottom, but this includes a min-height which I don't like, because it will have a lot of whitespace with a small screen resolution.
See this css for my current solution (The height will always be minimum 1000px with this, and this shouldn't be):
.content-body{
position:relative;
overflow:hidden;
min-height: 1000px;
height: auto !important;
height: 1000px;
}
.left-content-bar{
float:left;
position:relative;
width: 10px;
background-image: url(/default/images/content-left.png);
background-repeat:repeat-y;
margin:0px;
padding:0px;
padding-bottom: 32000px;
margin-bottom: -32000px;
}
.right-content-bar{
float:left;
position:relative;
width: 14px;
background-image: url(/default/images/content-right.png);
background-repeat:repeat-y;
margin:0px;
padding:0px;
padding-bottom: 32000px;
margin-bottom: -32000px;
}
.inner-content{
float:left;
width:956px;
position: relative;
height: auto;
min-height: 100% !important;
}
I hope that anyone can give me a better solution than my current
Have you tried to use inline-block instead of float ?
Using float was originally made to display text around a picture, not to display divs the way you like (move away from floats if you can).
Anyway, using display:inline-block; you can put the 3 divs beside each other, and have the left and right column reach the bottom.
.content-body{
height:1000px;
}
.siteborder{
height:100%;
width:100px;
display:inline-block;
vertical-align:top;
}
.inner-content{
width:150px;
display:inline-block;
vertical-align:top;
}
Live example : http://jsfiddle.net/8vQrU/
I would approach this a bit differently. With the same html as your sample, my css would look something like this:
.left-content-bar{
position:fixed;
width: 10px;
left: 0;
top: 0;
bottom: 0;
background:url(/default/images/content-left.png) repeat-y;
}
.right-content-bar{
position:fixed;
width: 10px;
top: 0;
right: 0;
bottom: 0;
background:url(/default/images/content-right.png) repeat-y;
}
.inner-content{
padding: 0 10px; /* same padding left and right as the width of the sidebars */
}
I positioned the sidebars fixed. By setting both the bottom and the top property to 0 they stretch up to the height of the viewport. By then adding some padding to the actual content wrapper I make sure the sidebars and the content don't overlap.
I set up a small example to demonstrate: http://jsfiddle.net/4Swvu/1/
Feel free to ask if you want some more explanation.
Edit:
If you want the sidebars on your content, rather then on you viewport, you could slightly adapt the code. The technique also works with position absolute so you could make your css look something like this:
.content-body {
position: relative;
width: 400px;
margin: 0 auto;
}
.left-content-bar{
position:absolute;
width: 10px;
left: 0;
top: 0;
bottom: 0;
background:#cff;
}
.right-content-bar{
position:absolute;
width: 10px;
top: 0;
right: 0;
bottom: 0;
background:#cff;
}
.inner-content{
padding: 0 10px; /* same padding left and right as the width of the sidebars */
}
and the fiddle: http://jsfiddle.net/4Swvu/5/
This site http://doomedfromdayonemerch.bigcartel.com/ is currently scrolling too much down the page, this is because the footer (hidden) is at the bottom of the page. Even when i move the footer with CSS the page still scrolls the same amount. would like it to ideally to only scroll down a little bit. I did have overflow-y:hidden on the body, and although this did work, it doesn't allow for smaller screens/zooming in, as you then cannot scroll at all. Any help would be great! :)
In your CSS code add
html{
height:100%
}
The problem isn't with footer.
The problem resides in your div id="navigation"
I did some questions related to sticking footer into bottom of page. Check them out, maybe will help you.
I know an answer has been selected but let me explain a little further. You have the navigation div positioned relative, instead of absolute. It looks like you were trying to use absolute positioning because I see z-index in the navigation css. To use absolute positioning the parent element needs to be set to position: relative; and the element you want to have absolute needs to be set to position: absolute;
add position relative to #wrap
#wrap {
width: 740px;
height: 700px;
margin: 0 auto;
padding: 5px;
text-align: left;
position: relative;
}
and change navigation to absolute
#navigation {
z-index: 99;
position: absolute;
top: 175px;
padding-top: 10px;
padding-right: 5px;
margin-right: 4px;
height: 442px;
background: rgba(228, 228, 228, 0);
clear: both;
border-bottom-right-radius: 10px;
right: 10px;
}
Basically I have a Picture in a div nested in 2 divs. I wanted to overlay a piece of tape onto it at the corner of the picture.
So I made a div for that piece of tape image and put it at the bottom of the document giving it the position of relative and giving it these attributes.
#tape
{
width: 100px;
height: 65px;
position:relative;
left: 25px;
top: -662px;
}
And here is the Picture's attributes:
#character-spotlight
{
margin-left:50px;
width:250px;
height:250px;
float:left;
z-index:1;
}
Bot of these Div's are nested into
#content
{
width:800px;
height:1360px;
background-image:url(Cork.Board.png);
background-size:100%;
float:left;
display:block;
}
Which is itself nested into
#container
{
width: 1024px;
height:1600px;
margin-left:auto;
margin-right:auto;
margin-top: 50px;
display:block;
}
Here is the webpage
www.workaholicsfans.com/characters-files/Adam-Demamp.html
It works fine in Chrome but not IE and Firefox.
Any help would be greatly appreciated
(There is no link in your post) I can hardly believe the situation you described and provided css could work. The fact that you have it working in Chrome is just pure luck i guess, are you might have been playing with the numbers to make it fit.
The solution is actualy rather simple.
<div class='picture-wrapper'>
<img class='picture' src='picture.../>
<img class='tape' src='tape... />
</div>
then in the css
.picture-wrapper {
position: relative; /* this now acts as the reference for position absolute of the children */
}
.tape {
display: block;
position: absolute; /* position according to its parent */
top: 0; /* top position */
left: 0; /* left position */
z-index: 5; /* bring to front */
}
That should do the trick.
edit:
i just saw you added the link. If you want the piece of tape to overflow the picture edges, the easy way would be to add some padding-top and padding-left to the wrapper. something like this:
padding: 8px 0 0 8px;
Or if you want it to be absolute positioned according to the page container:
#tape {
height: 65px;
left: 325px;
position: absolute;
top: 300px;
width: 100px;
}
(But I must admit that I like PeterVR's code better since this keeps things relative, which comes in handy if you position 'new' stuff above the #tape div).