body {
background: #E2E2E2 url("/-/img/bg.jpg") repeat -20% -146px;
color: #45445d;
color: rgba(0, 0, 0, 0.7);
font: normal 100%/1.5 Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
}
This is a code snippet from robot-or-not.com ...featured in an article called ..Responsive Webdesign. I have two questions about the CSS in the article.
If I want to use em's across a site I
understand that I need a base font
size and then work out the em by
TARGET SIZE / BASE SIZE = EM. Do I
need then to set the base font size
in "PX" in the body first and in the
code above what does font: 100%/1.5
mean?
My second question is about the
background property.. what does
repeat "-20% -146px;" this mean/do?
I know about repeat:no-repeat and
repeat-y, repeat-x but have never
used % or PX for this..
You don't need a "base size". The default size for fonts is configured by the user in his/her browser. This is what the browser then uses for 1em (or 100%).
You can define your own "base size" in the body (body { font-size: 12px }) and then go ahead and use ems (or %) for other font-sizes, such as h1 { font-size: 1.5em } instead of h1 { font-size: 18px } (12px * 1.5 = 18px). This has the "advantage" for you as the developer that if you choose to change your "base size", then all other font-sizes (or other em based values) will scale accordingly.
However by setting such a pixel-based base size, you override the users configured (and thus probably preferred) font-size with your (the designers) choice. Many designers do this, because they believe their pixel-perfect design must not be disturbed by the users preferences. Whether you need this or let the user choose is your decision.
100%/1.5 is part of the font shorthand property and is the abbreviation for setting font-size: 100% and line-height: 1.5.
background is also a short hand property and background: #E2E2E2 url("/-/img/bg.jpg") repeat -20% -146px; extends to:
background-color: #E2E2E2;
background-image: url("/-/img/bg.jpg");
background-repeat: repeat;
background-position: -20% -146px;
background-position: -20% -146px means that the top left corner of the background image isn't positioned at the top left corner of its element, but it is pushed 20% of the width of its element to the left and 146 pixels up.
Related
I'm a little confused. If I have a mockup design given (1920x1080px) and for example the paragraph has a font-size of 22px and h1 has a value of 60px, what should be the base of font-size to convert to rem?
html {
font-size: 18px;
}
html {
font-size: 100%;
}
or should I take
html {
font-size: 62.5%
}
If, as #HaoWu suggests, you set
html { font-size: 62.5%; }
then you are basically setting rem as 10px in most cases because most browsers will default to 16px as the base font size. It’s then an easy calculation to set h1 to 60px as it’s just 6rem.
There will be occasional exceptions if the user has set the browser base size to something else. That is their choice, perhaps because they hope for websites to automatically show bigger text. This means you cannot absolutely depend on 1rem being 10px. In most cases this should be fine as everything will be correctly proportional.
If it is vital to your layout, and usually in a properly responsive design it won’t be, that the rem has a definite px value then you need to define html font-size in px, but best not if you can avoid it.
When I change my font-size from 1em to 1.1em, the font changes to a huge size. It looks like about size 48px or something. It should only increase by 10%.
* {
font-size: 1.1em;
}
Because with that selector every nested element increases the size by 10%. You might want 1.1rem instead, or better yet, just set :root { font-size: 18px; }
#ray hatfield's answer is correct.
As an alternative, you might want to change the * selector of this rule to html.
html {
font-size: 1.1em;
}
This way only the "basic font-size" (defined for the html tag, which is defined by the browser's default settings) will be increased by 10%, and all other font sizes (but only those with a relative unit like em or rem will change accordingly.
My site is almost totally designed in "em" (as opposed to px). It is supposed to be much better for modern browsers.
Most of the text is font-size:1em. 1em = 16px by default, I didn't specify it.
But I have some content where font-size is 1.2em and other which is 0.8em (for example for H1 or for small buttons).
The issue with "em" is that it re-scale all the sizes of an element (margin, padding, height...) according to the font-size.
I have the specific code in my CSS:
/* Reset */
html [and many other elements] {
font-size: 100%;
font: inherit;
}
/* Design */
body {
font-size: 1em;
line-height: 1; /* Line height will equal the em of each element */
}
.small-button {
font-size: 0.8em;
margin-left: 1em;
}
.normal-button {
font-size: 1em;
margin-left: 1em;
}
The normal-button has a margin of 1x1x16 = 16px. But the small-button has a margin of 1x0.8x16 = 12.8px.
Apparently this is a specific "em" property (it would not be the case in "px") which scales everything according to the font-size of the element.
This example is simple; but on my website it makes things really hard for me to keep things consistent.
How can I de-activate this property so that in the example above the 2 buttons have the same margin? (without re-calculating the sizes; which is what I am doing right now!)
It is the purpose of the em unit that it is relative to the currently set font size. If you want to use an consistent form of em, use the unit 'rem'. It is relative to the root element of your page (most likely your html tag) and stands for root em.
Check out this article by Jonathan Snook if you want to learn more about it.
http://snook.ca/archives/html_and_css/font-size-with-rem
Personally, I set my "master unit" in the body and proceed in multiples of 10s. I hate 16pt as stock, because I don't want to use a chart to set my font sizes the sizes I want them.
body { font-size:10pt; }
As far as particular elements, keep in mind that if you have an element (say a ul) with a size of 1.2em, and the li set to 1.0, and your body is 10pt, then the li is actually based off it's parent container, so it would be 1.2em instead of 1.0(aka 10pt as set in the body), because it's parent is 1.2em.
If you have something that you want a specific size throughout (such as a main menu), I suggest you forgo the em method on that particular parent object (or the li themselves) and use a set px or pt method.
http://www.alecos.it/new/125027/125027.php this link is an example of my problem... I used a png 1x16 for drawing the rows... the rows are visible in the link posted... my question is:
why under IE 6/8, FireFox, Opera, Safari and other browsers the rows are perfectly aligned with the text while under IE 9/10/11 the text do not fit in the rows?
I used a simple css:
/* Style Source Code */
.code {
border-radius: 7px;
border: #6666FF 1px solid;
background-color: #FFF5EE;
background-image: url("../bkg/Bkg_116.png"); /* Horizontal Rows */
background-repeat: repeat;
background-position: 0 10px;
}
/* Style Source Code */
.xcode {
color: #008000;
font-family: 'Courier New', Courier, FreeMono, 'Nimbus Mono L', monospace;
font-size: 13px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
}
/* Style Div */
.alignment {
line-height: 20px;
text-align: justify;
}
Hope in workround to fix the issue...
here there is my css: http://www.alecos.it/css/alecos.css
I'm not on Windows machine right now but my guess is .xcode(line-height:16px;} would solve your problem, but I must say that this is the wrong way of creating row borders. Why not add:
.xcode td{border-bottom:1px solid #ddd;}
instead of using background image?
Firefox is temporarily outdated unti it's next update meaning that it's browser does not have the ability to process codes in the same manner as other browsers.
.alignment {line-height: 20px;}
Gets over ruled by .xcode line-height normal;
IE aint normal ;)
Besides content tages like h1, p, font all have slightly different margins/paddings around them. So a non responsive img isnt the best way to go.
Would be better if you could wrap each line with a span, div or sinces its a table a tr,td and give those a border-bottom.
Gr.
Kevin
In order to make your text inside .xcode aligned with the horizontal lines, the "code" lines must be distributed vertically. Unfortunately, It seems that you did not understand the meaning of line-height property and use the default value without considerations.
The line-height property
As you can see, the line-height property will decide how much is the distance of two lines of text. In your case, we need it to be exactly 16px inside the whole block of .xcode.
The value of normal value of the line-height property
From the W3C CSS spec, the value of normal value is defined as:
Tells user agents to set the used value to a "reasonable" value based
on the font of the element. The value has the same meaning as
. We recommend a used value for 'normal' between 1.0 to 1.2.
From some online resource like this article or this page, you can see that the real value of normal value depends on many arguments like font size, font family, OS, user agent, ... Therefore, it is recommended that you should use some css normalize stylesheet to set the value of line-height correctly and cross-browser.
About your case
The quick fix here is setting the line-height inside the .xcode class to be 16px (which is the height of the of your background image).
I have managed to add a custom background to my site. I change the body in the bootstrap.css
body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-image: url("../images/norn-race.jpg");
background-repeat:no-repeat;
background-attachment:fixed;
font-size: 13px;
line-height: 18px;
color: #333333;
background-color: #ffffff;
}
My problem is that it is not responsive, If i zoom in the background gets bigger and if I zoom out the background gets smaller, but it should be always be the same size on different resolutions.
Where is my mistake?
I should also add the background is only visible on the left and right. At the moment I am just using a big background to cover everything, which is unnecessary, because 80% is hidden by my content.
What is the correct approach to show images on the left and right?
responsive image work when your image is in the content, aka as a <img src="" alt="">, not when set as background-image
check background-size property for responsive-design background size