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
Related
I have a number of buttons in a div that refused to stay in a fixed position when the div scrolls, and I cannot see why. I have done this elsewhere so I should be able to do it, but I'm going around in circles today.
I have isolated enough of the application to reproduce it easily. It places a div in the centre of the screen and puts a small quit button in the top-right. I want the button (and all my others) to remain fixed relative to the div. What am I missing?
<!DOCTYPE html>
<html>
<head>
<title>Scroll</title>
<meta charset='utf-8'/>
<style>
div.dt-baseContainer {
width: 50vw;
height: 50vh;
min-width: 400px;
min-height: 300px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
position: absolute;
border-radius: 20px;
overflow: auto;
}
div.dt-container {
background-color: lightblue;
border: 3px solid royalblue;
text-align: center;
}
button.dt-quit {
border-style: solid;
border-radius: 4px;
border-color: inherit;
width: 20px;
height: 20px;
background-color: white;
color: red;
font-weight: bold;
font-size: 12px;
text-align: center;
margin: 0;
padding: 0;
z-index: 20;
top: 5px;
right: 5px;
position: absolute;
cursor: pointer;
}
</style>
</head>
<div class='dt-baseContainer dt-container' id='dt_container'>
sdfsdf1<br>sdfsdf2<br>sdfsdf3<br>sdfsdf4<br>sdfsdf5<br>sdfsdf6<br>sdfsdf7<br>sdfsdf8<br>sdfsdf9<br>sdfsdf10<br>
sdfsdf11<br>sdfsdf12<br>sdfsdf13<br>sdfsdf14<br>sdfsdf15<br>sdfsdf16<br>sdfsdf17<br>sdfsdf18<br>sdfsdf19<br>sdfsdf20<br>
sdfsdf20<br>sdfsdf21<br>sdfsdf22<br>sdfsdf23<br>sdfsdf24<br>sdfsdf25<br>sdfsdf26<br>sdfsdf27<br>sdfsdf28<br>sdfsdf30<br>
<button id='dt_quit' class='dt-quit' title='Stop'>X</button>
</div>
</html>
[Edited] Of course, position:fixed; is not relevant unless it's fixed relative to the screen so I removed the mention. But I c=still cannot get this simple thing to work.
I hate having to answer my own question, but this was me being silly ... of course.
The suggestion above that my transform was the problem is a red herring. It is basically not possible to fix an element relative to its container in a scrolling flow.
The solution was to put both my scrolling div and my buttons inside an extra containing non-scrolling div. Not only does this make sense -- the container encapsulates both scrolling and non-scrolling content without having to put the latter inside the former -- but my initial code was very nearly there.
Taking my existing dt-baseContainer class and putting it on an outer div fixes the problem.
I want a HTML-table to show the scrollbars (both horizontal and vertical), as soon as the browser window becomes too small to fully show the table.
Please see the following example: JSFiddle example
I suspect the main-div to be the faulty one:
.myMain {
background-color: #e9edf1;
overflow: auto;
width: 100%;
top: 130px;
left: 20px;
bottom: 1px;
position: absolute;
}
The problem with the example code is the following: the horizontal scrollbar appears, if the window becomes too small, but it appears only after a few pixels of the tables are already cut/ invisible when resizing the browser window with the mouse. And it is shown at the bottom of the page, but I want it to be shown directly at the bottom of the table.
And the vertical scrollbar doesn't appear at all. I don't want to change the page layout visible for the user, so that's not an option.
There were a couple things that threw it off for me, mainly the absolute positioning and left that was pushing the div across. Because you set it as absolute it will ignore other elements and react in it's own desired way.
Also disabling scroll via overflow:hidden on html/body will cut off part of the div coupled with it being absolutely positioned.
I've made a few changes, see below. But check the link and let me know if the desired behavior has been achieved now.
https://jsfiddle.net/0ksb8s8x/1/
html, body {
font-family: Segoe UI, Tahoma, Arial;
font-size: 11px;
margin: 0;
padding: 0;
background-color: #e9edf1;
overflow:auto;
width:100%;
height:100%;
}
.myMain {
background-color: #e9edf1;
overflow: auto;
width: 105%;
padding: 20px;
top: 0px;
left: 0px;
bottom: 1px;
position: relative;
}
I've finally found a solution which is not perfect but it works:
I used Joe Corby's Fiddle and changed only the following part in the CSS:
.myMain {
background-color: #e9edf1;
overflow: auto;
padding-left: 30px;
padding-top: 20px;
position: absolute;
top: 120px;
bottom: 0px;
left: 0px;
right: 0px;
width: auto;
height: auto;
}
The scrollbars are shown at the bottom and at the right-hand-side of the browser-window (not of the table) but at least it works.
The following is my code for positioning text over image. The requirements are:
Image should be adapt to screen automatically. Even on smart phone, the image should be displayed completely. Only showing part of the image is not allowed.
Text should be accurately positioned anywhere I wish.
.txtimg{
position: relative;
overflow: auto;
color: #fff;
border-radius: 5px;
}
.txtimg img{
max-width: 100%;
height: auto;
}
.bl, .tl, .br,
.tr{
margin: 0.5em;
position: absolute;
}
.bl{
bottom: 0px;
left: 0px;
}
.tl{
top: 0px;
left: 0px;
}
.br{
bottom: 0px;
right: 0px;
}
.tr{
top: 0px;
right: 0px;
}
<div class="txtimg">
<img src="http://vpnhotlist.com/wp-content/uploads/2014/03/image.jpg">
<p class="bl">(text to appear at the bottom left of the image)</p>
<p class="tr"> (text to appear at the top right of the image)</p>
</div>
However, the bottom left text is hide from fully displayed on my firefox browser.
It is wired that the code snippet runs pretty well in stackoverflow by clicking the Run Code Snippet below.
I don't know why. Anywhere I found a solution: change overflow:auto to overflow:visible. The problem will disappear.
Anyone advice?
I can't reproduce the problem on this specific code, but i know the problem. Simply add a vertical-align on the image.
.txtimg img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}
This also work like this :
.txtimg img {
max-width: 100%;
height: auto;
display: inline-block;
}
Finally I found the problem. In another CSS class, I have already include the "overflow:hidden" line. So, I remove the corresponding line in class txtimg.
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 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;