I have this following html codes.
<div class="box extend">
<h1>CLOUD SERVICES FOR SMALL BUSINESS</h1>
<figure><img src="myimg.png" /></figure>
<p>
<strong>Hosted Exchange Server</strong>
<strong>Cloud Server Solutions</strong>
<strong>Backup Servicesd Server Solution</strong>
</p>
</div>
and the css of the above html (updated css)
.box p strong{
font-weight: 700;
font-size: 20px;
color: red;
padding: 0px;
margin: 0px;
background: blue;
}
now the problem is the strong element has spaces between each other as supposedly it should not (base on my css set up), please refer to the image below
Is there anyway I could get raid or remove that space gap between each others element? Any recommendations, suggestions and ideas, I would love to hear! thank you in advance.
It seems making them display block kills the thin line
http://jsfiddle.net/5qqLR/2/
.box p strong{
font-weight: 700;
font-size: 20px;
color: red;
padding: 0px;
margin: 0px;
background: blue;
display: block;
}
After further research setting the parent line-height to 1 will solve this issue
http://jsfiddle.net/5qqLR/3/
.box p {
line-height: 1;
}
Take a look at here http://www.sitepoint.com/forums/showthread.php?824112-space-below-inline-elements-inside-a-block-element
Add to strong HTML tag:
white-space: break-spaces;
Related
between these two p elements.
I checked the box model and there is no margin set.
Here it the fiddle and code -
https://jsfiddle.net/f3m2apgy/
<body>
<style>
#container{
display: inline-block;
width: 500px;
border: solid 1px;
text-align: center;
}
#si_but{
cursor: pointer;
padding: 14px 14px;
font-size: 14px;
border: solid 1px;
margin: 0px;
display: inline-block;
}
#su_but{
cursor: pointer;
padding: 14px 14px;
font-size: 14px;
border: solid 1px;
margin: 0px;
display: inline-block;
}
#hold_button{
display: inline-block;
border: solid 1px;
text-align: center;
margin: 0 auto;
padding: 0px;
}
</style>
<div id="container">
<divi id="hold_button">
<p id='si_but' class='blue_but radius_left medium_white'>SignIn</p>
<p id='su_but' class='orange_but radius_right medium_white'>SignUp</p>
</div>
</div>
</body>
You have newline after the first </p> and indenting spaces before the second <p>.
If you put <p> elements in a line, the space will disappear.
<div id="container">
<div id="hold_button">
<p id='si_but' class='blue_but radius_left medium_white'>SignIn</p><p id='su_but' class='orange_but radius_right medium_white'>SignUp</p>
</div>
</div>
And, <divi> should be typo of <div>.
If you put the <p> elements on a single line in your code, the gap is eliminated.
<p id='si_but' class='blue_but radius_left medium_white'>SignIn</p><p id='su_but' class='orange_but radius_right medium_white'>SignUp</p>
DEMO: https://jsfiddle.net/f3m2apgy/6/
It's because all inline-block elements have a space to the left if seperated by spaces in the HTML code. To fix it, you should change them to <ul> or <div> elements, or add a negative margin to one of them.
Adding margin-left: -5px; to #su_but would also fix this, although it is a little hacky.
The usual way to fix the whitespace problems coming up with display: inline-block; is to set the parent element's font-size to zero. Of course the consequence is that you will have to re-set the necessary font-size on the child elements - which you already do in your example, so
#hold_button { font-size: 0; }
fixes your problem already.
https://jsfiddle.net/f3m2apgy/7/
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.
I've got a span which goes over a number of lines and has a background colour. I need each of the lines to have a 10px padding at the end. The text will be dynamic so i need a css or js solution rather than just hacking it with nbsp tags (which is how I got the example pictured below)
The picture show the difference between what I have and what i want:
<h3><span class="heading">THE NEXT GENERATION OF CREATIVE TALENT</span><br/>
<span class="subhead">IT'S RIGHT HERE</span></h3>
h3 {
margin:0;
font-size: 42px;}
h3 .heading {
background-color: #000;
color: #00a3d0;}
h3 .subhead {
background-color: #00a3d0;
color: #000;}
I can't think of any way to do this with css, I was considering using javascript to find the beginning and end of each line and adding a non-breaking space.
Does anyone have any ideas of how to achieve this?
Cheers
I've tested this in IE8 (doesn't look too bad in IE7) and recent versions of Chrome, Firefox, Opera, Safari.
Live Demo
Screenshot from Chrome:
It got a bit silly and, to be honest, probably more complicated than it's worth - a JS based solution would definitely be easier to understand.
There are so many gotchas with this technique.
CSS:
#titleContainer {
width: 520px
}
h3 {
margin:0;
font-size: 42px;
font-weight: bold;
font-family: sans-serif
}
h3 .heading {
background-color: #000;
color: #00a3d0;
}
h3 .subhead {
background-color: #00a3d0;
color: #000;
}
div {
line-height: 1.1;
padding: 1px 0;
border-left: 30px solid #000;
display: inline-block;
}
h3 {
background-color: #000;
color: #fff;
display: inline;
margin: 0;
padding: 0
}
h3 .indent {
position: relative;
left: -15px;
}
h3 .subhead {
padding: 0 15px;
float: left;
margin: 3px 0 0 -29px;
outline: 1px solid #00a3d0;
line-height: 1.15
}
HTML:
<div id="titleContainer">
<h3><span class="indent">
<span class="heading">THE NEXT GENERATION OF CREATIVE TALENT</span><br /><span class="subhead">IT'S RIGHT HERE</span>
</span></h3>
</div>
<!--[if IE]><style>
h3 .subhead {
margin-left: -14px
}
</style><![endif]-->
box-shadow makes it easy!
box-shadow:0.5em 0 0 #000,-0.5em 0 0 #000;
-moz-box-shadow:0.5em 0 0 #000,-0.5em 0 0 #000;
-webkit-box-shadow:0.5em 0 0 #000,-0.5em 0 0 #000;
Here’s a solution that requires each word being wrapped in an additional SPAN element:
<h3><span class="heading"><span>THE</span> <span>NEXT</span> <span>GENERATION</span <span>OF</span> <span>CREATIVE</span> <span>TALENT</span></span><br/>
<span class="subhead"><span>IT'S</span> <span>RIGHT</span> <span>HERE</span></span></h3>
Then you can style the words individually like this:
h3 span {
display: inline-block;
}
h3 > span > span {
padding: 0 0.25em;
margin: 0 -0.25em 0 0;
}
h3 .heading span {
background-color: #000;
color: #00a3d0;
}
h3 .subhead span {
background-color: #00a3d0;
color: #000;
}
You could do something like this. Wrap it inside a <p> and set a border-left = to the padding left you'd like to set to the span. About right padding, I don't think there will be a solution without using JS. Btw, I'm still looking for other kinds of tricks
http://www.jsfiddle.net/steweb/cYZPK/
EDIT updated starting from your markup/css http://www.jsfiddle.net/steweb/cYZPK/1/
EDIT2 (using JS..mootools) http://www.jsfiddle.net/steweb/Nn9Px/ (just tested on firefox...need to be tested on the other browsers.. explanation asap :) )
why not just add padding-right:10px; to the container?
Even if is not 100% following your design concept, I think this is the only solution if you want to stick with CSS.
h3 span {
/* cross browser inline-block */
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
padding:0 10px;
}
The inline-block property will make your element expand based on it's content size, so it behaves like an inline element but also have the block property which lets you apply the padding.
Hope that helps
Here's a way to do it without the extra mark up - though it does require an image. http://codepen.io/DeptofJeffAyer/pen/FiyIb
I would highly recommend using Split Lines JS: https://github.com/jeremyharris/split_lines
The issue with tags is that it wraps "inline" meaning from start to finish. So if you have a fixed width and your span automatically goes onto a second line, that line of text will be wrapped with the first line and share the span. To get around this you need to span each line of text separately. For example:
<span>line one</span>
<span>line two</span>
This isn't an easy option if the text you wish to span separately is automatically generated from Wordpress or similar... To get around this use the JQuery script above.
~
Another way to get round it (although may not be ideal) is to simply add display:block; to you spans css class:
span { display: block; background-color: #333; color: #fff; }
This will span the entire block similar to a button.
Hope this helps.