JS Fiddle
I am trying to get the text "Message" aligned to the top so it is right next to where the message box starts instead of it being at the bottom of the box, I have tried multiple methods and have tried using tables however the table does not give me the look that I am wanting. What would be the best way to make this work?
Codes I have tried:
vertical-align:text-top;
and
text-align: top;
None of the above samples work to give me the output I need.
Maybe
vertical-align: top;
That said, I know tables aren't fashionable, but it does look like tabular layout to me.
.contacttitle {
width: 100px;
font-size: 18px;
display:inline-block;
vertical-align: top;
text-align: top;
}
See the results here:
http://jsfiddle.net/EBGGg/
Related
I want to center the facebook like button vertically. how to do that?
heres my website:
http://feednews.id/
see the like button on the top right of the page?
why it gets aligned to the top? i already use
style="display: inline-block; vertical-align: middle;"
Please, please, please help me. as I already try to figuring it out for all day long. I'm now got headache :(
I prefer not to change any css file. can i still do that?
Heres the facebook button code that i use: fiddle
use margin property:
._2tga._3e2a {
border-radius: 4px;
font-size: 13px;
height: 28px;
padding: 0 4px 0 6px;
margin-top: 10px;
}
You should seperate your inline-styles using ; not "and"
Remove:
and vertical-align: middle;
and update it: vertical-align:middle
Do not use "and" in between styles.
I am really bad with css and html, can somebody help with this simply problem?
On the bottom of the [site][1] i have text and sharing icons. How can i make them in one row? Like on right from text. It looks horrible now.
Thank you!
here:
this css should work:
.text-muted {
display: inline-block;
}
div.ya-share2 {
display: inline-block;
float: right;
margin-top: 20px;
}
explain: it makes both elements able to coexist in the same line, plus the margin-top is just for aligning it.
add that to your CSS file and youre good to go
I want to build a list of itens. Each item should be in one line, like several paragraphs.
Why my div.empresa elements are on same line? I think they should be on different lines because the display property of them is block.
Take a look at code:
http://jsfiddle.net/Yz8Cq/
You need to remove float: left;
#ListaDeEmpresas .arrow {
height: 50px;
width: 20px;
background: url("/Content/SetaBrancoh40.png") no-repeat center center;
background-color: #A9462F;
}
http://jsfiddle.net/spacebeers/Yz8Cq/5/
Floats can be a bit tricky to get your head around at first. This article is excellent - http://css-tricks.com/all-about-floats/
Actually, removing float: left from the label will make the arrow span appear to the left of the label. Assuming you want the arrow spans to continue to show up on the right of the labels, then you want to add:
#ListaDeEmpresas div.empresa {
clear: left;
}
This will make sure each label/span set appears below the previous one.
Get rid of the float: left; in #ListaDeEmpresas .arrow
The float: left; is making them do that.
I haven't used forms alot so Im not sure whats going on here.
Im trying to position a text input inline with a button but it doesnt seem to work. You can see what Im doing here:
http://jsfiddle.net/gagalug/BEBAH/
Thanks.
Add this line to your style:
img, input[type=image] {vertical-align: bottom;}
This will prevent baseline issues on images and image-inputs. Solves your problem instantly.
You know, more people really should know about this. Even the guy who writes a site as big as QuirksMode is ignorant of this fact.
Add
input { vertical-align: middle; }
There are various ways.
Positioning relative to the parent div and position absolute to the child.
vertical-align: middle; for both input
Hey i think you want this
option you just define your vertical-align:top;
#text{
height: 40px;
vertical-align: top;
}
live demo http://jsfiddle.net/BEBAH/4/
Modify your CSS as below.
div{
border: 1px solid black;
width: 500px;
height: 50px;
float:left;
}
#text{
height: 40px;
top: 0px;
float:left;
}
I'm currently developing a small photo cms for a friends, she uses Flickr, so that what i use to get the images, or i use a gem called Flickraw. I have to somehow know when the image is a third in a row out of three, and the second out of three, and so on. Here's an screenshot which illustrates what it does.
(sorry about it is danish)
So basicly i want the middle image to be in the middle, the left to the left, and the right to the right. i have lik 8 rows .. and it is dynamicly.
Thank you!
PS. i wan't as much as possible to not use tables.
Here is my suggestion.
HTML
<div class="photo-row">
<div class="photo">Left</div><div class="photo">Center</div><div class="photo">Right</div>
</div>
CSS
.photo-row .photo {
background-color: rgb(230,230,230);
display: inline-block;
vertical-align: middle;
width: 33.33%
}
.photo-row .photo:nth-child(1) { text-align: left; }
.photo-row .photo:nth-child(2) { text-align: center; }
.photo-row .photo:nth-child(3) { text-align: right; }
Example: http://jsfiddle.net/xYZjL/
That's if you don't have control over the images and adding class names. If you DO have control you'd be safer to use class names in place of nth-child.
You are dynamically creating the page, so you can have the HTML element for each first image have class="first", each second class="second" and each third class="third".
Then you can use CSS to define float and clear layout rules for each.