So I'm working with bootstrap and then I have this images which I want to put on the top right part of the page but it seems that position:absolute is not working so I don't know what I'm missing here. I've googled many times but gives me no luck, I have the same code tho. And also I've tried some of those alternatives or tips and tricks but still doesn't work. So here is my code html.
<body>
<img id="swirl-left" src="assets/images/swirl1-panel1.png">
<img id="swirl-right" src="assets/images/swirl2-panel1.png">
This is the html structure of my images and I have this css:
#swirl-left { position:absolute; left:0; top:-10px;z-index: 2;}
#swirl-right { position:absolute; right:0;top:-11px; z-index: 1;}
I tried float:right but still doesn't make it work. I got this output as of now.
So when I re-size the browser it goes with it.I want it to stuck on the top right part of the page. What I'm missing? If I adjust the browser the images moves with it. It takes me an hour so any help will be appreaciated.
Your code works just fine to pin images to the top-left and top-right corners, if the images are smaller than the body tag.
How large are the images you're using, and how wide is your <body>?
You aren't setting any specific values, so the images are appearing at full size.
Your "output" image looks like all images are the same size as the body, so they're just piled on top of each other.
If you give them all specific width/height attributes in CSS it should work.
In this 2nd example, the images are actually 500x500, which would overlap at full-size, but the CSS width attribute makes them fit properly. You can either use a fixed pixel value, or a percentage if you want the image to be responsive.
body {
width: 900px;
}
#swirl-left {
width: 150px;
position:absolute;
left:0;
top:-10px;
}
#swirl-right {
width: 150px;
position:absolute;
right:0;
top:-10px;
}
Or, since you're using Bootstrap, you could use a class on your img tag to describe the size & # of columns you want the image to take up, like col-sm-2 or something.
<img id="swirl-left" class="col-sm-2" src="assets/images/swirl1-panel1.png">
<img id="swirl-right" class="col-sm-2" src="assets/images/swirl2-panel1.png">
Related
I'm using centered imgs to act as backgrounds for some tiles. I'm trying to have these images scale with their parent div's height and if they are wider then their parent's for them to hide the overflow.
Example:
* I've got it working now. Answers are below, I'm updating this code to display all I needed to use to get it to work *
HTML
<div class="container">
<img class="derp" src="http://gridiculo.us/images/kitty02.jpg">
</div>
CSS:
.container {
height:250px;
width:50%;
}
.derp{
object-fit: cover;
height: 100%;
width: 100%;
}
Here's a near-example: http://codepen.io/chriscoyier/pen/myPMGB
The difference would be that I'm using s and not background-image, and that instead of the img filling the div completely it would fit to the height and hide the width overflow.
I'm trying to avoid using background-image since I'm using a lot of these tiles and making CSS rules for every one isn't going to work.
In order to scale it with the div's height, I'd change the height from px to % - this way, the larger's the div, the larger's the picture. In order to certain the image, i'd use margin in the image css. That'd look like so:
.derp{
height:80%;
width:80%;
margin:10%;
}
.container {
height:250px;
width:50%; /* needed */
/* inner img is centered horizontally */
vertical-align:top;
text-align:center;
overflow-x:hidden;
}
<div class="container" style="background-color:gray"> <!-- The background is there so you could see the image relative to the div -->
<img class="derp" src="http://gridiculo.us/images/kitty02.jpg">
</div>
The best way to keep the aspect ratio of the image is to set the width to auto (and it's the default behavior so you don't need to set explicitly). And with a simple overflow:hidden it works almost as you want it.
The hard part is centering horizontally. You can try this answer :css to center a image horizontally.
However if all your images aren't the same size, you will need to make one rule per image. And in this case putting the image as background-img would be better for semantic and accessibility (because your image doesn't have a sense in the page, it doesn't convey any information, it's decoration). An <img> would be read by a screen reader (the alt attribute), and in your case it wouldn't help a blind people.
Depending on how many browsers you need to support, I'd suggest you use object-fit! Support for it is okay if you can ignore IE, but in case your project qualifies, I see no problem with using it today. Also, there is always a polyfill.
You can find a nice summary on CSS-Tricks.com about the property. It basically works similarly to background-size, but for <img> tags. In your case, object-fit: cover; does the trick.
I made a little demo on CodePen that shows you how it works.
img {
height: 100%;
object-fit: fill;
width: 100%;
}
I am trying to build a "mobile first" web app. And in doing so I am using the meta attribute "viewport" to help scale the elements appropriately.
But I want certain elements to be fixed size. For example I want the div below to be 598(h)x450(w).
<div class="note">
<div class="note_text">Its my birthday, and I have treated myself to a very nice gift. </div>
<img class="sticker" src="/assets/sally/sally_04.png"/>
</div>
.note {
margin-left: 20px;
height: 598px;
width: 450px;
}
.sticker {
width:300px;
height:300px;
position: relative;
}
On the iphone this resolution should technically fit in a single screen (when scrolled down to the top of the div element). However the div element is rendering longer than expected. Why?
Am i missing something super obvious?
Well, can you be a bit more specific like what scaling have you given in the meta tag and the actual size of the image?
But till then, a work around can be to give width and height in '%' instead of 'pixels' in the sticker class. Make sure you maintain the height-width ratio lest the image looks stretched and dis-proportioned.
Something like:
**.sticker {
width:65%; /* or keep width:100% and don't specify the height*/
height:40%;
position: relative;
}**
Please check your windows display Scale and layout settings. I had mine at default 125% and everything rendered on the browser were enlarged accordingly. Took me a couple of hours to figure this out and it could be a possible root-cause for your problem too. Not ideal when you wanna develop a pixel-perfect UI.
Cheers!
This is my html code
<div class="feature-image">
<a class="featured_image_link" href="#">
<img src="1.jpg">
</a>
</div>
My image 1.jpg size is 150px x 150px and i have mentioned in the css as
.feature-image{
width:150px;
height:150px;
display:block;
position:relative;
overflow:hidden;
}
.feature-image img{
position:absolute;
top:-50;
left:0;
width:100%;
}
I know that when i give different image size (for eg: 300x200 or 600x350 etc) the image will fill inside that 150x150 and not stretches.
But actually its not working properly. Please help whether there is any mistake in this code?
Ok. Let me explain how this work.
First things first. Your CSS has a bug.
top:-50;
This wont do anything. It has to be something like
top:-50px;
But my question is why do you want negative margins? it will only hide you image by 50 pixels on the top side.
Ok, now coming to the real issue. You say you have no problems when your Image is 150X150 pixels. Thats because the parent <div> is 150x150. But if you have a different image size like 300x200 you have a problem.
This happens because in your CSS you have only mentioned width: 100% for the image.From here on its plain math.
The width=300 & height =200
Since you have mentioned width:100% the image automatically gets adjusted to the new width
300(original width)/150(new width)=2
So taking the same factor of 2
200(original height)/2=100(new height)
Hence you rendered image will have height of 100px.
if you want the rendered image to have same height of div just add this line to img CSS
height: 100%;
Working fiddle
from the code you have pasted, it's working properly. Are you able to link to the site where this is live and not working? Cache issue?
See jsfiddle: http://jsfiddle.net/FNQZn/
.feature-image {
width:150px;
height:150px;
display:block;
position:relative;
overflow:hidden;
}
.feature-image img {
position:absolute;
top:-50;
left:0;
width:100%;
}
First of all I would like to thank you all for your answers all this time. I have found a lot of solutions from my projects through the site as a student as well as a working.
I search a lot before asking this question but I couldn't find a working solution.
Sorry for the title. Couldn't think a better one.
I try to develop a site and I have a problem with the header. The main page container has a fix size of 1024px and the content inside is restricted to 960px. Only the header and the footer takes the whole wight of the window.
I have two images: The first one is 2000x250 (the buildings behind) and the second one is 2000x58 (the languages with the houses).Let's name them img_A and img_B respectively. I want both of them to take the whole wight of screen depending the user resolution (like the footer) but scale it also to responding to the height.
The problem is that I want no matter the screen resolution is, the img_B to be centered inside the 1024px so the ES button will be at the end of main page (1024px) so the logo that is center with margin 0 auto; don't cover the houses.
Here some images to illustrate better what I am asking.
Wrong (1920x1200):
http://imageshack.us/photo/my-images/577/headerwrong.jpg/
Right (1680x1050):
http://imageshack.us/photo/my-images/20/headercorrect.jpg/
Here is my css code:
#header{
height: 140px;
width: 100%;
background: url(images/background_home.jpg) center center no-repeat;
}
#header .language_banner{
background: transparent url(images/header_en.png) right bottom no-repeat;
}
#header .logo{
display:block;
width:242px;
margin:0 auto;
padding-top: 63px;
}
and the html code:
<div id="header">
<div class="language_banner">
<div class="logo">
<img alt="athens insiders" src="<?php bloginfo("template_directory"); ?>/images/logo.png">
</div>
</div>
</div>
Thanks in advance
I don't quite understand what you're trying to achieve, but I think you want to try looking at (and adding!) the background-size css (and maybe background-clip) property to your #header (or wherever), after you define the background.
Note the support isn't there in earlier versions of IE, so you may need another work around if you're going for universal compatibility.
I'm quite new to css, divs and everything in between.
So, i created a basic layout for my band, didn't want a bunch of useless links like bio, merch store and all that. So i just decided to arrange separate spaces for our video, a player and a facebook window.
I managed to create a div for the youtube iframe, but i can't get it to stay in its place when i resize the window. I've tried changing the positioning a bunch of times to absolute, fixed, relative...etc. No luck.
Keep in my mind that the layout is nothing fancy, just something quick to look at, and get some basic info of the band.
Here's the link: http://silentcellmusic.com/test.html
Thx in advance!
First you should remove the image from the markup, and set it as background of the body, or html, for example. Set it to position top center.
Then, set the div #wrapper to { width: 960px; margin 0 auto; }. This way it will always be in the center of screen, so as your background.
Third, create four divs:
social
listen
video
Float them to the left, set their widths and margins, accordingly.
Finally add a div for your footer (social links and mailto).
Best of luck.
What you need to do is use positions. What fixed does is determine the position in relation to the window (or browser) top left corner, so it will always stay in the same place no matter how you resize it. The right way to go is to use absolute and relative.
First you need a relative container. Your image is already centered, so you could do something like:
<div id="container">...</div>
#container {width:960px; margin:0 auto; position:relative;}
Then you want your video to be in an absolutely positioned div, but INSIDE the relative one. SO your html would be:
<div id="container">
<div id="videoDiv">
your video here
</div>
</div>
And your css for the videoDiv:
#videoDIv {position:absolute; top:200px; left:200px; }
Look por css position online to understand how it works, it's actually quite simple but you need the right structure. In your case, your center tag should be the one with position relative, but make sure you change it to a div, otherwise some browsers will give a validation error.
Having said that, there are a lot of things you can do to improve your site. Once you know how to handle positions, you could re-do the layout using different images (so it's faster to load), and you can use actual text. This is quite important for search engines to recognise your site, so try at least to have keywords spread around.
Here is your CSS for the video div:
#apDiv1 {
position:absolute;
left:747px;
top:535px;
width:400px;
height:223px;
z-index:1;
#wrapper {
margin-left:auto;
margin-right:auto;
width:960px;
}
Did you mean to declare width twice? Is the width:960px throwing off your positioning?
Get rid of the <center> tag altogether and change the css for #apDiv1 to:
#apDiv1 {
position: absolute;
left: 597px;
top: 489px;
width: 400px;
height: 223px;
z-index: 1;
}