I have: http://jsfiddle.net/Gkz4v/9/
.pagination li a {
float: left;
width: 6px;
height: 6px;
line-height: 6px;
margin-right: 3px;
text-indent: -9999px;
background-color: #4b4b4b;
}
In the class above, if I remove line "float:left", result is displayed differently than if the line is there. Please try it in my fiddle above.
I want items on different lines with the effect of "float:left"
Can you please explain how does this work?
The effect that you describe, would be the size of the elements? You're trying to do something like this: http://jsfiddle.net/Gkz4v/10/
It is necessary to add a display: block in <a>. This is necessary because <a> is an element with display: inline and inline elements do not respect size rules.
The a tag is an inline element by default, which do not obey widths and heights. floating an element is one way to make it obey widths (which is why you noticed the effect), but in this case, you can just change the display to block to get your desired look.
.pagination
{
padding: 3px 0 3px 3px;
}
.pagination li a
{
display: block; /* change here */
width: 6px;
height: 6px;
line-height: 6px;
margin-bottom: 3px; /* changed the margin too, so it's nice and spaced out */
text-indent: -9999px;
background-color: #4b4b4b;
}
.pagination li.on a
{
background-color: #1f84e3;
}
ol { list-style: none; } /* JSFiddle adds this automatically I think, but in the general case, this will remove the dots in the list */
Working example.
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.
fiddle
HTML
<ul>
<li>Messages<span>1</span></li>
</ul>
CSS
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:hover span {
text-decoration: none;
}
span {
background-color: red;
border-radius: 999px;
color: white;
margin-left: 2px;
position: relative;
top: -.5em;
font-size: .75em;
font-weight: bold;
padding: 0 .3em;
}
When you mouse-over the link the underline is applied to the <span> even though I've set text-decoration: none. Is there a way to get rid of it?
Try changing the display of <span> to inline-block as follows:
Example Here
span {
background-color: red;
border-radius: 999px;
color: white;
margin-left: 2px;
position: relative;
top: -.5em;
font-size: .75em;
font-weight: bold;
padding: 0 .3em;
display: inline-block; /* <-- Added declaration */
}
Explanation
According to CSS level 2 specification, text-decoration is not propagated to the contents of nested atomic inline-level elements - such as inline-blocks and inline-tables.
16.3.1 Underlining, overlining, striking, and blinking: the 'text-decoration' property
[...] Note that text decorations are not propagated to floating and
absolutely positioned descendants, nor to the contents of atomic
inline-level descendants such as inline blocks and inline tables.
Also the spec states (my emphasis):
Underlines, overlines, and line-throughs are applied only to text
(including white space, letter spacing, and word spacing): margins,
borders, and padding are skipped. User agents must not render these
text decorations on content that is not text. For example, images and
inline blocks must not be underlined.
Also note that text decorations would stick with the text itself, therefore:
Relatively positioning a descendant moves all text decorations affecting it along with the descendant's text; it does not affect calculation of the decoration's initial position on that line.
add this
ul li a span { text-decoration:none; display: inline-block; }
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 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;
}
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: '___________';
}