This might be two questions in one, I'll strat with the actual one.
I want to build a website that is simple and that is mostly out off pictures. Those pictures are set so resize automaticly between 1280px and 640px - that works fine.
BUT now I want to have a div that slides in above each picture once you hover above it.
The sliding in can be archived with css or java that I know, the problem is that the div with the text does not resize as the picture does. In other words putting it to 100% height and 100% width doesn't fix it to the picture size. Is there a way to have it always the same size as the picture below it?!
Right now the height is set to 360px because thats how I left it but here is the link to my testpage so you can take a look at what I mean.
www.panorama-publishing.de/theme-dev
thank you in advance! let me know if you need more detail.
Why don't you resize the div containing the picture and not the other div (call it overlay, if you will). Then you can set the picture to be 100% of the parent div and the overlay can slide from top to bottom and be as big as the entire screen, if you are lazy. As long as you set oveflow: hidden; to the parent element, everything will be just great. This is what I mean:
JSFIDDLE
I've came across this problem when struggling with bigg css libraries and elements that are sometimes hard to style around.
This jQuery solution have helped me where I basicly make the width of an element follow an width of a target element width.
function resize_follower() {
$(".follower").width($(".some-size").width());
}
$(window).resize(function () {
resize_follower();
});
$(document).ready(function () {
resize_follower();
});
Example fiddle here
Related
I'm working on a website for a friend of mine. There's only one problem. The slider won't fit in the frame without stretching.
I've set it to 100% height, but it won't work out. (Its also responsive)
I want it to be a nice image in the original width and height (100x100, 200x200 etc) without stretching (200x500).
I hope you guys can help me out on this.
I'd tried alot and also asked some other people but they can't help me with this.
You can see the slider over here.
http://tinyurl.com/p36hz6u
Here's another version of the slider, but on this version the slider image gets cut off
http://tinyurl.com/nfjjvwu
If the images are background images, consider using the background-size:contain; which will allow the image to grow as large as visible/possible without stretching, and then you can position the background image wherever desired with background-position
If the slides have actual physical <img /> tags, I made a JSfiddle that demonstrates code that will contain an image within an element. In this example, the <div> tags represent a browser window and can be resized: http://jsfiddle.net/dds27w2y/
Firstly what I would do is to remove the: background-size: 100% 100% and add a background-position: center center.
Then I would add a background-color: white to the container. This would make it look nicer and it would be centered.
I made some changes to a website for someone and it works and looks perfectly when I open them in chrome, but as soon as I upload them on to the iPage server and look at them on the actual site everything is broken.
The index page is the only page that looks how it's suppose too. I've exhausted most of my resources and the person is furious. Anyone have any ideas as to what could be causing this?
If you haven't already, wrap all the buttons inside a container. Make the buttons width 25%, float them left and then position the container, as you haven't provided any code i'll provide an example for you. This should solve the problem.
Inside the container where the buttons are, create a new div and call it button container and wrap it around buttons.
<div id ="button_container">
//button tags go here
</div>
For CSS assign the width and height to the button container and for the buttons including the css you have now.
#button_container {width:25%; height:30px;} //example dimensions
#button1, #button2, #button3, #button4 {width:25%; height:100%; float:left;}
make sure the container has a margin so that is above the other content. you can also make the container 100% width to match the width of it's parent.
I have created a html page which simply has a div and an image inside of it.
My problem is when I resize the browser screen, the image is also resized. I would like to make something to whenever the browser screen changes its width, for example, the image keeps the same resolution by showing scroll-x to see the entire image.
I could do it by doing some workaround. Please see the fiddle below:
http://jsfiddle.net/EB2cq/
<div style="width: 1424px; ">
<img src="http://1.bp.blogspot.com/_duWYbLDtB5s/RxD10qnsOZI/AAAAAAAAACc/9nPZhQRAVZ4/S658/google_logo_halloween_d-(mip.jpg"/>
</div>
As you can see I can scroll through the image when the browser screen changes its width. But in my case I don't want to see the width of a div cause I only want to show the scroll bar when it is really necessary.
If you remove width style attribute from div in the fiddle above, the behavior is what I'm expecting. The div gets the scroll x only when the width of the page is less than the width of the image. However, in my web application, the same thing does not happen. The image is also resized according to browser width.
What can I be missing here? I have exactly the same fiddle code in my web application
I took a look at this question but it has not helped so much:
Get image to stay fixed even with window resize
Have you checked the style of the parent element(s). That might be the issue.
I am working on my portfolio and I am having an issue with the project description shifting the images on the left downward when the browser resize. A picture of the issue here: click here When you resize the browser the text will shift over and move the images down. I've tried setting min-width but that doesn't help the text nor the image div to make sure it doesn't resize at a certain point.
Here is a sample link to the page itself: [click here][2]
I tried adding min-widths to a image element but that doesn't work either. I do not want to use absolute position as it will overlap on top on resize. Any thoughts or suggestions?
You have an image that is 1052px wide, which is in a UL element that has a margin-left of 1.5em. Your description box is 350px. Basically your #imagewrapper div needs to be equal to or wider than all of these elements.
Right now that's about 1422px. It will change if the effective font size for your UL.imagewrap-pad changes.
That's a pretty wide web site. You probably should make it a bit narrower if you're making it for general viewing, especially with all the tablets etc out there now.
Anyway, the code you want is
#imagewrapper
{
width:1422px;
margin:0 auto;
}
The second line makes it center on the screen.
P.S - get Firebug for Firefox, or use similar tools in chrome. They let you endlessly experiment with styles to find out what works for you.
To solve the problem just set the "width" property in #imagewrapper :
#imagewrapper {
width: 1430px;
}
Have You tried setting up width attr on the parent element to around 1800px?
div#imagewrapper {
width:1800px;
}
It will put a scroll bar at the bottom of Your browser, but if You want to put such a big image beside that text then You do need a lot of space. Just keep in mind that it won't fit in users monitors.
To make it look nice I guess You should apply that attribute to the body tag.
I am a new learner of html and jquery.
Please help me how I can create an overlay div which covers my whole screen, including the background image as well. I was able to create an overlay div but it does not covers my whole screen, instead it covers my container div and if i increase the width it stretches to right side but left part remains uncovered.I put my overlay div in the outer most div but still on increasing the width it gives extra width to right side only and left part remains uncovered.
.
My wrapper div has a background image for the whole screen but my overlay div is not able to cover left part of my container div. Please help me.
thanks
HP
take a look at the blockUI plugin
http://jquery.malsup.com/block/
lots of different styles available!
the page blocking example is what you need, it works with a div or a html string for the message while the overlay is shown.
I got the answer.
YOu can put margin:auto; Now, your browser will take care of it and it will occupy the whole screen.