I have a dashboard that has a title in the top left, some buttons for settings in the top right, and depending on the page, there are a variable number of divs that are positioned in the middle. I want the settings buttons and the divs to be right aligned as long as there is space, and when there is no longer space for them to be in a single line, I want the middle divs to start wrapping below the first line.
Here's a rough diagram of what I was imagining
._left {
overflow: hidden;
margin-right: auto;
}
._right {
position: absolute;
top: 0;
right: 0;
If anyone can give any hints, that would be awesome. I have no clue how to make this work.
Related
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.
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/
I am trying to position 2 elements near the bottom of my one page website, I have tried using bootstrap containers but this positions them at the very top of the parent element which is my background image and I can't move them down into the centre.
I have also tried position absolute but for some reason when I use percentages to position (as I want my page to be responsive), the elements are in the correct place in relation to the left and right of the screen but they will not seem to position them selves over the div image at the bottom of my multiple section page.
Any suggestions?
Imogen Adams, Hi there. To center and place a div that holds 2 divs near the bottom of a image and have them over lay the image.
You can use this...
.center {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
Here is the Fiddle to get you started.
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
I've spent all morning trying to write what I thought was a simple bit of code.
Two long columns of content, only column 1 is visible
On click of a link, column 1 is hidden and column 2 becomes visible
Both are in exactly the same position, however both have different and varying lengths
I decided to use the target pseudo-class to switch between the columns, setting the visibility of one to show.
This seems to work, but I don't fully understand what I've done. Plus, content below these columns seems to be placed beneath them on the z-axis rather than below them on the y-axis.
My two (related) issues:
I'm not sure exactly what the logic is of what I've created, I could do with a plain english explanation.
I don't understand why the DIV underneath the two columns and container is not appearing below them on the y-axis.
Here's my CSS:
#container
{
background-color: red;
position: relative;
}
#schools-list
{
width: 400px; /* Set the width of the visible portion of content here */
height: 600px; /* Delete the height, let the content define the height */
background-color: purple;
position: absolute;
top: 0;
left: 0;
}
#boards-list
{
width: 400px; /* Set the width of the visible portion of content here */
height: 700px; /* Delete the height, let the content define the height */
background-color: green;
position: absolute;
top: 0;
left: 0;
visibility: hidden;
}
#container:target #schools-list
{
visibility: hidden;
}
#container:target #boards-list
{
visibility: visible;
}
Here's my HTML:
<div id="container">
<div id="boards-list">
Boards List<br>
Switch to Schools List
Here's some content
</div>
<div id="schools-list">
Schools List<br>
Switch to Boards List
Here's some other content
</div>
</div>
<div>Why is this beneath everything?</div>
Absolute positioning removes an item from the flow of the page. This is what is causing your bottom div to appear underneath.
Visibility removes the element from sight but the element will still take up space.
My suggestion is to use display rather than visibility.
Toggle your elements between display:block and display:none and remove the absolute positioning and you should be able to achieve the functionality you desire.
Both #borad-list and #school-list is taken out of normal page flow by position: absolute, that's why your container height should be 0px as there is nothing that takes any space vertically.
I could explain it better but now writing with my phone so... i'll try just to give you starting point.
By positioning the containers using position:absolute, you're removing them from the normal flow of the page. In other words, your other content acts like those containers aren't even there, and those containers magically appear in front of the content.
Instead, what you'll likely want to do is remove the position, top, and left of the containers, and use display:block to show and display:none to hide the containers. You can also remove the height from the containers and allow the content to decide on its own how much room is needed.