I have a html page with 12 thumbnails (spliced Photoshop) within a table (Table_01) within a div and when you hover over one of the thumbs a new image pops up.
At the moment when you hover over the "Ice white" thumb (this is the one I'm testing with at the moment) the new image pops up at the top of the page.
This is no good. It needs to pop up exactly to the right of the div which Table_01 is contained in (preferably top of pop up image flush with top of div and left side of pop up image touching right side of div if that makes sense). CSS is within head of source code near the end. It's not the best written webpage and is very messily coded but this bit should be easy to weed out and identify a solution hopefully. Any help greatly appreciated.
Late response obviously but I hope, it will help you out anyways.
As far as your comments above, those popping out new images needs to have absolute position with some right and top positions fixes. For example, considering that you are having a 3 divs in a row, each div is having an image, you should mention the parent div (containing the image) to have relative position; inside it the image (actually the popup image or thumb) should have position absolute and then it should have right and top adjustments in CSS as per your requirement.
I hope it will help you out...
Related
I am having a difficult problem which I can't solve properly. I am trying to design a web page. I came up with a problem and I can't find the solution. I have two pics in my web page. I want them to be in the center of the page. It is quite diffcult to set the image float left and then right and then bottom. That is too difficult for me. and then my second problem is I want a text below my image.
But I can't do that because it is difficult to set the text position like "left:20x: "right:20px; and blah blah.
Set the positions of the images to relative style="position:relative;" then use right and left to move them from side to side (top and bottom to move them up and down). You can also put your text in a < div > and move it separately.
If after this you are still unsure, please enter your code and I'll examine it to make any modifications required.
EDIT: Here's an example of the CSS code I'm suggestions you use, in case you didn't understand what I meant:
style="position:relative;left:10px;top:35px;" Put this in the img tag and it would alter the position of your image by 10 pixels to the right and 35 pixels downwards.
I currently have a iframe video and sitting on top of this are 4 clickable images. Below this, I want to have a contact Me page, however, the problem I am facing is How to get my Contact Me div blow the iframe video. Can someone Help me sort this problem out? Currently, on my codepen, you will see that i have applied a linear gradriend which is where the video is to be placed, and even though I have a Contact Me div in place, it is not placed in the top left hand corner, behind the iframe video, and I want it to be below the div, totally separated from it.
You can see my code on my Codepen, here
and this is what i currently have :
.
As you can see from the screen shot, this is the front page, but the "contact me" div is placed behind the video, in the top corner... can someone help me fix this issue?
You have too many elements with absolute positioning. You don't need all of that.
To position an element absolutely relative to its parent element all you have to do is add position: relative to the parent and position: absolute to the child.
And because you're positioning everything absolutely, elements are losing their height and it's why your contact div is moving to the top because the flow of the page is broken, and therefore, your contact div doesn't really see elements above it. Plus, you have color: white on the body and that applies to everything on your page including the contact div. change it and you'll find your contact on top of your header.
If you need more info I'm happy to help.
Your contact header is there. It is in the top left corner, but it is white (at least that is what I see on the code link)Give the <h1> a style color to help make it stand out, <h1 style="color:blue;"> etc. Also move the div to above the image in your code. That should also help.
What I am trying to do is similar to an image map - in reverse. I have a large image (over 2000x2000) and want to give links to coordinates on the image. There are items in the image that I would like users to be able to jump directly to with having to scan over the whole image manually. Is this possible with either CSS or HTML by adding links to coordinates or adding anchors to the image? I would use js if that was an option as well.
Interesting. The notion of jumping to a position on a web browser window is limited in general. Here are some general possibilities, without specific implementation details:
You could treat it as a sprite image, and use JavaScript/jQuery to change the image coordinates so that the point of the image you are interested in moves to the the top left of a div positioned on the page. But the portion of the image above and to the left of that point would not be visible.
You could define it as a background image in a div, and define an invisible table or invisible fixed-position divs within that div, and link to specific divs or cells in that overlay. In this case, a y-coordinate in the image where the div or cell is positioned would probably move to the top of the browser window, but horizontal positioning would be problematic. If the div or cell you target is off the screen to the right or left, the page would shift to expose it, but I don't thing that you could guarantee where the specific x-coordinate would be positioned. Also, if the target is near the bottom of the web page, that target point will not move to the top. But this solution wouldn't require JavaScript/jQuery - it would just mean linking to element ID's on the page.
This is almost the same as #2... You could overlay the image with divs and/or a table at higher z-levels, and link to those divs or table cells.
You could use JavaScript/jQuery to position a fixed-size div with visible borders so that its upper-left corner is at the position in the image that you are interested in. I think you'd still have to link to that div in order to make sure that it is visible in the current viewport.
You should be able to lay out a form over the image and move the cursor to fields on the form. I think that the form could be transparent so that the cursor appears to be moving around on the image. But you'd need be confident that the data entry cursor is sufficiently visible on top of the image to be useful.
Here's a js fiddle of the problem: http://bit.ly/Zd8JAU
I'm trying to place a header with a logo and a centred title at the top of the page. The idea is to center the title to the page itself and not within the gap left to the right of the logo, if that makes sense?
So I floated the logo over the top of the title and then altered the position of the logo shifting it upwards (as otherwise it insists on going beneath the title). The problem is this then creates a gap, which cascades down the page and I'd have to somehow shift everything up by the hight of the logo, and I really don't want to have to do that.
So is there a better way to get my logo positioned to the left of the title without creating gaps anywhere and without it causing an off-set on the text in the title?
EDIT: updated the fiddle to be clearer what I'm trying to achieve.
Yes, consider using a CSS background for your logo as part of your NAV element, which makes it easier to pad your text and position the image without interference.
I am doing a popup on a clients site for their new restaurant location. The base site is kind of a cookie cutter type site, and very messy (I'm not sure if I should attribute this to the problem). Everything was going fine until I added some divs that were positioned relatively and had width and height to the absolute div "pop-up". Now, the popup pushes the base site down, and the popup goes behind (it has a z-index of 10?). Here is the brand new css:
http://addproxy.net/sites/testing_space/css/style.css
and the site is down a level:
http://addproxy.net/sites/testing_space/
And a mockup of the desired effect (disregard the backslashes, hit max of href):
//http://addproxy.net/sites/testing_space/popup-mockup.jpg
The divs that seemed to trigger the problem were the .coupon class
Any help will be greatly appreciated!
You placed the original content inside of your new div's.
To make it look like your image that would be the id="coupons" div. Just so we're clear it's the one that starts like this:
<div id="coupons">
<div class="coupon" style="background:url(images/bg1.png);">
You need to move that div (and all it's contents) to just after the end tag of the id="popup" div.