I used Fontastic to create an Icon Font.
My problem is:
When page width is odd, the image miss aligned to the red circle.
When page width is even, the image is aligned to the red circle.
Here is the div itself
And its pseudo element declaration ::before
I guess that it's a pixel/browser/device issue, the font must be aligned to the pixel grid while images and browser rendered styles can be blurred to be stradding pixels?
Is there a way to fixe it? Am i missing something?
Related
I am trying to implement a sidemenu with a background image but I don't understand how to make it responsive also vertically...
I have this image https://ibb.co/Pzyyyh2 whose size is 320x1000px. It's a very tall white image that a certain point becomes black.
I'd like to have this black detail to stay always at a certain point of my sidemenu (the transition from white to black should start before the social link part).
As you can see here, on iPhone X emulator, it works as expected: https://ibb.co/C7Nm6b7.
While on another device such as Moto G4 this happens: https://ibb.co/S7tQwJV
You don't need the white part of the image, if what you're trying to show is the black, then just use the black. If your image is an svg, it will always expand/contract properly, without visible pixelation. The rest of the footer should have a background-color equal to that of your img.
If you want to use skew, then make a first div (the parent/wrapper), then place it right before your footer area. Then inside the wrapper, add the skew-div. Make the parent have overflow:hidden so the excess of the skew-siv doesn't become visible past the borders of the parent.
Like this:
Then, inside your 'magic-div', you'd have the following:
The parent gets width: 100%; and overflow:hidden;. The child skew div inside gets width:100%; too. If you're using background with an svg as suggested earlier, the background-size rule should be 100% auto or cover, depending on the scenario (the widths you're covering + the angle of your skew). Give it a try and let us know how it went.
I currently have a background image but want to insert a blank white page on top of it using either html5 or css3. In addition, I would like the page to be able to be adjusted in terms of dimensions.
From the question description you have provided, I can understand that you need a White Box isnide a Box with an Image as background.
There are many ways to do it, Simple is to create a Div inside Div. Parent Div will have style of background image and child Div will have background color as white and position relative.
I am using two different fonts in my website - "sans-serif" and "tradeGothicLTStd". Here is how these fonts are rendered in the browser.
You can notice that in the first screenshot there is some extra space above the font (If you see the uppercase text. Please open it in a new tab with black background to properly see the difference) and while using another font there is no extra space above the font (uppercase text).
Here is how they are rendered when used in a button.
Because of these inconsistencies the fonts go out of position vertically. i.e if I design my css with first font in mind the all uppercase fonts are centered vertically (inside a button or anchor tag etc) but when I change the font to the second font all text kind of moves little upwards since there is no extra space above the font in this case. Because of this my font is not perfectly vertically aligned in the center.
Is there any way to fix this or can someone even tell me why this is happening?
On your second picture the font also appears to be stretched.
You can scale the font with transform: scale(1, 0.9);. This will scale the font vertically on 90%.
Then, I would use line-height
I am currently creating a one page website, however I am having an issue, I need the scroll text underneath the fixed element however you can see the text that should be dissapearing under the fixed position element, as the element as a back-ground, which is a transparent png, is there any way I can hide text as it scrolls underneath the fixed position element.
Here is a fiddle of what I have, so far
JS FIDDLE
Ideally I am wanting it so that when text moves behind the box with red borders it is not visisble, without the need for a background color.
I have visited your website and stolen some images to better understand what you are trying to accomplish.. Assuming i'm correct in the assumption you do not want a solid background on the header because it would mess with your pages background....
you can use multiple backgrounds...
see your demo
You will need something in #banner that will hide the text. From the css it looks like there is supposed to be a background image in that block, but it is not showing up.
The header is transparent as set in your css reset, so a color or image will be necessary if you want the text to be hidden. Otherwise, it's like moving the text behind a piece of glass...you will still see the text unless you have something to actually cover it.
I suspect if there was a working background image on the header, it would block the text where it wasn't transparent. When I add a background-color it achieves that effect.
At the top of this webpage, there are two elements in the main content area (white background): an image and a logo box.
The logo box is floated right and the image has a right-margin which is sufficiently large to accomodate the logo box and a little padding. However, if you make your browser window sufficiently narrow, the logo box slides underneath the image. What I would like to happen is that the horizontal space between the two decreases to a minimum of 6 pixels, and if the browser window is made any narrower, horizontal scrollbars appear.
Is there any way that I can achieve this without resorting to a completely 'frozen' layout, i.e. setting a fixed width on the main content area?
Thanks,
Don
The css min-width property does what you want. Doesn't work in IE 6, though. For that some JavaScript can help out if it's really necessary.
Set the white DIV's min-width to the size of the image + the border.