Trying to have the label.error to show under the select element. I keep trying a bunch of things with float but I'm obviously missing the point.
Here is the fiddle
http://jsfiddle.net/ALUQB/5/ Press the "Change timezone" button and see it shows inline. I want it underneath the select.
Below is a possible solution (notice the extra div element):
http://jsfiddle.net/ALUQB/7/
Adjust the left and bottom properties as needed
Something like http://jsfiddle.net/ALUQB/8/ will work, but if there's another item after it this will cause issues. Fine for the fiddle, at least.
All I've done is absolutely positioned it, banked left, and with a top margin to nudge it down a bit.
Edit: Beaten to the punchline by a few seconds. Either of these solutions will work, neither is particularly ideal/flexible.
Related
I'm using the following radial menu...
http://www.cssscript.com/demo/radial-popup-menu-with-javascript-and-css3-circlemenu/#
Looks great, however I want two on my page. One bottom right and one bottom left.
That's no biggy, however obviously when on the left of the screen i need the buttons to pop out to the right and visa versa.
my question...
for each of the list items there's a transform in the CSS like...
transform: translate(-144px, 0);
obviously having it as a positive 144 will make it move to the right, which is great when the menu is positioned in the bottom left...
Rather than having to have a left class and right class with essentially the same CSS behind it, just one being positive and the other negative, is there a nice way to have 1 set of css rules that will just translate the li away from the div/screen edge?? or maybe I am thinking about this completely wrong (feel free to say if i am being a numpty)?
thanks
marking as resolved, as per #hissvards comment
"I don't think there's a way to do it using pure CSS, but it would be
dead easy with a preprocessor. - Hissvard"
http://elastichosts.darkgreener.com/cloud-support/index.html
Please could anyone explain why the table (#support-table) is being pushed down to align with 'Submit a ticket', rather than following straight on from the first paragraph?
I don't understand why the table is being pushed down, but the header and paragraph are displaying just fine inline alongside the right-hand gray block.
I assume it must be something to do with the display property of the table - I've tried setting it to display:inline, but it doesn't seem to help.
Thanks.
It's because of float: left in extra.css line 135. Remove that or change it to float: none and it scoots up to the paragraph.
You're unnecessarily floating your table left. (float:left;)
Removing this property will restore the table to the right location.
As the other answers pointed out, you have the float: left. The reason that this was causing problems is because of the clear:right that you have on the button to the right. The button is cleared to the right and the flow of the document continues fromt that point and so the table is floated to the left even with that button.
Page in question: http://www.rjlacount.com/public/lander/
I'm probably just doing something stupid, but I'm trying to indent the second line of wrapping text inside the form (with "Your account: test#test.com" at the top) and I can't seem to get anything to work.
I would think the solution is:
form span {padding-left:1.5em;text-indent:-1.5em;}
but this only seems to indent the first line of each section.
Another look at this would be much appreciated, thanks!
If the element is inline it will indent the first line, otherwise if it's a block element it will indent the rest of the lines, which is just like Briguy37 said, since that's the difference between DIV and SPAN.
I just wanted to clear out that it's not a "problem with span".
For some reason, this works with a DIV, but not with a SPAN. Not really sure why, but here's a fiddle with the same CSS for both.
spans are handled as inline elements.
Considering them as actual characters helps to conceptualize the changes. A space after a span is retained because it's like a space between characters. You adjust height by line-height rather than simply height. etc etc
Usually if this is causing a problem you can just use a div and set display:inline-block; if you need horizontal alignment.
I have a newsfeed/chat box. Each entry contains two spans: #user and #message. I would like #user to float left, and #message to float left upon it. If #message causes the row to exceed the container width, #message should wrap below #user, as shown in the diagram below.
By default #message jumps completely beneath #user if it does not fit on the same row.
I have tried whitespace:nowrap on each element but that doesn't seem to do the trick either.
Help?
Maybe I'm missing something, but if both elements are display:inline this should solve the problem of #message going completely beneath #user. No need to float anything.
Demo (not much to see): http://jsfiddle.net/YK3R9/
Feel free to use semantic markup instead of spans and divs, I just used them for the demo.
If you need the border on message to display the way it is in your drawing, just say so. I wasn't sure if it was a visual aid or the way you actually want it rendered. Simply adding the border to the element looks a bit weird when the message spans multiple lines, so we might need a helper span.
EDIT: Saw your note that borders don't matter.
Moral of the story: No need for float here.
I have a couple links on this page (http://tuscaroratackle.com) that are ending up at unexpected positions in their :active state. The links are absolutely positioned, so I'm guessing the issue is partly due to that. But I can't figure out what rules are getting applied on :active to make them shift down and to the left so far. I do have one rule that makes them "depress" a bit on active ( a:active {position:relative; top:1px;} ) but can't quite figure out why they are shifting so badly.
The links in question are these:
it's the "See Rods" link that appears on hover. If you click you'll see the awkward resulting positioning.
Also for those that don't know (I recently found out) you can inspect the :active state in firefug. Just use the drop down arrow on the style tab to toggle those styles on.
From description of position:absolute:
Generates an absolutely positioned element, positioned relative to the first parent element that has a position other than static.
And, as you noted, you have position:relative; defined for a:active. Now, therefore, in <a><span></span></a> combination position of span is counted relative to position of a, not to position of .hp-promo-item.
As for solution, if you need to move a down 1 pixel on :active, maybe margin-top will work better. But wait, you already have margin-top:1px for .promo-content .icon. Well, maybe margin-top:2px !important; then. I don't really understand the aim to suggest more.
PS Thanks for telling about :active helper in firebug, pretty useful!