Live Example Page:
http://newsite.702wedding.com/cheap-las-vegas-weddings.asp
I want the 3rd box on the right side to have a sprite image link in it. I cant seem to get the darn thing to show up.
The Image is : reserve-a-date-right.jpg
its 801px wide, with 401px viewable.
Thanks as Always,
Any Ideas would be helpful.
What am I missing? I have spent 3 hours trying to figure this out.
Add in: display: block; to #package-right-box-promo a
It should show up, though you may have to adjust the top margin. (Looks like margin-top: 19px; centers it nicely, but that's in Firefox 3)
Related
I am currently using bootstrap and have a 3x3 grid of images. They are 200x200 images and I have looked EVERYWHERE to try and find a way to get an overlay to work on them. I only recently started writing code.
Serenbe.com has exactly what I am looking for about halfway down the page (also a 3x3 grid). The photo brightens, and a logo appears over it when you run your cursor over it. However, I would settle for text/links if a photo is not possible or too complicated. Right now absolutely nothing is working.
My images are arranged in a div within a container. The div takes up 6 columns. And the only styling I have applied is removing the padding so that it touches the edge of the page.
Any suggestions? I am 100% lost here, anything helps.
Thanks!
Have you heard of using hover with your css? :) it's pretty cool and I think that's what the site is using for its images.
An easy way to do what you want for beginners is I would have two pictures. One being the original and the second one with the effect you want. For serenbe it seems like they just added the logo on top using photoshop, then changed the opacity of the photo.
I would then wrap your img in a div and then do something like this in your css:
.customdiv{
height:200px;
width:200px;
background-image:url("imagelinkhere");
}
.customdiv:hover{
background-image:url("newimagehere");
opacity:.5;
}
What this does is change the content in your div to the new picture when you hover over the div, then apply the opacity on the image.
These are just a few tips to help you get started! Good luck
I recently downloaded Flexslider and managed to extend the images, and I have two things I need help with. The first thing is that I want the slider to be full width, and apparently it is being blocked from that in .container by overflow:hidden. If I remove that piece of code, everything expands and the website doesn't look right, but it removes the space between the slider and the screen. Does anyone know how I can fix that?
And my second question is how I make a small space between the slider images. Here is an example of how I want it: Example
Here are my codes:
jsfiddle
Adding margin:0px; on the body fixes the problem.
I have an image that I want to fix over the slider (can't put it in the slides themselves as an image because it needs to stay static) but for the life of me, I can't figure out how to get the image to display on top of the slider image.
It seems like the plugin's parameters have it set up so the slider will be on top of the page no matter what, either that or I am missing something.
The URL for the site is: http://dev.minnesotaimed.com/
More info: The image I want to move is the one w/ 4 circles, I am hoping to put it up on the right side of the slider area.
Any help would be beyond appreciated, we're on a incredibly tight deadline and I'm getting dirty looks because I can't seem to solve this quickly. Thank you so much for any help!
Try using this code for the image. This would put the below mentioned 4 circles image on the slider above. I hope it helps. Please mention in comments if there's a concern.
CSS:
img.alignright, .wp-caption.alignright {
margin: 4px 0px 2px 10px !important;
z-index: 9999999;
position: absolute;
top: 200px;
}
Here's my code: http://pastebin.com/gjyKH5hD
Live example: http://rusti.dk/test/
I honestly don't know what I'm doing wrong. I've been fiddling with this for days now. I thought it was a simple task, apparently not for me. Would really appreciate a bright mind to help me out.
Basicly all I'm trying to make is two divs next to each other centered on the page. With a 1px black border going all the way around and inbetween.
Left box: 350px width, 600px min-height, used to display facebook like box.
Right box: 450px width, 600px min-height, used for the content of the page.
Background: One big image.
Could anyone help me out? I think it's the FB-likebox that might be the troublemaker, but I'm really not sure. :/
You've missed one closing </div> for the left box.
See: http://jsfiddle.net/2qj5a/
I've added it in line 12.
I'm working on a new site but there is a small design thing which I just can't get my head around.
Basically, I'm creating a site which users are able to upload funny pictures to. Although the area where the picture is displayed there is a 3px gap underneath. Here's a link to a screenshot of what I mean, dead link.
I've tried a ton of things but nothing seems to work. If anyone can suggest any solution, please do.
Thanks.
It's due to the default vertical-align value of images. They are baseline. Change to top or bottom and it will go away.
img{
vertical-align: top;
}
The extra space is the area below the baseline which is for letters that hang below like y or g.