I have a HTML like this:
<div id="footer">
<p> Copyright 2013 </p>
</div>
And a CSS like this:
#footer {
clear: both;
position: relative;
width: 980px;
font-size: 0.85em;
text-align: center;
margin: 0 auto;
padding: 20px 0 0 0;
border-top: 1px solid #E9E6D9;
}
I want my text in <p> to have Arial font but I would not like to add the font in the #footer but to make Arial font generic to all texts in the site (which do not have a specific font assigned).
How could I achieve that? I tried adding a * { font-family:arial; } but it did not help...
----------------- UPDATE
Here is what I have:
body {
font-size: 11px;
font-family: Arial,Helvetica,Verdana,Sans-serif;
color: black;
font-weight: normal;
}
#footer {
clear: both;
position: relative;
width:980px;
font-size: 0.85em;
text-align: center;
margin: 0 auto;
padding: 20px 0 0 0;
border-top: 1px solid #E9E6D9;
}
But the footer still comes out without inheriting the body's styles... :(
Apply that rule to the body
body {
font-family: arial;
}
Then any other element can override that:
.someClass {
font-family: verdana;
}
you have a style tag in your css which is invalid.
Removing it resolves the font issue, among others.
jsfiddle
You can declare the font on the body, with something like that.
body {
font: 16px/18px Arial, sans-serif;
}
You will set up, the size, line-height, and font for all font of the site.
Related
I have researched this problem for several days now and have found no solution so far. If this is just a beginners questions with a lot of answers out there I apologise, and please point me in the right directions.
I am trying to developp a "Headline" or "Banner" to be displayed at the top of my website.
I have a colored box, in which i want to display an image (a little off the left side), right next to it some text (the name of the website) and then centered in the middle of the box again some very short text (the name of the document, Home, Contact, things like that).
So it should look like this:
<-space-><-Image-><-Website name-><----------centered text------------------------>
So far whatever I have tried just gets me this:
<-space-><-Image-><-Website name-><-text at the left--------------------------------->
I am currently using a div element for the box with three different elements so i can format them separately in the style sheet. The main problem seems to be that the last header (Centered Text) is just created around the text, and not until the right edge of the box. So aligning left, right or in the center makes no difference.
<div class="box blue-box ">
<img class="icon" src="file://C:/Users/jafa/Desktop/juggling/website/images/white_design.png" alt="icon">
<h8 class="white-text-header">Website name </h8>
<h9 class="white-text-main-header"> Centered Text</h9>
</div>
with css style sheet:
<style>
.blue-box {
background-color: #401841;
padding: 10px;
border:1px solid white;
border-radius: 4px;
.white-text-header {
font-family: Arial;
color: white;
font-size: 24;
vertical-align: middle;
text-align: left;
}
.white-text-header {
font-family: Arial;
color: white;
font-size: 24;
vertical-align: middle;
text-align: center;
}
img.icon{
width: 120px;
height: auto;
align-items: left;
}
</style>
If anyone knows a better solution, I would be very grateful. Thank you for spending your time helping me.
You've duplicated "white-text-header" class definition. Also , left out "blue-box" class' closing brace. The code should be written as followed.
<style>
.blue-box {
background-color: #401841;
padding: 10px;
border:1px solid white;
border-radius: 4px;
}
.white-text-header {
font-family: Arial;
color: white;
font-size: 24;
vertical-align: middle;
text-align: left;
}
.white-text-main-header {
font-family: Arial;
color: white;
font-size: 24;
vertical-align: middle;
text-align: center;
}
img.icon {
width: 120px;
height: auto;
align-items: left;
}
</style>
h8 and h9 probably aren't the elements you want to be using. Update these and you will get what you want. You need to update your css classes. You have some bad syntax and duplicated names.
.blue-box {
background-color: #401841;
padding: 10px;
border:1px solid white;
border-radius: 4px;
}
.white-text-header {
font-family: Arial;
color: white;
font-size: 24;
vertical-align: middle;
text-align: left;
}
.white-text-main-header {
font-family: Arial;
color: white;
font-size: 24;
display: inline-block;
text-align: center;
}
img.icon {
width: 120px;
height: auto;
align-items: left;
}
Here is the fiddle closer to what you want: https://jsfiddle.net/475sdf9w/26/
h8 and h9 are not standard heading tags. Related question
You can reuse text styling properties by adding the rules to the parent (font-family, font-size, and color.
font-size needs a unit -- 24px
You can create your layout with Flexbox. Learn more here.
body {
margin: 0;
}
.blue-box {
background-color: #401841;
padding: 10px;
border: 1px solid white;
border-radius: 4px;
font-family: Arial;
font-size: 24px;
color: white;
display: flex;
align-items: center;
}
.blue-box img {
/* adds space to the left of the image */
margin-left: 20px;
}
.white-text-main-header {
margin: auto;
}
<div class="box blue-box ">
<img class="icon" src="https://unsplash.it/120" alt="icon">
<h5 class="white-text-header">Website name </h5>
<h6 class="white-text-main-header"> Centered Text</h6>
</div>
I'm building a single page of text that's a tight fit onto a sheet of paper. For some unknown reason, Edge renders everything larger.
I'm using border-box, null margins and padding. I've tried CSS reset but the result is the same.
In the attached example, the H1 element is 57.03x25px in Chrome, 64.7x25.35px in Edge. H2 is 57.031x16px in Chrome, 64.7x16.09px in Edge.
I assume Chrome is right since I've specifically set a font size of 25px and 16px respectively.
All these small sub-pixel errors creep up until I get quite a significant difference after a page of text. Width increase does not bother me so much, but I assume it to be related.
I can't find any other option or margin to reset, so I assume that Edge/IE somehow adds undocumented white space.
Edit: Firefox also renders larger, 27px text height for a font of 25px.
https://jsfiddle.net/m74b0s09/
<style>
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #FAFAFA;
/*font: 12pt "Tahoma";*/
font: 10.66px "Tahoma"; /* IE/Edge does not render as Chrome with pt units, seems to ignore sub-pixel sizes */
z-index: 0;
}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.section {
margin-top: 0;
z-index: 0;
}
.section h1 {
border-bottom: 1px solid;
margin-top: 8px;
margin-bottom: 3px;
}
h1 {
margin: 0;
font-size: 16px;
font-weight: normal;
text-transform: uppercase;
}
h2 {
margin: 0;
font-size: 10pt;
}
h3 {
margin: 0;
font-size: 9pt;
}
body {
font: 10.66px "Tahoma";
background-color: #fff;
}
a {
text-decoration: none;
}
.header {
margin-top: 0;
}
.header h1 {
border: none;
text-transform: none;
font-variant: small-caps;
font-size: 21px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
.header .name {
display: inline-block;
}
.header .contact {
float: right;
text-align: right;
display: inline-block;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-variant: small-caps;
}
</style>
<body>
<div class="section header">
<div class="name">
<h1>Lorem</h1>
<h2>Ipsum</h2>
</div>
<div class="contact">
<h3>
H3 text
</h3>
<h3>more H3</h3>
<h3>even more H3</h3>
</div>
</div>
</body>
Try using CSS Normalize which is a pack of CSS rules to make the main browsers render all elements more consistently and in line with modern standards.
I'm having a problem that absolutely triggers my OCD to no end and it NEEDS to be fixed.
I'm trying to adjust the .post_author/.post_content divs to be the same height as their parent div, in this case .post
At the moment there is a big ugly space if the post isn't long enough which is as I've said, ugly.
Post that's long enough:
Div structure:
<div class="post classic">
<div class="post_author"></div>
<div class="post_content">
<div class="post_head></div>
<div class="post_body></div>
</div>
</div>
Relevant CSS:
.post {
overflow: hidden;
}
.post.classic {
padding-top: 0;
min-height: 380px;
}
.post .post_author {
padding: 5px;
overflow: hidden;
color: #a1a1a1;
font-family: 'Roboto', 'Open Sans', Helvetica, Arial, sans-serif;
font-size: 13px;
font-style: normal;
}
.post.classic .post_author {
height: 100%;
width: 15%;
float: left;
padding: 15px 2% 15px 3%;
margin-top
font-family: 'Roboto', 'Open Sans', Helvetica, Arial, sans-serif;
font-size: 13px;
font-style: normal;
border-radius: 0;
/*box-shadow: 1px 0 0 #000;*/
}
.post.classic .post_content {
float: right;
width: 78%;
}
.post_content {
min-height: 321px;
background-color: rgba(255,255,255,0.04);
padding: 9px 10px 5px 0;
box-shadow: inset 1px 0 0 #000;
}
For the life of me I can't figure out how to fix this. I've tried setting the display to table, flex, inline-block, dug up many other similar stackoverflow posts but nothing's worked so far.
Just going on this info, I can only give you limited advice. I assume you're not able to reproduce this into a demo on jsFiddle because the 2 pics look like there's a lot more HTML/CSS than what you've posted. Now that I've cleared that up, I'll just concentrate on making 2 divs fit into another div at max height.
CSS
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; margin: 0; padding: 0; }
.post_content, .post_author { min-height: 380px; height: 100vh; overflow: none; }
See my answer on this post, it seems to be similar.
Try setting min-height of post-content to be 100% of the viewport
min-height: 100vh
Hope this helps.
I'm using this code to center/position a fixed width image as my background. I need to add color around the image that fills the margins in the browser window. I've tried background color, border color...
So, the width of the image is 1050px. If the browser window is 1500px I want to make the remaining area black (for instance). How can I do this?
#content {
text-align: left;
width: 1050px;
height: 825px;
margin: 0 auto;
padding: 0px;
background-image: url(file:///X|/CarFingers/tabback1_hor.png);
background-repeat: no-repeat;
}
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
color: #333333;
text-align: center;
}
<div id="content">
<body>
</body>
</div>
First: put the div INSIDE your body. Then you can just edit your body background like this:
body{
background-color: black;
}
Your HTML is invalid, you should not have a div tag enclosing the body tag. If you put the div within the body you should be able to simply set the background color of the body.
If you are wanting to know how to color a border in CSS it would be
border: 10x solid #000;
or
border-width: 10px;
border-color: #000;
border-style: solid;
#content {
text-align: left;
width: 1050px;
height: 825px;
margin: 0 auto;
padding: 0px;
background-image: url('file:///X|/CarFingers/tabback1_hor.png');
background-repeat: no-repeat;
}
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
color: #333333;
text-align: center;
background-color: #000; /* Add this to your code */
}
In your html you should do something like this:
<body>
<div id="content">
</div>
</body>
You should never enclose the BODY in DIV
I'm trying to create something like yahoo.com where the content is in the middle and on the outskirts there's a grey margin (or at least something looking like a margin, not sure if it's padding). I was successful, however when the page is resized by the user I want this margin to decrease just like it is on yahoo.com but its not decreasing (go to www.yahoo.com and resize the page and their margin decreases). Anyone knows how to get this margin to decrease?
body
{
font-family: "Lucida Grande", "Lucida Sans";
background-color: #525252;
text-align: center;
margin-left: 150px;
margin-right: 150px;
margin-top: 0px;
margin-bottom: 0px;
min-width: 650px;
min-height: 685px;
color: #00008B;
}
table
{
margin:0;
padding: 0px 2px;
border-spacing: 0; /* remove the spacing between the borders. */
width: 950px;
height: 685px;
background-color: #C1CDC1;
}
The trick is to create a container div of fixed width within your body tag for the content and set the margin to auto.
body {
text-align: center;
}
div#container {
width: 960px;
text-align: left;
margin: 0 auto
}
May I also recommend firebug or something alike as a useful tool to inspect, among other this, css and html of websites?
Change your body style to:
body {
font-family: "Lucida Grande", "Lucida Sans";
background-color: #525252;
text-align: center;
margin: 0px auto 0px auto;
width: 650px;
min-height: 685px;
color: #00008B;
}