I have an input field an width of 20% like you can see here:
<input id="saveServer" width="20%" class="depth"></input>
So to center it i add two span elements,with an width:40%, before and after the input field, to center the input field. Like you can see here:
<span style="width:40%"></span>
<input id="saveServer" width="20%" class="depth"></input>
<span style="width:40%"></span>
But somehow the the inut field does not center himself. I have no idea how to center it! Greetings from Germany! Thanks!
Heres the same example on fiddle:http://jsfiddle.net/bmkc2/
I think more context would help to clarify the problem,
but is this what you are after? One way to
center the input itself is by adding the rule:
margin: 0 auto;
http://jsfiddle.net/QqRCm/
Sticking to your method, here's a working fiddle: http://jsfiddle.net/bmkc2/1/
to be taken into consideration, a width can't be applied on an inline element like a span. You first have to display it as inline-block for example.
display: block on input will display it alone on its own line. Again, inline-block or floating.
inline-block has one annoyance (it's normal but still annoying here), it'll display whitespace between elements displayed as inline-block, that is a 4px space between each span and input. The HTML comments are there to avoid these spaces (it's normal because imagine two words each in a span and separated by a space. You need and expect this space between words or it'd be unreadable!)
width: 20% and border-width: 1px and padding 5px will add up and with 2x40% it'll be greater than 100%. box-sizing: border-box will avoid that border and padding are taken from the 20% width (check caniuse.com for the complete list of prefix to add -moz-, etc).
edit:
your input has neither a label (associated with its for attribute) nor a title attribute, is it just because it's a demo ?
margin: 0 auto as stated in another answer and text-align: center are preferable to adding 2 empty elements just for centering. I just wanted to make your first try work.
The reason your code does not work as you think it should is because both the input element and the span element are floated elements. To get them to work they way you are thinking, you need to have them displayed as inline-block elements.
Add the following code and it will work the way you expect it should.
span, #saveServer {
display:inline-block;
}
jsFiddle: http://jsfiddle.net/bmkc2/2/
---------------------------`
.x
{
margin: 0 auto;
display: block;
}
`-----------
to enter the image copy the link then paste in browser
https://i.stack.imgur.com/XJsoq.png
Related
I need to display text vertically in a rowspan within a table. The technique I'm using via CSS seems to "work", but the width of the <p> element can't be changed or else the text wraps to the next line and its not pretty.
Take a look at this jsfiddle I put together in order to replicate my issue.
http://jsfiddle.net/wn4ofcwx/
Any alternatives here? Or possible a fix to my current CSS.
Note: Probably doesn't matter but I'm using the INK Framework (similar
to bootstrap).
Actually I figured it out, it was as simple as using white-space: nowrap;
Which I completely forgot about!
http://jsfiddle.net/wn4ofcwx/7/
The text doesn't wrap because we are explicitly stating nowrap, you can re size the window to see how it keeps its position, now I can apply a width of just 10px to take away all that excessive white space in the rowspan.
Check this out: http://jsfiddle.net/wn4ofcwx/4/
What I added to the class .rotate-vertical:
display: block;
margin: auto auto;
height: 17px;
And I took out : Width: 50px;
Cheers
Actually you can keep out the : display: block;
The p element is already a display: block by default and you didn't overwrite it anywhere.
I have a form with 3 elements
<form>
<input type="search" value="long text" />
<select>
<option>Google</option>
<option>Bing</option>
</select>
<button>Search</button>
</form>
I would like to have the select and the button to have their own width, and the input to fill all the remaining space.
I found different solutions but they seems to not work properly.
Following how-to-make-element-fill-remaining-width-when-sibling-has-variable-width I get the desired effect (having to add markup and to change the order of the elements) but the input is overridden from the other elements, loosing its nice rounded borders.
button, select {
float: right;
}
input {
width: 100%;
}
.input_wrapper {
overflow: hidden
}
How can I do instead?
I need a cross-browser solution (>=IE7)
I would avoid (if possible) to use additional markup
I want to avoid that the the input could be overflown and hidden (as explained above).
PS - I usually try to avoid floats and stay with display-block. But all the suggestions are welcome
Ok, I think this can be done by setting the form to "display: table" and then the input, select and button to display: table-cell.
Then set widths on the first 2 elements and make the third element width: 100% and display: block.
Let me know how you get on.
Let's say that I have a span and I set an image as the background of the span like this:
<span style="background:url("my_image.png") no-repeat;"></span>
As you can see above, my span is empty. If I put some content in my span like:
<span style="background:url("my_image.png") no-repeat;">Some content...</span>
I can see the background image of the span with no problem. But If I leave the span empty I don't see the background image. I figured that I could solve this issue by adding some padding to my span like:
<span style="background:url("my_image.png") no-repeat;padding:20px;"></span>
But is there another way I can do this without adding some padding to my span and keep my span empty?
Thank you
You get the same effect by using inline-block but setting width and height instead of using padding.
<span style="background:url('my_image.png') no-repeat; display: inline-block; width: 40px; height: 40px;"></span>
Also, something else that could trip you up is you are using double-quotes inside of an HTML attribute, which would confuse a parser and could lead to unexpected results. I've changed them to single quotes in the code I posted above, although no quotes would do just as well.
just don't make it empty: put a 'blank' inside. There are three ways, to do that:
simple space and add style white-space: pre; to it
Non-breaking Space or
The non plus ultra is, to let css do the trick for you:
add this style to your span:
:before {
content: "\200D";
display:inline;
}
What happens:
you add a content before (or better "in front inside") your span, that displays a ZERO WIDTH JOINER, and your span is not empty enymore
By default spans are inline page elements (rather than 'block' elements). This means they won't take up any more space in the page than that assigned to them—for example, if you place text in them (as you have found). To achieve what you want, you need a little CSS to define a height and width for the span, but you also need to make it a block element so that it is rendered consistently.
Alternatively, you could switch to something like a div, which is already a block element. Note however that defining a block element means it will take up space in your page. If you want something more dynamic consider some on-the-fly manipulation of the element with Javascript or similar.
(Either way, ignore the advice elsewhere on this page about single and double quotes in HTML attributes: that is utter nonsense).
try
<span style="background:url('my_image.png') no-repeat; display:block; height: 40px;"></span>
You have to specify a width and height to show the background. When you're typing something in it you force both with the text.
<span style="background:url("my_image.png") no-repeat; width: 50px; height: 25px"></span>
You should set a width and height.
In the following SO-Question is a tip, how to get the size of the background-image: How do I get background-image size in jQuery
First.. How do i fix this:
http://jsfiddle.net/kLjcq/
I am seeing this properly formatted on my browser..!
http://picpaste.com/pics/Screenshot_from_2013-02-07_13_31_20-ViIvXLQf.1360273538.png
http://picpaste.com/pics/Screenshot_from_2013-02-07_13_37_15-GBjeEsL8.1360273595.png
But on the fiddel it messes things up.. :( What happened? HOw do i fix this?
Second is.. if i have long string... it shoots over that light gray border of the heading
"Reading from xml..." thingy
What I am looking for is that the maxiumum spread of this text goes upto that border.. and after that.. it breaks to a next line.. so that text is enclosed properly..
In div.content
div.content {
background-color: #add8e6;
display:inline-block;
margin-top: 20px;
border-radius: 10px;
position: relative;
top:-5px;
}
I tried to add limit and stuff.. but it limits the blue box to a pixel value
but instead i want text (and blue box) to limit upto certain limit after which it
breaks to a new line...
any clues.
Thanks
You're absolutely positioning the .checksheet class. This removes it from the document flow. Other elements like your .content-class don't care for it.
I don't know why you use position: absolute; in this context, but it's producing your mistake.
Your fiddle is breaking because you're using absolute positioning. When the screen is narrow, your elements in the checklist are wrapping around, but the elements that follow are positioned in a way that assumes the preceding element is only 1 line instead of 2.
Without the actual markup relating to your second question, we can only guess at what the actual problem is. However, since you're using pre in the sample provided, the culprit is most likely there. What you need is to add a property like this:
white-space: pre-wrap
Without this property, the pre tag generally does not allow elements to word-wrap, which will cause it to take up as much horizontal space as possible to display all of the text.
I am using the following HTML:
<p>← Back</p>
To create the following:
← Back
Problem is, the left arrow is not vertically aligned in the middle. It appears to be at the lower 3rd.
Question: how do I get the left arrow to be aligned vertically in the middle (of the letter "B") using CSS?
UPDATE:
Is it possible for me to vertically adjust/align this:
Without modifying my HTML, and
Without using an image?
The arrow is a simple character, so it's aligned like the others (it is in the "middle", the creator of the font wants it to be where it is... maybe that's the middle of lower-case character). Maybe it looks different using another font, maybe not. If you have a fixed font and that one looks messy, you could try to use the :first-letter selector (or wrap the arrow in a span or something) to move it up 1 or 2 px (position:relative: top:-2px;).
Another solution would be to use an image for this, like most websites do (and there are many free icon sets out there — my favourite is famfamfam)
You can wrap your arrow in SPAN tag and then play with line-height and vertical-align CSS properties.
Generally you should not do this, you should let it as the font was conceived by its author.
But it you want to change it you can do it like this:
<p><a href="http://www.example.com/">
<span style="position:relative;top:-3px;">←</span>
Back
</a></p>
Note: Use what you need instead of -3px, I used that just to illustrate how the position can be changed.
I think you have to use a image for the left arrow than &larr.
It IS possible to have the &larr in a separate span, have some specific padding to bring the arrow to the right position, or use a specific font that has the arrow at the center, but this will have side effects.
I suggest you use an image.
There are two possible answers to this.
The way you're writing it, this is not a graphical element (arrow) followed by a label ("Back"), but a line of text (inside a paragraph) containing a single character followed by a letter string. So alignment is a purely typographical problem and determined by the font you're choosing. Choose a different font and see if it's more typographically pleasing.
What you want is really not a line of text but two independently placeable graphical elements. Put each inside its own span, give it display: inline-block and position: relative and play with vertical paddings, margins and line-heights until you're satisfied.
You have some options:
1. Put the arrow between span tags before the word Back, add an id to this span object and then assign the style in the css file playing with: padding-top or bottom and also vertical-align or position relative.
2. The second option is using the image as background and then you have to create the style for this link:
li a#link,#link_conten{
background-image: url(../../../img/arrow.gif);
background-position: left top;
background-repeat: no-repeat;
}
In addition, it is not common (from the semantic point of view) to put just the link (tag a) inside a paragraph (tag p). Then you have to deal with the default css rules for tag a and p but of course depends of your design
You could use CSS generated content. This will mean editing your HTML - to remove the arrow. Essentially you're creating a pseudo-element that sits in front of the link, and you can style it however you like, e.g.
a.back:before {
content: "\2190 "; /* Unicode equivalent of ← */
display: inline-block;
padding: 5px;
background-color: aqua;
}
On the downside this won't work in IE 6 or 7. You might be able to work around that with some targeted javascript.
If you don't want to edit your HTML, you could give :first-letter a try. It only works on block-level elements, so you'll need to work accordingly, e.g.
a.back {
display: inline-block;
}
a.back:first-letter {
background-color: aqua;
padding: 5px;
}
I've had trouble getting this to display consistently cross-browser though. IE8 and FF3.6 do rather different things with the code.