I looked at the other questions to this topic but the answers doesn't help me.
It's a little bit hard to explain but i'll try. So I have a footer:
#fußzeile{
width: 100%;
background-color: #e9e8e5;
padding-top: 14px;
padding-bottom: 14px;
bottom: 0;
padding-left: 24px;
height: 36px;
text-align: center;
}
I tried overflow: hidden, height: 100% etc.
I used margin-top to push the wrapper down then it works but if I minimize the site the gap is back again.. Position: absolute/relative doesn't work also..
Try using the following in your css:
#fußzeile{
position: fixed;
bottom: 0px;
}
Try this:
#fußzeile{
display:block;
position:absolute;
left:0;
right:0;
bottom:0;
background-color: #e9e8e5;
padding-top: 14px;
padding-bottom: 14px;
padding-left: 24px;
height: 36px;
text-align: center;
}
Here is a working demo.
position: absolute;
width: 100%;
this corrected it for me with 2 added lines of code.
This happens when there is no content above the footer. You can try this Move the footer div outside any container (if it is contained in a container, make sure its a direct child to the html) and then make the POSITION : absolute;
Related
I am building a webshop with on the left side a sidebar with a sort of navbar in it.
But the background (color Brown) has to fill the whole left side, but if my page is longer it covers not the complete left side.
This is my CSS for the background:
.sidebar {
z-index: 10;
border-top: 2px #000000;
position: absolute;
float: left;
left: 0;
margin-top: -5%;
padding-bottom: -10px;
width: 15%;
min-height: 115%;
max-height: 200%;
background: #C6A970;
}
Does anyone have an idea how to cover the left side of my webpage?
Thanx in advance!
according to the informations you gave you probably search something like that:
Fiddle
Your provided css already shows that your code must be messy, using float and position absolute together is weird and your min-height and max-height are over 100%.
We could help a little better if you provide full code.
Please try this:
Use this css:
.sidebar {
z-index: 10;
border-top: 2px #000000;
position: absolute;
float: left;
left: 0;
bottom: 0;
margin-top: -5%;
padding-bottom: -10px;
width: 15%;
min-height: 100%;
background: #C6A970;
}
or refer to the jsfiddle link below:
https://jsfiddle.net/89f074ke/1/
Ok, so I asked this question last time, and for some odd reason it was closed due to it being "irrelevant." I don't see how this is "irrelevant" at all. I explained the problem thoroughly with high detail. So this is my second attempt.
The Problem: There is a big gap on the bottom portion of my website. There is absolutely nothing there, and I have no idea what is causing this problem.
Image: WITHOUT EXPLANATIONS
WITH EXPLANATIONS
You get what I'm trying to say? The big gap is what I want to remove. I want my content to end where it ends, but there's a big gap of absolutely nothing after it!
Website Fiddle: Click THIS FIDDLE
So if you scroll down, you can see the big gap of absolute nothingness, yes? That's what I want to fix. Please help me!
The top: -382px; is causing the space below your footer. Also why not use margin: 0 auto; to center the element. And lastly, there's so many tags that is UNCLOSED.
Change this:
#footer {
color: white;
text-align: center;
background-color: black;
top: -382px;
position: relative;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
width: auto;
height: auto;
padding: 20px;
margin: 0px;
font-family: Roboto;
z-index: -1; }
To this:
#footer {
color: white;
text-align: center;
background-color: black;
position: relative;
margin: 0 auto;
width: auto;
height: auto;
padding: 20px;
font-family: Roboto;
z-index: -1; }
Here's your fiddle
my client has added an image to their WordPress header. I am having difficulty (I'm still learning CSS) getting the image to align where we want it.
This is the site here
You can see the Options House graphic on the right. I want it to be to the right of the word "stocks" in the tagline. Help?
====Edits based upon suggestions below====
#Beardminator made a suggested answer, but this is what the site header looked like after including that code:
Relatively position that options_house div like so:
#options_house {
float: right;
position: relative;
top: 40px;
left: 52px;
}
And take off the overflow hidden from the header class.
Here is the 2 div which you should replace with this code:
.slogan {
color: #EBEBEB;
font-size: 17px;
left: 200px;
line-height: 25px;
position: absolute;
text-shadow: 0 2px 4px #0F243E;
top: 59px;
}
.logo_mmj, .logo_mmj:visited, .logo_mmj:hover, .logo_mmj:visited:hover {
background: url("../images/logo_marijuana.png") no-repeat scroll 0 0 transparent;
display: block;
float: right;
height: 95px;
position: absolute;
right: 0;
text-decoration: none;
top: 23px;
width: 392px;
}
You need to put the logo to the right, so the .logo_mmj should contain
right:0px;
Or if you use position:relative;
You can use like this:
.logo_mmj
{
position:relative;
float:right;
}
update:
The site you linked have very different logo that's why It only made it worse. You only need to adjust
.slogan left property. And add
to .logo_mmj div top:30px or much more.
I am trying to place a css element to the right side of the header but not sure exactly how to do it. I tried using:
position: Absolute; top: 20px; right 0px;
That would work but if you adjust the browser the text moves with it.
I created a JFiddle that you can find here:
http://jsfiddle.net/rKWXQ/
This way you can see what I am trying to do. I have a text inside a wrapped div element that says Call Now (555) 555-5555.
Here is the header element and inside of that I have a right_header element.
<div id="header">
<span class="right_header">Call Now (555) 555-5555</span>
</div>
Here is my Header CSS:
/* Header */
#header {margin: auto; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
.right_header{color: #fff; position: absolute; top: 70px; right: 0px}
Can someone please tell me the proper way to accomplish this please?
Note the left side will have a logo there that will not load in JFiddle!
Thanks!
You can easily just float it to the right, no need for relative or absolute positioning.
.right_header {
color: #fff;
float: right;
}
Updated jsFiddle - might need to add some padding/margins - like this.
Two more ways to do it:
Using margins on the element you want to position to the right of its parent.
.element {
margin-right: 0px;
margin-left: auto;
}
Using flexbox on the parent element:
.parent {
display: flex;
justify-content: right;
}
As JoshC mentioned, using float is one option. I think your situation suggests another solution, though.
You need to set position: relative on your #header element in order for the position: absolute on your #right_header to take effect. once you set that, you are free to position #right_header however you want relative to #header
You can do this way also if you want to do with position, Try this please
#header {margin: auto; position:relative; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
.right_header{color: #fff; position: absolute; top: 0px; right: 0px}
The answer using floats from JoshC will work fine, however, I think there is a reason this is not working.
The reason your code does not work, is that the absolute position is relative to the which has dimensions of 0x0.
The '' should be absolutely position in order for this code to work.
#header {margin: auto; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
change it to...
#header {margin: auto; position: absolute; left: 0px; right: 0px; top 0px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
<div><button>Continue</button></div>
to make button on the right of div
<style>
button {
display:block;
margin-left:auto;
}
</style>
Click here for visual
As you can see from the picture, my parent container is not expanding to fit my child container. The page container (#contain) actually stops at the bottom left hand corner of the kitchen photograph. The child container (#zone2) is clearly overflowing outside its parent container (#contain). I would like to be able to have (#contain) expand automatically to fit (#zone2). The CSS is:
#contain {
position: relative;
width: 100%;
margin: 0 px;
background: #E3DCCC;
z-index: 0;
}
#zone1 {
width: 100%;
height: 850px;
background: url(http://waly1039.com/sites/default/files/k4.jpg) no-repeat center top;
position: absolute;
z-index: -1;
}
#head {
position: absolute;
top: 20px;
width: 100%;
height: 330px;
}
#head img {
max-width: auto;
height: auto;
}
#zone2 {
position: relative;
overflow: hidden;
padding: 3px;
top: 360px;
float: right;
right: 15px;
width: 53%;
height: auto;
border: 4px solid #715E40;
background-color: white;
}
#zone2 img {
max-width:100%;
height: auto;
float:left;
margin: 5px;
}
#zone3 {
position: relative;
top: 710px;
left: 15px;
float: left;
height: 340px;
width: 38%;
border: 4px solid #715E40;
background-color: white;
}
This is a float issue. Try adding the traditional CSS clear fix to #zone2's container:
.container:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
Be sure to put this in the :after pseudo selector, otherwise it won't work for you. Floated elements exist outside of normal document flow, which is why the container isn't expanding to contain them. The clear fix forces the floats to be cleared, which will cause the container to expand around the bottom of this element.
I tested adding more images to #zone2 and #contain expands vertically. Somehow you've got an element(s) in #zone2 with padding or margins that aren't being added to the parent's total height.
If you want a quick fix in order to move on then add margin-bottom: 30px; to #zone2.
I've duplicated your problem and was able to resolve it with this: You might want to try it. It's looks a bit odd so make a class for it if you like. I'm more concern with where it is placed.
Just beneath lines of your code, add my third line. Just that and you are done. Note, it more about positioning.
<div id="zone3"></div>
<div id="zoneclear"></div>
<br style="clear:both; float:none; display:block; height:1px;" />
Just add the third line.
and just modify one of your styles:
#zoneclear {
clear: both;
float:none;
display:block;
height: 30px;
position: relative;
}
[EDIT]
The codes have a serious bug in firefox which is not present in Google Chrome (that I tested in earlier due to your relative positioning. So I've modified the #zoneclear style to fix that. You might have to test if the other browsers like this hack.
I hope it helps you