Image Centering Issue Inside Parent Div Element - javascript

I used JavaScript to create a slideshow on the homepage of my site. The problem I'm having is that the image will not center to the page, despite my best efforts. I can get it centered if I set the image child element like so:
#slider img {
left: 218px;}
but that doesn't center for different window sizes. I'm using fairly large images, but they can always be resized later. I used placeholders for the fiddle. How can you fix this?
Fiddle

U can easily center image by set up:
#slider img {
display: block;
margin: 0 auto;
width: 100%; // or your own width
}

Your images inside #slider have a position: absolute. This negates the scope of the container and the image is no longer relatively positioned inside the container div#slider.
Use margin: auto and display: block without absolute positioning.
Example: https://jsfiddle.net/sukritchhabra/smndp65m/

You could also do margin:auto.

Try
<div align='center'>Hello world</div>

Related

Making an absolute element appear below a fixed element

I am having issues with my website where my fixed header is appearing above an absolute paragraph here.
Is there any way I could fix this?
#matt-croak's solution will work in your case. Here's some good to know CSS fundamentals of positioning - when you use position: absolute for an element, the positioning attributes like top left right and bottom rely on the nearest parent element that has it's position set to relative.
Make sure you create a wrapping div for all of your elements other than the topbar and set position: relative on the wrapper.
Subsequently, all the elements within the wrapper div will use it as a reference for positioning.
In your CSS add z-index: 10; to your #headerback div.
#headerback{
background-color: #430A6C;
width: 100%;
height: auto;
position: fixed;
top: 0;
z-index: 10;
}
z-index manages the stacking context of elements. If you want something to appear in a higher context (meaning above other elements) then give the z-index a higher number. 0 is default.

Image max-height

I have got a tiny problem, im creating a website and i want to give an image a max-height. The image may only have the same height of another div.
You can check the layout here: http://bit.ly/1OAGsLR
Its about the 1920x1080 image, and i needs to be the same height as the div with class box left to it. If right the image should scale well.
But im trying all i know but i dont get it working, can someone get this working with CSS or do i need to use Javascript for this?
Thanks in advance!
Your image is looking the way you want when the screen width is at or above 1400px. You should consider using css media queries to move or adjust the image at different screen widths. Your layout could easily be handled using a css framework like foundation or bootstrap which would take care of css media query breakpoints for you.
If you are intentionally trying to not use a css framework, I'd check out this css media queries tutorial to get you started.
You need to make your container div wider.
Your container is 1200px wide, and your boxes are 560 + 40 padding wide each.
That means that the max width of you image is 560px.
Now to conserve it's aspect ratio of 16:9, the max height of the image is 560 / 16 * 9 = 315 pixels.
Okay, your main problem is that heights don't like to be defined this way. I have a solution for you that will 'solve' this issue, but its not very pretty and you might want to look into doing this with javascript anyhow. Below is a very rough example mockup.
body > div {
width: 100%;
max-width: 500px;
background: green;
padding: 10px;
position: relative;
}
body > div > div {
width: 50%;
padding: 20px;
}
body > div > img {
position: absolute;
right: 20px;
top: 20px;
max-width: 50%;
/* make sure to fall back to 80% so theres at least some gutter for older browsers */
max-height: 80%;
/* use calc to make the image the height of the relative parent minus padding */
max-height: calc(100% - 40px);
}
<div>
<div>Push<br />Push<br />Push<br />Push<br />Push<br /></div>
<img src="http://placehold.it/350x150" />
</div>
In short, this will place your image to the right of your box, give it a max-height (because positioning can do that) and a max-width (so smaller screen sizes don't freak out).
Now you could easily translate this a more general system where .box + .boxget a absolute position, or you could define a class for the box that has to push content and add that to the first box, making all other boxes absolute.
I fixed it by using JS, im using the following script:
<script type="text/javascript">
function changeheight(){
var Height = document.getElementById('box').clientHeight;
document.getElementById('imagebox').style.height = Height+'px';
}
</script>

I created a slideshow using jQuery and the slideshow stays in the middle of the screen when I scroll down

http://magician.sdf-eu.org/zee/Click%20This%20One%20To%20View%20What%20I%20Have%20So%20Far.html
Thanks a lot for your help, stack overflow.
CSS is here
http://magician.sdf-eu.org/zee/css/showcss.css
jQuery source code is included in the page.
This is because your ".center" class has position of fixed. Try switching it to absolute:
.center{
//other styles
position: absolute;
}
change the position:fixed to position:absolute at your .center class
.center
{
position:absolute;
left:50%;
margin-left:-490px;
}
Note :at fixed position the element is positioned relative to the browser.
or instead you can use this
.center{
width: 980px;
margin: 0px auto;
}
a bit less code :)
badAdviceGuy is right, it's because your position is fixed. This tells the item to stay on this part of this page no matter what the scroll value is.
However, you shouldn't even need to set an absolute or fixed position here.
A nice fix for you would be to remove all of the styles you currently have set on your center tag.
Then style it like this:
.center{
width: 980px;
margin: 0 auto;
}
We use 980px, because this is the width of your images/image container and most likely always will be, at least on this project.
And margin: 0 auto, basically tells your center container to add 0px on the top and bottom margins, but set the left and right margins to the same px amount so that the element is centered within it's container.

