I have a reset.css style sheet that looks like this,
HTML * {
margin: 0;
padding: 0;
padding: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
text-decoration:none;
}
body {
font-family:Arial,Helvetica,sans-serif;
font-size: 83%;
}
ul,
ol,
li {
list-style:none;
}
a,
hover,
visited {
color:#06508b;
}
a,
img,
fieldset {
border: 0;
}
Now this should make my content sit flush with the top of the browser window however it is not, can anyone see a reason for this? You can see the problem here http://www.ibdnetwork.co.uk
It looks to me that you're reset stylesheet is correctly removing the margin and padding on the body element. This leads me to think that it's something inside the body that is pushing your content out of position.
After a quick look in firebug...
It looks like your style on line 20 of default.css needs to be:
h1 {
font-size:28px;
}
Just remove the margin-bottom:25px.
Related
As the title says i am trying to make two h2 and span text boxes have a rectangular shape for a website and i need help.
mine's looks like this:
but i want them to look like this:
h2 {
position: fixed;
top: 20rem;
left: 11rem;
text-align: right;
font-size: 1rem;
}
h2 span {
background-color: #556272;
color: #fff;
display: inline-block;
text-align: center;
font-style: normal;
padding: 2rem;
}
h2 span:first-child {
width: 200px;
height: 44px;
font-size: 20px;
}
h2 span:last-child {
transform: translate(-1rem, -1rem);
width: 200px;
height: 44px;
font-size: 15px;
}
<h2>
<span>Web</span> <br />
<span>Development</span>
</h2>
Just my take, but it seems like it'd be easier and more readable to do something like this:
h2 div {
/* various styles for background and colors */
background-color: #ccc; /* just an example */
}
h2 div.first-line {
display: block;
max-width: 200px; /* or whatever */
margin-left: 200px;
}
h2 div.second-line {
display: block;
max-width: 200px; /* or whatever */
margin-left: 100px;
}
<h2>
<div class='first-line'>Web</div>
<div class='second-line'>Development</div>
</h2>
Removing Defauilt styling
Headers by default have more margin on the top. You just want to normalize your styling.
html, body {
margin: 0;
}
This should do the trick, as it removes all margins from all elements. Just put it at the top of your stylesheet. But there are also some normalize.css defaults out there that remove all unwanted default styling.
You can also change the styling on the element itself, or remove all styling from it:
h2 {
all: unset;
}
But usually removing all default styling like this is not what you want. I'm just saying it's an option.
I usually just start styling by starting from something like this:
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
font-family: Roboto, 'Helvetica Neue', sans-serif;
background-color: #eee;
/* Some other defaults, like maybe flex attributes depending on your layout. */
}
Tip: When using the browser development tools, you can inspect each tag and see all the styling it has. Try changing / removing things in there, until you've found the culprit of your issues.
I have a h2 tag but the text isn't aligned with the left of the element as you can see on the picture.
Is it possible to remove this blank space or stick the text to the left?
Here are the CSS attributes:
h2 {
font-size: 5.2em;
font-family: UniSans;
word-spacing: 1px;
}
:** Here is a fiddle with my problem. And if there is a solution for the top blank space it would be great.
This is standard behaviour for sans-serif fonts I believe. The glyph has extra 'room' around it for ascender/decenders/serifs AFAIK.
Codepen.io example
HTML
<h1>Decent Test</h1>
<h1 class="serif" >Decent Test</h1>
CSS
* {
margin: 0;
padding: 0;
}
h1 {
font-size: 100px;
font-family:sans-serif;
word-spacing: 1px;
padding:0;
margin:0;
background: pink;
margin: 50px;
}
h1.serif {
font-family: serif;
}
You need to add margin:0 to your body and to your h2
Example : http://jsfiddle.net/LB2N5/3/
Update your CSS like below. Hopefully it will fix the issue.
body, html{margin:0; padding:0}
h2 {
font-size: 5.2em;
font-family: UniSans;
word-spacing: 1px;
margin:0px;
padding:0px;
}
DEMO
Just try to make the margin negative on your element like with -2px, you can adjust it to your Situation.
Previously on “let’s not support display: run-in because it’s complicated and nobody actually uses or wants to use it,” StackOverflow edition…
display: run-in dropped in Chrome?
Style a definitition list as simple key value set
CSS method instead of display:run-in; to position a block inline?
I would like the following behavior for h5 elements in my document:
It acts like run-in when followed by a paragraph (p)
It acts like block when followed by a heading (h1, …, h6) or something else (ul, etc.)
This is essentially the same behavior as run-in if the contents of headings are wrapped in (or contain) a block; i.e., by changing <h6>…</h6> to <h6><div>…</div></h6> or <h6>…<div /></h6>.
(However, I would prefer not to modify the HTML if possible: it’s generated from markdown via pandoc.)
Here’s what I have so far, using floating inline-blocks. Notice how the margin between the h5 and h6 gets “collapsed.”
CSS
/* Just some basic styles to start off */
body { line-height: 1.5; }
h4,h5,h6 { font-size: 1em; margin: 1em 0; }
h4 { background: #fee; }
h5 { background: #eef; }
h6 { background: #dfd; font-style: italic; font-weight: normal; }
/* Now let’s try to emulate `display: run-in`... */
h4,h5,h6 {
clear: both;
}
h5 {
float: left;
display: inline-block;
margin: 0 1em 0 0;
}
HTML
<h4>Section</h4>
<h5>Heading</h5>
<p>Paragraph here. This is some text to fill out the line and make it wrap,
so you can get a feel for how a heading with <code>display: run-in;</code>
might look.</p>
<h5>Heading, but without immediately following text</h5>
<h6><div>Subheading</div></h6>
<p>There should be as much space between the <h5> and <h6> as there is
between the <h4> and <h5>, but it gets “collapsed” because the
<h5> floats.</p>
<h5>Heading followed by a list</h5>
<ul><li>A list item</li></ul>
Here is a jsfiddle containing the HTML and CSS.
Here is one using run-in for browsers that still support it, like Safari.
Here’s a demo page from 7 years ago I found that attempts (unsuccessfully) to fake the same behavior.
Screenshots of Safari
Faked:
Using run-in (expected behavior, with correct margins between the h5 and the h6 or ul):
Maybe i have a compromised you would like : DEMO
/* Just some basic styles to start off */
body { line-height: 1.5; }
h4,h5,h6 { font-size: 1em; margin: 1em 0; }
h4 { background: #fee; }
h5 { background: #eef; }
h6 { background: #dfd; font-style: italic; font-weight: normal; }
/* Now let’s try to emulate `display: run-in`... */
* {
clear:left;
}
h5 {
float:left;
display: run-in;
margin: 0 1em 0 0;
}
h5:after {
content:'.';
position:absolute;
background:inherit;
width:100%;
right:0;
z-index:-1;
}
body {
position:relative; /* to include defaut margin of body to draw h5:after element within body */
}
p /* + any other phrasing tag you wish */ {
clear:none;
background:white;
}
(this line is because SO was chopping parts off...)
Dear element-in-a-div,
Why oh why must you be ever so maddeningly off center?
I'm using the following stylesheet:
body {
font-family: Helvetica, Arial, sans-serif;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
#tags {
margin: auto;
}
.tag {
margin: auto;
}
The greyish words are of the tag class, and the (invisible) box around them has the id tags.
I can't for the life of me think why "est", in this case, would be ever so slightly off center - any help much appreciated!
Thanks.
The picture:
Why oh why must you be ever so maddeningly off center?
I'm using the following stylesheet:
body {
font-family: Helvetica, Arial, sans-serif;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
#tags {
margin: auto;
}
.tag {
margin: auto;
}
The greyish words are of the tag class, and the (invisible) box around them has the id tags.
I can't for the life of me think why "est", in this case, would be ever so slightly off center - any help much appreciated!
Thanks.
The picture:
It is necessary to have a specific width for elements to center them. From the code you supplied, it looks like you haven't specify the width of the div or the image.
I defined main stylesheet (default CSS of my project) like this:
body {
color: #000000;
text-align: center;
margin: 0px;
padding: 0px;
font-size: 0.75em; /* 12px */
line-height: 1.5; /* font-size:1(12px) + line-space:0.33(4px) = 16px */
letter-spacing: 0.03em;
}
letter-spacing and line-height works perfectly.
but, I found that two of them affect ul-li elements too.
I want that they affect text only not ul-li or any other elements.
Is there any side-effect on letter-spacing and line-height which I don't know?
If so, how could I make line-height and letter-spacing affect text only?
With the body definition you apply your style to all elements in your page. Try to identify the desired text elements like div, a, span, etc. and make a new css entry like this:
body {
color: #000000;
text-align:center;
margin: 0px;
padding: 0px;
font-size: 0.75em; /* 12px */
}
div, a, span {
line-height:1.5; /* font-size:1(12px) + line-space:0.33(4px) = 16px */
letter-spacing:0.03em;
}
or apply a seperate style with specific key to your text elements.
You can define the CSS for the <p> tag only, and put all texts in a p element:
p {
line-height:1.5;
}
but, I found that two of them affect ul-li elements too.
So just make another selector for ul/li elements that sets it back to normal.
ul, li {
letter-spacing:0em;
line-height:1;
}
You can set the line-height and letter-spacing back to normal on li elements:
li {
letter-spacing: normal;
line-height: normal; /* this is actually 0em */
}
Why not just reset your ul li elements back to the default line-height after the body style?
body {
color: #000000;
text-align:center;
margin: 0px;
padding: 0px;
font-size: 0.75em; /* 12px */
line-height:1.5; /* font-size:1(12px) + line-space:0.33(4px) = 16px */
letter-spacing:0.03em;
}
ul, ul li {
line-height: 1;
letter-spacing: 0em;
}