I have a fairly long H1 title containing a link with a pseudo ::before element that I want to wrap to two lines correctly. Here's what I need:
A pseudo ::before element on an a link inside of an H1 (it needs to be clickable, so can't be on the H1).
I have this done successfully.
The text to wrap normally and align with the left side of the first word.
This is where the problem is.
See my testing codepen here: http://codepen.io/dmoz/pen/EaZqKv
Seems like it should be a simple fix, but I can't think of what controls how the text wraps. Any thoughts?
Adding float:left to pseudo element will do it.
Check updated demo
Right now your image is being displayed as an inline element (think of it flowing like a single character like an 'A' or a '9'). To have text wrap around it, you need it floated. I'm not sure if this forces block level formatting, but it does force other elements to
http://codepen.io/anon/pen/MYJNEp
Like so:
.site-title a:before {
...
float:left;
}
Edit: remember to clear your float if you have other elements that appear after the your h1 (highly likely)
Related
I'm attempting to get a drop caps (or initial caps; whatever you may call it) effect on a heading. Here is an example of what I'm trying to accomplish.
I've found success with inline span tags that are floated, but when the heading wraps into a second line, the paragraph section breaks onto its own line. See this jsfiddle for an example and adjust the viewing window to see the effect I'm referring to. http://jsfiddle.net/fEn4U/
The structure in the first two jsfiddle examples (with the h1 and p tags) is how I would prefer to have the html. But I can settle for a span in the p tag if that's the only solution. As you can see, I'm further away from a solution with the h1, p structure than I am with the span and p tags.
Also note that the container will be a fixed width, and the content within will be dynamic, so I can't always rely on the heading breaking into two lines or staying on one.
Try to make your small text inline-block and set a maximum size.
http://jsfiddle.net/fEn4U/2/
p {
display: inline-block;
max-width:150px;
}
Can anybody help me correct this: http://jsfiddle.net/ShgRr/ so that the div displays it's content consistently with the ol?
The main problem is that the right-positioned span is breaking outside the div.
I did consider making the div a li item but that would obviously be un-semantic.
Something else I was wondering - is it correct to use negative margin on an anchor so it covers the li bullet and makes the whole link clickable?
Thanks
Why use a <div>? Your CSS will work just fine if you move the contents into a new <li> with that class name: http://jsfiddle.net/ShgRr/2/
I'd argue that making the <div> an <li> is perfectly fine. <table> elements contain both table headers and table rows without problems.
"is it correct to use negative margin on an anchor so it covers the li bullet and makes the whole link clickable?"
it is more correct to remove the bullet entirely if you don't want it there.
if you do want ti these - I don't tend to make bullets themselves clickable - they're a very small target compared to whatever they're bulleting. Easier to click the text than the bullet
your can add this class in your CSS, html part
div a span > i
{
margin: 0 8px;
}
Is there a way to check(in CSS) if an element is breaking/new lining?
I can't know the width of the divs or the parent. I only want to know the first element after the break, so I can add special CSS to this element
Like this:
<div>
first
</div>
<div>
second
</div>
<div>
third
</div>
<div>
fourth
</div>
the css:
div {
float:left;
width:200px;
height:20px;
}
div:not(:first-child) {
padding-left:10px;
}
here i need a check if the element is on a new line so I can remove the padding :
div:first-after-break {
padding-left:0;
}
I think in this case, you could probably do this by using padding-right to separate your elements, instead of padding-left. That way, elements are not indented when they start on a new line. If padding-right causes problems at the end of the line, you could consider using the :last-child pseudo selector (more information about :last-child), and set padding-right: 0; there.
This doesn't discard the question, though. I can think of legitimate uses of the :first-after-break pseudo you describe. For example: a fully responsive layout using floating block-level elements. In such a case, one might want to know if an element is at the left of the window.
You could use the ::first-line pseudo element to get the first line of a div. If you want to apply style rules to lines that are not the first line, you could apply those styles to the whole element and then remove it from the first line. But if you want to specifically use the padding property, you could also set text-indent on the whole element (without any pseudo elements).
No, I don't think there's a way in CSS to do what you're asking.
A DIV automatically takes up the full width of it's parent unless a width is specified since it's a BLOCK level element so if no width is specified so your second DIV would be on a new line anyway.
I need help to align CSS buttons. I tried many different variations and I just cannot center my button the way I want.
Firstly, have a look at this url: http://www.front-end-developer.net/cssbuttons/example.htm
I'm using 2 images to form a button (this could be done on 1 image, but in this case we've got two). Everything works as expected as long as we apply float:left or float:right to the parent div element, to 'limit' width of the div and close it as soon as the content of the div ends. You can remove float:left from the button to see what I mean.
But what about center positioned buttons? I cannot add float:left/right because I want align it in the middle.
In theory, I could set
{
width:XXpx;
margin:0 auto;
}
And I will get what you can see on this picture:
(source: front-end-developer.net)
But I don't know the length of the text inside. Having different translations my button can be very short, or 5 times that long.
I also tried to use <span> instead of <div>, but unfortunately nested inline elements don't respect their padding correctly...
And yes, I must use <a> inside, so buttons can be accessed by web crawlers.
I'm really stuck on this one.
.button {display:inline-block;}
Seems to do the trick.
inline-block browser-support: http://www.quirksmode.org/css/display.html
More about how to work around the browser issues related to inline-block:
http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/
I'm using a background image to add a custom bullet to list items in my content. In the content there are also images floated left. When an image and a list item are next to each other, the bullet appears where it would do if the image wasn't there, but the text wraps around the image.
Here is an example:
http://golf2.test.textmatters.com/content/greenkeepers/turfgrass/turfgrass_speci/cool_season_gra
is there a way to make the bullet appear where is should (i.e. next to the text)?
In Firebug / Firefox (you'll have to check other browsers) I solved your problem adding a:
li {
overflow:hidden;
}
Don't know why exactly, but that magical line solves lots of problems around floated stuff :-)
Edit: Solution if you can change the html slightly
If you have any control over the html, you could perhaps use paragraph tags instead of list items:
p.list_item {
background: transparent url(/++resource++stylesheets/images/bullet.gif) no-repeat scroll left 0.45em;
padding-left: 11px;
}
However, that would kind of change the semantic meaning of the list items...
This is an old topic... but thought I would add how I usually do this in case someone stumbles in here via a search...
If I have an image on the left, and plan to have graphic bulleted unordered list (UL) to the right of it, I place the image statement inside DIV tags, and add a float:left style to that DIV.
Then, I wrap my UL tags inside a DIV, and give that DIV a float:left style as well, causing it to appear to the right of the first DIV.
If I have additional text that I would like to resume UNDER my UL, then I give the second DIV a width that equals the total width of the page/column minus the graphic width - basically, to account for all of the space to the right of the image. That will force continuing text to flow directly under the UL DIV, and if the UL is shorter than the graphic, the text will flow to the right of the graphic and then under the graphic as expected.
If the UL extends lower than the graphic, then the text will just start under the image, as expected.
If you want the text to simply start UNDER the left graphic regardless of the height of the UL, then you could just apply a clear:both style to the ensuing , i.e.
In general this approach works so long as the UL isn't too much taller than the left image, because obviously in this scenario, the list itself isn't going to wrap under the image, leaving whitespace - so to make a long list look right may require some purposeful image sizing, or stacking a couple of images in the first DIV, or whatever other solution you might have.
If you really want to get whacky, I've had a few times where I've used the two DIV method described above, but setting the first DIV to position:relative, and placing the second DIV containing the UL INSIDE the first, with a position:absolute and of course top:??px and right:??px, set of course to absolutely position my UL to the right of the image. It takes the right kind of layout to use this method, obviously...
OK that's all I had to say, hope this makes sense & good luck to whomever!
Try wrapping your list items in a <p> tag, and then give that tag a left margin.
Why do you have div.fig width set to 0 in the html?
<div class="fig" style="width: 0px;"><img src="/images/43_Fescue.jpg" float="0"/></div>
Remove that and the list will float around the image.
Well, it's not the best fix from a stylistic point of view, but floating the images right avoids this problem. Thanks for everyones suggestions
If you want the whole ul to NOT float under the image try adding overflow:hidden to the ul