This is the default code:
<div style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1); width: 337px; height:480px; opacity: 1;" class="events-item one-four onsite technical isotope-item">
<div class="events-image"> <img src="img/01_th.jpg" alt="events 1"> </div>
<a href="" title="MYB V3.0" class="open-project">
<div class="project-overlay">
<div class="project-info">
<div class="zoom-icon"></div>
<h4 class="project-name">MYB V3.0</h4>
<p class="project-categories">Onsite</p>
</div>
</div>
</a>
</div>
When i altered it as:
<div style="position: absolute; left: 337px; top: 0px; transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1); width: 337px; height:480px; opacity: 1;" class="events-item one-four onsite technical isotope-item">
<div class="events-image"> <img src="img/01_th.jpg" alt="events 1"> </div>
<a href="" title="MYB V3.0" class="open-project">
<div class="project-overlay">
<div class="project-info">
<div class="zoom-icon"></div>
<h4 class="project-name">MYB V3.0</h4>
<p class="project-categories">Onsite</p>
</div>
</div>
</a>
</div>
Nothing changes
When I inspect the element in the browser it shows the default code
like this:
Anyone Please help
So I just made a mockup with the code you have and its difficult to tell what your problem is exactly with such a small sample, The elements surrounding this code, and the css classes you did not provide for us to see could very well be making a difference that I'm not seeing however this is what I discovered.
You have assigned a width: 337pxbut there is no height on the element, therefore it does not show up at all. When I gave a height: 200px to the element, and changed the x Position in the translate3d to 337px. The object did shift right337px`.
Once again, given the small code sample you provided, for all I know you already assign a height in one of the many classes that is at the end of your tag, for more detailed help please provide more info for me and I can take a deeper look.
Good luck!
Side Note:
Good CSS practice is to avoid using the style attribute for anything other than prototyping, creating a CSS class is more modular and allows for better code-reuse.
UPDATE
I ran the new code you posted in a google chrome browser. The transform3d is acting as expected, and moving the xPos of the div by 337px.
Here are some screenshots:
Result without the 337px offset
Result with the 337px offset
As you can see the offset that you are adding is happening, but it seems that transform3d is not a universally supported tag yet, if an offset affect is what you want to achieve there are many more traditional ways to achieve this such as left: 337px
Related
the code below is not working as it should:
<!--/Portfolio Item -->
<div style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-four 2019 thriller langverhaal isotope-item">
<div class="portfolio_img"><img src="img/wreed_cover_n2.jpg" alt="coverfoto Wreed met boksbeugel" width="147" height="208" class="img-square delay-03s animated wow zoomIn"></div>
</div>
<!--/Portfolio Item -->
The link is recognised as a link, but when clicking it does nothing. There is ‘section id=“#Wreed2” in the webpage, and other links are working, but this link inside this portfolio Item (Bootstrap template) does nothing, other than showing a hand indicating it is a link. Anyone any ideas?
thanks for your help.
I am not entirely what are you expecting. If the <a href = "" starts with a # it will link to an id in the html. Not a new website. So it won't work if there is no tag with an id of #Wreed2
As some of you guys may know allowing users to upload images can be a hassle and especially if you have to create some sort of list with them.
I have been looking all over the web and have been unable to find concrete answers to what you do in the case where you need to show a list of images of different shapes. Therefor i turn to you.
Say User 1 uploads the following image:
And User 2 uploads this image:
As you can see these two images are very different in both height and width.
Now lets say that you have 10 images of different sizes and wish to display them in a grid 4 by 4 (for this purpose i use ng-repeat to show a loop)
<div class="col-xs-4" ng-repeat="image in images">
<img alt="" ng-src="{{image}}">
</div>
if you do this, this will create a list that is uneven! and will look very "ugly" to say the least.
So my question is what do you do? Are there any tricks using CSS to make it fit any images of any size so that everything is aligned?
I hope my description of the problem was accurate enough for the sake of demonstration here is a fiddle that shows this issue as well.
In short how do i make sure they are all the same size without making one of the images look cramped and / or distorting the individual image?
fiddle
As mentioned in my comment, one option is to crop all the images to a suitable format, a square might be a good compromise. You can do this by wrapping your images in a container first, and positioning the image in relation to the container. Example:
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.image-container {
width: 150px;
height: 150px;
overflow: hidden;
position: relative;
padding: 20px;
}
.image-container img {
width: 100%;
height: auto;
position: absolute;
margin: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-4">
<div class="image-container"><img src="http://pngimg.com/upload/girls_PNG6448.png" width="100%" height="100%" class="image image-responsive"></div>
</div>
<div class="col-xs-4">
<div class="image-container">
<img class="image image-responsive" width="100%" height="100%" src="http://yeemei.mobile9.com/download/media/442/niceandsim_s8mhs1do.jpeg"></div>
</div>
<div class="col-xs-4">
<div class="image-container">
<img src="http://pngimg.com/upload/girls_PNG6448.png" width="100%" height="100%" class="image image-responsive"></div>
</div>
<div class="col-xs-4">
<div class="image-container">
<img class="image image-responsive" width="100%" height="100%" src="http://yeemei.mobile9.com/download/media/442/niceandsim_s8mhs1do.jpeg"></div>
</div>
</div>
</div>
Fiddle
You can also position the image in the container. For example if you wanted to center it you could add:
top: -100%;
bottom: -100%;
left: -100%;
right: -100%;
One solution is to provide the users with a cropper to your preferred ratio and allow them to select the part of the image to show.
An alternative is to use the images as background on a div with specific ratio and hope that it does not show irrelevant areas.
Here is a solution for the second case (with a - just for laughs - animation to show the whole of the image)
http://jsfiddle.net/mrccf3sv/
.image{
display:block;
background: url('') 50% 0% no-repeat;
background-size:cover;
border:1px solid #ccc;
animation:pan 10s linear infinite alternate;
}
.image:before{
content:'';
display:block;
padding-top:56.25%; /*ratio of 16:9*/
}
And see it responsive by using different bootstrap column count for each breakpoint.
http://jsfiddle.net/mrccf3sv/1
Scaling with CSS is incredibly bad practice. I mean, we all have to do it sometimes, but if you CAN scale server-side, better do that. Try PHP's imagick, if available.
I want to clip an img element from a CMS when it renders on the page so that, no matter the proportion of the XY dimensions of the original image, it looks the same as other buttons on the same page. The problem is when I build it with the following code, the Foundation grid breaks on smart phones and other mobile devices. Any suggestions?
.clipsquare {
overflow: hidden;
clip: rect(0px,60px,60px,0px);
position: absolute;
}
<div class="one columns">
<a class="th" href="http://my-url">
<div class="clipsquare"><img src="myImage.jpg" alt="title" width="90"></a></div>
</a>
</div>
class .one.columns on your div with the clipsquare image isn't correct foundation classes. In a standard 12 column layout you would do the following:
<div class="row">
<div class="large-12 columns">
<!-- Column content here -->
</div>
</div>
Further, there are two other questions I'd ask here:
Why aren't you using CSS to style your buttons? and/or...
Why aren't you letting your CMS resize your images for you?
clip has been deprecated. The new property that does the same thing and even more is called clip-path. It has few gotchas though,
AFAIK rect() doesn't work either. You need to use inset().
Dimensions need to be separated by space and not commas(,).
Webkit needs a prefix and positioning is not required.
Example,
.clipsquare {
overflow: hidden;
-webkit-clip-path: inset(0 60px 60px 0);
clip-path: inset(0 60px 60px 0);
}
For more information, on this topic, refer this excellent article on CSS Tricks,
http://css-tricks.com/clipping-masking-css/
In order to teach the different components of a website, I have a giant image (made in photoshop) with a bunch of boxes labeled header, sidebar, content, footer etc all in one image. Using absolutely positioned divs with images inside, I have made it so that when moused over certain parts of the image, like for example the logo, a box appears with information about that specific part of the website and this box appears on top of the logo.
The problem is that this doesn't seem to work in internet explorer (the images never appear) and the images are out of place on a Mac in Safari. The feature I am describing can be seen here
and some samples from my code are below. Is there a better way I can accomplish this task, or solve the problem of the images not appearing in internet explorer and being positioned differently on Macs in Safari?
HTML
<div class="look" id="look1"><img src="images/extensive_look/logo_info.jpg" width="326" height="109" alt="Logo Information"></div>
<div class="look" id="look2"><img src="images/extensive_look/header_info.jpg" width="236" height="74" alt="Header Information"></div>
<img src="images/extensive_look/website_layout.jpg" width="1200" height="890" alt="Website Layout">
CSS
.look:hover img{
visibility:visible;
}
.look {
position: absolute;
left: 320px;
top: 328px;
}
#look1 {
top:211px;
left:53px;
}
#look2 {
top: 205px;
left: 487px;
}
#look3 {
top: 282px;
left: 403px;
Something like this to complement the comment:
<div>
<h1 align="center">Extensive Look at a Website</h1><p style="width:800px;margin:0 auto;">As you can see in step 1 of the 7 steps, web design begins with an understanding of a website. Below is a model website featuring the different components of a website. As you scroll, make sure to mouse over the different components to get information on that component. It is important to note that while these are common parts of most websites, not every website will have every component.</p>
<p style="width:800px;margin:0 auto;"> </p>
</div>
<div class="content" style="position:relative;width:1200px;height:890px;background-image:url('images/extensive_look/website_layout.jpg');">
<div class="look" id="look1"><img src="images/extensive_look/logo_info.jpg" alt="Logo Information" height="109" width="326"></div>
rest of look things here.
</div>
I'm working on a project, when you hover it you should click it. It works perfect in all browsers. But for some reason it doenst work in IE
Live Demo:
http://jewelbeast.com/imghover/rounded.html
HTML:
<div class="vertical-smallborder">
<section>
<img src="http://placehold.it/400x600" />
<div class="text">
<span>
<h1>This is a title</h1>
<p>This is an example of a description.</p>
<p>The entire image is a link!</p>
<a class="entire" href=""></a>
</span>
</div>
</section>
</div>
CSS:
div.vertical-noborder section span a.entire{
width: 100%;
position: absolute;
top: 0px;
left: 0px;
height: 100%;
}
I hope someone knows the problem.
Your code is definitely more complicated than it needs to be-- unless there's some reason that you need to absolutely position elements, you shouldn't.
I believe there are two undesirable behaviors in your code in IE:
Margin-left: -250px in the div is pushing the element off-screen
The z-index of the elements is putting the img above the a tag. (link)
Rather than trying to fix these bugs in IE, rewrite what you have to wrap the img in the a tag.