I'm working on my site and i want there to be an horizontal line by the right side of the page headers. Currently this is the code for my header, stripped css.
#wrapper #content-holder #main-content #newhead {
margin-top: 0px;
margin-right: -0x;
margin-bottom: 0px;
margin-left: 0px;
font-family: 'Rokkitt', 'Lucida Grande', Helvetica, Arial, sans-serif;
font-size: 40px;
color: #333;
text-align: left;
font-style: normal;
font-variant: normal;
font-weight: 600;
line-height: normal;
font-size-adjust: none;
font-stretch: normal;
letter-spacing: -2px;
/*text-transform: uppercase;
border-bottom:1px solid #15A2FF;*/
}
Alongside:
<div id="newhead"><?php the_title(); ?></div>
But for some reason i cant get the lines to show by the side of the header text.
Please help. http://jsbin.com/ILOlivI/1/edit
I think I would use a background-image in the header row that is overwritten by a background-color of the text. Something like this:
<div id="newHead"><div>the header text</div></span>
#newHead {
background: white url(http://tidesonline.nos.noaa.gov/images/black_line.jpg) center left repeat-x;
}
#newHead div {
background-color: white;
display: inline-block;
padding-right: 10px;
}
Here's a jsfiddle example: http://jsfiddle.net/mVqY6/
This will only work if the text is not too long and if the text is positioned over the background image. In that case you'll need to do some tweaking.
If you are trying to put in a horizontal line level with the mid-line of the text, border-bottom is not really going to work is it?
Off the top of my head I would be using a single pixel .gif image stretched to 100% of the remaining space and aligned to the middle of the text... or if you want pixel perfect alignment to a specific text size, use a 1px wide .gif that has your line in it, plus x number of transparent pixels below.
You could introduce an SVG line, or float a DIV beside your text that is half height, with a border top or bottom. The DIV solution would probably make the most sense if you want to stay in pure CSS/HTML.
Related
My link wraps to the second line when it's to long to fit. The problem is that it's not vertically aligned with the first word. How can I do that?
color: #353748;
font-family: Helvetica,Arial,sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
padding: 10px;
text-indent: 10px;
text-decoration: none;
How it looks like.
It may be fault of the indentation and you may be able to fix it by getting rid of text-indent and putting some horizontal margin if the text is too wide.
How to align the text within an h1 box to the bottom of it.
<h1 class="woocommerce-products-header__title page-title">All</h1>
Here's the current css:
h1.woocommerce-products-header__title, h1.entry-title {
font-family: 'Noe Display Bold', Times, serif;
text-transform: uppercase;
font-size: 24px;
letter-spacing: 3px;
border-bottom: 1px solid #000;
padding-bottom: 7px;
line-height: 1;
}
h1.entry-title {
text-transform: none;
}
I am inspecting using Chrome Version 81.0.4044.92 on Ubuntu.
Looks like you are seeing the line height. So your fix might be: line-height: 1.
But when your H1 will wrap long texts this will result in unreadable text.
(I assume you checked the bottom padding)
I'm trying to get lines to surround an h1 but I'm having problems aligning the text with the surrounding lines. I've used embedded before / after attributes but I couldn't get them to work in Gmail so I opted of an inline attribute using borders on the h1. Currently the text "January 2018" is aligning below the surrounding lines. See code below.
h1 {
text-align: center;
color: #ffe800;
font-family: proxima-nova, sans-serif;
font-size: 22px;
font-weight: bold;
text-transform: uppercase;
}
<h1 style="border-left: 150px solid #ffffff; border-right: 150px solid #ffffff; height: 3px; display: block;">January 2018</h1>
Thanks!
I think you need to change your display property from display:block to display:inline
Is it possible to edit the height of the background color in my span?
HTML
<span class="highlight">Some highlighted text</span>
CSS
.highlight{
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 1.5em;
background-color: #4db6ac;
line-height: 2em;
}
What I want to do is for the highlight to be 1.8em. I'm not sure how to implement this without it being too tedious (ie. lots of divs ).
If anyone is looking for an answer as to how to expand the background color of a <span> elements text to be taller than the text itself, but still want the <span> to be inline, then none of these other solutions will work, since the background color is not affected by the line-height or height of a span. It's only affected by the font-size and padding. Here would be a proper solution for that case:
body {
font-size: 1em;
line-height: 1.5em;
}
span.highlight {
background: yellow;
padding: 0.25em 0; /* ('line-height' - 'font-size') / 2 */
}
span.no-padding {
padding: initial;
}
<p style="width:400px">
Here is a bunch of text that will have some highlighted text within it.
<span class="highlight">
Here is some highlighted text that will span multiple lines and will have a full height background color.
</span>
</p>
<p style="width:400px">
Here is also some highlight text without the padding.
<span class="highlight no-padding">
Here is some highlighted text without a full height background, regardless of having the same 'line-height'
</span>
</p>
You can use a vertical linear-gradient with transparent top and bottom color (I've used red in the example).
The height of the element is 2em because of the line-height, so 1.8em is 90%. Create a gradient with two transparent strips (red in the demo) of height 5% each. The rest of the 90% will be the highlight color.
.highlight {
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 1.5em;
background: linear-gradient(to bottom, red 5%, #4db6ac 5%, #4db6ac 95%, red 95%);
line-height: 2em;
}
<span class="highlight">Some highlighted text</span>
By setting display property to inline-block your background size will become equal to line height without adding any div. Hope this works for you!
.highlight{
display:inline-block;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 1.5em;
background-color: #4db6ac;
line-height: 2em;
}
Add display property as inline-block, your background size will become equal to line height without adding any div. this will works for you!
.highlight{
display:inline-block;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 1.5em;
background-color: #4db6ac;
line-height: 2em;
}
When the browser window is shrunk the site title goes to the bottom of the navigation window instead of staying centered in it.
Question: Does anybody know how I can have the site title remain centered in my navigation bar until the browser window is small enough that it goes above the list items as I want it to?
My code is here: http://jsfiddle.net/MyersAN/oupkw4uv/
The HTML code for the site title is:
<span>Hyperdog Productions</span>
Thanks!
I went into the fiddle and changed the styles for .logo to:
.logo {
font-family: "PT-Sans", "Calibri Light", sans-serif;
font-size: 24px;
letter-spacing: 10px;
text-align: center;
text-decoration: none;
text-shadow: 8px 8px 8px #000000;
text-transform: uppercase;
color: #AF7817;
vertical-align: bottom;
}
I got rid of the position: absolute; stuff and added vertical-align: bottom;