hopefully a nice easy question for someone :)
I have a gallery strip of photo's which load a main image in the above DIV. The gallery strip appears fine in Chrome but in IE and FF the scroll bars do not appear and the gallery spreads itself out vertically, can anyone help? Thanks in advance! :)
Here is the page
http://www.militarysilver.co.uk/military-silversmith-gallery.php
Many Thanks,
Dan
You need to set a width to div.container other than auto. A fixed width will ensure that the nested list items won't wrap on the browser's edge (auto in you particular case refers to 100% browser width) rather than on pixel 2048 (if you set this as the div's width).
Hope that clarifies things up.
aefxx
Remove the float from your li style in your CSS and replace it with display:inline. Place overflow-x:scroll inside the gallerystrip class.
This way does not require a set width and does not produce unwanted effects.
Hope this helps.
Related
I use maphilight jquery plugin with hover and onclick features. Which works fine.
Is there a way to draw a rectangle by default on the areamap image at a predefined position and size? So without to hover or click on it, just draw a rectangle right after the page is loaded.
I would like to use this solution with PHP+mySQL search. So when someone searches and finds the desired objec on a page (as a part on an areamap, and I know the position of it), clicking on the result link, I would like to load the page that has this shape and would like to be highlighted or drawn around with a rectangle as long as the person click/hover on another area on the same page. Or if this is not possible, then just drawing the rectangle on the desired position.
Is there a way to accomplish this?
The searching and lauching mechanism is not an issue now... I'll do it somehow. I just need the solution to draw the rectangle on areamap.
I tried using CSS "z-index", canvas and even SVG but the rectangle was always drawn after the area map, so at the bottom of my page and not on the areamap :(
Can anyone help me? Thank you.
your rectangle also needs to have position:absolute css style, e.g.,
$('div.map').append('<div style="position:absolute;left:100px;top:100px;
height:10px;width:10px;background-color:#f00;z-index:1;"></div>');
In my site link
http://gpuzzles.com/games/tower-of-hanoi/
There is space difference between text and flash, how can i resolve it
The space belongs to the flash object, so the best solution is editting the flash file.
But you could also use wmode=transparent and a lower z-indexto the flash, and use negative margins to fix the space.
there are some work around to move the div have green background using position:absolute property and giving z-index a bit higher value.
So in your case you have to use position:relative in ID #content-box-in-left-in and then give the child div position:absolute and top: or bottom this way you can move the green background to anywhere by giving some value to top or bottom.
I can't make a Demo here as you only upload the website link not any Demo link.
http://dev.goforadventure.com/?post_type=trips&p=108
Hello,
Please squeeze the browser closer together until you see the accordion form with the little arrows to the right.
There is a div with a featured background image above the set of tabs (this is Wordpress)
When the tabs are closed, the width of that image div depends on how much space the post title/h1 above it is taking - if I make that font size larger, the picture will stretch larger with it.
If you open the first or last tabs, they have a large amount of text in it - this also causes more of the photo to show.
I am assuming because the div has width:auto applied to it, it isn't showing that much background because the content in the accordions are hidden by default.
Any idea to trick the image div into thinking theres more space there so the image and accordion tabs will stretch across the entire browser while theyre closed?
Thanks so much!
If you remove the width:auto on the div that has the image and set it to 100%, you will notice nothing happens. Then we look at the container element of that div, the one that has id="content" and role="main" That div has float:left. Remove the float in your media queries, and it will show as you want.
I’m working on this horizontal scrollbar that grabs content from the database when you scroll to the farthest right. Here's an example of what we want to do:
http://designarchives.aiga.org/#/entries/%2Bcollections%3A%2250%20Books%2F50%20Covers%20of%202009%22/_/grid/relevance/asc/0/48/120
I found useful tutorial here but its vertical scroll:
http://www.9lessons.info/2009/07/load-data-while-scroll-with-jquery-php.html
So far it is working vertically, but how do you load data while scrolling horizontally and on a DIV overflow, not the window?
Your URL is broken but I wrote an accepted answer on how to work with horizontal scrolling divs here. Hopefully that helps you.
Here's the working fiddle in case it wasn't obvious where to look. jsfiddle.net/gAMyR/26
i am trying to display a webpage within a webpage as you can see over here
http://www.yoursdproperty.com/index.php?option=com_jumi&fileid=8&Itemid=34
the top and left part is my site, and the stuff that is the main content in the middle is a different site. i may not be doing it correctly since it is not displaying it at size that fits.
the main content page is:
http://www.mlsfinder.com/ca_sandicor/raphaelshapiro/index.cfm
You will struggle to make this work perfectly for the following reasons:
You're trying to fit an 800px wide web page into a 700px wide div.
You cannot access the child frame's DOM to manipulate it because it's on a different domain.
You cannot rely on a consistent height for the child frame. Although it has a fixed width, users with different accessibility settings (such as default font sizes) could cause text to wrap and adjust the height of the document.
Although you can overcompensate for point 3 by increasing the height of the iframe to allow for any extra height, you can't really deal with point 1 without changing the layout (mainly the width) of your site.
If I were you, I would look into other avenues of adding the functionality you're looking for. Maybe by contacting the site owner and seeing if they can accomodate your needs.
You are doing it correctly, the page won't fit as it's a fixed width of 800 pixels, it will not squeeze down to fit in your page. So only option for you is to stretch your content area to 800 pixels.
Remove the width and height properties of the iframe tag. Adjust the width style property in the style property so that it is the correct size for the page. It appears that you need to make the iframe wider.
<iframe src="..." frameborder="0" style="width:800px;height:480px;" />
Another option, of course, would be to remove the 'scrolling="no"' from the iframe tag to allow users to use the scrollbar to see the entire inner page.