I am having an issue that I hope someone will be able to help me out with.
I have and h2 element that i have given a width, so that long headlines break into two lines. I then want to add a border-bottom to the text, not the block element, and so i have wrapped the text inside the h2 element in a span that i apply the border to. Like this:
<h2><span>My headline that breaks into two lines</span><h2>
My css is like this:
h2 {
width: 455px;
height:170px;
text-align: center;
font-size: 67px;
line-height: 90px;
padding: 0;
margin: 0;
font-weight: normal;
}
h2 span {
border-bottom: 2px solid blue;
}
Everything about works fine, EXCEPT i can't get my border to get any closer to the text. No matter what values i put in line-height and padding, the border seems to be stuck about the 30px below the text. Does anyone have any clever thoughts as to what I can do? I feel like I have tried every combination possible.
Thank you very much in advance.
html :
<div class="demo">
<h2>
<span>My headline that breaks into two lines</span>
</h2>
</div>
css:
.demo {
width: 455px;
height:170px;
text-align: center;
}
h2 {
border-bottom: 1px solid red;
display : inline;
line-height: 90px;
padding: 0;
margin: 0;
font-weight: normal;
}
h2 > span {
font-size: 67px;
line-height: normal;
}
demo http://codepen.io/gauravsam/pen/PZQwNz
add padding-bottom:10px; demo
h2 {
width: 455px;
height:170px;
text-align: center;
font-size: 67px;
line-height: 90px;
padding: 0;
margin: 0;
font-weight: normal;
}
h2 span {
border-bottom: 2px solid blue;
padding-bottom:10px;/*add this*/
}
in my example you will see that by making line-height on the h2 relative, the span rests just under the descender (e.g. the letter y), is the border now closer to the baseline than you had it?
h2 {
text-align: left;
width: 400px;
font-size: 40px;
font-weight: normal;
margin: 0;
padding: 0;
line-height: inherit;
}
span {
border-bottom: 2px solid blue;
}
Related
Fiddle here: https://jsfiddle.net/sgbotsford/d52zyp0t/72/
Where does the extra first line indent come from in the <li> using => :before content?
Here's the problem. Circumstances beyond my control put paragraph tags inside list elements. When I use a :before, with a negative left, it works -- it sits out in the margin just like I want. But the text-indent is increased where I've used the :before. Where does this extra indent come from?
The desired behaviour is to have paragraphs and list items to be styled identically, except for the => floating off the left margin.
I'm sure I can eventually experiment enough to hack a solution, but right now I am trying to understand this behaviour in terms of the box model.
One answer suggested removing the text-indent tag from <p> This results in a flush <p> and a smaller indent on <li>
HTML
<html>
<head>
</head>
<body>
<div class=content>
<p>This is a paragraph. It has several sentences. It goes on and on and on and on. It has several sentences. It goes on and on and on and on. </p>
<ul class="c">
<li><p>This is a list element that is long enough to wrap, I think. But it needs to be longer to check justification. It looks a lot like a paragraph.</p></li>
<li><p>This is a list element that is long enough to wrap, I think. But it needs to be longer to check justification.</p></li>
</ul>
<ul class="b">
<li><p>This is a list element that is styled using ::before and outdenting the content. Where does the extra space come from? </p></li>
<li><p>This is a list element that is long enough to wrap, I think.</p></li>
</ul>
</div>
</body>
</html>
CSS
body {
text-align: justify;
hyphens: auto;
margin-left: 3rem;
}
.content {
width: 40rem;
background-color: yellow;
}
p {
width: 15rem;
margin: auto;
margin-top: 0.6rem;
background-color: lightgreen;
padding: 0;
font-style: normal;
font-size: 1.25rem;
line-height: 1.4rem;
text-indent: 1rem;
text-align: justify;
hyphens: auto;
word-break: break-word;
}
ul {
list-style-type: none;
margin: 1rem;
padding: 0;
}
ul.b li p::before {
content: "=>";
font-weight: bold;
position: relative;
left: -2.5rem;
}
Hi Can you please check it's really helpfull for you I just Remove p
tag text-indent and change ul.b li p::before left position Add
text-indent in ul.b li p element
body {
text-align: justify;
hyphens: auto;
margin-left: 3rem;
}
.content {
width: 40rem;
background-color: yellow;
}
p {
width: 15rem;
margin: auto;
margin-top: 0.6rem;
background-color: lightgreen;
padding: 0;
font-style: normal;
font-size: 1.25rem;
line-height: 1.4rem;
text-align: justify;
hyphens: auto;
word-break: break-word;
padding: 5px;
}
ul {
list-style-type: none;
margin: 1rem;
padding: 0;
}
ul.b li p::before {
content: "=>";
font-weight: bold;
position: relative;
left: -10px;
}
ul.b li p {
text-indent: -22px;
}
.bluetable {
background-color: #9FF;
border: 2px solid black;
}
td {
margin: 14rem;
border: 1px dashed green;
}
I am creating a link that looks like a button. One thing I am running into is if I have more than one word for the anchor the link/button text is going to the next line. It is fine if the anchor text goes to the next line, but the border then does not wrap around the entire thing. It looks as if the border breaks (not sure of the correct terminology).
See the image below for a reference: (Sorry image upload keeps failing)
Does anyone know how I can
.container {
width: 40%;
background: gray;
}
.mainLinkWrapC {
width: 80%;
margin: 50px auto;
display: block;
text-align: center;
}
.mainLink {
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: 1.4rem;
text-transform: uppercase;
padding: 15px 10px;
line-height: 1.4em;
color: #b82222;
border: 2px solid #b82222;
}
<div class="container">
<div class="mainLinkWrapC">
Hard Guarding Solutions
</div>
</div>
You just need to set display: block to your .mainLink
.container {
width: 40%;
background: gray;
}
.mainLinkWrapC {
width: 80%;
margin: 50px auto;
display: block;
text-align: center;
}
.mainLink {
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: 1.4rem;
text-transform: uppercase;
padding: 15px 10px;
line-height: 1.4em;
color: #b82222;
display: block;
border: 2px solid #b82222;
}
<div class="container">
<div class="mainLinkWrapC">
Hard Guarding Solutions
</div>
</div>
I am trying to make Matter in the HTML to be left align and Index to be center align, do I have to write another CSS class and apply to index or there is a way to manage this in the same page-title class
.page-title {
float: left;
width: 100%;
padding: 10px 10px 0;
line-height: normal;
border-bottom: 1px solid #b1b7ca;
margin-bottom: 15px;
margin-left: 10px;
}
<div class="page-title">Matter Index</div>
Well you can do it with a little trick like this:
Include :after and :before elements to use text-align:justify and separate the words like "three" columns.
Note:You need to add a blank space at the begin of your text
Use direction to get the second word aligned to the center
.page-title {
padding: 10px 10px 0;
line-height: normal;
border-bottom: 1px solid #b1b7ca;
margin-bottom: 15px;
margin-left: 10px;
text-align: justify;
direction:rtl;
}
.page-title:before,
.page-title:after {
content: " ";
display: inline-block;
}
.page-title:after {
width: 100%;
}
<div class="page-title"> Matter Index</div>
Yes you have to separate them. Below you will see that Matter is in separatae span and is floating left. Index is in parent Div and aligned center.
.page-title {
float: left;
text-align:center;
width: 100%;
padding: 10px 10px 0;
line-height: normal;
border-bottom: 1px solid #b1b7ca;
margin-bottom: 15px;
margin-left: 10px;
}
.page-title span {float:left;}
<div class="page-title"><span>Matter</span>Index</div>
I really need help on this: cracking me for 2nd day already. I have the following code:
* {
margin: 0;
padding: 0;
font: 16px Verdana, Arial, sans-serif;
color: #444;
line-height: 1.5rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-decoration: none;
}
.inlbtn {
width: 2rem;
height: 2rem;
display: table;
text-align: center;
font-weight: bold;
color: #666;
border: 1px solid #939393;
}
.plus {
font-size: 1.5rem;
font-weight: bold;
display: table-cell;
vertical-align: middle;
}
.plus:before {
content: "+";
}
<div class='inlbtn'><span class='plus'></span></div>
It basically has a div and span inside with a "+" symbol. The horizontal alignment seems fine, but the vertical is a little shifted down. How to make it perfectly centered vertically?
I played around with the code and it seems the code under * is the culprit, but why?
Here's fiddle http://jsfiddle.net/jk34josq/2/
You do everything right, I always use the same method. The problem is that this line
content: "+";
is a piece of text, so it automatically has top margin inside of the line-height preserved for the capital letters (and + symbol is not the one); the margin value could also be different depending on the font.
As a proof try the following:
content: "A";
This looks centered.
What you can do to avoid this behavior:
Negative margin / top property
Use image instead of text
Maybe play with reducing the line-height property but I have doubts about this method
I would use only a single HTML element, since there is no need for using an extra element nor a :before pseudo class:
<div class='inlbtn'>+</div>
Then I would use display: inline-block, instead of table.
As mentioned by Simon in his answer, the + character is smaller than A. But instead of using negative margins or paddings, I would alter the line-height:
.inlbtn {
width: 2rem;
height: 2rem;
font-size: 1.5rem;
line-height: 1.5rem;
display: inline-block;
text-align: center;
font-weight: bold;
color: #666;
border: 1px solid #939393;
}
Updated Fiddle
Try like this: Demo
.inlbtn {
width: 2rem;
height: 2rem;
display: block;
text-align: center;
font-weight: bold;
color: #666;
border: 1px solid #939393;
}
.plus {
font-size: 1.5rem;
font-weight: bold;
display: inline-block;
vertical-align: middle !important;
}
.plus:before {
content:"+";
display: inline-block;
}
I have this div wedged between two bars(other divs), though when I add text into the equation, the div gets repositioned down. It works as intended without the p element and its children. Here's a fiddle to demonstrate the issue: http://jsfiddle.net/57uSQ/
this is the HTML that is causing the problem:
<p>
<span class="name">DOLCE & GABBANA</span>
</br>
<span class="title">THE ONE</span>
</p>
And the correlating CSS:
.videoDesc {
display: inline-block;
border: 1px solid #000000;
border-right: 0px;
height: 200px;
width: 500px;
}
.videoDesc p {
display: inline-block;
margin: 0;
padding: 0;
}
.videoDesc .name {
display: inline-block;
padding: 0px;
}
.videoDesc .title {
display: inline-block;
padding: 0px;
}
.title {
font-family: Lekton;
font-size: 1.25em;
}
.name {
font-family: Oswald;
font-weight: lighter;
font-size: 2.5em;
letter-spacing: 10px;
padding-left: 5px;
}
You need to add vertical-align:top to .videoDesc:
.videoDesc {
display: inline-block;
border: 1px solid #000000;
border-right: 0px;
height: 200px;
width: 500px;
vertical-align:top;
}
jsFiddle example
The default vertical alignment is baseline, which is causing the behavior you see.