I'm trying to move into responsive web design and I'm having a bit of an issue with my CSS images moving up and down when the browser width changes. Right now I'm working on the nav bar and I'd simply like my menu buttons to stay at the same height within the nav bar as the browser resizes in width, until it at least hits the next #media query and pulls different CSS attributes.
CSS Code:
html, body
{
margin: 0 0 0 0;
padding: 0;
width: 100%;
height: 100%;
}
img{
max-width: 100%
}
ul {list-style-type: none; }
li {display: inline;}
#wrapper {
padding: 0;
width: 100%;
height: 100%;
/* Large Resolutions Desktops */
#media only screen and (min-width: 1600px) {
/* Main Navigation Styling */
#main_nav{
height: 200px;
width: 100%;
background: #1D5799;
}
li.hom a {
margin-top: .5%;
display: inline-block;
width: 349px;
height: 188px;
background-image: url('images/menu-desktop/logo-desk.png');
background-repeat: no-repeat;
background-position:center;
text-indent:-9999999px;
overflow:hidden;
}
li.ab a{
margin-left: 2%;
margin-top: 8%;
display: inline-block;
left: 20%;
width: 157px;
height: 38px;
background-image: url('images/menu-desktop/about-desk.png');
background-repeat: no-repeat;
background-position:center;
text-indent:-9999999px;
overflow:hidden;
}
li.iss a{
margin-left: 2%;
margin-top: 8%;
display: inline-block;
left: 30%;
width: 152px;
height: 38px;
background-image: url('images/menu-desktop/iss-desk.png');
background-repeat: no-repeat;
background-position:center;
text-indent:-9999999px;
overflow:hidden;
}
li.new a{
margin-left: 2%;
margin-top: 8%;
display: inline-block;
left: 40%;
width: 133px;
height: 38px;
background-image: url('images/menu-desktop/news-desk.png');
background-repeat: no-repeat;
background-position:center;
text-indent:-9999999px;
overflow:hidden;
}
.menu-main-menu-nav-container{
display: block;
height: 100%;
width: 100%;
}
#mobile_logo{
display:none;
}
/* Body Styling */
#main_content{overflow:auto;}
/*Foot Styling */
#f_container {
position: relative;
bottom:0;
width: 100%;
height: 200px;
background: #1D5799;
z-index: 1;
}
}
Then here are a few images showing what I mean:
Full size, positioned correctly:
http://puu.sh/fX3BV/0551e774ce.jpg
Browser width decreased, the menu buttons start moving upwards:
http://puu.sh/fX3It/006ff219a5.jpg
The menu buttons will continue to move upwards until it hits the next media query and "resets" to that browser's resolution. I'd post a live link but it's still only a local build right now. If you'd prefer a OBS video to show the effect I can do that.
Thanks
Go position: absolute and top: 40px(approximately), then use the left & right properties to set the px amounts for the rest of your nav buttons.
The items are moving up due the % margin-top value you have put. try using px instead from margin-top. From my experience you only really need to use % values for horizontal positioning
Related
my problem :
I have the class .logo working perfecly with this size: width: 316px; height: 300px;
the problem is this logo never will have this size always, the width and height should not be defined, so next logo can fits well.
I tried remove the width and height without no success, when I do this the logo does not appear.
it is something I can do in the css to make this work without set width and height?
https://jsfiddle.net/pLfgam3r/1/
.logo {
background-image: url('https://lh5.ggpht.com/tq3WqEUxtRyBn-d_0t3j6WKNHuJDrmLq-FE3GAYrsAMQFIaS7FIgRLfzzql2SvfvLqto=w300-rw');
background-repeat: no-repeat;
width: 316px;
height: 300px;
display: inline-block;
margin-top: 20px;
margin-left: 20px;
}
.logo2 {
background-image: url('https://i.ytimg.com/vi/SfBR9aGrk9k/maxresdefault.jpg');
background-repeat: no-repeat;
width: 316px;
height: 300px;
display: inline-block;
margin-top: 20px;
margin-left: 20px;
}
<div class="logo"></div>
<div class="logo2"></div>
Set background-size: contain;
https://jsfiddle.net/wuqvwpkL/1/
I found this post:
Why doesn't the background image show up without specific width and height?
So your css should look like this:
.logo2 {
background-image: url('https://i.ytimg.com/vi/SfBR9aGrk9k/maxresdefault.jpg');
no-repeat: true;
display: block;
position: relative;
width: 316px;
height: 300px;
padding-bottom: 20%;
background-size: 100%;
background-repeat: no-repeat
}
This is working for both logos that has different sizes.
https://jsfiddle.net/pLfgam3r/4/
I facing some issues for the table alignment over an image which I can't figure out which part is no correct. My table alignment is totally out of expectation when view by using different resolution device(laptop,TV) below is my code.
#image_overlay_panel {
width:100% !important;
float: left;
}
#image_overlay_panel .image{
background: transparent 50% 50% no-repeat url('/iameg/Acer_schematics.png');
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 808px;
background-size: 100%;
}
#effTablehtml{
position:absolute;
top: 28%;
left: 80%;
color: black;
}
I had try to removed height: 808px; and my whole image become very small as attachment below. Mind to share what mistake did I make. Thank you very much.
If you want your image to responsive to all screen, try to fix this rules in your code
#image_overlay_panel .image{
background: transparent 50% 50% no-repeat url('/iameg/Acer_schematics.png');
position: relative;
top: 0px;
left: 0px;
//width: 100%; <-- comment this line
//height: 808px; <-- comment this line
display: block;
max-width: 100%;
height: auto;
background-size: 100%;
}
you can use media screen css , as per your requirement
#media screen and (min-width: 480px) {
body {
}
}
I have a list of screenshots. I want to display those inside a desktop-frame. I can achieve the effect easily with CSS but trying to make it responsive is giving me headaches.
My Html structure and style:
<style>
.container {
width: 80%;
margin: 0 auto;
}
.frame {
list-style-type: none;
background-image: url('http://www.hobbysubmarines.com/TV.png');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
margin: 0 auto;
max-width: 651px;
height: 358px;
}
.frame li {
width: 100%;
}
.screenshot {
position: relative;
top: 1px;
left: 5px;
}
</style>
HTML:
<div class="container">
<ul class="frame">
<li><img class="screenshot" src="../img/screenshot1.jpg"></li>
</ul>
</div>
Fiddle: http://jsfiddle.net/faj2rfc8/1/ so you maybe get the idea. If you see the fiddle, it is just to put the cat inside the tv-frame. Making this responsive is my main issue.
I would size the background in 100%, and add a media query to reduce the height of the screenshots for smaller screens. I put a fiddle together for you:
.container {
width: 80%;
margin: 0 auto;
}
.frame {
background-image: url('http://placekitten.com.s3.amazonaws.com/homepage-samples/96/139.jpg');
background-size: 100%;
background-position: center;
margin: 0 auto;
max-width: 651px;
height: 358px;
}
.screenshot {
position: relative;
top: 1px;
left: 5px;
height: 100px;
}
// mobile only
#media screen and (max-width: 479px) {
.screenshot {
height: 40px;
}
}
fiddle: http://jsfiddle.net/gg89qwon/1/
I have created a div with a class called "responsive_image" and inside that div i have a img tag. The code is,
<div class="responsive_image">
<img src="img1.png"/>
</div>
The css code is,
.responsive_image {
position: relative;
background: url(images/laptop.png) no-repeat center #f0f0f0;
width: 100%;
height: 190px;
text-align: center;
background-size: contain;
background-position: center;
}
.responsive_image img {
width: 240px;
height: 160px;
position: absolute;
top: 6%;
left: 16%;
max-width: 100%;
height: auto;
display: block;
}
Actually, the laptop.png image is the original laptop image with size of 310x186 and inside that, a image with the size of 240x160 and that should correctly fixed inside the laptop image.
From the above code, everything seems to be work perfectly but while going for responsive, each and every time i need to adjust the top and left section in the .responsive_image img. Is there any solution so that i no need to alter top and left?
You have to remove width:100% from the .responsive_image class. And give width:310px as per your laptop image size
Also you have used percentage with top and left position. Change it with pixel. As percentage have always dynamic behavior as per the screen size. USE percentage only when you built a main structure of the html.
.responsive_image {
position: relative;
background: url(images/laptop.png) no-repeat center #f0f0f0;
width: 310px;
height: 190px;
text-align: center;
background-size: contain;
background-position: center;
}
.responsive_image img {
width: 240px;
height: 160px;
position: absolute;
top: 20px;
left: 20px;
max-width: 100%;
height: auto;
display: block;
}
Simple question here but struggling with the best way to accomplish what I want... I have an image that I am trying to keep centered in the browser and responsive. Setting width to 100%, the image responds perfectly (horizontally). What I am having trouble with is the height. I do not want the browser to ever scroll and have the image, with correct ratio, at center, with 20px padding.
Dropbox viewer has a great example of exactly what I am trying to accomplish, see here: https://www.dropbox.com/s/7zmau5ckx9qe2q1/P-20131215-00017_HiRes%20JPEG%2024bit%20RGB.jpg
UPDATE BELOW WITH MORE RECENT CODE
I have a demo here of what I have so far (if you crunch the browser vertically, the scroll bar will appear): http://jsfiddle.net/k7JG5/7/
HTML
<div id="top_nav">Logo Here</div>
<div id="img_wrap">
<center><img src="http://goldenleafdesigns.com/images/random- images/soul_id_select_image1.jpg" /><center>
</div>
CSS
body {
margin: 0px;
padding: 0px;
background-color: #000;
}
#top_nav {
height: 44px;
width: 100%;
background-color: #FFF;
text-align: center;
line-height: 44px;
}
#img_wrap {
max-width: 100%;
max-height: 100%;
padding: 20px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
img {
outline: 0;
max-width: 100%;
max-height: auto;
}
so, whats the best way to accomplish the height to stay responsive with no scroll?
Maybe this works for you:
http://jsfiddle.net/4LNND/
#img_wrap {
max-width: 100%;
max-height: 100%;
padding: 20px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position:absolute;
bottom:0;
left:0;
right:0;
top:44px;
}
#img_wrap img {
outline: 0;
max-width: 100%;
max-height: 100%;
display:block;
}
There are a bit more complicated ways to do it, this is the simplest
jsBin demo
HTML:
<div id="img_wrap"></div>
CSS:
#img_wrap{
position:absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
background: url('pathToImage.jpg') no-repeat center center fixed;
background-size: contain;
}
// Or instead of contain use cover if you don't mind the image being cut-off