Preemptive thanks for helping!
I am a beginner programmer, and I am trying to place one photo link over another in wordpress.
Here is the link
You can see in the link above that I want to place the bottom image over the top image, and keep them both responsive, yet I am having trouble with the css properties to achieve this..?
Any ideas?
Thank you so much,
-C
Wrap both images in a div and set position to relative.
<div style="position:relative;">
<img src="#" style="left:0px; top:0px;"/>
<img src="#" style="left:0px; top:0px;"/>
</div>
Update 1
Sorry, first answer wasn't working. I figured out the images are vertical perfectly aligned. The header image is aligned to the top of the window.
The only this you need to do is:
.second-image-home
{
position:absolute;
top:0px;
}
This worked for me.
If you remove
height:auto;
the image will be correctly sized.
Update 2
If I added this to the css:
.second-image-home
{
height: 193px;
width: 309px;
//rest of the code
}
This happened:
One css I would get friendly with is
.yourclass {
z-index: 1;
position: absolute;
}
z-index will allow you to put one image over another image, as long as you have a position you will be able to stack as many in one spot as you would like. Use top, left, right ,bottom to position where you want them.
Hope this helps!
Related
<img src="the fake.png" width="3268" height="538" class="table" alt=""/>
this is the code to my image, the problem is the image is too big for the page and cuts out. I want a horizontal scrollbar. I want to know what the code is to make a horizontal scrollbar so I can see the rest of the image. I do not want to resize the image, just to be able to scroll horizontally. I know a weird idea. any help is appreciated.
A way you could probably go about doing this would be to place the image in a div with given dimensions and then setting the overflow property on the div to scroll. It would look something like this:
HTML:
<div class="img-container">
<img src="the fake.png" width="3268" height="538" class="table" alt=""/>
</div>
CSS:
.img-container{
width: 500px; /*width of the container the image is in, your choice*/
height: auto; /*means the height of the container is the same as the image so you are not scrolling vertically*/
overflow-x: scroll; /*this is the important line that tells the browser to scroll content outside the div*/
}
Hope this helps. Also, I recommend setting the height and width of the image using CSS rather than HTML
I have the following piece of code that functionally works well.
<div class="user-pic round-pic">
<img src="<?php echo $user['profile_pic']; ?>">
</div>
The problem is how it looks. When I rollover the image to click, I get this weird half transparent gradient look.
I know it's a stupid pic but I'm working locally. Here is the CSS for this pic:
round-pic img {
width: 100%;
height: 100%;
object-fit: cover;
}
Any thoughts on how I could eliminate this rollover behavior? Little things like this bother me not to mention detract from the UX.
Any help would be appreciated.
Based on a forum suggestion I discovered img:hover{opacity: 0.95} was set in main.css. I simply targeted the <a> tag and used inline to change the style.
<img src="assets/images/profile_pics/blarg.jpeg">
Not a huge issue obviously, but needed to be corrected nonetheless.
how can i add an id to a image tag using php or jquery if the image source is equal to something specific in url form?
i am very new to php and jquery and i come across and interesting problem i have a website called lingeriesshop.net and im trying to add live chat to the site but the custom live chat image i have selected in my chat plugins console is appearing with 50px of space between the image and the side of my page. the code is being generated from serverside scripts running through the chat service so i cannot add or remove css classes or id's in a traditional way in order to adjust the image position. i was suggested a solution to use jquery to add a class to the image using this jquery code to add css to the class to move the image 50px
$("#imageID").addClass("classname");
but the image code i am trying to add a class to does not have an inline #id and im not to familiar with image id's in wordpress in general here is the image code i get from firebug.
<img style="white-space: nowrap; position: absolute; top: 0px; left: 0px;" src="http://lingeriesshop.net/redchatimage.png">
is it possible to write an if statement to where if the image tags src is equal to a set value then add an id to the image tag to later reference the id and add a class to adjust its position? im not a php experienced person so im not sure if this is possible or how to go about it im just trying to move my image over 50px
$('img[src="image.jpg"]').addClass('classname');
or
$('img[src*="image.jpg"]').addClass('classname'); // this will find every image src containing "image.jpg"
If your img is wrapped in a div or other element, you can reference it in your CSS without a class.
If the html is something like this...
<div id='chatwindow'>
<div id='conversation'>
...
</div>
<div id='userinput'>
<input type="text" />
</div>
<img style="white-space: nowrap; position: absolute; top: 0px; left: 0px;" src="http://lingeriesshop.net/redchatimage.png">
</div>
Then you can use CSS to move the img 50px to the right...
#chatwindow img {margin-left: -10px !important;}
You can edit an element's attribute directly using attr. You can use this to give the image an ID which you can later use to refer to.
$('img[src="image.jpg"]').attr('id','yourIDHere');
$('yourIDHere').addClass('classname');
You can access image using it's source , and add attribute and a class like this :
$('img[src="image_path"]').attr('id','sampleID').addClass('classname');
I'm using a jquery plugin to create an image slider with thumbnails underneath.
My goal is to have the main image's background be bg.png, with the thumbnail section background be wood.png.
I've changed the CSS to what I believe to be correct(see below), but the background of the thumbnail section isn't extending the full 961px, it's restricted to the 921px width I've established with the main image. I have a feeling this might be due to nesting within the plugin's php/jquery, I'm just not sure how to go about altering it to work. If that is the case, how do I fix it? If it's something else, how do I determine what it is/how to fix it?
thethe-image-slider.php
timthumb.php
live site
Thanks.
CSS
.thethe_image_slider.white-square-1{
background: url('../images/bg.png');
}
.white-square-1 .thethe-image-slider-thumbnails{
background: url('../images/wood.png');
margin-top: 20px;
margin-bottom: 40px;
width: 961px;
}
find this line
<div class="thethe_image_slider white-square-1" id="thethe_image_slider323" style="width:921px;"><div class="thethe_image_slider_inner" style="width:921px; height:392px;">
and change to this
<div class="thethe_image_slider white-square-1" id="thethe_image_slider323" style="width:961px;"><div class="thethe_image_slider_inner" style="width:921px; height:392px;margin:0 auto;">
in your code
Move your thethe-image-slider-thumbnails div out of your thethe_image_slider white-square-1 div but inside the gallery div. Works fine for me then.
I want to improve one of my Facebook apps by allowing the users to apply border styles to their images. I am not exactly sure how this can be done, but hopefully someone here will be able to help. The application is written in PHP. I originally thought that I would be able to create an image with just the border, a few pixels wider and taller than the image I wanted to add the border to, then just merge the two images, but that didn't work.
Any help would be great, and rewarded with your name and Stackoverflow profile image postedon the Credits page of the app.
Try putting the background image in the CSS background property.
How about some code using random images from google searches?
<div id="myWrapper" >
<img src="http://www.iconarchive.com/icons/rokey/the-blacy/128/secret-smile-icon.png" id="myImage" />
</div>
<style>
#myWrapper {
background-image: url(http://images.clipartof.com/small/210747-Royalty-Free-RF-Clipart-Illustration-Of-A-Diamond-Plate-Border-Frame-Around-Blank-White-Space.jpg);
width: 450px;
height: 450px;
}
#myImage {
margin: 160px 160px;
}
</style>
Note: I don't claim these images. I'm just saying this cos somebody's gonna bitch. Watch and see ;)
EDIT
I see now however that maybe he does just want to add a style as another poster suggested. So now we're back to asking the OP does he mean how does he store user preferences for images and then dynamically add that style onto an image as it's posted from the app?
I guess that would call for an inline style wouldn't it? ;)
myImageSource = "<img src='".imgSrc."' style='border: 2px solid ".imgBorderColor.";'/>";
Assuming you're using GD to create the images, you can use imagerectangle() to put a border around the image. PHP.net has a great example: http://us2.php.net/manual/en/function.imagerectangle.php
#drachenstern: CSS is a good idea, but how would the background help? CSS has a border property that can be used. ;) img.someclass { border: 2px solid black; }