Aligning logo, icon, text, and selection box. Should be extremely easy, but..? | Newbie | | Join Date: Nov 2008
Posts: 6
| |
Sorry if this sounds like a dumbass newbie question. I'm getting crazy or something, but somehow I can't get this simple thing to work:
1. In general, how do I center text and/or images vertically?
2. How would I do a top bar with a logo on the left, and an icon + text + combobox (small form with one select item) on the right, all vertically centered to eachother?
Like this: 
And with "how", I mean: how with proper html/css :)
|  | Moderator | | Join Date: Aug 2008 Location: Leipzig, Germany
Posts: 3,629
| | | re: Aligning logo, icon, text, and selection box. Should be extremely easy, but..?
one possibility (maybe not the best, but working): - <div style="border: 1px solid black;">
-
<img src="img1.png" alt="large img" width="50" height="100">
-
<span style="line-height: 100px; float: right;">
-
<img src="img2.png" alt="small img" width="20" height="20" style="vertical-align: middle;">
-
some text
-
<input type="radio" style="vertical-align: middle;">
-
</span>
-
</div>
-
the basic trick is to to apply vertical-align to an inline element that determins the height of the container
note:
inline style only for demo, proper CSS belongs in a css file. (where you can simplify it a bit)
regards
| | Newbie | | Join Date: Nov 2008
Posts: 6
| | | re: Aligning logo, icon, text, and selection box. Should be extremely easy, but..?
Thanks, that seems to be somewhat in the right direction!
But two problems arise:
1. The radiobutton thing appears below (outside) the container
(tested with Firefox and IE7, in Opera it looks OK)
2. When putting actual <form> and </form> tags around the input thing, it gets messed up even more :(
(it seems to enforce a linebreak before form or something, but I really need form tags to have that input thing actually do something)
Any suggestions how to overcome that?
|  | Expert | | Join Date: Sep 2006
Posts: 5,561
| | | re: Aligning logo, icon, text, and selection box. Should be extremely easy, but..?
vertical alignment is different with input elements because there is no padding and only the margin matters.
| | Moderator | | Join Date: Aug 2008 Location: Leipzig, Germany
Posts: 3,629
| | | re: Aligning logo, icon, text, and selection box. Should be extremely easy, but..?
it depends on the actual code.
- <form> is not allowed inside <span>
- float the big image left and the <span> right should render OK (tried FF)
regards
| | Newbie | | Join Date: Nov 2008
Posts: 6
| | | re: Aligning logo, icon, text, and selection box. Should be extremely easy, but..?
Quote:
Originally Posted by Dormilich  it depends on the actual code.
- <form> is not allowed inside <span> Ah thanks, never knew that :)
But I really need <form> tags to get the selection thing actually working. So do you know any other way (other than form inside span, I mean) to get that working? Quote:
- float the big image left and the <span> right should render OK (tried FF)
Are you sure? I just tried it here and although the span part and logo are no at the same height, it seems they're now *both* below the div... What used to be a black border is now a single black line above everything.
When I change the background color of body and the div, the div seems completely empty, and the images and stuff appear below it...?
| | Moderator | | Join Date: Aug 2008 Location: Leipzig, Germany
Posts: 3,629
| | | re: Aligning logo, icon, text, and selection box. Should be extremely easy, but..?
Quote:
Originally Posted by Bram2 Ah thanks, never knew that :) it's always good to know where to look that up (I use SELFHTML: HTML/XHTML / Referenz /HTML-Elementreferenz (german only, but you might get the info though (english version suspended)) Quote:
Originally Posted by Bram2 But I really need <form> tags to get the selection thing actually working. So do you know any other way (other than form inside span, I mean) to get that working? put the <form> tags before and after the span. Quote:
Originally Posted by Bram2 Are you sure? I just tried it here and although the span part and logo are no at the same height, it seems they're now *both* below the div... What used to be a black border is now a single black line above everything. yea, there's practically no content in the <div>. apply a height to the <div> (if you don't need the border or the background you may also omit the <div>). - // CSS
-
#top {
-
border: 1px solid black;
-
height: 150px;
-
// add padding, margin to your liking
-
}
-
#left {
-
float: left;
-
line-height: 150px;
-
}
-
#right {
-
float:right;
-
line-height:150px;
-
}
-
#left *, #right * {
-
vertical-align: middle;
-
}
-
-
// HTML
-
maybe some text
-
<form>
-
<div id="top">
-
<span id="left">
-
<img width="100" height="100">
-
// you need a character to align the image in FF
-
</span>
-
<span id="right">
-
<img width="50" height="50">
-
text
-
<input type="radio"> // might need small corrections
-
</span>
-
</div>
-
and some more text
-
</form>
| | Moderator | | Join Date: Aug 2008 Location: Leipzig, Germany
Posts: 3,629
| | | re: Aligning logo, icon, text, and selection box. Should be extremely easy, but..?
found an article about clearing floats with CSS (so the height property on div is not necessary): Clearing a float container without source markup |  |
| | |  /bytes/about
We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights.
Get the best answers to your questions from over 226,295 network members.
|
