When I use font Minecrafter 2.0 as logo, it stick to top (similar as vertical-align:top). For example http://oi58.tinypic.com/qovasy.jpg
When i use line-height (for example):
h1 { line-height: 1; margin: 0; padding: 0; }
Logo leaves from area: http://i59.tinypic.com/jfuohy.png
With standard fonts all right. How to place font to center?
May you should try to use padding-top rule, like that:
h1 { padding-top: 10px; }
Related
I don't have any experience with html or css, I recently started my blog: https://nataliaputilova.blogspot.com/2019/09/blog-post_50.html
But you can see there's so much white space on the left, how do I reduce this? I tried googling some stuff about editing the html or adding a css code, but none of it worked.
This is the css I tried, and it didn't look like it changed anythin
.content-outer {
margin-left: 10px;
}
change the .centered-bottom and post-sidebar class width.
.centered-bottom, .centered-top {
width: 90%; /*change this */
}
if you don't want to have padding for .post-sidebar u can remove it.
.post-sidebar {
box-sizing: border-box;
display: block;
font: normal 400 14px Montserrat, sans-serif;
padding-right: 20px; /*Remove this if u don't want to have padding */
width: 70px; /*change this */
}
Final output:
It looks like sidebar (.post-sidebbar) is causing the main content to shift to the right. If it works, you can position it elsewhere so that your content gets more space.
OR
You can override the css of .centered-bottom, and add margin-left: 100px (Change the number as per your need) to it.
Trying to make a header touch the top of my page, however there seems to be an automatic margin, even if specified otherwise.
I've tried specifying margin-top: 0, and have set margin: 0 to the body as well.
h1 {
margin-top: 0px;
}
body {
margin: 0px;
}
<h1>test</h1>
Instead of touching the top of the page, the "test" header has an automatic margin at its top.
adding line-height: 75%; seems to do the trick:
h1 {
margin-top: 0px;
line-height: 75%;
}
body {
margin: 0px;
}
Just add the line-height for your h1 tag. Optionally set the line-height for body also.
h1 {
margin-top: 0px;
line-height: 18px;
}
body {
margin: 0px;
line-height: 1.15;
}
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>test</h1>
</body>
</html>
The header in not touching the top even after setting margins to zero, must be due to line-height.Try to set a colored border i.e. border: 1px solid green. If you see that the border is touching the top then the real reason is the space around text/font due to line-height.
The line-height is set by the standard css rules included in the html page to create proper spacing between text OR by default it is set to normal which uses a standard value. So if you reduce space around text using line-height property it will do the trick but i do not recommend to reduce it less than 1 : line-height: 1
Use Uppercase letters and you will see that your element is already touching the top of the screen so it's logical that the lowercase ones will be sligthly lower.
h1 {
margin-top: 0px;
}
body {
margin: 0px;
}
<h1>ÂtestË</h1>
So I want to put a h1 tag in the bottom right corner. What I have currently is below; however, this is very tedious and I want it to always be in the corner. Currently the way I am doing it is based off of my computer's screen, but if someone uses a computer with a different size screen then the tag will not be in the right place. Would there be any other way I could do this so that the tag would be in the same place for all size monitors?
.subH {
font-family: Sedgwick Ave Display;
font-size: 10px;
padding-top: 505px;
padding-left: 1170px;
color: white;
}
<h1 class='subH'>Created by Hybrid Alpaca Game Studios</h1>
Use position: fixed
Example:
h1 {
position: fixed;
bottom 6px;
left: 6px;
}
I'm currently trying to mimic this layout using HTML/CSS. Attached is what it should look like on Desktop and Mobile. For mobile, I'm not 100% sure the best approach for this. Notice how the image comes before "Bowers & Wilkins".
The layout is 100% browser width btw. My initial thought was to use flex boxes for this...but I'm not 100% sure if it's the right approach. I'm currently pretty new to using flex boxes.
Simplest way would probably be to float the image to the right at desktop res (initially shown in a single column in the demo when you run the below snippet - effectively mobile res. If you switch to full page mode, you should see the element order change so the image floats to the right):
body {
font-family: Arial, sans-serif;
background-color: #aaa;
padding: 1em;
font-size: 14px;
}
h1,
h2,
p {
margin: 0;
color: #fff;
}
/* float image to the right, half the width of the viewport */
img {
float: right;
margin-left: 1em;
width: 50vw;
}
h1 {
font-size: 1.25em;
font-weight: normal;
}
h2 {
text-transform: uppercase;
font-size: 1em;
}
#media only screen and (max-width: 767px) {
/* at mobile res, remove the float so the image appears back between the headings */
img {
float: none;
margin-left: 0;
margin-bottom: .75em;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" />
<h1>Exclusive offers from our partners</h1>
<img src="http://lorempixel.com/output/technics-q-c-200-200-4.jpg" />
<h2>Bowers & Wilkins</h2>
<p>It's one thing to dress well for your party. It's another thing to host it well ...</p>
I would definitely recommend bootstrap as a good solution for this. They have pre-built CSS classes that can pull and push and rearrange objects like this automatically.
Here the classes would be class="col-md-6 col-md-push-6" and class= "col-md-6 col-md-pull-6"
Cant seem to find how to remove vertical space between two text elements, There are some similar problems on this website but doesn't seem to actually work.
HTML Code:
<p>this website is</p> <h1>Encrypted</h1>
it seems that I would have to use a position code, but when I use a position code that lets other elements get close to it, the text gets pushed to another spot on the website
Remove white space between elements using CSS:
Horizontal being (top and bottom space)
h1, p {
margin-top: 0;
margin-bottom: 0;
line-height: /* adjust to tweak wierd fonts */;
}
Vertical being (left and right space)
.parent {
font-size: 0;
line-height: 0;
}
h1, p {
font-size: 12px;
margin: 0;
display: inline-block;
}
JSFIDDLE
Every browser has pre-set styles for elements. p and header tags have margins set. You can change this by using margin: 0;: JS Fiddle
You may also benefit from using a CSS Reset to avoid these issues.
Also, I don't imagine a scenario where the word "encrypted" in your code should be using an <h1> tag: How to properly use h1