Free space in the bottom of the Div-element - html

I create "Thanks"-page. In the main part of the page i put and .
According to the design, the bottom picture should overlap the button and paragraph, and in order to achieve this I adjust:
position: relative;
width: 100vw;
bottom: 250px;
z-index: 0;
to the image.
As a result, the picture got into the right position, but in the bottom remain free space in parent element.
How to remove this free space and why did it appear.
I'll try to move img in the different parts of code.

Related

Align overlaid text on the right

I am trying to display several images of different sizes centered and in column, and in addition to that, to have an overlaid title on the first image, aligned on the right.
Having the title on the left is ok, as shown here:
http://jsfiddle.net/c48em4ng/
p {
position: absolute;
top: 10%;
left: auto;
}
I cannot however properly align the text on the right side of the image, i.e. having the right side of the text matching the right side of the image.
If I replace the left: auto with right: 0px, the title is completely on the right.
http://jsfiddle.net/c48em4ng/1/
If I replace the position: absolute with text-align: right, the horizontal alignment is fine, but the title ends up above the image:
http://jsfiddle.net/c48em4ng/2/
The best I could do is to manually tune to something like right: 26.5% but of course it will work at all elsewhere.
http://jsfiddle.net/c48em4ng/3/
You should use a wrapping element for text and image to which you apply position: relative. Then the absolute positioning of the text will be in relation to this wrapper (and not to the body, like in your fiddle) and bring the desired result, see http://jsfiddle.net/m4vno3oa/1/

How to prevent excess image link area due to padding

I want to have an image link at the lower left side of my webpage. I am able to get the link to work but the entire space within the padding is also part of the link. So there is pretty much a big 800px by 800px link on my page when I only want the image itself to be a clickable link. Also, the position needs to be absolute because of the way the entire page is set up. Would anybody be able to tell me now to fix this?
<div id="image_link">
<a href="#">
<img id="image_id" src="../path/image">
</a>
</div>
<style>
#image_link {
padding: 800px 0px 0px 800px;
position: absolute;
}
</style>
It's strange that it creates 800x800 pixels link area for you. padding on the div adds space inside the div, but outside the a, so it shouldn't make the a element larger.
But as you're already using position: absolute;, you should really use top, right, bottom and left to control the position. And it's recommended to set it on the img element directly.
#image_id {
position: absolute;
top: 800px;
left: 800px;
}

Extending a bootstrap container background to the edge of the page

I'm designing a page built on Bootstrap 3, and I would like to try and recreate the following design:
I have paragraphs that I have put into a container, so that they stay centred on the page as it is resized. However, I would like to have certain rows have a coloured background that extends off to the sides as far as they go, as shown. I'm not sure if this is possible?
One method I have tried is switching to a container-fluid class for those rows, which goes to the edge of the screen. This sort of works, but I'm not sure if it is then possible to have the text inside stay inline with the other paragraphs as the page is resized? Really, the text should always have the consistent margins on the left and right sides for all of the blocks of text.
I don't think I would need content in the areas in the margin, so if a solution just involved using a standard container to hold the content, and another method to extend the background off to the side, that may work.
Here is a JSFiddle to start off with, including one of the orange boxes in a container-fluid, to demo that approach.
I'm not sure if this is the 'best' solution, but it is a solution nonetheless.
Create a pseudo element for each coloured box (:before)
Absolutely position that (relative to the coloured box - Bootstrap already sets position: relative on col-*-*).
Set top and bottom values to 0 so it's always the correct height
Set background colour to match box
Give it a wide width to ensure it always covers the gutter (sides of .container) on wide screens
For the left sided box, set left: -[width of psuedo element], for right sided box set right: -[width of pseudo element
Finally, you'll need a page container set to overflow: hidden.
HTML
<div id="page">
<div class="container">
...
</div>
</div>
CSS
#page {
overflow: hidden;
}
.box-left:before,
.box-right:before {
content: '';
display: block;
position: absolute;
width: 999em;
top: 0;
bottom: 0;
}
.box-left:before {
left: -999em;
background: orange;
}
.box-right:before {
right: -999em;
background: lightblue;
}
DEMO

CSS positioning and offset in fluid layout

I have a wrapper div with some content in it. Here is its css:
.wrapper{
width: 85%;
min-width: 970px;
max-width: 1500px;
margin: auto;
padding: 0.3%;
}
Now, within this div, I have another div, which I will call div2. It has no relevant styles to it, aside from cosmetic ones (background, font-color, etc.). Its behaviour is to simply take up the entire width of the wrapper div, no matter what the browser's width, zoom, or screen size is. This is as expected, and nothing is wrong here. I'm trying to make an addition onto this, and that is where I'm having trouble.
I have an image that I want to display, such that the bottom of the image is in line and touching the top of div2, and on the right side end of div2, so that the right end of the image is also in line with the right end of div2.
This would sound simple enough to do, but I don't want this image to mess with the vertical space. Adding the image in will of course introduce a larger gap between div2, and any element above it, which means I have to use position:absolute to take the image out of the regular flow of the page. However, my attempts at keeping the image at this same position, in line as described, have been unsuccessful. How can I keep this image aligned at all times, and under all possible user display circumstances, without having this large gap?
I've tried using the offset CSS top and left to move the image, but it doesn't work for all screens/zooms/resolutions/browser widths, and this isn't something I can practically use media queries for.
I'm not quite sure if I got you right, but I guess you need to:
#div2
{
position: relative;
width: 100%;
overflow: visible;
}
#div2 img
{
position: absolute;
bottom: 100%;
right: 0;
}
EDIT: Place your image inside of #div2.
So, your image, will always be on the right top of #div2. That's what you wanted to do?

Rows of flexible and fixed div's within full-size window

I'm writing a mobile/desktop chat application that is supposed to utilize the entire screen. The bottom <div> shown in yellow can be fixed-height if it needs to be.
presently it's Absolutely positioned to the bottom of the window.
My problem: the top <div>, in cyan, doesn't fit to the rest of the window, regardless of whether I use padding, margin, border, etc. Presently it appears to allow the content to wrap, but that's only because the bottom overwrites the scroll bar.
My only solution so far is to have a final <div> or <br> that pads the end of the scrollable div, but that doesn't make the div smaller, or make the scroll bars properly align.
Here is my source code so far in Fiddle.
Can you edit your CSS and set the DIV with the chat text a class like .break-word and then in CSS declare it with word-wrap:
.break-word {
word-wrap: break-word;
}
Unsure on the covering of scrollbars. You should post your code for others to view and might be able to pick something out.
This style code basically sums up what I'm doing to compensate for my issue. (Instead of, say, using HTML tables.) This may not be the best solution.
#topPart {
position: absolute;
width: 100%;
top: 0;
bottom: 40px; /* or however high the bottom is */
}
#bottomPart {
position: absolute;
width: 100%;
bottom: 0;
height: 40px; /* same as above */
}