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.
Related
www.encyclopediasindhiana.org/index2.php
i have designed slide show from mycarousel with help of php, is working fine, but in frnt of carousel on left side the hyperlinks are not working till the height of carousel. on left side all links are not working if image is as large as the height covered by links...... you may try the third slide /image of carousel as its height is small so many hyperlinks came after its height are working.
why this is happening on chrome, while on internet explorer all links are working normally.
in bootstap.min.css file i have decleared width 539 and height auto,
.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {
display: block;
max-width: 539;
height: auto;}
In css in index2.php i decleared
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}
#myCarousel.carousel.slide {width: 100%; max-width: 539px; !important}
.carousel-caption {
background:rgba(0, 0, 0, 0.3) !important;
}
</style>
links are not working outeside carousel can java help if then how, plz i dont know much about java
What I understood from your question, some hyper links are not clickable because of the container of the carousel are placed over the links which are not clickable. A quick solution is to remove the class name "container" from the closest block about the carousel. like use class="sd" instead class="container sd".
Also please note that the class name "container" are the predefined class from bootstrap css which is need to be use for a proper area and with a proper structure.
For debug the issue use a html/css inspector tools like firebug etc, it will help you lot to learn about DOM tree.
Using your browser's developer tools to inspect elements on the page, you will see there is a <div class='container sd'> extending to the left of your carousel, and overlapping your links - which stops them from working as the div gets the click events instead. Removing the container class 'fixes' the links with slight effects on the centering of your carousel.
The relevant Bootstrap documentation specifically states that containers are not nestable, and since you are already using a container-fluid as the topmost element you will need to solve that centering issue some other way.
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!
On the World of Warcraft forums they have a neat style set up that I'd like to emulate. I didn't know how to do it, so I decided to dig through their stylesheets and grab the pieces of it and put them together to learn how to make a style similar.
When digging through the stylesheets, I found this image. As you can see, it's the background for their forum posts, but it's a fixed size. Here's my question - how are they dynamically creating more length if a user's post is much longer than the picture is?
On a test website I grabbed the same CSS they used for that section. They have it set on overflow:hidden; so that it doesn't keep multiplying the image. Naturally, copying parts of their code gets me this mess on the test website.
It works correctly for smaller posts, since they just have to cut it off, but I'm assuming they have maybe a very thin (set width, perhaps 1 pixel in height) .jpg image that they are multiplying depending on the size of the forum post.
Does anybody know how I might go about doing this?
P.S. Naturally I'm not going to be using their images and such - I'm only copying it for now just to understand how to make my own.
Something like:
CSS:
.post
{
background:#1A0F08 url(http://us.battle.net/wow/static/images/layout/cms/post_bg.jpg) top no-repeat;
}
(the image and the color are those really used, hope they don't sue me for that :) )
is what you're looking for. The background image is positioned on top and stays there, while the rest of the container's height has the same background color that the image fades to (using a gradient). So it's just an illusion of a stretched image, but effectively is just that you don't see the interruption where the image ends
It looks like their background color for the post is the same as the color at the very bottom of that image. That way it just "fades" in - the image does not actually change size.
Example CSS would be:
#yourPostSelector {
background-image: url('path/to/image.jpg');
background-position: top left; /* or 'top center' - whatever works for you */
background-attachment: scroll;
background-color: #000000; /* pick the bottom color of your background image */
}
Just change you background color which you have used is #00000*
It should be changed to the color of the background image which you use, basically the bottom part so that it blends perfectly. Presently as per your present image the code would be like this :-
.body {
background: url("../images/post_bg.jpg") no-repeat scroll 50% 0 #1A0F09;
clear: both;
height: 100%;
margin: 0 auto;
overflow: hidden;
width: 990px;
}
Update this class and check the result, if you don't understand comment here would make you understand.
It's my first time asking here (I have visited the site several times, but never asked). Well, let's go to the question:
It happens that I'm developing a live image resizer (I know it already exists, but I'm doing my own for my own projects). It has three parameters: the image path (obviously), the size I want to resize and the extra margin I want to add. The idea is to resize the image inside a box with square dimentions. The problem is, the size I want to resize depends on the size of the outer box. For example, I have this HTML code:
<div class="image_outer_box">
<img width="300px" height="199px" style=" margin: 65.5px 15px;" src="img.jpg">
</div>
The properties of "image_outer_box" are the following:
.image_outer_box
{
height: 330px;
width: 330px;
border:solid 1px #737373;
}
The function I call is this:
liveResize($img, $size, $extramargin);
The problem here is when I send the $size, since I must be aware of the CSS properties of "image_outer_box" in order to make the right resize. And, as you can see, it's not only a matter of the size specified in "image_outer_box" but the margin I want to add. Actually, I wanted to add 15px of extra margin for the image and resize the image inside 300x300.
It's not critical to have a way to get the CSS attributes from this particular class, but it would help if I (and other developers) can apply the function without being aware of the CSS attributes of the container where the image will be placed.
If there's a way to make it, I would be great.
Thanks! (for the other times I came here to search a solution and I found it!!!)
EDIT: I found a way that doesn't require to get the CSS properties, but still I would like to have info for this matter. Thanks for those who tried to help 'til now!
Do you want to actually store the resized image, or are you just trying to display it resized? If the latter is the case, the following solution might help:
HTML
<div class="image_outer_box" style="background:url('img.jpg') no-repeat; background-position:50% 50%; background-size:100%;">
</div>
CSS
.image_outer_box
{
margin:10px;
height: 330px;
width: 330px;
border:solid 1px #737373;
}
Of course, this doesn't allow you to manually set the width and height of the image, since that depends on our CSS entirely. Change the CSS, and the size of the image will automatically change as well. I like this method quite a bit, but it won't get very far if you want to store the image or if you want to be able to set the image size manually.
I think in order to be aware of the CSS and change according to the current client side state of the image you should (I mean I would recommend) use Javascript and maybe if you want to keep the function call it over AJAX.
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; }