I have a site where 3 pages have a row of images that can be viewed larger upon rollover. On 2 pages the alignment works fine, these have 6 images in the row. The third page which is not working properly has 5 images per row.
The pages with 6 images are aligning perfectly - the left-most image is on its own, floating left, the other 5 are in their own divs within a div (movers-row) and are spaced 20% apart. The code for this working page is here: http://jsfiddle.net/AvNJY/
So using the same logic I tried to get the row with only 5 images to align, again doing the same as above and setting the distance to 25%. This made the last image in the row jump below the others. I played around with the percentage and for some reason at 24.4% it looks as if it's aligning correctly in all browsers apart from Firefox, when viewed at 100%. However as soon as you enlarge the site in any browser, the last image jumps again below the others (in Firefox this happens automatically). I am wondering what I am doing wrong on this page as I've tried everything I can think of - and can't understand why the 25% isn't doing it. The code for this page is here: http://jsfiddle.net/9K74d/
I would really appreciate some help if anyone knows the answer. Thanks in advance!
Your example in jsfiddle, is not clear but try the following:
add overflow:auto for #studiomovers-row and remove the margin of this id.
It's probably a rounding error - browsers can be surprisingly poor at math and make unexpected rounding errors. Knock your % down to 24 or even 23 and see if that works. You can always try putting the images into a single div container, sized to the correct, expected size, and set overflow: hidden in case there is a pixel or two that runs over. That gives you a little margin of error and it's much better than having the layout break.
Related
The red and lime backgrounds are used in order to display it, as the images don't seem to be loading through jsfiddle
I have been trying to fix this issue for a while by getting all the divs to scale responsively I have managed to get it to scale using absolute values but have had no luck with getting it to scale responsively, any help would be appreciated, Thanks
OK, I got a bit further: https://jsfiddle.net/35ayrhg4/
Note that if you want the "top" to go over the left and right it needs to come after the left and right in the DOM (= HTML). This is because things get ordered from back to front in the order of oldest to newest. Here the oldest is the thing that comes first in the HTML.
I didn't use percentages for the sizes but pixels. So 6px instead of 1.667%.
The bottom still needs a bit of work, but it is getting there.
I'm just using a small bootstrap carousel on a site, but it's acting a little oddly. The first image displays at the correct size but each subsequent one appears half-sized, centred at the top of the container for around half a second before resizing properly. Having reached a frustration point I'm hoping someone can point me in the right direction as to why it might be behaving like this.
Easy way you can handle
This just apply one commen class for images
Then apply CSS
Specify height and width
Definitely your problem get solved..
I am trying to shrink the width of a well-sm but I run in to trouble at some smaller sizes. The form will float left or right depending on the specific size.
An example of the issue can be seen at the link below. Otherwise the page remains responsive when the width is left at 100%.
http://casouza.com/homelist
I don't think this will solve your problem but you should know that line 147 and 148 should be reversed, according to IE. The form close tag should be inside the div close tag for well-sm. Also, I'm only seeing the error on IE, not on Firefox or Chrome. It might be easier to get help if you made a jsfiddle or something - I can't replicate the error easily without all your files. Thanks.
I have this bug that let some text appear a few pixels outside a div on the right side. The strange thing is that it only happens in Safari. I've never seen it before and it's just regular HTML/CSS what I have used. I've looked around on the internet but I can't find the exact same problem - only some problems with content floating out at the bottom, because of a fixed height.
In the next 2 screenshots you'll see the same page in Safari and Chrome. The div has a overlow:hidden to hide a possible third line of text. I added fixed widths when trying to solve the problem. I also tried to add/remove some margins, but I can't get rid of the extra pixels.
Here is a full link to this page. It happens in this section of the website only. In other sections - like this one - where I use the same format with little differences, but the same CSS idea (fixed width with overflow:hidden), there is no bug in Safari.
I hope you have some ideas!
Removing position:absolute from
div#branch-search-results-block div.search-result-right div.search-result-drvl-info-bottom .spacer::after
css style solves the issue. But I am not sure what else is affected by it. Please try this.
I'm doing a website that needs to have layout such as the one here:
http://newsmartwave.net/wordpress/trego/home/homepage-1/#featured_products
I've spent 2 days researching how to do proper 2 column layout and tried different options, but none seem to work just right.
Right now I have 2 versions - http://aspenwebsites.com/mpwebsite/index.html and http://aspenwebsites.com/mpwebsite/index_alt.html
The problem with the first one is that if you reduce the height of the browser's window considerably I end up with some white space bellow the sidebar and some of my text ends up outside the border (see screenshot).
The problem with eh second one is that I don't can't place a full-screen background image behind both columns.
In addition, unlike on the sample website ( http://aspenwebsites.com/mpwebsite/index.html and http://aspenwebsites.com/mpwebsite/index_alt.html) that I'm trying to duplicate, I'd like to have a vertical scroll bar appear if browser's window reaches certain minimum height.
I know people sometimes get annoyed with types of questions, but I really just can't figure this out and I did read numerous articles and examples.
I'm not asking to write code for me, although any code samples would be most appreciated. Minimally, I was hoping for directions for some good tutorial, as I really would like to master this layout. It comes up a lot in my work and I'd like to have my own code that I have 100% understanding of rather than using Wordpress.
For the 1st one, add overflow: scroll; to the #sidebar > .row rule.
You do have a fullscreen background image in the second one. It's just that #maincontent, which is in front of it, has a background:white; rule, so you can't see it.
Edit: I did not get annoyed by the way..