i want some text and textfields to properly display in the same line and make an line break after each textfield. First i had all buttons in a class which had a absolute position, but i think there is a better solution.
At the moment i have it this way
<form action="" method="get" name="pdaten" >
<p><div class="text">Vorname</div><input class="button" id="vname" type="text" /></p>
<p><div class="text">Nachname</div><input class="button" id="nname" type="text" /></p>
<p><div class="text">Geburtstag</div><input class="button" id="gebdat" type="text" /></p>
</form>
CSS:
form{
padding-left:1em;
}
.button{
position:relative;
left:0%;
}
.text{
position:relative;
text-align:left;
width:20%;
background-color:#00FF00;
}
The thing is, the textfields are always displayed in the next line, instead of the same as the div in which the text is. I could use a span, but than i dont know how to position them correctly, since i want the textfields to be exactly underneath the last one.
Anybody can help me fix this?
Add display:inline-block; to your text class.
.text{
position:relative;
text-align:left;
width:20%;
background-color:#00FF00;
display:inline-block;
}
jsFiddle example
You can set the divs display property to inline, like this:
.text {
display: inline;
}
This will make the divs behave like inline elements.
It is because div's are block element, you can change the behavior by changing the display property value to inline-display
.text{
position:relative;
text-align:left;
width:20%;
background-color:#00FF00;
display: inline-block;
}
Demo: Fiddle
Add float:left; clear:right; to your .button elements
Why not just add display: inline-block for your div
Demo: http://jsfiddle.net/mAsxZ/1/
Related
I have a Get in Touch button on the bottom of this page:
In the mobile version (less than 770px) of the site I would like it to be centered.
HTML:
<div class="white, home_contact_btn wpb_column vc_column_container vc_col-sm-4">
<div class="wpb_wrapper">
<a class="laborator-btn btn btn-index-1 btn-type-standard contact-btn btn-primary btn-normal" target="" title="GET IN CONTACT" href="http://www.estiponagroup.com/dev/contact/">GET IN TOUCH</a>
</div>
</div>
CSS
.home_contact_btn a{
margin:0 auto;
text-align:center;
}
An anchor is inherently an inline element and can be centered by applying text-align:center; to its parent element:
.wpb_wrapper{
text-align:center;
}
Additionally, if you wanted it to be centered without targeting the parent, you can make the inline element display as a block level element and then center the text inside of it.
.home_contact_btn a{
display:block;
text-align:center;
}
And finally, if you have a certain width you want to have on the button, add that width and then you can use the auto-margins from your code.
.home_contact_btn a{
display:block;
text-align:center;
width:50%;
margin:0 auto;
}
set to the parent container text-align:center;
#media (max-width:700px){
.wpb_wrapper{
text-align:center;
}
.home_contact_btn a{
text-align:center;
}
}
fiddle
Simply use this :
.home_contact_btn a{
display : block;
text-align : center;
margin : 0 auto;
}
Alternatively, use this :
.wpb_wrapper {
text-align : center;
}
Both of them works, but I'll recommend you using the first option because in the second option all anchors (<a> elements) will be centered.
If you don't have any other anchor in the parent element of your 'Get in Touch' button, then second option will also work as expected.
I'm using third party libraries like Kendo which output various types of HTML elements when they render.
So you might end up with a scenario such as this:
<ul>
<li>
<label>label text</label>
<div>muli select widget</div>
<span>date selector</span>
</li>
</ul>
NB! Assume I don't have control over the HTML rendered from these widgets/third party tools.
The problem is vertical alignment for the scenario above. I've created a JSFiddle which shows how the label doesn't vertically align properly. See here:
http://jsfiddle.net/tMJFF/
How would I get all three these elements to vertically align perfectly?
Use inline-block property on all elements
label,
.div-input,
.span-input{
display: inline-block;
vertical-align: middle;
}
http://jsfiddle.net/6vQ4Q/
You mentioned Kendo, so I'd recommend using whatever selectors they have decorating the ul and do something like :
ul.kendo-selector-class-of-choice li * {
vertical-align: middle;
display : inline; /* for lte IE7 only */
}
Since you aren't in control of the elements being created, this could change with different implementations/version updates of the decorating client side library (in this case Kendo). The * covers that and although arguably a hungry selector its scope is limited by the .kendo-selector-class
The below works in Chrome and IE10, but jsfiddle a bit tricky to browser test for IE8 since it doesn't render properly itself... but if you do test further you'd find you'll have to use something like display:inline if you're going down to the lovely land of IE7-.
http://jsfiddle.net/tMJFF/11/
Simply add vertical-align:middle;
Here is referenced Fiddle
label {
vertical-align:middle;
line-height:20px;
border:1px solid blue;
}
.div-input {
vertical-align:middle;
border:1px solid black;
margin-right:20px;
display:inline-block;
height:20px;
width:100px;
box-model:collapse-box
}
.span-input {
vertical-align:middle;
border:1px solid black;
display:inline-block;
height:20px;
width:100px;
}
label {
line-height:20px;
border:1px solid blue;
vertical-align:top;
}
vertical align all elements in li to middle.
ul li *{
vertical-align:middle;
}
vertical-align css property aligning your tags vertically so simply use :
label,div,span{
vertical-align :middle
}
DEMO
For some reason this text isn't being centered.
#highlightheader
{
background-color:#006600;
color:white;
font-size:30px;
text-align:center;
font-weight:bold;
}
<span id="highlightheader">example text</span>
http://tinkerbin.com/eoJprUq5 (jfiddle going too slow, used this one instead)
EDIT: i ONLY want the text to be highlighted, not have a whole green bar across.
span is an inline tag
add display:block to css
http://tinkerbin.com/oBgV5mcU
a span is an inline element, whereas a block element like <div> would work... alternatively add display: block; to your css.
You should use a div around the span, especially since you want a heading here. As mentioned in the other answers, span should be used for inline elements. You're using it right for highlighting but positioning should be done through div.
Try that:
div.center{
text-align:center;
}
#highlightheader
{
background-color:#006600;
color:white;
font-size:30px;
font-weight:bold;
}
<div class=center>
<span id="highlightheader">example text</span>
</div>
Add a display: block; to the #highlightheader. <span> is an inline element!
Hi there try to use this with your css
padding:0px 50px 0px 50px;
Because you use SPAN and span is an inline element. Use display:block in CSS or better p-tag <p> or div with width:100% to center your text.
Edit:
#highlightheader {
text-align:center;
}
#highlightheader span {
background-color:#006600;
color:white;
font-size:30px;
text-align:center;
font-weight:bold;
}
<p id="highlightheader"><span>example text</span></p>
Span is an inline element. This means its width will auto fit to the size of its contents. Instead, change the span to a p tag - a block element. Block elements have a default with of 100% of the parent.
You can see a demo here
I would like to align the text and input in the LI to be horizontaly aligned with the menu on the left. Here how it looks.
I need the newsletter to be align with the menu on the left.
CSS
#footer .div1{
float:left;
}
#footer ul{
list-style:none;
}
#footer li{
float:left;
padding-left:20px;
font-size:18px;
}
#footer li:first-child{
padding-left:0px;
}
HTML
<div id="footer">
<div class="div1">
<ul>
<li><b>WE ♥ TO NETWORK</b></li>
<li>FACEBOOK</li>
<li>BLOG</li>
<li>CONTACT</li>
<li>NEWSLETTER : <input type="text" name="email" id="emailNl" style="font-family:arial; width:200px; margin:0px; padding:0px;"/> <span id="submitNl" style="cursor:pointer">OK</span></li>
</ul>
</div>
<div style="clear:both"></div>
</div>
Thanks
IMAGE UPDATED!
With padding and margin 0px it's almost there but you can notice a slight difference. :S
UPDATE 2
By changing the float:left of my LI to display:inline-block, now the text is align but the input seems to be like padding-top 2px too much ... I think i'll tweak this to make it fit and see through each browsers.
Your problem is caused by float: left;. Replace it with display: inline-block; and you'll be fine.
Try it yourself: inline-block vs float:left
Try putting it in a jsfiddle. It looks to me like the input tag is trying to put some padding/margin (oh how I always forget which is which) around itself. Try setting those to 0px.
try reset the padding and margin of the element and try vertical-align property - http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
although, I tested, they align just perfectly as it is. below is the preview from firefox
You can try
#footer ul {
list-style: none outside none;
margin: 0;
overflow: auto;
padding: 0;
}
input[type=text]{
padding:0;
margin:0;
}
see if it works.
Don't know if this will look good but this sure does the job.
#emailNl{
margin-top:-3px;
}
i'm trying to achieve the following (for building a form):
Name: [ ] *
my markup is:
<label>Name:</label>
<input type=text name=name>
<span class=validate></span>
my css is:
label
{
display:block;
width:50px;
float:left;
}
input
{
float:left;
}
span.validate
{
display:block;
background-image:url(img/required.png);
width:16px;
height:16px;
}
the problem: the validate-span is positioned to the very left border instead of right to the textbox. what is wrong?
thanks
You are using display: block on your span, so it will automatically go to a new line. You can change it to inline-block or float it as well.
You need to also add float: left to your span.validate.
See: http://jsfiddle.net/8jDjq/
But, that won't look right if you add another set of the elements underneath: http://jsfiddle.net/8jDjq/2/
To fix that, you need to add clear: both to label: http://jsfiddle.net/8jDjq/3/
You need to float:left the validate span (or reconsider those display:blocks, but I guess they're there for a good reason).
Give the span a float:left too.
span.validate
{
display:block;
background-image:url(img/required.png);
width:16px;
height:16px;
float:left;
}
U need float:left; for your span