what I want to ask is "shouldn't be line-height have a value of 3em in h2. how it is actually working. when I set set font-size:2em and line-height:3em it is not in center vertically. How can be a line-height:1.5 is keeping the text in center of header?"
html{
font-size:10px;
}
h2{
margin:0;
}
.card{
width: 35em;
height: 22em;
margin: 05em auto;
background-color: red;
}
.card header{
height: 3em;
padding: 1em;
background: orange;
}
.card header h2{
font-size:2em;
line-height: 1.5em;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<section class="card">
<header>
<h2>This is Header</h2>
</header>
</section>
</body>
</html>
I figured it out myself.
problem is here
.card header h2{
font-size:2em;
line-height: 1.5em;
}
basefont size is set to 10px. so when i set font-size:2em it means font-size has value "20px" so when line-height is set to 1.5em it is taking the current font-size value which is 20px (2em) so now line-height:1.5em means 1.5 of 20px which is 30px.
in short: em refers to local font-size value first then to parent and last to global.
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Technology-BBC News
</title>
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
#topbar {
width: 1265px;
margin: 0 auto;
height: 40px;
background-color: #FFFFFF;
}
#logo {
margin-top: 8px;
width: 85px;
float: left;
margin-right: 15px;
}
.topbar-section {
float: left;
border-left: 1px solid #CCCCCC;
height: 100%;
}
#signin-img {
width: 22px;
margin-top: 11px;
margin-left: 11px;
float: left;
}
#signin-text {
/* margin-top: 100px; */
position: relative;
top: 10px;
left: 8px;
font-weight: 600;
font-size: 13px;
padding-right: 50px;
}
</style>
</head>
<body>
<div id="topbar">
<img id="logo" src="images/BBC_logo.png" alt="logo">
<div id="singin" class="topbar-section">
<img id="signin-img" src="images/signin.png" alt="">
<span id="signin-text"> Sign in</span>
</div>
</div>
-
</body>
</html>
here I am trying to give margin to #signin-text but it's not working ... I used positioning that worked but margin-top didn't can someone please tell me why the margin-top property in #signin-text not working this is my first question of stackoverflow please forgive if the question is asked in a wrong way. :)
span is an inline element. That's why it can't accept margin. If you change this (change its block level) by giving display: inline-block for example, the margin will affect.
span {
margin-top: 15px;
}
.inline-block {
display: inline-block;
}
<div>
<span>natural</span>
</div>
<div>
<span class="inline-block">inline-block</span>
</div>
Since you're using css property top with margin-top it will not work.top always takes precedence over margin-top when using with position property. Check https://www.w3schools.com/Css/css_positioning.asp for reference. Try using top with a value 100px
spans are the inline elements that take margins horizontally only not vertically, Only the block and inline-blocks can take margins as vertically and horizontally.
Margin properties specify the width of the margin area of a box. The
'margin' shorthand property sets the margin for all four sides while
the other margin properties only set their respective side. These
properties apply to all elements, but vertical margins will not have
any effect on non-replaced inline elements.
there are many solutions to your problem, either use div or specify span tag as inline-block in your style tag. Still, there are many other ways to achieve this
I'm using a template for a weekly newsletter and I'm trying to keep all the images that get piped in to the newsletter to be the same size. Here's the current code:
<img src="xxx {{ content.thumbnail_uri }}" width="340"
style="margin: 0;
color: #222222;
font-family: Helvetica, Arial, sans-serif;
font-weight: normal;
line-height: 19px;
padding: 0;
text-align: left;
font-size: 14px;
margin-bottom: 0;
width: 100%;
height: auto;
max-width: 340px;" />
The problem is that when the template gets generated there is an introduction that pushes down the left column and the image height on that size gets squished down. Is there a way that I can guarantee that the images stay the same height and width while still keeping it responsive for mobile?
I'd do something like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
* {
box-sizing: border-box;
}
.image-holder {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1rem;
}
.image-holder img {
width: 100%;
}
</style>
<body>
<div class="image-holder">
<img src="https://cdn.pixabay.com/photo/2018/10/30/16/06/water-lily-3784022__340.jpg" alt="image1"/>
<img src="https://image.shutterstock.com/image-photo/colorful-flower-on-dark-tropical-260nw-721703848.jpg" alt="image2"/>
<img src="https://cdn.pixabay.com/photo/2018/05/28/22/11/message-in-a-bottle-3437294__340.jpg" alt="image2"/>
</div>
</body>
</html>
I am trying to position a div in the center of a grid header but many of my attempts have failed.
Here's link to code pen: https://codepen.io/ZeePintor/pen/OKxLRe
Here's the html code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ermesinde Clube de Karaté</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Montserrat:900|Work+Sans:300" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style2.css">
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="brand">
<img src="/images/eck_logo.png">
<div class="page-headers">
<h1>ECK</h1>
<h3>ERMESINDE CLUBE KARATE</h3>
</div>
</div>
</div>
<div class="section1">Section1</div>
<div class="section2">Section2</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
And here is the css:
.wrapper{
display:grid;
width:100%;
background-color:#e3e3e3;
grid-template-rows:
[grid-start hd-start] 100vh
[hd-end sc1-start] 100vh
[sc1-end sc2-start] 100vh
[sc2-end ft-start] 125px
[ft-end grid-end];
grid-template-columns: 100%;
}
div div:hover{
border:1px solid black;
}
/*
HEADER
*/
.header{
grid-row:hd;
background-repeat: no-repeat;
background-size: cover;
background-image: url(../images/black_belt_stock_photo.jpg);
}
.brand{
grid-row: brand;
display:flex;
justify-content:flex-end;
}
.brand img{
border: 2px rgb(109, 12, 12) solid;
border-radius: 50%;
}
.brand h1{
color:white;
font-family: 'Montserrat', sans-serif;
font-weight: 900;
}
.brand h3{
color:white;
font-family: 'Work Sans', sans-serif;
font-weight: 300;
}
.section1{
grid-row:sc1;
}
.section2{
grid-row:sc2;
}
.footer{
grid-row:ft;
}
This is supposed to be the big header of the page to when people open the page, animations might be added to the headers and image, but first I would like to center vertically while aligning the element to the far right.
I have tried to move around in the css with somethings like:
- position:absolute;
- vertically-align:center;
- justify-content:right; align-content:center;
But none of these worked for me, so please could someone help me?
Thank you.
This might work for you:
.brand{
grid-row: brand;
display:flex;
justify-content:flex-end;
position: absolute;
right: 2rem;
top: 50%;
margin-top: -160px; /* 1/2 image height */
}
I want to have a button with width:auto; and display:block;. This button should be centered with margin:0 auto. But if I take all together, it will not work.
What am I doing wrong?
CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>asd</title>
</head>
<body>
I am an example content and I should be above the button. I want to have an auto width and being centered
<style type="text/css">
.btn{
color:black;
font-size: 14px;
line-height:14px;
text-align: center;
font-weight: bold;
margin:0 auto;
height:14px;
display:block;
cursor: pointer;
background-color:red;
padding:15px;
text-decoration:none;
}
</style>
<a class="btn">helloworld</a>
</body>
</html>
You can use inline-block instead of block:
body {
text-align:center;
}
.btn{
display:inline-block;
}
The demo Fiddle
Another option use display:table, with this the margin auto can work:
.btn {
display:table;
margin: 0 auto;
}
The demo Fiddle
If you set it as width: auto, then the element will fill the entire screen. So it is centered, but you can't tell since it's taking up the entire screen. Simply change width: auto to a fixed width like 50px or 30% and it will center properly. Demo
If you have variable content, then get rid of the height: 15px and it will work. It will also look a little nicer with width: 65%. Demo
I have a section containing a anchor tag containing a h1, the h1 has a background image, when I hover over the h1 background image the position change to imitate a rollover, however, the rollover is also active outside of the h1 to the right of it try hovering to the right, I have tried to get rid of margins and padding to no avail.
Here is the site live
html
<!DOCTYPE html>
<html>
<head>
<title>Portfolio of Anders Kitson</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
<script type="text/javascript" src="//use.typekit.net/lfr7txf.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body>
<div id="container">
<header>
<h1>ASK</h1>
<h2>Anders Samuel Kitson, front end web developer.</h2>
</header>
<section id="siteThumbs"><!--not sure if this is appropriate use of the section tag-->
<h1>Springmethod.com</h1>
</section>
</div>
</body>
</html>
css
/*variables*/
/*shared styles*/
#container {
width: 960px;
max-width: 90%;
border: solid 0px #000;
margin: auto; }
header h1 {
background: url("../images/ask.gif");
width: 97px;
height: 96px;
text-indent: -9000px; }
header h2 {
font-family: "brandon-grotesque",sans-serif;
font-weight: 300;
font-size: 2.5em; }
#siteThumbs h1 {
background: url("../images/springmethod.jpg");
width: 321px;
height: 241px;
text-indent: -9000px;
padding: 0;
margin: 0; }
#siteThumbs a:hover h1 {
background: url("../images/springmethod.jpg") 0 -241px no-repeat; }
/*media queries*/
/* Smartphones (portrait and landscape) */
#media only screen and (min-width: 0px) and (max-width: 767px) {
header h2 {
font-size: 1.5em; } }
You can nest the h1 within a div, setting the div's width to achieve the desired effect.
<a href="#">
<div style="width: 100px">
<h1>Springmethod.com</h1>
</div>
</a>