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
Related
I would like to achieve this kind of look on my game settings:
The menu buttons are perfectly positioned at the bottom. But, I've achieved this using this stupid hack code of mine:
.settings-btns {
margin-top: 10.7rem;
}
The problem is when I comment this line of code out, I get this:
It's the same device width and height. The buttons go up because there's no margin-top applied (of course). If I'm going to calculate the margin-top of these buttons on every device, man! that'll be a lot of work and it would not be very practical, I guess.
I suppose there is a better solution for this but I really don't know what it is. Has it got to do something with the background?
.background {
background: url(../img/background.jpg);
background-size: cover;
}
Or has it something to do with the container? (the container that covers the whole screen of the mobile device. I had this because I am using this container on the desktop media query.)
.container {
border: 2px solid white;
border-top: 0;
border-bottom: 0;
position: relative;
overflow: hidden;
}
I really don't know so please kindly help me.
The container can be adaptive to the device height using percentage or view port units:
.container {
border: 2px solid white;
border-top: 0;
border-bottom: 0;
position: relative;
overflow: hidden;
/* using viewport */
height: 100vh;
}
You could also add the background image to the container itself but if you do it on another division just adapt the height to the container parent:
.background {
background: url('https://www.gstatic.com/chat/hangouts/bg/bbafcf27dfe823a255e7fa549b5b6ba5-Matiash-01.jpg');
background-size: cover;
height: 100%;
}
And finally, for the settings buttons, I would use position fixed and the bottom property to decide how far from the end of the page they should be displayed:
.settings-btns {
position: fixed;
bottom: 30px;
}
I'm attaching a small example snippet:
.container {
/* using viewport */
height: 100vh;
}
.background {
background: url('https://www.gstatic.com/chat/hangouts/bg/bbafcf27dfe823a255e7fa549b5b6ba5-Matiash-01.jpg');
background-size: cover;
height: 100%;
}
.settings-btns {
position: fixed;
bottom: 30px;
}
.settings-btns button {
padding: 10px 25px;
}
<div class="container">
<div class="background">
<div class="settings-btns">
<button>button 1</button>
<button>button 2</button>
</div>
</div>
</div>
I hope it helped! 👍
Just in case you have not tried yet, did you try giving the container height: 100% and position: relative, then align the buttons to the bottom by using css properties position: absolute and bottom: 0px ?
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;
}
I have a fixed a button at the right of a bootstrap container.
But in high resolution, the button moves outside of the bootstrap container as it is fixed relative to body, not container.
Note: It must be fixed (not absolute) because I don't want it to scroll with window.
Here is the code:
<div class="body">
<h1>Body</h1>
<div class="container">
<h1>Container</h1>
Enquire Now
</div>
</div>
CSS:
.fixed-btn {
padding: 10px 20px;
background: #000;
color: #FFF !important;
text-decoration: none !important;
line-height: 30px;
position: fixed;
right: 70px;
top: 50px;
}
.body {
background: aquamarine;
min-height: 1000px;
}
.container {
background: antiquewhite;
min-height: 1000px;
max-width: 400px;
}
Is it possible to make it fixed within a bootstrap container? so it would not move outside of the container.
Look a live code at JSFIDDLE.
One possibility is to position the fixed element using calc
.fixed-btn {
position: fixed;
left: calc(50% + (400px/2)) ;
}
In this case the 400px (from your demo) would be the width of the container based on the various widths in Bootstrap.
You would have to adjust this in each media query.
JSfiddle Demo
Overview: I have a CSS3 pure navigation system on top of my page. I have a footer/copyright on bottom.
In the middle, I want a background image (parchment) cover, then on top of that parchment, I want a white layer for text with a left column and a right column. I can't seem to make it work using the relative position as my z-index doesn't seem to be working. If I put position "fixed", I can't use the right browser scroll anymore to go down. If I use position "absolute", then the background is right and the content on top is ok, but my navigation footer disappears. If I use position "relative", my navigation system is fine but the background doesn't show up anymore. It is ignoring the z-index....
The weird thing is I am using expression web 4 and it looks correct there...it just doesn't look correct on the web.
This is my site html to reproduce what I am seeing.
<!-- #BeginEditable "content" -->
<div id="page_content_back">
<div id="column_left">
<h1>About</h1>
<p>We are the best-Trust us</p>
</div>
<div id="column_right">
<h4>CONTACTS</h4>
</div>
</div>
<!-- #EndEditable -->
This is my css
#page_content_back {
position: relative;
background-image:url('../images/grayparchment_back.jpg');
background-size: cover;
z-index: 1;
width: 100%;
margin: auto;
padding: 0;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCAA77;
}
#column_left {
position: relative;
margin: 0 50px;
padding: 0 2%;
z-index: 2;
top: 0px;
background-color: #fff;
float: left;
width: 65%;
height: 100%;
color: #393939;
}
#column_right {
position: absolute;
z-index: 3;
float: right;
right: 50px;
top: 370px;
width: 20%;
height: 100%;
margin: 0;
padding: 10px;
background-color: #fff;
}
Okay, the problem is your div#column_left. It has a float: left property. Floating an element takes it out of the flow, so there's nothing within the div#page_content_back to give it any height. Remove that float: left property from the inner div and you'll see the image appear behind it. From there, you can add other elements after that nested div and the image will expand to encapsulate the new element. That said, if you use float or position: absolute, you're removing the element from the flow and that background image won't respond to its presence as a result.
Hi I am having problems positioning several images. It is very important that max height of the site stays at approximately 580 pixels as I want to give the impression of a picture frame around the site. I have attached a picture to show how exactly the site is laid out and where I want to position my images in the top, middle and bottom divs. I do not want to have them as background images because I want to have some as links and I want to have some jquery animations (i.e. fadeIn and toggle) with the other images. This is a fluid layout but I do not want the vertical width to expand when the browser is at the min width of 780px, I also would like that the images are some what centred on the page.
I am still learning CSS so I have done the best I can but it is still out of position.
Thanks for your help
Site Layout Picture
.container {
width: 100%;
max-width: 1096px;
min-width: 780px;
margin: 0 auto;}
.header {
background:#231f20;
height: 65px;
}
.sidebar1 {
padding: 0px;
float: left;
width: 65px;
background: #231f20;
margin: 0;
min-height: 450px;}
.sidebar2 {
float: right;
width: 65px;
background:#231f20;
margin: 0;
min-height: 450px;}
.main_content{
padding: 0px;
width: 80%;
float: left;
}
.footer {
height: 65px;
background:#231f20;
position: relative;
}
HTML
<body>
<div class="container">
<div class="header"></div>
<div class="sidebar1"></div>
<div class="main_content">
<div class="top"></div>
<div class=”middle"></div>
<div class=”bottom"></div>
</div>
<div class="sidebar2"></div>
</div>
</body>
Add position: relative to all the containing div's (you may have to set the height of them to the height of the tallest image also). Then position all the images something like:
.img1 { /* or whatever class name works for you */
position: absolute;
left: 50%; /* this centers it, if you want thirds, us 33%, 66%, etc. */
margin-right: -50px; /* note: 50px is an example, it needs to be half the width of your image width */
}
Try adding clear: both; to the CSS for the .footer. This will force it to the bottom of the "picture frame".