I recently stumbled upon a problem while coding html and css. I have this img element within a div and I want the div to resize to the size of my img. It's a responsive design, so whenever my img gets smaller, I want my div to resize with it.
Normally it would do this automatically, but since I used "position: absolute" in my img tag, the div height is simply 0.
Html: (note: there's 4 images because I'm creating a slideshow using css3, that's also why I need the position absolute on my img tag)
<div id="cf4a" class="shadow">
<img src="Afbeeldingen/Home/img1.jpg">
<img src="Afbeeldingen/Home/img2.jpg">
<img src="Afbeeldingen/Home/img3.jpg">
<img src="Afbeeldingen/Home/img4.jpg">
</div>
Css:
#cf4a {
text-align: center;
padding-left: 2.5%;
width:95%;
position: absolute;
}
#cf4a img {
max-width: 1160px;
width: 90%;
position: absolute;
left: 1.25%;
}
How would I go and fix this? Thanks in advance.
this is a good tutorial for what you are trying to do,
basically you trick out the css by using a relative position but switching through what portion is viewed, using the overflow hidden property, check it out it is pretty cool!
http://csswizardry.com/2011/10/fully-fluid-responsive-css-carousel/
Related
Moving from backend to the frontend, I was given a design and don’t know the best way to handle how to implement it. It’s gonna be about 6 or some images or layered. All Images are 1920px wide * X px high.
I did a little fiddle so you can see what I’m working with. A few images are in there too. https://www.bootply.com/EEjlR9IaFN#
So the problem is setting the width and height of the image/div causes it to extend outside of the bootstrap container and it’s not responsive. So that’s where I’m stuck, I can’t think of a way to make these images fit inside of this container and be responsive. I was gonna just use the img tag but would rather do it via css if I can
You can do a little trick that I learned to do the same thing, and it's putting an image behind for the responsive and the background for the front.
HTML:
<div class="element">
<div class="background-image"></div>
<img src="http://via.placeholder.com/1920x1080" class="image-responsive" alt="">
</div>
CSS:
.element{
position: relative;
display: inline-block;
}
.background-image{
background-image: url('http://sharksharkshark.net/snow.png');
background-size: cover;
background-position: center;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.image-responsive{
max-width: 100%;
}
NOTE: You can play and change the size of the back image for the responsive. In this way the div will not be empty but it will be responsive.
Example:
https://jsfiddle.net/grg9rc7z/1/
I apologize if this has been answered time and time again. I remember searching thoroughly for an answer a couple years ago when I first wrote up my website script, but I couldn't ever find one. The same for now.
Recently I reworked my website's script so I can host it onto Weebly. Here is one of the four pages of my site that I need help with. As you can see, the images that pop up when the thumbnail is hovered over are absolutely positioned. For most computer resolutions and/or browsers, this will have the image appear out of the designated box.
How could I position them to the inner top left corner of the div? Or better yet, horizontally and vertically centered within it?
<section id="Sizes" style="float: left">
<a href="#Space">
<img class="Small" src="/files/theme/SampleD_Fun_Icon.png" width="150" height="150" alt="Sample 1: Day of Fun" />
<img class="Large" src="/files/theme/SampleD_Fun.png" width="150" height="150" alt="Sample 1: Day of Fun" />
</a>
...
</section>
<a id="Space"></a>
<span class="Popup">Hover over thumbnail to display sample artwork.</span>
<br style="clear: left" />
a:hover img.Small
{
border: 5px solid #21568b;
margin: 10px;
text-decoration: none;
}
section#Sizes a img.Large
{
border-width: 0;
height: 0;
left: 438px;
position: absolute;
top: 326px;
width: 0;
}
section#Sizes a:hover img.Large
{
height: 526px;
left: 438px;
position: absolute;
top: 326px;
width: 520px;
}
.Popup
{
border: 3px solid;
float: left;
height: 272px;
margin: 8px 20px 0px 0px;
padding-top: 254px;
text-align: center;
width: 520px;
}
Thank you for your time. :)
Your whole design is a bit fragile, and I wouldn't recommend building this this way in the first place, but you're looking for practical answers, so here's the smallest change I can think of that fixes your problem:
1) Add this to your style sheet:
body { position: relative; }
2) On line 40 from your main_style.css, change top: 326px to top: 316px and left: 438px to left: 428px, so that it becomes like this:
section#Sizes a:hover img.Large {position: absolute; top: 316px; left: 428px; width: 520px; height: 526px;}
How does that work?
Your images are place using absolute positioning. By default, that works relative to the viewport (the window). But by turning the body into position relative, it becomes a containing block, and position absolute is relative to the nearest containing block ancestor.
So now, your images are fixed within the body element, instead of being fixed relative to the window. Since the margins of the body element is what's changing size when you resize the window, that makes the various pieces of your content fixed relative to each other. You then just need to remove 10px from the top and left side, since that's the size of the border of your body element, and we're now measuring from inside the border.
TLDR: You can't do this in pure CSS.
You can easily position the image inside the container div if you place the image element inside the div element, and then use absolute positioning like top: 0; left: 0; (or with a number of other methods). But then you'd need JavaScript to correlate the hovered thumbnail with the popup full-size image.
Alternatively, you can have the full-size image be nested in the thumbnail element (like you currently have), but then you'd need JavaScript to position the full-size popup image inside the container div.
Of the two alternatives, I recommend the first: put all the popup images inside the target container, and use JavaScript to show or hide them when a thumbnail is hovered. Correlating the thumbnail and the full size image via JavaScript is going to be easier then writing positioning code.
I see you're using jQuery already so why not do something like this?
$('.Small').on('mouseover', function(){
$('.Popup').empty().html($(yourtarget).attr('img' , 'src'));
});
$('.Small').on('mouseout', function(){
$('.Popup').empty().html('Hover over thumbnail to display sample artwork.');
});
Just because everyone was saying it can't be done with pure css, I wanted to demonstrate that it can, and it is even quite easy. Have a look at the folowing example:
http://jsfiddle.net/aafa2zp5/
<div id='images-wrapper'>
<ul>
<li>
<img class='small' src='http://placehold.it/50/ff0000'/>
<img class='big' src='http://placehold.it/300/ff0000'/>
</li>
<!-- and some more similar thumb / image groups -->
</ul>
<div class='preview-area'></div>
</div>
CSS (or the relevant part at least)
#images-wrapper {
position: relative;
}
.big {
display: block;
position: absolute;
top: 54px;
right: 54px;
opacity: 0;
transition: opacity .5s;
}
.preview-area {
width: 350px;
height: 350px;
border: 4px solid blue;
position: absolute;
top: 21px;
right: 21px;
}
li:hover .big {
opacity: 1;
}
The key is to set a position relative to the wrapper (and keep all of the descendants as their default static). Then you can use this to position the preview area and the big images against by setting them to postion absolute and carefully calculating the correct postion. I even added a cross fade, just because it is so easy, but you could just as well work with display block / none if you prefer.
For smaller screens you may want to alter the dimensions and positioning inside a media query, but it still should be doable (though depending on the hover state is perhaps not the best idea on a touch device)
I hope you get the idea and you can figure out how to apply this technique to your own site. Feel free to ask if you want me to explain further or when you get stuck.
I'm new to this world, but loving it so. Please excuse my newbie status if I ask ridiculous questions or if things are not posting quite right. Please advise as you see fit.
I am trying to get a button to float over an image. I've brought the image in as an in-line element so that I can preserve the PSD link in Dreamweaver, rather than bringing it in as a background image and for the alt attribute applications. I'm guessing the problem is that I want the inline image to act as a block? Is that right? I've been able to get the button to float over the image using relative positioning for the button and absolute positioning for the image, but then am unable to center the whole thing on the page. Any advice you have is greatly appreciated!
CSS
#container {
margin: auto;
display: block;
}
#button {
width: 100px;
height: 100px;
background-color: blue;
float: left;
position: relative;
}
HTML
<body>
<div id="container"><img src="index.jpg" width="1200" height="900" /></div>
<div id="button"></div>
</body>
Move your button div inside your content div:
<div id="container"><img src="index.jpg" width="1000" height="900" /><div id="button"></div></div>
And then change your container to be the width of your content. Position set to relative. Then, position the button inside the container div with absolute, top, and left.
#container {
margin: auto;
display: block;
width:1200px;
position:relative;
}
#button {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top:0px; left:20px;
}
I'm in the midst of making a navigation bar. I came here earlier and got some help re-organising and coding said item. All seemed great and it seemed like it should work but when using the following code instead of each image resizing, it only showed X% of the images height and Y% of the images width. I cannot figure out what is going wrong.
CSS:
#navbar a.newr:link { background-image: url('newr.png'); display: block; width: 5%; height: 2%; }
#navbar a.newr:hover { background-image: url('newrhover.png'); display: block; width: 5%; height: 2%; }
Please refer to how it looks looks on my website to see what I mean.
Please also refer to my other navbar question.
Thank you.
Background images don't resize. They are shown in full size and are clipped if the container is smaller.
What you can do:
The best approach is to resize the images to the target size
A hackish approach is to use absolutely positioned <img> tags as background and <span> text as foreground.
<div class="hasBg">
<img>
<span>text</span>
<div>
.hasBg{
position:relative;
}
//will autofit depending on how span stretches the container
.hasBg img{
position:absolute;
top: 0;
bottom: 0;
left: 0;
}
.hasBg span{
position:absolute;
}
A native but new feature is to use the new CSS3 background-size. but this is not cross-browser afaik
Since you've done it as a background image, the width and height attributes only apply to the div, not the image.
You have two options.
Resize your images to fit the dimensions
have your images on your page and use javascript for your hover effect
my question is more or less self-explanatory, I am trying to find a standard dynamic way to centralize an element in the y-axis, much like the:
margin: auto;
For the x-axis. Any ideas?
I am talking about the following piece of code, empty page, align one image in the center.
<div id="main" style="display: block;">
<img style="margin: auto; display: block;"
src="http://www.example.com/img.jpg" />
</div>
Any help will be appreciated! :)
Just give up and use tables on this one, with vertical-align: middle. You can get away with just a single-row, single-cell table without feeling too guilty (I sleep like a baby about it). It's not the most semantic thing in the world, but what would you rather maintain, a tiny one celled table, or figuring out the exact height and doing absolute positioning with negative margins?
If you know the height of the element that you're trying to center, you can do this:
img {
display: block;
height: 500px;
position: absolute;
top: 50%;
margin-top: -250px; /* 50% of your actual height */
}
I know only one way for that:
#mydiv {
position: fixed;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
}
This is for x and y axis - but width/height and margins have to be changed for every element. I hate it :-)
Additionally you get problems if the element is larger than the browser-window.
The best known method is to use absolute positioning. You set the top amount to 50% and then set a margin top of minus half of the element.
#main {
position: relative;
}
#main img {
position: absolute;
top: 50%;
margin-top: -(half your image height)px;
}
Here is a variation using vertical-align
http://jsfiddle.net/audetwebdesign/r46aS/
It has a down side in that you need to specify a value for line-height that will also define the height of the containing element that acts like the viewport (outlined in blue).
Note: You may be able to get around the window height issue by setting a height to the body or html element (100%) but you would need to try it out (see 3rd reference).
However, the good thing is that you don't have to do some math based on the dimensions of the image.
Here are some references related to vertical alignment:
http://css-tricks.com/what-is-vertical-align
http://blog.themeforest.net/tutorials/vertical-centering-with-css
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
and sometimes I have to remember the basics so I reread:
http://www.w3.org/TR/CSS21/visudet.html
This may not solve OP's problem, but may be useful in other contexts.
Using #menu img { vertical-align: middle; } in my style sheet works great for the latest versions of FireFox, Opera, Safari and Chrome, but not in IE9. I have to manually add style="vertical-align: middle" to every line of img code. For example:
<li><a href="../us-hosts.php">
<img src="../images/us-button.png" width="30" height="30"
alt="US Hosts" style="vertical-align: middle;"/> US Hosts</a>
</li>
Try this css:
margin-top:auto;
margin-bottom:auto;
display:block;