I've been working on this for a while, and just can't seem to figure it out.
I have a series of position: relative spans which are wrapped around some text and a position: absolute span set to right: 0;. I would expect the second span to be stuck to the right of the first span, even if the first span is broken onto two lines — but alas, I've only been able to get this to work in Safari.
To see an example, take a look here: http://workingonit.andrewleclair.com/slashtest/.
I found this page: http://www.brunildo.org/test/inline-cb.html which suggests that this technique, although technically correct, is not well-supported. What I'd like is for each / to be stuck to the end of each li even if it wraps to multiple lines..
Any ideas? Thanks.
It looks your header is too small. Try to remove the width. If i do so it looks fine in FF 3.6.
#header {
float: left;
margin-right: 48px;
margin-top: 26px;
/*width: 334px;*/
}
Another way is to add white-space: nowrap to your li.
li {
color: #888888;
list-style-type: none;
white-space: nowrap;
}
Edit:
Try this instead...
.slash {
color: #BBBBBB;
padding: 0 2px 0 19px;
}
.header {
background-color: yellow;
border: 1px solid red;
}
Related
I am using bulma for a css framework and i ran into an interesting learning experience. I am trying to align the nav buttons to the bottom of the red field. However, as you can see they have shifted out of alignment. I have tried to apply an inline css style to them, however that does not correct the issue.
Can anyone point me in the right directory, it would be greatly appreciated.
https://codepen.io/robot43298/pen/WNGENNL
.navbar-end {
.button{
color: white;
font-size: 18px;
border: 2px dashed white;
background-color: red;
}
.dropdown-trigger{
margin-top: 15%;
display: inline;
vertical-align: bottom;
}
& li{
font-size: 16px;
}
}
Try this,
Remove this margin
.navbar-end .dropdown-trigger {
margin-top: 15%; /* Remove this margin */
display: inline;
vertical-align: bottom;
}
and add some padding here as per your need
.dropdown{
padding-top: 20px;
}
This should do the trick;
I tried looking your code in console, I added one line and removed one.
and it seems to work as per you expectation.
Do let me know if this what you wanted.
I previously had horizontal lines on either side of my heading titles, however it has now stopped working and the line is displayed on top of the text, please help! The code I used for this and worked absolutely fine is below;
h6.two span {
background: #fff;
padding: 0 5px;
position: relative;
z-index: 5;
font-size: 14px;
font-weight: 500;
}
h6.two+p {
border-top: solid 1px black;
padding-top: 12px;
margin-top: -12px;
}
Can see the problem here
Not entirely sure what changed for you, but the way I'd do it (with more specificity in regards to selectors, of course) would be:
h6 {
background: #fff;
display: inline-block;
position: relative;
z-index: 1;
}
That way, you can set a block with a solid background to always exist on top of the line.
The reason mine stopped working was because, I went to edit my home page in Visual mode and the span tags were automatically deleted.
Is it possible to add padding before line-break? As in, making from this to this .
Current CSS code:
span.highlight { background: #0058be; color: #FFF; padding: 2px 5px; }
I had to add an extra margin-left:0; to make the two lines start at the same point.
This can be done with pure CSS. Create a solid box-shadow to the left and right of the highlight in the same color (and use margin to correct the spacing). For your case:
span.highlight {
background: #0058be;
color: #FFF;
box-shadow:5px 0 0 #0058be, -5px 0 0 #0058be;
padding: 2px 0;
margin:0 5px;
}
It took some tryouts, but here it is: the single- and multi-line highlighter with additional padding.
HTML:
<h3>Welcome to guubo.com, Gajus Kuizinas</h3>
<p><span>So far you have joined: </span><em>Networks guubo.com</em><ins></ins></p>
CSS:
h3 {
padding-left: 5px;
}
p {
background: #0058be;
position: relative;
padding: 0 5px;
line-height: 23px;
text-align: justify;
z-index: 0;
}
p span {
background: #fff;
padding: 2px 0 2px 5px;
position: relative;
left: -5px;
}
p em {
background-color: #0058be;
color: #fff;
padding: 2px 5px;
}
ins {
position: absolute;
width: 100%;
line-height: 23px;
height: 23px;
right: -5px;
bottom: 0;
background: #fff;
z-index: -1;
}
The trick is to style the whole paragraph with a blue background, and only put white background on top of that at the beginning and the end. Doing so assures blue background elsewhere...;)
Two main disadvantages:
The highlighted text has to start at the first line (but does not necessarily have to flow into a second),
The paragraph has to be aligned with justification.
Tested in Opera 11, Chrome 11, IE7, IE8, IE9, FF4 and Safari 5 with all DTD's.
See edit history for the previous less successful attempts.
You can achieve this using just box shadow, with no messy padding or margins.
The trick is to use box-shadow's spread option, and the padding on wrapped inline elements behaves as you expect.
.highlight {
background: black;
color: white;
box-shadow: 0 0 0 5px black;
}
display: block will achieve part of what you want, but of course it will make the span a block element, and so you won't get the wrapping behaviour seen in your example.
Your screenshot holds the clue to what you need to try and do: you need to impose a margin to the left and right on your "normal" paragraph text, and then have the span disregard this (and include its padding), to achieve an "overhang" of your blue highlight when compared to the rest of your text. You can't do that with straight CSS on your span, because it covers two lines and obviously "left" and "right" only refer to the span, and not the individual pieces of text contained therein.
Straight CSS isn't the answer here. You might want to take a look at this question, which uses a jQuery filter to grab the first word in an entity, etc.:
jQuery first word selector
Maybe you can use this technique.
http://samcroft.co.uk/2011/jquery-plugin-for-inline-text-backgrounds/
The closest thing, if it really matters that much I'd say is to add display: inline-block;
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.
Problem
I am working on a project to theme a website, but I am not allowed to change the HTML or JavaScript. I can only update the CSS stylesheet and add/update images.
Requrements
I need to style a h3 tag to have an
underline/border after the content.
This h3 will be used multiple times
on the page, so the conent length can
vary
The solution needs to be
cross-browser (IE 6/7/8, FF 3, &
Safari)
Sample Code
<div class="a">
<div class="b"><!-- etc --></div>
<div class="c">
<h3>Sample Text To Have Line Afterwards</h3>
<ul><!-- etc --></ul>
<p class="d"><!-- etc --></p>
</div>
</div>
Sample Output
Sample Text to Have Line Afterwards ______________________________________
Another Example __________________________________________________________
And Yet Another Example __________________________________________________
Notes
I think #sample:after { content: "__________"; } option wouldn't work since that would only be the correct length for one of the tags
I tried a background-image, but if it gave me problems if I gave it one with a large width
Using text-indent didn't see to give me the effect I was looking for
I tried a combination of border-bottom and text-decoration: none, but that didn't seem to work either
Any ideas would be much appreciated!
This will work if class 'c' is always the parent of the h3...
.c {
position: relative;
margin-top: 25px;
border-top: 1px solid #000;
padding: 0px;
}
h3 {
font-size:20px;
margin-top: 0px;
position: absolute;
top: -18px;
background: #fff;
}
It lets the container have the border, then uses absolute positioning to move the h3 over it, and the background color lets it blot out the portion of c's border that it's covering.
try attaching a background image to class c of a repeating underline, then add a background color to the h3 to match the background of the container. I believe that you would have to float the h3 left in order to get the width to collapse. does that make sense?
.c {
background: #ffffff url(underline.gif) left 20px repeat-x;
}
.c h3 {
margin: 0;
padding: 0 0 2px 0;
float: left;
font-size: 20px;
background: #ffffff;
}
.c h3 { display: inline; background-color: white; margin: 0; padding: 0; line-height: 1em; }
.c ul { margin-top: -1px; border-top: 1px solid; padding-top: 1em; /* simulate margin with padding */ }
http://besh.dwich.cz/tmp/h3.html
H3 {
border: 1px solid red;
border-width: 0 0 1px 0;
text-indent: -60px;
}
You need to know the width of the text, but works pretty well.
The only solution I've imagined so far is to make a PNG or GIF image, with 1px height and a very large width (depends on your project, could be like 1x2000px), and do something like this:
h3#main-title { background: url(line.png) no-repeat bottom XYZem; }
where the XYZ you'd set manually, for each title, in 'em' units. But I can't figure out a 100% dynamic solution for this one, without using JS or adding extra markup.
this worked for me
div.c
{
background-image:url(line.gif);background-repeat:repeat-x;width:100%;height:20px;
}
div.c h3
{
height:20px;background-color:white;display:inline;
}
you make the div the width of your content
then you set the background of the h3 to the background of your page. this will then overlap the background imageof the full div. You might want to play with background positioning depending on your image
Can you pad content in the UL tags? If so, this might work:
h3 { display: inline; margin: 0; padding: 0 10px 0 0; float: left;}
ul { display: inline; border-bottom: 1px solid black; }
check source code of: http://nonlinear.cc/lab/friends/elijahmanor.html
then again i have NO IDEA how to control the end of the line.
Assuming that you're working with dynamic content, the best I could suggest is to accept graceful degradation and use a mix of great_llama and Bohdan Ganicky
Imagine:
A long title that will wrap to two lines___________________
and leave you like this in great_llama's solution
and nothing appearing at all with Bohdan Ganicky's solution if ul isn't immediate preceded by ul.
Solution:
.c h3 { display: inline; background-color: white; margin: 0; padding: 0; line-height: 1em; }
.c + * { margin-top: -1px; border-top: 1px solid; padding-top: 1em; /* simulate margin with padding */ }
We care about IE6, but accept that this is an aesthetic touch and IE6 users will not suffer. If you can't get the designer to accept this AND you can't alter the HTML, then do something else (before you find another job ;))
Here's a better answer:
.c {
background: url('line.png') repeat-x 0 20px;
}
H3 {
background-color: white;
display: inline;
position: relative;
top: 1px;
}
Use a small, 1px height, couple px wide image as your underline and occlude it with a background color on your H3.
h3:after {
content: '___________';
}