Hell I'm making a navigation where one specific Element should be highlighted from other elements of the navigation.
I created a css class highlighted where i increase font the size. But then the text is not on the same hight as the smaller texts.
#navigation .bar a.highlight{
font-size: large;
}
It looks like this:
Sorry I'm new to css and html and I guess it's an easy solution.
Please take a look at my code
http://jsfiddle.net/FcbJv/
First, I would suggest not using keywords like large in your CSS for font-size, instead use px or em units (better for maintainability, and browsers can interpret these keywords differently).
You can achieve the effect you want by decreasing the line-height on your .highlight menu item in proportion to the increase in font-size. This maintains the vertical rythm of your menu items.
jsfiddle
CSS
/*EM (personal preference) */
#navigation .bar a.highlight{
font-size: 1.4em; /* we increase size by .4ems */
line-height:.6em; /* so we reduce line-height by .4 ems */
}
/* PX */
#navigation .bar a.highlight{
font-size: 18px; /* just guessing here, make sure to set this to the actual desired height */
line-height:10px;
}
You need to add a line-height.
Try this:
#navigation .bar a.highlight {
font-size: large;
line-height: 12px; /*Same as your font-size for normal items*/
}
Because your font size for the page is 12px, a line-height of 12px will vertically center it. If you change the font-size, be sure to change the line-height.
Check this JSFiddle.
Aligning things vertically in CSS is one of the things that can make you go crazy.
Try improving the line-height of the list items:
line-height: 16px;
Also, try to be specific with the font-size you want instead of using large because it can vary from browser to browser.
Related
I have a base size in my html of 62.5% and I multiply my headers' font-sizes accordingly. When I inspect it in my Chrome: different h2 headings have the same font-size, but they appear in diff. sizes on my screen. From my understanding the font sizes (with %) depend on the font-size of html. But anyways the parent containers are also the same width.
html {
font-size: 62.5%; }
h1, h2, h3, h4 {
text-align: center; }
h1 {
font-size: 250%; }
h2 {
font-size: 187.5%; }
h3 {
font-size: 125%; }
h4 {
font-size: 100%;
font-weight: bold;
margin-bottom: 0.5em; }
I figured out, that there are two font-sizes in the parent elements, which are crossed out. If I deactivate them in my developer window it still affects the size of the headers. Interesting to see.
But I think I had a misunderstanding, I thought if I have a parent defined in the css like
div h1, the font-size of the parent affects the size. But it seems that every parent font-size has an effect on its child elements. That makes working with %, like in the article below, in my humble opinion useless, because you are not able to set a hierarchy for the fonts. Or am I wrong? So the best way would be to use rems everywhere to get consistent font-sizes?
In html tag set font size in percentages, in body tag set to 1em, and other tags use em units
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.
In a website menu, I have implemented some wishes of my customer concerning typography in CSS. She needs a different tracking on the font, no problem. But, she wants the active link to be underlined. As I have not implemented the code to target the active link, I just underlined them all to see how it would look. The CSS is as follows:
.main-navigation a {
display: block;
color: black;
font-weight: bold;
letter-spacing: 0.45em;
line-height: 4.5em;
text-decoration: underline;
text-transform: uppercase;
}
And this is the result:
The problem is that the letter spacing kind of messes up the underlining. I've drawn some vote magnets freehand circles to indicate the problem. The line starts nicely at the left side but is extended with the value of letter-spacing to the right.
Screenshot is from Firefox 25. Jsfiddle to see for yourself.
I could solve this using borders and using margins instead of line height, but is this fixable otherwise?
CSS Text underlining too long when letter-spacing is applied?
http://jsfiddle.net/isherwood/JWcGh/2
.main-navigation a:after {
/* absolute positioning keeps it within h1's relative positioned box, takes it out of the document flow and forces a block-style display */
position: absolute;
/* the same width as our letter-spacing property on the h1 element */
width: 0.45em;
/* we need to make sure our 'mask' is tall enough to hide the underline. For my own purpose 200% was enough, but you can play and see what suits you */
height: 200%;
/* set the background colour to the same as whatever the background colour is behind your element. I've used a red box here so you can see it on your page before you change the colour ;) */
background-color: #fff;
/* give the browser some text to render (if you're familiar with clearing floats like this, you should understand why this is important) */
content: ".";
/* hide the dynamic text you've just added off the screen somewhere */
text-indent: -9999em;
/* this is the magic part - pull the mask off the left and hide the underline beneath */
margin-left: -.40em;
}
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).
How can I reset the sizes of headings to the default sizes? Here's some HTML that I have:
<h2>Hello World</h2>
Here's the CSS for it:
h2 {
font-size: 16px;
margin: 1em 0 0.5em;
}
/*I'd like to reset that height of 16px and use the default browser height */
h2 {
font-size: 100%;
}
I need to override the old h2 selector and reset the headings to the default size? I've Googled this and it said that the heading sizes were browser dependent and I don't want to hard-code the heading sizes.
This is a really basic question I know but somehow I can't wrap my head around what value I need to use to reset the height.
According to A List Apart, the default body font size is 16px (and this is consisent across browsers).
The W3C recommended default stylesheet shows the h2 size as 1.5 em.
Some simple calculation brings us to 16 * 1.5 = 24px.
So, setting your h2 font-size to 24px should do it.
In general, you cannot set a property of an element to its default value except by not setting the property in any author style sheet. Methods suggested for this are based on misunderstandings or on some assumptions about defaults, but the defaults are browser-dependent.
You can use Normalize.css from the beginning and it'll normalize the heading sizes across browsers:
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
For example, here is a fix for the <h1> tag:
/*
* Addresses `h1` font sizes within `section` and `article` in Firefox 4+,
* Safari 5, and Chrome.
*/
h1 {
font-size: 2em;
}
There isn't a way to go back to the browser's default font-size because everyone does it a little bit differently.
When you change the font size on your h2, it will impact the size of your margins as well (since they are defined in em). I suspect you are trying to modify the font-size to 16px in an attempt to match the margins of other elements that are also specified in em. If this is the case, you will need to set your properties differently:
h2 {
font-size: 1.5em;
margin: .75em 0 0.333em; /* (1 / 1.5) 0 (.5 / 1.5) */
}
The default font-size for headers is medium. See here: https://developer.mozilla.org/en-US/docs/CSS/font-size
So you would do:
h2 {font-size: medium;}
Probably the easiest way to have the heading font-size be set back to default is to remove the font-size declaration from the h2 element you already have, so instead of:
h2 {
font-size: 16px;
margin: 1em 0 0.5em;
}
you will just have
h2 {
margin: 1em 0 0.5em;
}
You will also want to check your style sheets for any other spots a h2 font-size might be declared. If you can't or don't want to remove the font-size delcaration you can do the following to reset the font-size for all h2 elements to default
h2 {
font-size: medium !important;
}
The font-size of medium is the default value for all browsers and the !important at the end makes it override all other declared styles. You need to be careful using important though because it makes it much harder to determine how a style is going to cascade through the elements and/or how it is being applied.
Cheers and how this helps.
Source for default value: http://www.w3schools.com/cssref/pr_font_font-size.asp