Creating a cross on an image inside an HTML file

I have an image inside my page. After some javascript trigger event I want a cross appear on the image. Image will still be visible but cross will be on top.
What is the proper alternatives for this?
(I have similar question here that used HTML5 canvas)
I would create a wrapper for the both the image and the cross, and have them absolutely positioned within the wrapper. The wrapper itself would be fluid within the DOM, but the image and cross would be absolutely positioned so that the cross appears on top of the image. This can be done by setting the wrapper's position property to relative and using absolute positioning on its children.
As for the cross, I would use an image. This way you can set height and width to 100%, so that it will stretch with the wrapper. To control the sizing you would set width/height on the wrapper element, not the images themselves.
HTML
<div class="wrapper">
<img class="img" src="actual-image.jpg" />
<img class="cross-img" src="cross-image.jpg" />
</div>
CSS
.wrapper {
position:relative;
width: 150px;
height: 150px;
}
.img, .cross-img {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
.cross-img {
opacity: 0.5;
}
It's then trivial to show or hide the cross. Here's a jquery snippet:
$('.cross-img').hide();
Here is a jsfiddle demonstrating this: http://jsfiddle.net/J69qR/

How to keep text over a huge image in proper position on all resolutions?

In my intro page I have a really big image in height and width to fit all the resolutions (more than 4000px in width) and I set it as below:
#source-image {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
Then, I added some text over that image with these style properties:
.description {
position:absolute;
top:510px;
left:23px;
width:340px
}
And it looks properly (and as I want it to be shown) on my 15.6 inch laptop with 1366x768 resolution.
However when my roommate saw it on his high resolution monitor the description was not on the “right” position. Of course, I understand why this is happening.
My question is how can I keep dynamically the proper position of the description text in all resolutions?
Thank you very much.
Set the distance from the bottom, not from the top. Or set it in %.
EDIT: I've adapted one of my experiments into an example: http://dabblet.com/gist/2787061
The position of the description is set relative to the bottom and the left of the image container (the image is filling its entire container).
In the first case, the distances to the left and the bottom of the image container are fixed, in px.
In the second case, they are in % and change on resizing the browser window.
Basically, the rules that do the trick are
figcaption {
bottom: 5px;
left: 23px;
/* more rules here */
}
in the fist case (fixed distances, in px) and
figcaption.perc {
left: 10%;
bottom: 17%;
}
in the second case (percentage).
Also, please note that you don't need position: absolute or to set the top and the left properties for the image.
However, you do need to set position:relative on the parent of the description box.
For the image to fill the screen horizontally, you need to have margin:0; and padding:0; on the body element and width: 100%; and margin: 0; on the figure element. I've edited my example to reflect these changes http://dabblet.com/gist/2787061
For the image to fill the screen both horizontally and vertically, the easiest way is to not even use an img tag, but simply set the image as a background image for the body and set the height for both the html and the body elements to 100% - example http://dabblet.com/gist/2792929
Be careful for two reasons: one, this will really distort the image and can make it look ugly when resizing the browser window and two, if you need some content below the image you will need to give the the outer element position: absolute and set its top: 100%. Both these two aspects can be seen in the example I've linked to. You can simply remove the content below the image if you don't need it.
use position:relative; for the div that wraps the image, and position:absolute; for the text div
please set percentage
check the example- description box set in horizontal center,
first set position relative into wraper div
.description {
position:absolute;
top:510px;
left:50%;
width:340px;
margin:0 0 0 -170px
}

Categories

Resources