Lately i've been through a lot of times on a single situation problem:
I have a text input element in a web formulary, inside a bigger div with defined width.
Inside that bigger div, i'll put a span text like "Name: " and then i'll put the input.
I want the input to auto become as much as wider the space of the div that the span is not using.
The code would be something like this:
<div>
<span>Name:</span>
<input type="text" name="name" />
</div>
And the CSS:
div {
width: 200px;
display: block;
}
span {
display: inline-block;
font: 11px 'Lucida Sans', Verdana, Arial;
}
input {
height: 20px;
width: auto;
display: block;
}
I've been doing some research, but i seem unable to find a precise solution for this problem.
So far i've been skipping this problem by putting a inline style defining a different width for each element. But if i change the font, size, or whatever, it'll explode.
I don't like to build a fortress wall and leave it full of holes for snipers. That's why i'm looking for help :)
If you guys have any suggestion, solution or workaround way, I'd be glad to know. =D Thanks.
Semantically it's better to use label tags for this purpose:
<label>Name:</label>
Concerning your question, take a look at the CSS3 flexible box model: http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/
Or if you prefer a video: http://www.youtube.com/watch?v=-OubGOxKa5I
At the time of writing, Mozilla and Webkit support this and there is a fallback for other browsers: https://github.com/doctyper/flexie
Sorry, but it's not possible with that markup. Actually the only way to do it is to shudder use tables (or display: table-cell, etc but that doesn't work in IE7 or earlier). It also generally looks better to have all the inputs aligned, don't you think?
Change display: block to display: inline for input and I think it should work.
Here is an example
http://jsfiddle.net/KYvzM/
Related
Let's assume we have this html:
<h2>TITLE</h2>
Is it possible, through the power of CSS alone, to make this either be or behave like:
<h2>T I T L E</h2>
Reason being that I want to justify the letters over a given width in the title, and I don't want to resort to serverside regular expression witchcraft before having properly evaluated the CSS options.
I already managed to justify the single letters through CSS using these rules:
h2 {
text-align: justify;
width: 200px; // for example
}
h2:after {
content: "";
display: inline-block;
width: 100%;
}
I've looked into text-replace, but there's no support in any major browser. Other than that, I've not yet found any hopeful candidate.
CSS3 would be ok if there's ok support, JS is not of any help.
UPDATE
letter-spacing is not an option since it has to adjust to the width dynamically AND I do not want to check browser implementation of kerning perpetually. But thanks to the guys suggesting it, I knew I had forgot something when formulating the question :)
Here's a jsfiddle for fiddling
Why not just use letter-spacing?
https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing
A much easier way to do this would be to use the letter spacing css styling.
for example
h2 {
letter-spacing:10px;
}
Use CSS's letter-spacing:
h2 {
letter-spacing: 2em;
}
jsfiddle demo
Let's say I have an image, with text directly below it. I wrap it up in a div and center the contents inside.
Now let's say I have 20 of these, all with the same sized image (i.e. 65px) but different amounts of text (text can wrap).
What I want to achieve with this is the following:
I would like to display as many as possible on the same line with 10px of left/right margin around each one. Also, they will always center and equally fill the width of the browser window.
Ideally, if the browser width was super small, it would just display one on each line.
Anyone have a CSS solution for this type of scenario?
It is strictly for mobile... no need to worry about I.E.
Thanks a lot!
Update
Heres some basic code I am working with.. as you can see it does the job if I hardcode 4 per line (width 25% each):
HTML:
<div class="m-parent-navigation-container">
<div class="m-icon-navigation-container">
<a class="m-icon-navigation-link"><img><br></a>
</div>
</div>
CSS:
.m-parent-navigation-container
{
margin: 0 10px;
color: rgb(26, 46, 120);
font-size: 0.9em;
overflow: hidden;
}
.m-icon-navigation-container
{
float: left;
text-align: center;
width: 25%;
}
.m-icon-navigation-link
{
display: block;
font-family: OpenSansBold;
font-weight: normal;
text-align: center;
text-decoration: none;
}
Have a look at this: http://jsfiddle.net/3QSVg/
The important parts are the display: inline-block; and text-align: center;
I'm not sure if this is exactly what you're after, but it's a start.
EDIT:
Here is an updated version: http://jsfiddle.net/j78Qw/1/
It's a bit closer to what you want, I think. But it still has some issues.
You can use flex-box for this. The browser support is still lacking, but if you develop mainly for the webkit rendering engine, i.e. iOS, Android, Chrome on Windows, you can use it.
Look at: http://codepen.io/anon/pen/fHklC
There is no pure CSS solution, I believe.
First, you should float: left the image boxes. Using JS you can get width of the outer container, and divide it by the width of the image box. This will give you a number, how many image boxes can fit. Now you can calculate maximum possible size of the box to fill the whole width of the container. This will allow you to align images to the center.
<ul id="gallery">
<li><img src="…" /></li>
<li><img src="…" /></li>
…
</ul>
var list = $('#gallery');
var items = list.find('li');
var imageWidth = items.width('auto').outerWidth(true);
var nrOfItemsPerRow = Math.min(Math.floor(list.innerWidth() / imageWidth), items.length);
items.css('width', Math.floor(100 / nrOfItemsPerRow) + '%');
If I understand correctly, you're looking to line up divs (with whatever content), have the be fluid width, and have them wrap as needed once there isn't enough room on the page?
Flexbox might be able to accomplish this. See this Fiddle.
Some good resources for Flexbox things:
https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes
http://demo.agektmr.com/flexbox/
http://the-echoplex.net/flexyboxes/
Can you use it?
inline-block is your friend here.
http://jsfiddle.net/Vmu9R/1/
There are a couple of caveats with inline-block in that it is not supported well in I.E.7 and earlier but there are work-arounds.
This article covers the work-arounds and is generally a good article on inline-block
not that you are concerned by I.E.7 but for those who maybe, conditionally include the following
/* For IE 7 */
zoom: 1;
*display: inline;
I would like to vertically align the div ".person-user" so that is vertically in the center of the parent element ".person" (The text to be in the center of the photo but to the right) How can I do this?
Thanks
http://jsfiddle.net/mpBW5/5/
This is something that should be simple, but is actually a pain in the backside to do. Here's a quick jsFiddle, using display: table on the person div, and display: table-cell on the picture wrapper and info divs:
http://jsfiddle.net/2yfDs/1/
What follows is a combination of markup and style that will accomplish exactly what you want, without JavaScript and JQuery.
Markup:
<div class="person">
<img class="profile" src="http://sphotos-a.xx.fbcdn.net/hphotos-ash4/320450_10151028382307410_534533150_n.jpg"/>
<div class="profile">
<div class="name">Colin Pacelli</div>
<div class="fact">Ohio University</div>
</div>
</div>
Style:
.person {
display: table;
}
.person img.profile{
height: 50px;
margin-right: 10px;
/*border-radius: 4px 4px 4px 4px;*/
}
.person div.profile {
display: table-cell;
vertical-align: middle;
/*font-family: calibri;
font-size: 14px;
color: #444;*/
}
/*.person .profile .name {
font-weight: bold;
}*/
I have commented out the rules that do not principally affect the solution, so that all can see how little it takes with CSS if done right. Compared to 10 lines of code running using 32Kb of client side code running on top of a virtual machine. And you thought Adobe Flash Player was evil. I do not mind JQuery much, especially for things it can do well, but frankly, involving JQuery in a clear cut case of pure style is a just bit too much.
As you probably can figure, I have edited your JSFiddle, stripping it of non-essentials and cutting it down to a minimal example that exhibits the desired behavior while leaving the visuals in place.
Since you specified html and css as tags, and since it is in nearly all cases a better idea not to resort to JavaScript/JQuery when they can be avoided, I would really use a markup and style solution like the above instead.
The most precise way is to do this with jQuery and calculate it dynamically for each div. This is useful if some/all image/text divs have different heights. The example. The code:
$("div.person-user").each(function() {
$(this).css("marginTop", function() {
var imgH = $(this).prev("div.person-user-pic").height(),
thisH = $(this).height(),
h = (imgH/2) - (thisH/2);
return h;
});
});
BUT: if every div and image has the same height, you could just do this:
div.person-user {margin-top: 8px;}
I hope that this answers your question?
This is a very common question and the best explanation so far is here:
http://phrogz.net/css/vertical-align/index.html
I'm attempting to create a max-width bounding box which will both wrap text (on spaces, no word-breaking allowed) and shrinkwrap to the width of the longest line of text. For a demo of the various shrinkwrap methods, see http://www.brunildo.org/test/IEMshrink-to-fit.html
I chose the "float" method, but in my testing, none of the methods accomplished my desired effect.
In the example code below (also available with live-preview at jsbin), I show what happens when you let the words wrap themselves, and what happens when you insert a <br /> line break tag. Using <br /> manually results in exactly the effect that I'm looking for, while omitting it wraps the text correctly, but forces the white box to take the entire max-width as its width, which I'd like to avoid.
<style>
div#wrapper { background: #ddd; padding: 10px; }
header { display: block; float: left; max-width: 320px; background: #fff; margin-bottom: 20px; clear: both; }
#wrapper:after { content: " "; clear: both; display: table; }
</style>
<div id="wrapper">
<header>
<h1>Diane Von Furstenberg</h1>
</header>
<header>
<h1>Diane Von<br />Furstenberg</h1>
</header>
</div>
Here's a screenshot of the problem with some elaboration:
I've created a JS method to manually insert the <br /> tag as a stopgap measure, but I imagine there must be some way to do this properly using only CSS/HTML. Thanks for the help!
Changing the display of the h1 to table-caption is close to what you want, in Google Chrome. But it's not perfect and I can't really recommend that as a solution wholeheartedly, mainly due to not testing it in any other browsers.
Not sure if browser behavior has changed since the earlier 'table-caption' answer was posted, but it does not currently work (using Chromium 41):
In reality, it seems the desired behavior is not possible with pure CSS (as of 2015). Further explanation and a lightweight Javascript workaround are available in another SO question: max-width adjusts to fit text?
I have an input field:
<input type="text" placeholder="whatever">
with styles:
input {
margin: 0;
padding: 0 6px;
font-size: 19px;
line-height: 19px;
height: 36px;
width: 255px;
}
Problem is the line-height is not taking effect for the placeholder in webkit CHROME. so the text in the input field is aligned in an ugly way. Anyone else seen this and now how to fix it?
Thanks
Input placeholders don't seem to like pixel line-height values, but this will vertically centre it in the input:
::-webkit-input-placeholder { line-height: normal; }
Looking at your tags, I'm assuming you are writing something like...
<input type="text" placeholder="whatever">
Unfortunately, Chrome ties your hands when it comes to styling the placeholder, the selector looks like this...
input::-webkit-input-placeholder {}
You can find the styling options, gotchas and supported browsers in Styling the HTML Placeholder
It appears that removing your line-height declaration entirely works. It's worked for me in FF7, Chrome15 and Safari 5.1. Also looked good in IE9 and FF3.6 but does NOT look good in IE8.
I don't think I can fully replicate your problem, but perhaps you can fix it using padding: 7px 6px;.
Doing this should hopefully set your top and bottom padding to 7px which pretty much does a similar job as line-height. With different sizes (width/font-size) you should be able to choose the appropriate padding by calculating (height - fontsize) / 2 perhaps give or take a pixel or two for perfection.