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.
Related
As you can see from this image of my site:
https://www.flickr.com/photos/77598212#N03/33735427334/in/dateposted-public/
My button is crammed right underneath the randomly generated text. Instead, I'd like to lower it.
But additionally, I'm trying to keep it completely "anchored" to the page, because right now when I click the button, a random image generates, but that image is moving the button vertically depending on the size of the image. Not good.
Instead, I'd like that button to remain in the same position, always.
Any thoughts/help would be appreciated. I'm still quite new to all this. Thank you. -Wilson
link to the actual website http://www.wilsonschlamme.com/test4.html
css:
*It's pretty simple. First two elements here are controlling centering the page. The rest are self explanatory, showtext refers to the random text generator.
*{
margin:0;
padding:0;
}
body{
text-align:center; /*For IE6 Shenanigans*/
}
button {
color: #900;
font-weight: bold;
font-size: 150%;
text-transform: uppercase;
}
h1{
margin-top:20px;
font-size: 250%;
overflow:hidden; /* older browsers */
font-family: hobeaux-rococeaux-sherman, sans-serif;
}
img {
max-width:600px;
max-height:440px;
box-shadow: 1px 5px 5px grey;
border-style: groove;
border-width: 1px;
margin-top:20px;
}
#ShowText{
overflow:hidden; /* older browsers */
word-wrap: break-word;
padding-top: 100px;
max-width: 1000px;
font-size: 25px;
font-family: vendetta, serif;
line-height: 25px;
margin: 0 auto;
}
Use:
#buttonfun {
margin-top: 20px;
}
Wrap the img with a div:
<div class="image-wrapper">
<img src="images/297.jpg" />
</div>
and add the CSS:
.image-wrapper {
height: 440px;
}
I have a jsfiddle here - https://jsfiddle.net/z9ptvz87/
I'd need the headings to have a background color and same padding on all sides.
I sort of have ot working here but it's with line-height to get it working. Without line-height it looks like this.
https://jsfiddle.net/z9ptvz87/10/
Is there a better way to do this and have padding on the left and right of the text.
*{
font-family: sans-serif;
}
.block{
margin: 50px;
width: 400px;
}
.block span{
display: block;
}
h1, h2{
background: red;
display: inline;
padding:10px;
line-height: 2em;
}
Did you consider h1, h2 { display: inline-block }? Seems to solve both your issues, if I've understood them correctly.
See https://jsfiddle.net/h7kd9yq8/
if everything's fixed, you can always wrap the content for the different lines inside span tags and style them
<h2>
<span>Sub heading Sub heading Sub</span>
<span>heading Sub heading Sub</span>
<span>heading Sub heading</span>
</h2>
and then in the css
h1 span, h2 span {
float: left;
clear: both;
padding: 10px;
background: red;
}
https://jsfiddle.net/z9ptvz87/14/
not sure if that's what you wanted to achieve.
I have this block:
For example: I add the text: Last News in the world.
I would like to have the width of the block as wide as the text, but the corners should still remain as a curve.
CSS:
.cat-box-title h2 {
background: transparent url(.../images/testtitle.png) repeat-y;
padding-left: 5px;
color:#5E5E5E;
float:left;
margin-right:10px;
font-size: 22px;
font-family: BebasNeueRegular, arial, Georgia, serif;
}
HTML:
<div class="cat-box-title">
title
</div>
Your solution will be more easy if you use the border-radius instead of background image.
.round-btn
{
background:#4679bd;
color: #FFF;
border-radius:5px;
padding : 10px;
border:none;
}
of-course you need to check the browser compatibility whether your browser supports this property or not. If not then you need to use some hack.
JsFiddle Demo
and if you goes with background-image solution then you need to use two images; one for left side border-radius and another one for right side and use the background-color for rest of the button.
CSS:
.cat-box-title {
background-color: #4679bd;
color:#5E5E5E;
float:left;
border-radius:5px;
margin-right:10px;
font-size: 22px;
padding: 5px;
font-family: BebasNeueRegular,arial,Georgia, serif;
}
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;
}
I have an issue with my page centering. Everything centers correctly except the left and right border.I believe the issue is with the border-right-width:300px; border-left-width:300px; lines but I am not sure of another way to set that up. Is there another solutuion to having a left and right border that also centers with the page. Any ideas?
Here is my CSS:
body {
margin:auto;
padding: 0;
background: #FFFFFF;
font: 12px/1.4 Verdana, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
border-right-style:solid;
border-left-style:solid;
border-right-width:300px;
border-left-width:300px;
border-color:#E8E8E8;
}
When you use margin:auto you must also specify a width. I think you are trying to center the contents of the body with a background #E8E8E8. Do this instead
body {
margin:auto;
padding: 0;
font: 12px/1.4 Verdana, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
width: 1020px; //or anything else you want
background:#E8E8E8;
}
You cant center anything that has no width, or is the parent-div with 100% because it cant relate to anything.
If you are going to use your body you need something like this:
body{
width:980px;
height:100%:
}
what most people do is using a container or wrapper. That gives you bit more control.
.container{
width:980px;
height:100%;
position:relative;
}
as you can see I gave the container as classs and a position:relative. This allows you to use it multiple times on the same page.
You need to center div itself, something like this:
div.page {
margin: 0 auto;
}