I am using a custom font (Oswald) for the headings or titles within my page. I believe that its' height is conflicting with the native fonts (Arial, san-serif etc.) and would like to know if there is a way to set both fonts evenly...? If more text is placed in later on, the gap difference becomes substantial.
Please take a look at what I have here: http://jsfiddle.net/x6v7F/
I have a temporary background fade in and out to illustrate.
thank you.
It doesn't seem to be a font-size issue, the issue seemed to be with you specifying the line-height
If you see this fiddle, you can see I've changed h1 and h2 to have these line-heights
h1 {
font: 16px 'Oswald', Arial, Helvetica, sans-serif;
text-transform: uppercase;
color:#000000;
margin:14px 0;
line-height: 100%; <----
}
h2 {
font: 12px 'Oswald', Arial, Helvetica, sans-serif;
text-transform: uppercase;
color:#BBBBBB;
margin-bottom: 14px;
line-height: 100%; <----
letter-spacing: .2px;
}
If you check that Fiddle, it seems to have fixed your problem?
Rob has 4 sections that sit side by side (you may have to bump up width of jsfiddle window). His prob is that he wants his sections to line up along the bottom, but is having issue because the varying text sizes between his body font and header fonts.
Many of the css grid frameworks try to address these type of issues: normalizing the heights of text and headers so that all lines fall on an imaginary grid of baselines.
To be honest, I would just give the sections a static height and leave some fuzzy space at the bottom for margin of error.
section { height: 370px; position:relative; }
section .button { position:absolute; bottom:0; right:0; }
Edit:
If you're looking for a dynamic section height, you'll have to leverage javascript magic. JQuery:
<style>
section { position:relative; padding-bottom:50px; }
section .button { position:absolute; bottom:0; right:0; }
<style>
<script>
var max_height = 0;
$('section').each(function() {
max_height = Math.max(max_height, $(this).height());
}).height(max_height);
</script>
Related
I am trying to draw a text-based GUI in HTML (just for fun) which looks like an old terminal app and I have ran into a problem:
When I have two lines (divs) and I put graphic characters in them like these:
░░░
░░░
I can't align the lines properly (vertically). If I just put terminal characters in my divs like this:
<div class="line">░█║▄▀</div>
<div class="line">░█║▄▀</div>
there is a little spacing between them. (probably height/line-height issue).
If I style them like this:
.line {
height: 1em;
line-height: 1em;
}
they overlap. I tried to fine-tune the values by hand but it seems that height and line-height does not work together well for example with font-size: 40px and line-height: 40px I have to use a height value of 45.5px. What is the problem with my approach? Is there a simple way to align my lines without fine-tuning?
Note that I zeroed all spacings/margins/paddings and I also checked the calculated css in developer tools so it is not an issue with either of these.
My base css is this:
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Source Code Pro', monospace;
}
I'd add font-family: monospace at least, see fiddle.
But to be honest I'd go with a pre tag and if neccesary spans - and not do line by line div.
I've tested this on the edge browser. I don't know what will happen on other browsers.
Bare in mind that for smaller font sizes (under .5em), some glyphs may become obscured based on monitor resolution, browser, and size.
<!DOCTYPE html>
<html>
<head>
<title>page title</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Source Code Pro', monospace;
}
.line {
/* height: 1em; */
/* line-height: 1em; */
font-size: 5em;
}
</style>
</head>
<body>
<div class="line">░█║▄▀</div>
<div class="line">░█║▄▀</div>
</body>
</html>
Looking at the widely spaced text that's in the center of this site: http://www.sharonhadary.com/ .
I tried setting the line-height property to 1 in the web inspector (it was originally set to 1em), but this had little effect. This is surprising to me, because it looks like that text has a line height of 2 or 3.
Remove the giant font-size and it's fixed.
.banner-wrap .banner h2 {
padding-bottom: 30px;
color: #ffffff;
word-spacing: .1em;
text-transform: uppercase;
font-family: 'Fjalla One', sans-serif;
/* font-size: 100px; */ /*REMOVE THIS */
font-weight: normal;
line-height: 1.1em;
}
Also <font> has been deprecated and should no longer be used
Try to add line-height: 22px instead of 1em.
I didn't understand your problem correctly but
1) If you are concerned about spacing in text, remove "word-spacing: .1em;" from .banner h2 CSS rule in the main_style.css.
2) If you are concerned about spacing between lines, reduce line-height in the .banner h2 CSS rule in the main_style.css.
I'm making a site and I'd like it to scale properly on all devices.
On my 1080x1920 screen, it works perfectly, but on thinner devices the page does not look very good.
The white space is where the header text should be.
My code can be found here:
.header {
height: 80px;
background-color:#00117D;
background-size:100%;
color:#FFF;
font-size:30px;
font-weight:bold;
line-height: 80px;
padding: 0 30px;
border-bottom-style:solid;
border-width: 2px;
border-color:#FFF;
font-family:"Segoe UI";
}
.header p, .header a {
float: left;
margin: 0;
margin-left:30px;
color:#FFF;
text-decoration:none;
}
https://github.com/MooneyDev/project-Mooney
What I have done in previous projects it used em font size values on all properties but the body, and then used media queries at various stages to change the px based body value as required. This should catch all other values and keep them proportionate.
I would suggest you look into using bootstrap as it should really speed things up and take away a lot of the pain involved in responsive dev.
I have a span and an input element that share the same CSS definition for font. Why does Chrome use different fonts for them? How would I fix this issue?
My objective is to make them look exactly the same in IE9, Chrome and FF.
CSS definitions (FIXED), if they still matter.
* {
font-family: Verdana,Helvetica,Arial,sans-serif; /* Moving here fixed it */
}
body {
/*font-family: Verdana,Helvetica,Arial,sans-serif; -- This caused the issue*/
font-size: .8em;
margin: 0;
padding: 0;
color: #000;
}
.button
{
text-align:center;
min-width:80px;
display:inline-block;
white-space:nowrap;
background-color:#4A8CF6;
color:#FFF;
padding:4px;
margin:1px;
border:0;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
font-size: .8em;
}
Solution
The problem was that the span elements inherited from my CSS definition for body and the input elements didn't. I had defined the font in my CSS with body { font-family:...; } like my computed results show and I thought that using display: inline-block; would force both of them to inherit the font from body but it did not.
The solution was to switch to using * { font-family:...; } for the font definitions. The button and clickable classes simply defined sizes and colors and such.
You have to literally specify input elements if you want them to have the same font like so:
/* Or input[type=submit] depending on your needs */
span, input {
font-family: Arial, sans-serif; /* Your font here */
}
Otherwise the browser uses the default values as your question shows. You're looking under Computed Styles which shows that Chrome has decided the values for you as you haven't specified them.
You should apply CSS reset rules in the beginning of your style sheet. Its purpose is to make all elements have the same look in all browser.
Examples:
http://developer.yahoo.com/yui/reset/
http://meyerweb.com/eric/tools/css/reset/
Related question which can be useful too: https://stackoverflow.com/questions/116754/best-css-reset
I'm working on a site's CSS and am running across an issue with the body margin section. If you look at this in Firefox and then IE, you can see the line isn't lined up right in Firefox, but it is in IE. (In the black header section).
Here is what I have for the body tag, It's something with the margin and I can't figure it out:
body {
margin: -2px;
padding: 0px;
background: #E7E7E7 url(images/bg01.jpg) repeat-x left top;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #888888;
}
Thank you for any responses!
You've placed the image with the text "Nickelson Associates" inside a table cell with a default padding which is 1px in MSIE. You need to force the td element in question to have a padding of 0.
That said, using tables for layout/positioning is considered bad practice.