I need to create the above HTML.
It's a h3 with a blue background and to the right is an SVG for a tick.
I need to have both elements sitting on the same line, and the SVG embedded within the h3.
This looks so easy, but I can't figure out how to do this.
What is the best way to achieve the above?
<h3 style="background-color:blue;">About You
<img src="image.png" style="float:right;display:block;">
</h3>
Simply create a <h3> with a image in it and apply padding to <h3> for top and bottom space.
h3{
font-family:arial;
font-size:18px;
color:#fff;
background:blue;
margin:0;
padding:5px 10px;
}
h3 img{
float:right;
}
<h3>About Us <img src="tick.png"></h3>
As the others already answered what CSS to use, I just want to promote an additional approach:
Assuming you have multiple headlines with the styled tick, it makes sense not always have to add the whole <img /> tag with all its properties everytime.
So it would make sense to just add a class to your <h3> like so:
HTML
<h3 class="blue-bg tick">About You</h3>
CSS
h3.blue-bg {
background: blue;
/* and what else you need */
}
h3.tick:after {
content: '';
background-image: url("/path/to/your/image-tick.svg");
/* you need to define the dimensions: */
background-size: 18px 18px;
width: 18px; height: 18px;
/* and what else you need */
}
So you can just add your defined class to every element instead of a huge junk of HTML.
Complete Snippet to try out and fiddle with:
h3.blue-bg {
background: #21abe2;
/* and what else you need */
font-family: helvetica, arial;
font-size: 18px;
color: #fff;
margin: 0;
padding: 5px 10px;
}
h3.blue-bg.dark {
background: blue;
font-style: italic;
}
h3.tick:after {
content: '';
background: transparent url("https://upload.wikimedia.org/wikipedia/commons/2/27/White_check.svg") no-repeat center;
background-size: 18px 18px;
/* and what else you need */
display: block;
float: right;
width: 18px;
height: 18px;
}
<h3 class="blue-bg tick">About You</h3>
<br/>
<h3 class="blue-bg tick">Another crazy Headline</h3>
<br/>
<h3 class="blue-bg dark tick">Even with other styles defined</h3>
Related
I created multi-line-padded text based on Matthew Pennell's solution (codepen by CSS Tricks). In Chrome all looks fine, but in Firefox height of span elements bigger than height of their ancestor. If I adjust vertical padding for Firefox, in Chrome will be same problem, and vice versa.
Why it happens? What the real technical reasons of this problem?
HTML Code:
<div class="padded-multiline">
<h1>
<strong>How do I add padding to subsequent lines of an inline text element?</strong>
</h1>
</div>
CSS Code:
:root {
font-family: Arial, sans-serif;
font-size: 20px;
}
.padded-multiline {
line-height: 1.3;
padding: 2px 0;
border-left: 20px solid #c0c;
width: 400px;
margin: 20px auto;
}
.padded-multiline h1 {
background-color: #c0c;
padding: 4px 0;
color: #fff;
display: inline;
margin: 0;
}
.padded-multiline h1 strong {
position: relative;
left: -10px;
}
Setting a line-height: 1; on strong will fix the problem also read my comment.
Chrome and Firefox seems to use different text layout system.
In Chrome it will floor the line-height attribute and Firefox seems to use the correct one.
To achieve the same effect for title, just use only the outline.
H1 does not need strong.
.padded-multiline {
line-height: 1.3;
padding: 2px 0;
width: 400px;
margin: 20px auto;
}
.padded-multiline h1 {
background-color: #c0c;
padding:1px;
color: #fff;
display: inline;
outline: 10px solid #c0c;
margin: 0;
font-size:16px;
}
<div class="padded-multiline">
<h1>How do I add padding to subsequent lines of an inline text element?</h1>
</div>
Here is codepen: http://codepen.io/anon/pen/vgRvjM
If you need exactly visual (that means less purple space from top and bottom, you can use for example border from after and before):
.padded-multiline:before{
content:'';
display:block;
border:5px solid #fff;
position:relative;
left:-10px;
top:-3px;
}
.padded-multiline:after{
content:'';
display:block;
border:5px solid #fff;
position:relative;
left:-10px;
bottom:-3px;
}
Codepen for this solution: http://codepen.io/anon/pen/QdmzxK
Unfortunately, there isn't a full and clean crossbrowser workaround. Because different UAs render text different, height of each textline may be taller a bit (or vice verca). So, I create a solution based on SCSS calculations of required box' sizes, and hide artefacts via overflow property.
Here is my solution, if you meet the same problem: http://codepen.io/ifiri/pen/ygEeeL
HTML:
<p class="multiline-text">
<span class="multiline-text__wrapper multiline-text__wrapper--outer">
<span class="multiline-text__wrapper multiline-text__wrapper--left">
<span class="multiline-text__wrapper multiline-text__wrapper--right">Multiline Padded text, which looks great on all browsers. No artefacts, no hacks, all clear and flexy, all alignment support. Change SCSS variables for see how it works.</span>
</span>
</span>
</p>
SCSS:
/*
Variables
*/
$base-line-height: 1.75;
$base-font-size: 1.25em;
$multiline-padding-base: ($base-line-height / 2) * 1em;
$multiline-padding-horizontal: $multiline-padding-base;
$multiline-padding-vertical: $multiline-padding-base - (1em / 2);
$multiline-bg-color: #a5555a;
$multiline-font-color: #fff;
/*
= Snippet Styles
This code is required
*/
.multiline-text {
color: $multiline-font-color;
padding: 0px $multiline-padding-horizontal;
// hide line-height artefacts
overflow: hidden;
position: relative;
}
.multiline-text__wrapper {
background-color: $multiline-bg-color;
padding: $multiline-padding-vertical 0px;
}
.multiline-text__wrapper--outer {
// Inner padding between text lines
line-height: $base-line-height;
}
.multiline-text__wrapper--left {
position: relative;
left: -($multiline-padding-horizontal);
}
.multiline-text__wrapper--right {
position: relative;
right: -($multiline-padding-horizontal / 2);
}
This container stubbornly refuses to center. Demo: http://codepen.io/Diego7/pen/KzXgZN
I've tried just about every centering code I can find on the web, to no avail.
Removing width: 90%; from the css aligns the container to the left, even though margin: 0 auto; is telling it to center.
Sorry if this question isn't up to StackOverflow's 'standards', but codingforums.com are down at the moment :(
Thanks heaps!
HTML
<div class="container">
<article>
<header>
<img src="https://softwarereviews.files.wordpress.com/2016/04/bg-header-no-logo.png" width="972px"><br />
<h2>Information</h2>
</header>
<p>There's currently is no information available. Sorry.</p>
<footer>
© 2016
</footer>
</article>
</div>
CSS
##import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: 'Open Sans', sans-serif;
background: #fff;
}
.container {
list-style:none;
margin:0 auto;
width:90%;
padding-top: 20px;
background: #fff;
border-radius: 6px;
box-sizing: container-box;
}
article header h2 {
color: #282828;
font-size: 1.2em;
font-weight: normal;
display:inline;
line-height: 1.3;
}
article p {
font-size: 1em;
display:inline;
line-height: 1.5em;
color: #282828;
max-width: 972px;
}
article footer {
font-size: .9em;
display:inline;
color: #999;
}
a {
color: #2790ae;
text-decoration: none;
outline: none;
}
a:hover {
color: #0f6780;
}
Your .container is already centered: if you change background to red you will see it. And, if you add text-align property its content will be centered too.
.container {
list-style:none;
margin:0 auto;
width:90%;
padding-top: 20px;
border-radius: 6px;
box-sizing: container-box;
text-align:center;
background: red;
}
If you make the width a bit narrower (like 70%), you see that it IS centered.
by the way: " list-style:none;" has no effect whatsoever, and "box-sizing: container-box;" should be "box-sizing: content-box;"
Looks like you're centering the <div class="container">, but it doesn't look like it, because you're looking at the image.
If you want the image to take up the entire <div> element (so that any centering takes effect on both), try something like the following, instead of using an <img> element:
div.container {
background-image: url(https://softwarereviews.files.wordpress.com/2016/04/bg-header-no-logo.png);
}
There are other properties you can use to fiddle with precisely how the image is displayed. You can find more info here.
If you are using container after float tag. It can create problem sometimes. So to avoiding this user <div class="clear"></div>. Also clear class properties would be:
.clear{
clear:both;
margin:0px;
padding:0px;
height:0px;
font-size:0px;
line-height:0px;
float:none;
}
Hope it will be helpful..
Right now my header contains two p-tags with different styles:
<p style="color:#FFF; font-size:34px; margin-bottom:10px;">First half</p>
<p style="color:#FFF; font-size:88px;">Second half</p>
Is it possible to convert this into one h1-tag? Or can I have two h1 after each other? The main purpose is that it should work well with seo.
SEO-wise - each web page should contain one H1 tag.
A possible solution for what I believe you're trying to achieve is adding span tags in your H1 enabling you to style each part of your H1 differently:
HTML:
<h1>
<span class="smallerFont">First half</span>
<span class="bigFont">Second half</span>
</h1>
CSS:
h1 {
color: #fff;
}
.smallerFont {
font-size: 34px;
margin-bottom: 10px;
}
.bigFont {
font-size: 88px;
}
1) You should move your styling to a stylesheet.
2) You can easily have several styles in a single h1 ... like this:
HTML:
<h1>First <span class='A'>Second</span></h1>
CSS:
h1 { color:#F00; }
.A { color:#0F0; }
you can use
<h1>
<span >First half</span>
<span class='otherStyle' >Second half</span>
</h1>
Css style:
h1{
color :red;
}
h1> span{ //all the span elements within h1 is applied this style
color : blue;
font-size:34px;
margin-bottom:10px;
}
.otherStyle{
color:yellow;
font-size:88px;
}
Kinda a non-typical way to do this would be to use a combination of ::first-line and white-space: pre-line. This combo works pretty well since white=space: pre-line allows you to determine exactly where the first line ends. Of course, like the other answers, this method keeps you at just one h1 tag—ideal for SEO purposes.
A quick example on how this works:
h1 {
white-space: pre-line;
color: #fff;
font-size: 88px;
}
h1::first-line {
font-size: 34px;
}
body {
background: black;
}
<h1>First half
Second half
</h1>
That HTML looks a little weird. That's because we're forcing a newline with white-space: pre-line. It preserves any line breaks in the code (except, apparently, the last one). This makes new lines important, as demonstrated below.
h1 {
white-space: pre-line;
border: 1px black solid;
}
<h1>First half
Second half</h1>
<h1>
First half
Second half
</h1>
Still, it makes our first line end wherever we want it to, allowing us to target it with the ::first-line pseudo-element. Unfortunately, the styles supported by the ::first-line pseudo-element are fairly limited, but you can still do quite a bit. Sadly, this makes your margin-bottom hard to replicate. My closest attempt came from using line-height, which worked, but left a larger gap between the h1 and the next element. Still, it could be fixed with a little bit of negative margins, but then you could potentially run into other issues.
Though it's probably not the best way to go about doing this, it is a fun and interesting approach to solving the problem.
h1 {
white-space: pre-line;
color: #fff;
font-size: 88px;
line-height: 120px;
}
h1::first-line {
font-size: 34px;
line-height: normal;
}
/* Formatting styles */
* {
margin: 0;
padding: 0;
}
body {
background: black;
padding-top: 10%;
display: flex;
justify-content: center;
align-items: flex-start;
}
h1,
div {
max-width: 475px;
border: 1px white solid;
flex: 1;
/* Makes h1 the same font-weight
of p for better comparison */
font-weight: normal;
}
<h1>First half
Second half
</h1>
<div>
<p style="color:#FFF; font-size:34px; margin-bottom:10px;">First half</p>
<p style="color:#FFF; font-size:88px;">Second half</p>
</div>
I have the task of using CSS to create a stylized text box that looks like this:
I've been the server developer for many sites and occasionally do jump in to CSS, and usually figure things out in a reasonably clean way. However, I'm really stuck with this one - it's been an hours-long drag slowly working my way through things, to begin to get this going.
I have not yet begun the colorizing or borders. For now, I'm stuck trying to position the first line of text vertically. I would rather not force the height or width of any of the lines of text, as this seems to me to risk breaking if text/size is slightly changed.
Instead, I'd rather use semantics such as centering and vertical-align: top; (etc) (at least partially).
The green colorization is optional for this question. I'm much more concerned about the positioning of the text. Also, please don't be concerned about the choice of font (I'll hopefully be able to figure that out myself) - but font SIZE (and bolding) is important.
The current state of my attempted CSS is shown below - which doesn't work. My current CSS (below) leaves the image on the page looking like this:
(The blue colorization is just Chrome Web Developer highlighting, which I've provided to indicate the size of the div that includes the text of the first line. The actual background color is white.)
In the above image, I have not begun worrying about the colorization or borders. The current status of the above image is that I'm just trying to get the text "CLICK HERE for a" to appear at the TOP of its div - as noted, WITHOUT setting the height or width of the div to "collapse" onto the text, if possible.
My current trouble positioning the "CLICK HERE for a" text vertically is just one issue I've been dealing with. I would like to have a complete, working sample of the text and text positioning for this image, done "the right way" (or at least done in not a bad way). Perhaps the right way really is to set the width and height of the click-here-for-a div (see CSS below) to be nearly equal to the text dimensions, in order to force its absolute positioning (but as noted, I'd rather not unless answers here correct me, by telling me that this is a good way to do it).
Here is the HTML / CSS for the above (incorrect) image:
HTML:
<div class="smooth-click-region">
<div class="click-here-for-a">
CLICK HERE for a
</div>
<div class="intro-offer-on-home-delivery">
<div class="intro-offer">Special Introductory Offer</div>
<div class="on-home-delivery">on Home Delivery</div>
</div>
<div class="discount-description">2 weeks # 30% off - as low as $78/week</div>
</div>
CSS:
.intro-offer-smooth-click-region {
position: relative;
display: inline-block;
overflow: hidden;
width: 258px;
height: 61px;
}
.click-here-for-a {
position: absolute;
display: block;
left: 0;
right: 0;
top: 0;
vertical-align: top;
font-size: 8pt;
}
.intro-offer-on-home-delivery {
font-size: 9pt;
text-align: center;
}
.intro-offer {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
.on-home-delivery {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
.discount-description {
position: absolute;
font-size: 9pt;
height: 12px;
}
What is the right way to use CSS to create the image above - at least in terms of text formatting and positioning?
Posting as an answer at your request. It helps to add span tags around single lines of text that you want to style independently.
JSFiddle Example
HTML:
<div class="smooth-click-region">
<div class="click-here-for-a">
<span>CLICK HERE</span> for a
</div>
<div class="intro-offer-on-home-delivery">
<div class="intro-offer">Special Introductory Offer</div>
<div class="on-home-delivery">on Home Delivery</div>
</div>
<div class="discount-description">2 weeks # 30% off - as low as $78/week</div>
</div>
CSS:
.smooth-click-region {
display: inline-block;
overflow: hidden;
width: 258px;
height: 61px;
background: #cebd44;
border: inset 1px dotted;
border-style: double;
}
.click-here-for-a span {
font-weight: bold;
}
.click-here-for-a {
display: block;
text-align: center;
vertical-align: top;
font-size: 8pt;
}
.intro-offer-on-home-delivery {
font-size: 9pt;
text-align: center;
font-weight: bold;
}
.intro-offer {
margin-left: auto;
margin-right: auto;
}
.on-home-delivery {
margin-left: auto;
margin-right: auto;
}
.discount-description {
font-size: 9pt;
height: 12px;
text-align: center;
}
Here you are, as simple as it gets http://jsfiddle.net/1dmhLm9c/
.smooth-click-region{
text-align: center;
width: 300px;
background: green;
padding: 10px;
}
p, h2{
margin: 0px;
}
You can style it as you want :)
You can find some site with a similar boxes that works well and inspect it with firebug. That will show you the html layout.. You can get some good ideas for how you want to create your own.
Very simple.
Demo http://jsfiddle.net/7xtf1f8m/
CSS:
.smooth-click-region {
display: inline-block;
border: 2px solid #aa6;
padding: 2px;
background-color: #cc0;
box-sizing: border-box;
text-align: center;
font-family: Arial;
}
.smooth-click-region span {
font-weight: 700;
}
.inner {
padding: 0.3em 3em;
background-color: #aa6;
}
.click-here-for-a {
font-size: 0.8em;
}
.intro-offer-on-home-delivery {
font-weight: 700;
}
.discount-description {
font-size: 0.7em;
}
HTML:
<div class="smooth-click-region">
<div class="inner">
<div class="click-here-for-a"><span>CLICK HERE</span> for a</div>
<div class="intro-offer-on-home-delivery">
Special Introductory Offer<br/>
on Home Delivery
</div>
<div class="discount-description">2 weeks # 30% off - as low as $78/week</div>
</div>
</div>
You can create the multiple borders by using the CSS3 box-shadow property. HTML tags have by default some CSS attributes so you do not have to define them in your CSS. For example the tag <div> is a block level element and by default has display: block; (you defined it for div.click-here-for-a).
You do not have to write too much unnecessary css.
This is my example for you:
.smooth-click-region {
background:#acb014;
width:260px;
padding:5px;
position:relative;
box-shadow: 0 0 0 5px #FFF,0 0 0 10px #acb014;
text-align:center;
}
<div class="smooth-click-region">
<div class="click-here-for-a">
CLICK HERE for a
</div>
<div class="intro-offer-on-home-delivery">
<div class="intro-offer"><strong>Special Introductory Offer</strong></div>
<div class="on-home-delivery"><strong>on Home Delivery</strong></div>
</div>
<div class="discount-description">2 weeks # 30% off - as low as $78/week</div>
</div>
I did not changed your html code but I advise you to use other HTML tags that have their default css. Use h1, h2, h3 for headlines and p for paragraphs, etc.
I have used the following tutorial to make a text block over an image: http://css-tricks.com/text-blocks-over-image/. I found it really easy actually, and quite useful, but there is one thing I could never work with, and these are span tags.
The issue I'm having is that I want to format the second part of the text in the span to have a lower font size and have a left padding. I've tried including a second span and defining it in the css file, but it doesn't really do anything, just stays where it is. I also tried extending the block until the end of the picture, but a width of 1000px on each wouldn't work.
Here's some pictures, as they speak a thousand words...
How it looks on mine...
And how I want it to look...
And here's some code...
<div class="img_destination">
<img src="<?php echo SITE_URL?>/lib/skins/gsm/images/featured_destination/gcfv.png" alt="" />
<h2 id="featured_destination"><span>>> Explore Fuerteventura<span class='spacer'></span><span class='spacer'></span>The island of natural beauty</span></h2>
</div>
CSS...
/* Featured Destination */
.img_destination {
position: relative;
width: 100%; /* for IE 6 */
}
h2#featured_destination {
position: absolute;
top: 355px;
left: 0;
width: 100%;
}
h2#featured_destination span {
color: white;
font: bold 28px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgba(00, 36, 63, 0.7);
padding: 10px;
}
h2#featured_destination span.spacer {
padding:0 5px;
background: none;
}
Here is what you posted:
<h2 id="featured_destination"><span>>> Explore Fuerteventura<span class='spacer'></span><span class='spacer'></span>The island of natural beauty</span></h2>
I would suggest a couple different things. Firstly, instead if using >> for those arrows, use the >>. Sometimes extra symbols get rendered incorrectly by the browser, so it is always safest to encode them when you want the display to be literal. Also, I would not use an empty span tag to create whitespace since it tends to clutter up the markup.
But your primary issue is that you need to change the way your span tags are nested to NOT include the ">>Explore Fuerteventura" inside any span tags so that the two sections of text are styled differently. I think your aims can be achieved by simply cleaning up your markup to something more like this:
<h2 id="featured_destination">>> Explore Fuerteventura <span class='spacer'> The island of natural beauty</span></h2>
Is this the effect you're after: jsFiddle example.
I changed the text div to:
<h2 id="featured_destination">
<span class="bold">>> Explore Fuerteventura</span><span class='spacer'></span><span class='spacer'></span>The island of natural beauty
</h2>
I wrapped the first chunk of text in its own span so you can style it with a bold font face while the rest of the text has a normal weight.
And this is the CSS I modified:
/* Featured Destination */
.img_destination {
position: relative;
width: 100%;
/* for IE 6 */
}
h2#featured_destination {
position: absolute;
top: 355px;
left: 0;
width: 100%;
background: rgba(00,36,63,0.7);
font: 28px/45px Helvetica, Sans-Serif;
color: #FFF;
letter-spacing: -1px;
}
h2#featured_destination span {
padding: 10px;
}
h2#featured_destination span.spacer {
padding: 0 5px;
background: none;
}
.bold {
font-weight: 700;
}
<div class="img_destination">
<img src="<?php echo SITE_URL?>/lib/skins/gsm/images/featured_destination/gcfv.png" alt="" />
<h2 id="featured_destination">
<span> > > Explore Fuerteventura
<span class="smaller">The island of natural beauty</span>
</span>
</h2>
</div>
and CSS:
h2 > span {
color: white;
font: bold 28px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgba(00, 36, 63, 0.7);
padding: 10px;
}
h2 span.smaller {
padding-left: 20px;
font-size: 10px;
}
Try that. Here is example: http://jsfiddle.net/8PLaB/ Is that what You are looking for?
Your spans .spacer doesn't work because they are empty and browser simply doesn't show them. I think that if You insert in them then they will do their job but it's not good solution in my opinion. Empty tags never are good solution.