I want to add boundaries around four sides of the web pages(black color 25px width). Now it is not lucky.
Please see my jsfiddle at demo.
The partial css:
body {
font-size: .85em;
font-family: "Segoe UI" , Verdana, Helvetica, Sans-Serif;
margin: 25px;
padding: 0;
background-color: #000000;
}
Take away the background and margin from the body element and add stuff to the HTML element instead:
* { /*this * selector selects every element*/
box-sizing: border-box;
}
html{
background: #000;
padding: 25px;
}
body {
font-size: .85em;
font-family: "Segoe UI" , Verdana, Helvetica, Sans-Serif;
}
(also use box-sizing: border-box; on everything to not screw stuff up with margins and padding)
http://jsfiddle.net/CenND/4/
I also removed position: absolute; from the footer. Now it behaves.
Related
I set a font-size as global. That changes when browser's width change(kind of fluid typography). I setted that to body element.
But when size of browser changes, then it changes(font-size). Why? and How can I stop this?
*,
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-size: calc(16px + .75vw);
}
.container {
background-color: #d1c6c6;
padding: 10px;
min-height: 100vh;
}
.container__box {
font-weight: bold;
color: white;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
padding: 15px 10px;
background-color: #8b2be4;
width: 90vw;
font-size: 30px;
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="container">
<div class="container__box">Gridfan Jessica</div>
</div>
But when size of browser changes, then it changes(font-size). Why?
Because you used vw font size changes when browser size changes.
How can I stop this?
Use px instead. If that's not eye comfortable, Use media query for different font sizes for different screen widths.
I need to have a button that activates a slide down menu and a div that has a link in it, in a nav bar, the button and the link have a name and a small line of text underneath. I want the small line of text to be a smaller font. If I put the line of text in a p tag and specify a smaller font, I cannot get the text to align within them neatly.
I can use padding on the link to push it down, but when I start using media queries to make things smaller, they fall out of alignment. I have also tried using line height but have similar problems. I can go through all the media queries adjusting padding/line height slightly to get alignment, but obviously this is not fixing the problem, just creating a messy solution.
If I remove the font size on the small line of text, they align properly. Can someone help me understand the cause of why using different font sizes cause the alignment of the text in a button and div to change differently and suggest a solution so they align easily and consistently when I resize other properties such as the height of both. Thanks
.main-menu-button{
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
float:left;
position:relative;
font-weight: 600;
font-size: 16pt;
height:50px;
top:25px;
line-height: 3pt;
z-index:10;
background-color: white;
border: 1px solid green;
}
.main-menu-link{
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
float: left;
position:relative;
font-weight: 600;
font-size: 16pt;
height:50px;
width:120px;
top:25px;
line-height: 3pt;
z-index:10;
text-align: center;
border:solid 1px black;
}
/* if you remove font size in the p tag, the text aligns, but I want this below*/
p {
font-size:8pt;
}
<html>
<button class="main-menu-button">My button<p>bit of text</p></button>
<div class="main-menu-link"><a>My link</a><p>bit of text</p></div>
</html>
Removed lineheight from both
Removed margin from p
Added margin to div for the button*
Step 3 would be better if you use only divs or only buttons though.
.main-menu-button{
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
float:left;
position:relative;
font-weight: 600;
font-size: 16pt;
height:50px;
top:25px;
z-index:10;
background-color: white;
border: 1px solid green;
}
.main-menu-link{
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
float: left;
position:relative;
font-weight: 600;
font-size: 16pt;
padding-top: 5px;
height:50px;
width:120px;
top:25px;
z-index:10;
text-align: center;
border:solid 1px black;
}
/* if you remove font size in the p tag, the text aligns, but I want this below*/
p {
font-size:8pt;
margin: 0;
}
<html>
<button class="main-menu-button"><span>My button</span><p>bit of text</p></button>
<div class="main-menu-link"><a>My link</a><p>bit of text</p></div>
</html>
button are a bit special and there is a default center alignment applied to them. You need to do the same with the div
.main-menu-button,
.main-menu-link {
box-sizing: border-box;
display: inline-flex;
flex-direction:column;
vertical-align: top;
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
font-size: 16pt;
height: 50px;
line-height: 3pt;
width: 120px;
background-color: white;
border: 1px solid green;
justify-content:center;
align-items:center;
}
p {
font-size: 8pt;
margin-bottom:0;
}
<button class="main-menu-button">My button<p>bit of text</p></button>
<div class="main-menu-link"><a>My link</a>
<p>bit of text</p>
</div>
.wrapper {
display: flex;
}
.wrapper > * {
margin-right: 5px;
padding: 5px 10px;
}
.main-menu-button{
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
font-size: 16pt;
background-color: white;
border: 1px solid green;
}
.main-menu-link{
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
font-size: 16pt;
width:120px;
text-align: center;
border:solid 1px black;
}
/* if you remove font size in the p tag, the text aligns, but I want this below*/
p {
font-size:8pt;
margin: 0;
}
<html>
<div class="wrapper">
<button class="main-menu-button"><span>My button</span><p>bit of text</p></button>
<div class="main-menu-link"><a>My link</a><p>bit of text</p></div>
</div>
</html>
What is happening here?
Added a wrapper for both elements and given display: flex;
You don't need the height property for inner elements anymore since flex parent's children by default will be of same height.
I have two DIVs, which I would like to stack vertically …
<div id="searchContainer”>…</div>
<div id="searchResultsContainer”>…</div>
I have the following styles assigned to them …
#searchContainer {
padding: 10px;
font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
background-color: tan;
width: 100%;
}
#searchResultsContainer {
background-color:cyan;
font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
padding: 5px 0px 5px 0px;
width: 100%;
}
However it seems that adding padding to my top DIV causes it to be wider than the DIV below it. I would like both DIVs to be the same width, but I would like the top DIV to have the padding so that the elements don’t scrunch up to the border. How do I do that? Here is the Fiddle that illustrates my problem — https://jsfiddle.net/1zb5mqmo/ .
Use box-sizing: border-box; on the padded div:
#searchContainer {
padding: 10px;
font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
background-color: tan;
/* max-width: 1000px; */
width: 100%;
box-sizing: border-box;
}
box-sizing: border-box The width and height properties include the content padding and border
box-sizing: content-box The width and height properties include only content
Updated JSFiddle
In this case, simply remove the width and you can combine both padding and border without throwing it off
#searchContainer {
padding: 10px;
font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
background-color: tan;
}
#searchResultsContainer {
background-color:cyan;
font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
padding: 5px 0px 5px 0px;
border: 5px solid steelblue
}
<div id="searchContainer">...</div>
<div id="searchResultsContainer">...</div>
When I specify the font in body style in CSS it works ok. But when I do the same for div it has no effect.
.tel {
display: inline-block;
background-color:rgba(0,0,0,0.5);
height: 60px;
padding: 30px 30px 0 0;
font: 24pt/0.64 "Consolas", Arial, Helvetica, sans-serif;
font-size: 87.5%;
width: cover;
}
The problem was that i needed to use styling like this
.tel a{
font: 24pt/0.64 "Consolas", Arial, Helvetica, sans-serif;
color: white;
padding: 0 0 0 50px;
}
try with !important and see if it has an effect, if so, an other class is applied on your DIV.
I have a h1 in my header and in another section of the document. I'm told this effects SEO but I digress, i'm just learning by copying other peoples pages and attempting to style them as they did without looking at their code.
So my h1 styles fine but when i target h1 inside a section class the style doesn't apply.
h1 {
text-align: center;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 1.7em;
font-weight: 400px;
margin: 1px auto 13px;
}
.header h1 {
border-top: 3px double #232323;
padding-top: 10px;
font-family: inherit;
}
<body>
<h1>This is a header</h1>
<section class="header">
<h1>This is a header</h1>
</section>
</body>
My guess is that the class.h1 rule is overriding the h1 rule. If this is the case, how can I apply my top border to my h1, while still inheriting the h1 properties.
Apologies if I am murdering any CSS nomenclature.
The inherit keyword specifies that a property should inherit its value from its parent element. So the parent is section, and there is no rules for font on section. Remove the inherit.
h1 {
text-align: center;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 1.7em;
font-weight: 400;
margin: 1px auto 13px;
}
.header h1 {
border-top: 3px double #232323;
padding-top: 10px;
}
<body>
<h1>This is a header</h1>
<section class="header">
<h1>This is a header</h1>
</section>
</body>
There doesn't seem to be much wrong with your code. Indeed if you declare global h1 properties they will be used for all h1's on your site.
If you create specific rules then those will apply to any h1 which meets that rule but the other properties will be inherited (if they are different).
I updated the fiddle here: http://jsfiddle.net/lharby/ukhua6jm/2/
Example:
h1 {
/* global porperties */
text-align: center;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 1.7em;
font-weight: 400px;
margin: 1px auto 13px;
}
.photography h1 {
border-top: 3px double #232323; /* new property */
padding-top: 10px;
font-size: 2em; /* overwrite existing property */
}
Use !important on the rules that you want to use to override whatever rules the <section> applies to your <h1>.
For instance, if you want to apply the fonts on your original h1 to the one inside the section:
h1 {
text-align: center;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif !important;
font-size: 1.7em;
font-weight: 400px;
margin: 1px auto 13px;
}
Demo: http://jsfiddle.net/gcj6xLL0/