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 :)
7 6052 Dormilich 8,658
Recognized Expert Moderator Expert
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
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?
vertical alignment is different with input elements because there is no padding and only the margin matters.
Dormilich 8,658
Recognized Expert Moderator Expert
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
@Dormilich
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?
- 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...?
Dormilich 8,658
Recognized Expert Moderator Expert @Bram2
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)) @Bram2
put the <form> tags before and after the span. @Bram2
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>
Sign in to post your reply or Sign up for a free account.
Similar topics |
by: Brandon J. Van Every |
last post by:
What do you think of this Python logo?
http://pythonology.org/logos
Good, bad, indifferent, love it, hate it?
--
Cheers, www.indiegamedesign.com
Brandon Van Every Seattle, WA
Brandon's Law (after Godwin's Law):
"As a Usenet discussion grows longer, the probability of
|
by: Christopher Subich |
last post by:
As a hobby project, I'm writing a MUD client -- this scratches an itch,
and is also a good excuse to become familiar with the Python language.
I have a conceptual handle on most of the implementation, but the
biggest unknown for me is the seemingly trivial matter of text display.
My first requirement is raw speed; none of what I'm doing is
processing-intensive, so Python itself shouldn't be a problem here. But
still, it's highly...
|
by: Atanas Boev |
last post by:
Is there any CSS way to make a <hr /> noshadow so I don't get the default 3D
look in Netscape?
I tried to use some border-bottom to make the line, but my "line" should be
under text that is hanging to the right of a image with "float: left" and if
I use border, the line is extended under the image. Also, I thing the <hr />
divider fits the meaning of the text quite well. But if somebody has better
idea than using <hr /> thats also...
|
by: Wang, Jay |
last post by:
Hello, all,
I would like to enable some text between <SPAN
url="http://www.testserver.com/">WORD TO BE DRAGGED </SPAN>. I put some
javascript and it will extract http://www.testserver.com/ from the the span
element when I select the whole text in the SPAN and drag it.
However, I want to drag it without have to select the words between the span
element. The default mouse action will only select the words when i move the
mouse. Can...
|
by: Richard |
last post by:
http://users.cjb.net/rsb01/screen001.jpg
This is the logo image I speak of.
If Mozilla is opensource stuff, why is the windows logo attached here?
The logo is a registered trademark of M$.
| |
by: Tim Marshall |
last post by:
Access 2003. The situation is this: I have a "criteria selection form"
in which there are a many different criteria, mostly displayed as combo
and text boxes in which a user can enter stuff, click an associated
button and that criteria becomes part of the where clause of a select
statement. The selected criteria is stored on a hidden form and when
the user is ready to run their report(s), a button action goes through
the hidden form and...
|
by: Woody Splawn |
last post by:
Does anyone know where I can find an under construction logo or icon?
|
by: Linux Boy via .NET 247 |
last post by:
(Type your message here)
Hi everyone,
I would like to ask a question about aligning text within one label.
I have an application that everytime the user click on Enter Record button, they will be prompt an input box to enter employee names and sales figures.
The output then will be displyed in only 1 label using a For loop. The layout would be under 3 columns: Employee name (left justified), Sale figures (right justified) and Bonus...
|
by: John |
last post by:
Hi
I need to right justify amounts in a field with width of x digits. I have
tried Format(2.35, "##########0.00") but the numbers come out left
justified. Anyway to justify them on the right like the currency amounts
should be?
Thanks
Regards
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
| |
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
| |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| | |