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/
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 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.
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'm trying to get some text between two images. The images are positioned correctly, but there are some weird design issues that are cropping up.
Current Page (web page)
Design Plan (jpg)
What I'm trying to figure out is this:
Background must stop before the right edge of the right image (the girl)
Background must extend the height of the right image
Vertical bar underneath left edge of right image.
Text wrapping before vertical bar
Bars to left of bottom text in center
Any help would be appreciated!
I'd advise against splitting the image up, as Aiden suggests. This is messy and not exactly a modern way to go about it. Try something like this:
.top-pic {
float: right;
margin-top: -200px;
}
Change the margin-top assignment to however high you want the image in pixels. The only issue left is to scale the width of the top-text div to accommodate the image. One way to do this would be to set padding-right: 250px; or so to .top-text h1 and .top-text h2.
This is a bit wrong
.top-pic {
position: absolute;
top: -5.7em;
right: -1.5em;
z-index: 1;
}
Cut this image into 2 images (one in the header next to the tabs, and one in the content). Stuff is floating underneath because of your z-index.
In your CSS. What you want is a pretty basic fixed 3-col layout with the text in the middle. I will point you here:
http://layouts.ironmyers.com/
http://www.csszengarden.com/
That is how CSS layouts are done.
If you move the top-pic above your logo and change the styling you can get a similar effect to what you want.
<div class="top-pic">
<img src="index2_files/girlbird.png">
</div>
<div class="logo">
<img src="index2_files/logo-center.png">
</div>
CSS Changes
.top-pic {
float: right;
position: relative;
top: -50px;
right: -25px;
}