I'm working on a site using Isotope from isotope.metafizzy.co.
Text works fine, Centering and fully showing up.
BUG: On Tiles that I'm placing an image into, the images starts at 50%. Even if the element is small, or width2, or clicked width. it is always starting halfway to the right of the element.
Any idea what I'm doing wrong?
Current Example: http://warpwars.net/Team/DanVioletSagmiller
Current Element Code (small part of the beginning):
<div id="container" class="clickable variable-sizes clearfix isotope">
<div class="element justMe width2 height2 isotope-item " data-symbol="Dan Violet Sagmiller" data-category="halogen">
Photo<br />
<img src="/Content/dvs/DanVioletSagmiller.png" width="556" height="736" />
</div>
<div class="element majorProj " data-symbol="Teams RPG" data-category="post-transition">
Teams RPG
</div>
I have been using Chrome's inspector to look through the CSS affecting the image, and I can't find anything that would seem to suggest the image should be in the middle.
Any ideas?
Adding an image directly to the root of the element does not work well. However, wrapping the image in another div tag works perfectly.
Related
Ok. Problem is as follow. I have rectangular icon with IMDB logo. I was trying to position it inside div but there is problem because apparently Chrome sees image as square while Safari not.
Pictures for reference:
Is it a bug? Why it's not corrected if both browsers run on the same engine?
Friend told me solution "put it in some wrapper, set its width and then set img width to 100%" but it's not working :(
Code:
<div class="something">
<img src="file.png">
</div>
I am working in this site
https://barrecertification.com/
In this page you will notice that YES — I Want to Get Barre Certified! just below the video.
It is centered with reference to the video, but when I zoom in or out the browser the centered position get lost and the position changes.
How to achieve the center position irrespective of the browser zoom level?
I think your video and text element need to be contained in the same container. the reason your text moves is because it located on a separate row.
try dividing the row the text is on into the same as the row with the video.
Move the hyperlink inside the div "responsive-video".
<div class="col-xs-8">
<div class="responsive-video"
//Your Video file src:
<div class="text-center">
YES I WANT TO....
</div>
</div>
</div>
Try this markup. This should work. Avoid the whole margin-left and margin-top things from your class.
I have an image with position:absolute;right-300px; inside a container with position:relative; as I want the image to come out of the div and off to the right.
You can see it working here. It's the first large image on the right.
The problem I have, is this is breaking the overall page layout and causing a vacant white space to the right of my page that can be side scrolled to.
If I put overflow:hidden; on the container div it will hide the rest of the image and I need the image to come out and be entirely visible.
Anyone have any suggestions for a way around this?
I tried writing up an example but I putting the whole page up seemed better
http://ciaranhanrahan.com/test/
Cheers!
I want the image to come out of the div and off to the right
Studying your page layout, it appears the image doesn't need to be in the <div> at all.
You could give the <img /> a position:absolute;.
Then, you can include the <img /> markup anywhere in your HTML source.
For instance, it's a 495kB image (ie. quite heavy) so you can include the absolutely positioned <img /> at the very end of your HTML source, which means for first-time visitors to your page, the page will appear to load more quickly.
You won't need to nest the absolutely positioned <img /> inside a parent element - which means you won't need to mess around with negative positioning, CSS inheritance, hiding overflow and so on.
Sorry guys I made new one for this because it couldn't be done like I previously explained.
I want image to go over previous div and so it stays always at the same exact spot.
It's an border image for portfolio div what I'm trying to align here correctly, so that it makes peek kind of effect over previous div.
<div id="previous">some content</div>
<div id="portfolio">
<div class="some-other-content">Whole lot of html</div>
</div>
Link to my jsfiddle
Use in your CSS
"position:absolut" to set a fix position in your Window.
see more options here:
http://www.css4you.de/position.html
I have kind of a weird problem ..
Something that isn't working on ff & safari but IS working on IE on itself is already pretty weird but I can't seem to figure out this problem..
On my site http://www.turnkring-excelsior.be there are links to social media in the top right corner (youtube, facebook and flickr), on IE they are linked, on ff & safari they aren't ..
Now, I narrowed the problem down .. It seems to be related to the width of my wrapper div, in my css file I declare the width of this div to 1000px. If I enlarge this to say 1200px, the links DO work on FF & safari..
If I enlarge it just a bit, like say 1050, the flickr link works only (the one at the far right)
Does anyone have any suggestions ?
This is a combination Positive Margins errors, where you have attempted to line up your divs the way you want them. Essentially you've managed to place one div over another, hence blocking the links.
#social currently has a positive top-margin of 23px, whereas #image has a number of margins defined on nearly all sides presumably to force it over to the right, below the social links? Due to the margins of #image overlapping with the content of #social the browser thins that #image is another layer.
You will need to work out a better way of positioning these, perhaps two container divs acting as columns floated.
Pseudo (not tested):
<div id="container">
<div id="top-bar">
<div id="menu" />
<div id="social" />
</div>
<div id="left">
content n stuff
</div>
<div id="right">
<div id="image" />
</div>
</div>