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.
Related
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.
i have set the property of link as follow
.heading-text a
{
font-family: verdana;
font-size:12px;
color:#124253;
width:100%;
height:40px;
text-align: center;
cursor: pointer;
}
to make the height of the link as per it's parent div but it's not working
when i have set following property
.heading-text a
{
padding:11px 0px;
}
then it work properly is there any way in css by which i can increase the height of the area of the link without padding
Request to give answer as soon as possible
add this to your css :
display: block;
Try to add the following to your css:
display: inline-block;
In difference to "display: block;", this has inline too, means you can define the size but the element is still inline as before.
<a> tags are inline by default. Change it to block:
.heading-text a
{
display: block; /* Add this */
font-family: verdana;
font-size:12px;
color:#124253;
width:100%;
height:40px;
text-align: center;
cursor: pointer;
}
Here is an example fiddle.
Use any one or both of this-
display: inline-block;
or
float:left; /*or right*/
I have an <h2> title into a fixed with <div> (238px). When this page is rendered, the browser manage line breaks into the title to make the text fit the width (238px).
But the width property of the h2 element is still 238px, no matters where the line breaks are.
I want to set a border-bottom only under the text, and not under the full width of the h2 element, and I don't know how to achieve this using CSS.
You can see what I mean here : http://jsfiddle.net/np3rJ/2/
Thanks
I think this is what you need:
<h2><span>Horizon 2020, nouvelles opportunités</span></h2>
h2 span {
position: relative;
padding-bottom: 5px;
}
h2 span::after{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
border-bottom: 1px solid #000;
content: ""
}
Working demo in jsFiddle
I used the technique described in this answer: Advanced CSS challenge: underline only the final line of text with CSS
I introduced a span into the H2 in order not to change the display attribute of it, but you could just as easily use the same technique with a display: inline on your H2. This method would allow the control of the actual line though rather than setting display: inline if needed
This works on Chrome.
h2 {
width: fit-content;
}
If you are willing to use display: table-cell, and pseudo-elements, you can have a pretty good solution (with some minor limitations).
The HTML does not change:
<div class="dossier_titre">
<h2>Horizon 2020, nouvelles opportunités</h2>
</div>
and you can apply the following CSS:
.zone_33 {
width: 238px;
padding: 0px;
margin: 0px;
}
.zone_33 .dossier_titre {
margin: 0px 0px 20px 0px;
}
.zone_33 h2 {
color: #616263;
font-size: 150%;
font-weight: lighter;
padding: 0px 0px 12px 0px;
background: none;
border-bottom: 1px solid grey;
display: table-cell;
text-transform: uppercase;
}
.zone_33 .dossier_titre:after {
content: "";
display: table-cell;
width: 100%;
}
For the <h2> element, set display: table-cell, and add a pseudo-element after .dossier_titre (the containing block for the header/title element). The pseudo-element is also a table-cell and has a width of 100% (this is the key).
Also, since h2 is no longer a block element, add your margins to .dossier_titre to maintain the visual spacing in our layout.
How This Works
I am creating a two-cell table with the second cell (the pseudo-element) having a width of 100%. This triggers the browser to calculate the shrink-to-fit width for the first cell (h2) that contains the title text. The first cell's width is thus the minimal needed to display the text. The bottom border is as long as the longest text line in the text block within the table-cell.
Limitations
table-cell is not supported in IE7 without a hack, but the work-around is fairly well known and can be found if needed.
If the title had many short words, you might get the line breaking in unexpected places. You would need to insert   to keep specific words together as needed.
Fiddle: http://jsfiddle.net/audetwebdesign/h34pL/
Maybe display: inline-block; Or display: inline; is what you need?
Why not try:
text-decoration:underline
?
EDIT
Just make a span around "OPPORTUNITÉS" with the underline.
<h2>Horizon 2020, nouvelles <span class="underline">opportunités</span> </h2>
.underline {
text-decoration:underline
}
Can try "text-underline-position" property instead of table-cell and border. Make it simple!
text-decoration: underline;
text-underline-position: under;
All you can do is put your h2 element text into span like this:
<h2><span>Horizon 2020, nouvelles opportunités</span></h2>
and in css remove border-bottom from .zone_33 h2 {} and put it like this:
.zone_33 h2 span{ border-bottom: 1px solid grey;}
by this border-bottom will come under full text.
Try this, (I think it will help you)
.heading {
position: relative;
color: $gray-light;
font-weight: 700;
bottom: 5px;
padding-bottom: 5px;
display:inline-block;
}
.heading::after {
position: absolute;
display:inline-block;
border: 1px solid $brand-primary !important;
bottom: -1px;
content: "";
height: 2px;
left: 0;
width: 100%;
}
You could put a border-bottom and change the width of your h2 so that the border length matches your h2 length. Adjust the width to the width of your h2, taking into consideration it's font-size. Then add a padding-bottom to your h2 and set it to your liking.
<h2>Cats</h2>
h2{
border-bottom: 5px solid black;
font-size: 16px;
padding-bottom: 5px;
width: 64px;
}
So I've got a h3
<h3>someText<h3>
The h3 has a height and a background image
h3
{
height:30px;
background-image:url();
background-reat: repeat-x;
}
now I want the text in the h3 to align to the middle of the element but it always floats the text to the top:
How I can achieve this?
Set the line-height to match the height:
h3
{
height:30px;
line-height:30px;
background-image:url();
background-reat: repeat-x;
}
If your <h3> element contains multiple lines of text, setting the line-height property won't work as suggested by the other answers.
If you do not have to support lteIE7, you can use display: table-cell combined with the vertical-align property:
h3 {
background-color: whitesmoke;
height: 100px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
You can simply add line-height:30px;
Use line-height to solve this
h3 {
height:30px;
background-image:url();
background-reat: repeat-x;
line-height: 30px;
}
h3 {
...
/* those 2 lines are what you need */
line-height:30px;
vertical-align:middle;
...
}
First i will show you the problem, wich only happens on IE6/IE7
As you can see, when the length of the innerHtml it's not long, no problem; but when it's 'longer' the sprite set as bg image gets repeated and the text jumps to the next line...
now, the CSS
.contButton {
list-style: none;
float: right;
}
.contButton p {
float: left;
display: inline; /*For ignore double margin in IE6*/
margin: 0 0 0 10px !important;
}
.contButton a {
text-decoration: none !important;
float: left;
color: #FFF;
cursor: pointer;
font-size: 14px !important;
line-height: 21px;
font-weight: bold !important;
}
.contButton span {
margin: 0px 10px 0 -10px;
padding: 3px 8px 5px 18px;
position: relative; /*To fix IE6 problem (not displaying)*/
float:left;
}
/*ESTADO NORMAL AZUL*/
.contButton p a {
background: url(../nImg/spriteBotones.png) no-repeat right -214px;
_background: url(../nImg/spriteBotones.gif) no-repeat right -214px;
color: #FFF;
}
.contButton p a span {
background: url(../nImg/spriteBotones.png) no-repeat left -214px;
_background: url(../nImg/spriteBotones.gif) no-repeat left -214px;
}
And the Html:
<div class="">
....
<div class="contButton mt10">
<p><a tabindex="" title="acceder" href="#"><span>ver disponibilidad</span></a></p>
</div>
...
</div>
This is the bg Image.
![the sprite][2]
Tried with:
<!--[if IE lte 7]>
<style type="text/css">
/*
.contNombrePrecioHtl .contButton p a{ height:20px; }
.contNombrePrecioHtl .contButton p a span{ height:20px; width:auto; } */
</style>
<![endif]-->
But that didn't solve the problem...
PS: class="mt10" it's only a margin-top:10px;
Any idea how to solve this for the glorious IE6/7?
Try adding white-space: nowrap to .contButton.
change this:
.contButton span {
margin: 0px 10px 0 -10px;
padding: 3px 8px 5px 18px;
position: relative; /*To fix IE6 problem (not displaying)*/
float:left;
white-space: nowrap;
}
I don't think it is a problem with either IE versions, it's probably just the newer browsers being less strict about this particular thing. I haven't tested anything, but "display:inline-block" has helped me sometimes. Still it doesn't seem like the most effective solution. The width seems to be limiting here, you shouldn't give the thing a fixed width if you don't want the text to "jump" into a second line...
can you try to add overflow: hidden to each parent of element with float: left? in this case you will have to add it to each div, p and a. I am not sure whether your actual code is optimal.
Moreover, float: left; and display: inline together make no sense. This might be the reason of the strange behaviour. Delete display: inline (remember about adding overflow: hidden to its parent) and it should work.
Haven't tested though.
UPDATE:
apparently as the author of the question mentions float:left + display: inline fixes IE6 double margin bug for floating elements.
defining dimensions for elements like p oder span is always somewhere between tricky and impossible, because they are inline elements. I'd recommend modifying the surrounding block element div.contButton.
In addition to height you should set overflow to hidden:
.contButton {
height:20px;
width:219px;
overflow: hidden;
}