i am trying to make a div which have a lot of images which takes 85% width of the screen. the height doesn't matter as long as the content stays the same. the footer is fixed and the navigation will drop down a div which contains images at the width (85%) of the content size. and the images should scroll with two buttons, next and previous. i'm new to java, html and Css. please help me. thank you :)
I will help you on your way.
I hope this helps you!
To get a div to get scrollable you have to specify that in your css code with the overflow attribute.
Take a look in this fiddle
http://jsfiddle.net/d8dFd/
Related
I have a slideshow that I would like to fill a div completely.
Right now, if someone visits my site from a narrow browser viewport, the slideshow will only fill the width but not the entire height, therefore leaving space at the bottom of the div.
I would like the slideshow to proportionally scale to fit and cover the entire div, even if cropping from the sides is necessary. Does this make sense what I am asking?
Here's the example:
If you visit it right now from a wide or full screen browser window, the images probably fill the entire div. But if you narrow your window and refresh, you will see the bg color at the bottom of the div. Example:
http://mudchallenger.com/a-responsivef.html
How can I get this slideshow to fill the div?
Thank you!!
You can probably change your position:absolute for slideshow class
.slideshow {
position: absolute;
}
You're looking for a way to make your background image fit the back of the page. What Ed is looking for is the CSS/JS that you currently have, so we can better tell you what you should do differently.
This article gives great examples of different ways of achieving what you're asking for:
Perfect Full Page Backgrounds
And if you're interested in another way, here's a JS library that does it as well.
Backstretch
Without seeing your code, that's as good an answer as can be given.
I am trying to use the following gallery/carousel http://coolcarousels.frebsite.nl/c/2/ to implement onto a site.
What I am trying to do is add a text area identifying who created the image next to it, i.e. having the image in a div floated to the left and the content floated to the right.
I create the div and set it all out in css and looks all ok but for some reason the carousel does not work, its like there is a problem with adding HTML tags.
Has anyone used this carousel and had a div rotating with an image and text in it if so please help me.
Cheers Andy.
At first I want to show you what I want to create.
Example! ! Here you have to go on "Galerien" and now resize the Browser in height or width. You see that the images/divs automatically fits on the container.
There is no problem when you only keep attention on the width, but you have to combine width and height that no image overflow the container. I worked with javascript and i want to create if conditions to prevent the overflow.
It is hard to explain, but i hope the example show my problem.
Thanks a lot.
Basically what I have is a page with a background image and when I have content which is quite long and overflows. I want the text to be inside that image and it appears to fade out when scrolling at the end of the image and the top of the image. I do not want internal scrollbars. The background image itself is fixed and centered and I want the text to always remain inside there.
Is this possible? if this is not clear then I will try and explain myself further.
I have looked at options in Jquery and CSS fading but cannot find exactly what i want.
Any help is appreciated!
Thanks
H
I would suggest you plant an image overlay (white to transparent) at the top and bottom of the div, but that might not work because of your background...could we perhaps see the background you are using?
The two images Nexxeus says should be placed in a fixed position at the top and bottom of the browser. You shouldn't touch what the overflow does, since it will be hidden below the two images.
I want to make a div that expands to reveal its content when clicked. What I did to date is:
Created a div, set to overflow:hidden
Created a JS function that toggles the height of the div between "minimized" and "maximized" (20px height and XYZpx height).
So far everything works, except I don't know how to get the height of the content inside my div so I can make the div resize to fit the content exactly. So in essence I have hidden content that overflows from the 20px "minimized" div, and I can expand the div to reveal the overflowing content but I don't know by how much to expand it.
Do you have an idea how I could do this?
Thanks in advance!
Here's my stab at the problem. I wasn't sure exactly what you were trying to do.
http://jsfiddle.net/Mw6Ys/2/
Can't you just remove the overflow hidden and height css. And the div will resize the correct height. And if you need to find the exact height. Use javascript to remove the overflow:hidden and height. Then measure the offsetHeight and set that to the height. Though if you are doing this it might be better to remove the element from the DOM then place back in once you are done.