5 replies [Last post]
Mircea
Offline
newbie
Last seen: 12 years 48 weeks ago
Joined: 2009-06-17
Posts: 3
Points: 0

Hi !

I am having a trouble with my header. It has an image( dispalyed in a ) and a text ( displayed in a ). The header is a panel build using these two elements.

The problem is that my text appears a little bit upsuide of my image align. I tryed to format the panel and also the label which contain my text but still text remain a little bit top of my image.

I used this code to format the header:

.pageHeader { color: #FFFFFF; background-color: #000064; font-weight: bold; font-size: 18px; padding-bottom: 0px; margin-bottom: 0px; border-bottom: 0px; } , also i tryed putting the "bottom" properties on the label but i had no positive results.

Please if you have an ideea help me.

Thanks,
Mircea

Mircea
Offline
newbie
Last seen: 12 years 48 weeks ago
Joined: 2009-06-17
Posts: 3
Points: 0

To be more explicit i tryed

To be more explicit i tryed to set my text and my image to be on the same line, to do that i tryed to set on 0px bottom padding,margin and border of my label but it does not change.

If you have an idea please advice me.

Thanks,
Mircea

L0LKTHXBYE
L0LKTHXBYE's picture
Offline
Enthusiast
Nederland
Last seen: 12 years 39 weeks ago
Nederland
Timezone: GMT+2
Joined: 2009-06-11
Posts: 98
Points: 0

Some HTML and maybe an image

Some HTML and maybe an image of what you're trying to accomplish would really help. I'm not sure what is, it's not HTML. If you're working with a WYSIWYG then look at your page in your browser and post the HTML you see when you View Source.

L0LKTHXBYE
L0LKTHXBYE's picture
Offline
Enthusiast
Nederland
Last seen: 12 years 39 weeks ago
Nederland
Timezone: GMT+2
Joined: 2009-06-11
Posts: 98
Points: 0

delete

Grrr.. forum acting up

Mircea
Offline
newbie
Last seen: 12 years 48 weeks ago
Joined: 2009-06-17
Posts: 3
Points: 0

Hi ! Thanks a lot for

Hi !

Thanks a lot for posting.
Those elements are from Java Server Faces. I looked in page source but what is generated there :rolleyes: it is really confuzing.

What i try there to do is to align my image with my text, to be on the same line in the flow.

I attached an image of how should look the header. The "KV" text is on the same line with "D" text which cames from the image. Now my "KV" text is a little bit upsuide of "D" text.

The image text is in the bottom of the image,( this means in the bottom of my header on user interface) but my text from label is at center of my header, and what i tryed to do was to get it at bottom to be on the same line with text from image.

Regards,
Mircea

AttachmentSize
Untitled123.png 10 KB
L0LKTHXBYE
L0LKTHXBYE's picture
Offline
Enthusiast
Nederland
Last seen: 12 years 39 weeks ago
Nederland
Timezone: GMT+2
Joined: 2009-06-11
Posts: 98
Points: 0

You want KV to be

You want KV to be bottom-aligned to the bottom of the image?

The image must remain inline then (if you've blocked or floated it, this doesn't work) and the text has to also be inline (so a

or a won't do either). In which case, you could then use vertical-align: bottom, or vertical-align: baseline, which takes inlines (like text and images) and lines one of them up with the other's bottom or text baseline. The difference between those two is, the bottom is absolutely the bottom of the text line (the bottom of the lowest letters, like "y"), while the baseline is where most of your letters' bottoms are (so not the very bottom of the letter "y" but the bottom of the letter "s" and other letters who don't have dangly tails).

Quote:

I looked in page source but what is generated there Roll eyes to heaven it is really confuzing.

You don't want to look into the steaming pit of Java source, you want to view what you have written in a web browser, who only sees HTML and CSS, and go to View, Page Source (or View Source), which will show you exactly what the browser is seeing (HTML). Post that here, because we need to see what types of elements are holding your image and the text next to it. There are a few other ways to push the text down besides vertical-align, and maybe they're easier, but that depends on what we're dealing with.