I am not able to position an image within a div so that:
it's higher than the div and sticks out
starts at the very bottom of the div (there is a small gap that I can't close)
This is the relevant HTML:
<div class="teaser-image-wrapper">
<div class="wrap">
<img class="image2 more-height" src="images/svg/creativeyou.svg" alt="Creative You! Title Image">
</div>
</div>
And the CSS I have:
.teaser-image-wrapper {
background-color: #83ffcd;
width: 100% !important;
margin:
}
.wrap {
width: 80%;
}
.teaser-image-wrapper img {
padding: 0 !important;
object-fit: contain;
max-height: 75vh;
max-width: 100%;
line-height: 0;
}
Here is an image for reference: The greenish background of the wrapper (.teaser-image-wrapper) should be lower than the image (svg) that should stick out on the top. Also, notice the little gap at the bottom.
Thank you for any hints
The easiest way to achieve something like this could be to use position absolute and relative. Maybe try setting the class wrap to relative and the image absolute, with
left:0;
right:0;
bottom:0;
and then play around with the position of 'top', can then set a height of the wrap class to try and achieve the desired effect. May be better ways to do this but without playing about with it this is what is off the top of my head. hope this helps
OK, after some tinkering solved it.
I wanted to achieve this:
This is the CSS. I basically push the wrapper - div down while pulling the image inside up.
.teaser-image-wrapper {
max-width: 80%;
margin: 40vh 10% 0;
padding: 0;
line-height: 0;
}
.wrap {
width: 100%;
background-color: #83ffcd;
height: 50vh;
margin-top: 25vh;
}
.teaser-image-wrapper img {
padding: 0 !important;
object-fit: cover;
height: 75vh;
width: 100%;
line-height: 0;
position: relative;
margin-top: -25vh;
}
Related
I have a div called #text, inside another div #box. Right now I've tried to center #text by doing this:
#box {
width: 50%;
#text {position: relative; margin-left: 48%;}
}
This code puts #text approximately in the center of #box, but when I resize the screen, the size of #text changes relative to the size of the screen, so the size of its margin-right changes, and it is no longer exactly in the center.
I've heard there is a "hack" for this involving a few wrapper divs, but I don't want to overcomplicate my css or html. Is there a simple way to horizontally position a div exactly in the center of its parent?
Using flexbox is IMO the best way to center child horizontaly and verticaly. Its support is good.
First off the CSS you posted is not valid. You can accomplish what you are looking for with something like this:
CSS
body {
width:100%;
height: 100%;
margin: 0;
padding: 0;
}
#box {
width:100%;
height: 500px;
background: lightblue
}
#test {
width: 300px;
height: 300px;
border: 1px solid red;
margin: 0 auto
}
HTML
<div id="box">
<div id="test">
hello
</div>
</div>
See the JS.Fiddle
use margin: 0 auto; in the css of #text
You want exact center of page, regardless of content? Do something like this:
p {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
Relative to the parent, set the following attribute on the container for your element:
div.containerOfPs {
position: relative;
}
I have two child divs (inline-block) inside a wrapper div. I want the left Div to be centered and the right one simply on the right of the left div.
<div id="Wrapper1"><div id="leftElement1">LEFT ELEMENT</div><div id="rightElement1">RIGHT</div></div>
The Problem is, if I use margin-left to reposition the whole wrapper, the Left Element is not centered on small screen sizes.
If I center leftElement1 and use position: absolute to position rightElement1 the Warpper Div does not adjust its width and height according to its children.
For a better understanding check http://jsfiddle.net/aaq810gs/6/
Any help is appreciated!
If i understand right you want something like this:
#rightElement1 {
background-color: blue;
position: relative;
width: 100px;
display: inline-block;
height: 50px;
float: right;
top: -100px;
}
Applied in your first example.
fiddle
Or something like this:
#rightElement1 {
background-color: blue;
position: fixed;
width: 100px;
display: inline-block;
}
fiddle
I am not really sure if I get exactly what you mean, but I think something like this could work for you.
- You better switch to %, because than it will work better on mobile devices.
- Second thing is adding margin:0 auto; for #leftElement1 so it stays in the middle. #rightElement2 will just stick to it on the right, because it is inline-block.
Now you can add whatever margin to the wrapper and it stays the same.
Fiddle http://jsfiddle.net/stassel/vzx6fm55/
HTML:
<div id="Wrapper1">
<div id="leftElement1">LEFT ELEMENT</div>
<div id="rightElement1">RIGHT</div>
</div>
CSS:
#Wrapper1 {
width: 90%;
background-color: red;
margin: 0 auto;
white-space: nowrap;
padding: 10px;
margin-left:10%;}
#rightElement1 {
background-color: blue;
width: 10%;
display: inline-block;
height: 50px;}
#leftElement1 {
background-color: green;
width: 60%;
margin:0 auto;
display: inline-block;}
div {
height: 100px;
text-align: center;
color: white;}
SOLVED
Thank you for all your answers! Unfortunately I wasn't able to describe my Question properly, so none of the solutions worked.
Finally I was able to solve the problem myself. The Key to the solution was another centered outer wrapper, with a fixed size of the to-be-centered Element and overflow: visible. The inner content overlaps now the outer wrapper.
#outerWrapper {
width: 700px;
overflow: visible;
margin: 0 auto;
}
#Wrapper {
width: 810px;
background-color: red;
}
http://jsfiddle.net/aaq810gs/9/
Height was not respected on this fiddle
I want the image to have a height and width of 80% relative to its parent, vertically and horizontally aligned. For some reason, it does not work.
HTML:
<div id="menu_header_new_orig">
<img id="menu_logo_orig" src="https://imagizer.imageshack.us/v2/849x565q90/833/uua2.jpg" />
</div>
CSS:
#menu_header_new_orig {
margin-top: 2.5%;
height:40%;
width:100%;
overflow: hidden;
position: relative;
border: 1px solid green;
text-align: center;
}
#menu_logo_orig {
width: 80%;
height: 80%;
position: relative;
}
I have figured it out here, but just in case somebody have better solution.
If I understand you correct :
The parent #menu_header_new_orig own parent must also have a height (obviously 100%)
html, body {
height: 100%;
}
set display to inline, 10% top to get vertical alignment
#menu_logo_orig {
top: 10%;
display: inline;
position: relative;
width: 80%;
height: 80%;
}
Is that what you were heading for? [not really sure] - try to set #menu_header_new_orig height to other things than 40% to get it in another perspective.
forked fiddle -> http://jsfiddle.net/Dmc7j/
On my main page, I have an image that moves around or wraps around on browser resize. I just want to change it so that the image gets cut from the right if the browser is small.
I have tried a few things to no avail:
Remove the float on the div id right and the relative positioning on right-image
Try min-width for div id right
Give height, widths in percentages
Added viewport settings.
In the template, the image is placed outside the main like:
<body>
<div id = "main">
<div id = "left">
<div id="left-title">Tag Line</div>
<div id="left-blurb">
Some blurb
</div>
<div id='left-signup'> SignUp! button</div>
</div>
<div id = "right">
<div id = "right-image"></div> <--- Image
</div>
</body>
Relevant css:
body {
margin: 0 auto;
height: auto;
overflow-x: hidden;
}
#main {
float: center;
width: 950px;
overflow: visible;
height: auto;
margin: 0 auto;
}
#left {
float: left;
width: 500px;
display: inline-block;
}
#left-title {
font-size: 3.4em;
margin: 25px 0px 20px 15px;
}
#left-blurb {
margin: 0px 20px 10px 15px;
}
#left-signup {
margin: 0px 0px 0px 90px;
}
#right {
float: right;
width: 600px;
height: 400px;
margin-top: -10px;
display: inline-block;
}
#right-image {
height: 100%;
width: 100%;
position: relative;
left: -50px;
top: 0px;
background: url(my_photo.jpg) no-repeat;
-moz-background-size: cover;
background-size: cover;
z-index: 0;
}
I think that is the css that is relevant to the question. But if it is not enough, the website I am talking about is https://www.mathnuggets.com
Will appreciate any insights.
You can add a media query to just remove it from the document when your document size is less than a certain number of pixels.
#media screen and (max-width:480px) {
#right-image{
display: none;
}
}
Otherwise, you can also adjust its positioning as you've done using the same method, just adjusting its position depending on window size. The issue I'm seeing in your code is that you're using a -10px margin that is causing it to overlap your other elements, so you could simply change that for certain viewport sizes.
In addition, you might want to consider changing your sizing method from being absolute using pixels and instead use percentages so that your image can flex a little as your viewport changes.
This site has a lot of great resources I think could help you to work with your existing design so that it can be more responsive as needed: http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design
If you use
position: absolute;
for ID=right div it will never go under left div
I know I should know how to do this, but for all of my searching on SO and the internet, it's evading me. A friend wants a page with a fixed width centered wrapper, 990px wide. Left and right will have no content, but he wants the header and footer to stretch off the ends of the page like a liquid layout. I never build sites like this so I'm stuck, I only do fixed width centered wrappers.
I want to accomplish this with CSS over tables, that's his preference.
The header isn't straight black, it's a thin .png that is repeated as a BG image.
The footer is a solid BG color.
Page is currently set up with the proper header and footer contained in the center wrapper but nothing is stretching off to the left and right.
Page link: http://www.jalvisualmedia.com/testsite/mystique/private_label.php
If I'm omitting anything that would be helpful, please let me know.
You could try putting the #wrapperTop and #footer ids outside of the fixed width center wrapper and set their width to 100%.
Try this
#wrapperTop{
width: 100%;
height: 162px;
margin: 0;
}
#navbar {
height: 40px;
width: 990px;
margin: auto;
background-image: url(../graphics/bg_top.png);
}
#header {
height: 120px;
width: 990px;
margin: auto;
}
#imageSlice {
width: 990px;
height: 95px;
background-color: white;
margin: auto;
}
#footer {
width: 100%;
height: 145px;
margin: 0;
background-image: url(../graphics/bg_bottom.png);
}
#navBox {
width: 600px;
height: 75px;
margin: auto;
}