I am trying to style an Input of type File:
http://codepen.io/mdmoura/pen/njAgJ
The HTML markup I am using is the following:
<span class="file">
browse<input type="file" name="annex"/>
<span>path</span>
</span>
The inner span (in RED) is to display the selected file (using JQuery).
The problem is I am not able to vertically align the RED span with the Browse "Button".
I tried other options but I always end with some kind of problem.
Could someone, please, help me out?
Thank You,
Miguel
You can use display:table-cell for both the <a> and the <span>.
Related
Im learning html and css for now. Anyway, I am following a course, and have a queston.
This is my example code with logo of BBC and text next to it: http://i.imgur.com/kii6UPi.png
And once I add float: left; to logo, text moves up: http://i.imgur.com/SIDrCVx.png
Can anyone explain to me why this happens?
This is because by default your browser is rendering the image and the text as inline elements, therefore the baseline, or bottom of the image and text is lining up.
When you apply float:left to the image, it forces the image to display as a block rather than inline, so the text no long aligns baselines with it.
you can control them using different divs. <div class="wrapper"> <div>logo</div> <div>text</div> <div> you can control them separate, but try using float:left on the text as well, that might help.
Put simply, an img in html by default will take up the entire line that it's height occupies.
When you give an element the property of 'float', you tell it to become part of the regular flow of the page, and other elements can now wrap around it.
You may want to read up on both the float property and the inline-block
I just installed Foobar on my blog but the customer support hasn't responded yet after a few weeks to my query.
I'm basically applying this custom modification offered by them (http://codecanyon.net/item/foobar-wordpress-notification-bars/full_screen_preview/411466) to add a Like button to the toolbar at the top.
What I'm struggling with is to align some Text before the <div id="social_target"></div>, so that the text and the Likebutton will be aligned to look like "Like Us On Facebook! LIKEBUTTON".
Right now when I add text before the <div id="social_target"></div>, the text appears but the Likebutton appears underneath the text so it isn't visible at all.
How would I do this?
I don't know exactly how wordpress works and if you have access to the html code, but if yes, try putting the text inside a div and applying some css to it, something like this should work:
<div style="width: 400px;">
<div style="float:left;">Like us on Facebook!</div>
<div id="social_target"></div>
</div>
The value of the width is just a guess, you can adjust it.
A few things to check:
Is the Div that your entire code (the text and the social_target div) being put into too small? If so, it'll push the Div onto the next line. You'll need to edit the size of the Div you're putting this stuff into.
Make sure you apply CSS to the Div so that it stays on the same line. Alternatively, you could use a span:
<span id="social_target"></span>
Otherwise, Divs will get pushed to a new line unless you specify something like:
#social_target { display:inline-block; }
or
#social_target { float:right (or left); }
Like Lucas has in his code above.
I have a text around an image - bootply.
When img-thumbnail style is applied to image, text is displayed to right but, when img-rounded or no style is applied, text is displayed at bottom.
Help to display text to right when img-rounded or no style is applied, keeping img-responsive style. As suggested on Mozilla Developer Network, I tried with vertical-align, but it's not working.
Please help with code, for clarity. Thanks much in advance!
i hope this solution will help ( maybe not the perfect one ) but i think it will work for you,
to display text to right when img-rounded simply override this class attributes by making the value for display to inline-block instead of block.
code:
Change display: block; to display: inline-block; in the class img-rounded.
then you can wrap this section ( image + paragraph ) with a div for customizing the appearance of both.
Please have a look:
http://jsfiddle.net/JeaffreyGilbert/b8FdC/
How to place button above the line in IE7? Please don't change the HTML structure. Thanks.
do the simple hack , change the order. write <button> before the text and also write float:left on h2
<h2>
<button>Action button</button>
This is heading 2
</h2>
DEMO
Note: also can work only writing float:left on h2 but then complete div slip below
From what I can tell, you'll have to change the structure by putting the the button element to before the "this is heading 2" text. (EDIT: diEcho beat me to it).
Otherwise you'll have to use position:absolute which can cause other problems. Using position:relative on the h2 may help.
Example
OK, DUE TO BEING NEW I WASNT ALLOWED TO POST IMAGES, SO I HAVE ATTACHED LINKS INSTEAD. (images should be inline with this question)
Im writing a webpage and have a div containing some text (inline) an then an image.
Now when one clicks on the image, a hidden div appears below with an input field.
The input field in this div is automatically aligned to the left edge of the div.
I want it aligned to the right of the div.
As pictures speak louder than words, see link below.
http://www.freeimagehosting.net/uploads/d827ecc330.png
Anyhow the closest I got to a solution was to apply direction: rtl to hidden div, but then my text in my input field also changes to rtl.
I just want the placing of the text field to be rtl, not the input.
I hope this isnt too confusing.
Im quite new to css but have searched arund a lot, and have yet to find a solution besides the depreciated align=right.
Any suggestions greatly appreciated.
<div id="container" style="width:500px;">
<div id="text" style="width:250px; float:left;">Text</div>
<div id="image" style="width:250px; float:left;">Image</div>
<div id="input" style="width:500px; float:left; text-align:right">Input</div>
</div>