20 replies [Last post]
yass
Offline
Regular
Last seen: 11 years 6 days ago
Joined: 2008-07-13
Posts: 19
Points: 0

hi there i have a div with border 1px solid in it there are some spans

so i got theese spans you see here: < | Detail Panel | Detail Panel | >

theese spans are in the div with a border

now i want to position theese spans vertically centered on the top border like image below can someone show me how to acheive this. i have a cheap method but it gets messed up if the user changes font size. i used position and top.

thanks very much its urgent

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Urgent for who? You? Then

Urgent for who? You? Then that would be your problem wouldn't it?

But you'll be waiting a long long time for help unless you can describe your problem in an understandible way. And you haven't.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 28 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

You could use absolute or

You could use absolute or relative positioning on the spans

yass
Offline
Regular
Last seen: 11 years 6 days ago
Joined: 2008-07-13
Posts: 19
Points: 0

Sorry about that I'll try to

Sorry about that I'll try to explain it better.
Right now I have a div like this:

Then in there I have theese spans like so:

Panel 1Panel 2

Now how I acheived the image above is by doing this:

Panel 1Panel 2

I used -23px because padding is 12px the border is 1px and half of the spans with padding 1px and 10px for font size. But I dont want to lock the font at 10 using css so if they choose to change their font size they can but then no longer will the panel be perfectly on the middle of the line.

I didnt use position absolute because that makes "Panel 2" fall on "Panel 1".

I was hoping for a way to position Panels on the line with half its height over the top border of container div and half the height below the border.

Its only urgent because I have been trying real hard and it's giving me a headache, I can't figure out how to do it but I'm pretty sure its possible with CSS, anything is possible with CSS haha

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 35 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You're likely to find it

You're likely to find it easier to achieve if you used a more appropriate bit of markup for this pagination. I would place the anchors/spans in a ul list arrangement then the ul would be moved up and out of it's parent.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

yass
Offline
Regular
Last seen: 11 years 6 days ago
Joined: 2008-07-13
Posts: 19
Points: 0

My problem though is how

My problem though is how much to move it up. If i set it to -23 that'll be right if the font remains at 10px. But if the font is bigger then it will not be appropriate.

M
Offline
newbie
amsterdam
Last seen: 11 years 9 weeks ago
amsterdam
Joined: 2008-07-13
Posts: 7
Points: 0

em?

if you want relative: use em instead of px or pt or %

yass
Offline
Regular
Last seen: 11 years 6 days ago
Joined: 2008-07-13
Posts: 19
Points: 0

M wrote:if you want

M wrote:

if you want relative: use em instead of px or pt or %

how does em work exactly
and how does % work? will 100% be equivalent to the height of the span?

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

yass wrote: how does em work

yass wrote:

how does em work exactly
and how does % work? will 100% be equivalent to the height of the span?

I think these are inappropriate questions for this forum. There is documentation all over the web and it's silly to ask us to repeat it here. Use google! Or go to a site that is there to teach you CSS and html, like HTML Dog

This is a help forum, not a teaching CSS forum.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

jckpalmer
Offline
Regular
UK
Last seen: 11 years 8 weeks ago
UK
Joined: 2008-07-10
Posts: 34
Points: 0

Center the DIVs

I'm sorry if I read this wrong, but if you are trying to keep these div's centered and allow users to increase the size of the text without it affecting the way the user views these links, the best way to accomplish this is the search on google for "CSS horizontal navigation" HTML Dog doesn't show this I don't think.

you'll need to recode the HTML/CSS wrap your nav in another DIV and give the wrapper some style to center the nav div's. Text-align:center; does this.

You'll need to recode the HTML to put the links in as a list so use UL/LI then style it from there.

Good luck.

id="css"
#css {
background:too tired for this!
}

yass
Offline
Regular
Last seen: 11 years 6 days ago
Joined: 2008-07-13
Posts: 19
Points: 0

Cool thanks all! I'll try

Cool thanks all! I'll try working with it. I'll be sure to give a status update! Smile

yass
Offline
Regular
Last seen: 11 years 6 days ago
Joined: 2008-07-13
Posts: 19
Points: 0

Actually everyone I want to

Actually everyone I want to rephrase my question.

So I have this div with span outside it:
Detail Panel

Now if I set the vertical-align property of image in the below example to top it will align the top of the element with the top of the tallest element on the line:

This is an

image inside a paragraph.

Now is there any way for me to set the vertical align of the span so that the middle of the element (in my case: middle of the span) is aligned to the top most element on the line(the top border of the div).

Thanks very much! Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 35 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Yass you really aren't

Yass you really aren't helping yourself with these descriptions of the problem it is very difficult if not possible to relate those two snippets of markup.

Please produce a fully formed test case of the markup to produce this effect complete with dtd and css, or better still get it up online for us to look at.

Did you take the advice of using appropriate markup for this?

Achieving what you want shouldn't be a problem; using relative units where applicable should keep elements in position.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

yass
Offline
Regular
Last seen: 11 years 6 days ago
Joined: 2008-07-13
Posts: 19
Points: 0

Sorry man here we go I

Sorry man here we go I imported the style sheet of my site and typed up the html.

http://neocodex.us/oldforum/laser.htm
http://rapidshare.com/files/129811266/laser.htm.html

So right now im getting the panels to the top of the border using top: -22px but i dont want to use definitive px as if font size changed via browser it messes up. I want to set it there with tricks ie: placing a table in a div, set div margin-left:auto and margin-right:auto to get the table horizontally centered.

Sorry guys I didn't post source like this earlier thanks Hugo and everyone for sticking with me. I'm a real "noob" at this stuff.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

No doctype. Invalid html. I

No doctype. Invalid html.

I suggest you re-read Hugo's excellent advice above until you understand it.

The menu system you are trying to emulate can't really be done satisfactorily with pure CSS and html alone, it requires javascript as well.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

yass
Offline
Regular
Last seen: 11 years 6 days ago
Joined: 2008-07-13
Posts: 19
Points: 0

Ed Seedhouse wrote:No

Ed Seedhouse wrote:

No doctype. Invalid html.

I suggest you re-read Hugo's excellent advice above until you understand it.

The menu system you are trying to emulate can't really be done satisfactorily with pure CSS and html alone, it requires javascript as well.

I tried the suggestions ie em didn't work.

Where are you getting the invalid html? There is a rapidshare link there too for download.

Are you absolutely sure it can't be done in pure css? Lets not take into consideration that font size can be changed. Is there a way now to use pure css to position a span with half its height out of the containing div.

ill attach the file here too (txt)

AttachmentSize
laser.txt 27.58 KB
Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

I'm not absolutely certain

I'm not absolutely certain of anything, including my own existance.

I'm pretty sure that you aren't really listening to either me or Hugo (and Hugo's advice is much more authoritative than mine), so I don't think I'll spend any more of my time on you with this particular matter.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 35 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

This is at a rush as I have

This is at a rush as I have to leave work and it's been a long day!

Taking your code as is, incomplete without DTD, and with the markup that isn't the best (again take the advice to markup as a list, but if you do copy the page and work on the copy) I made these changes:

To

add position:relative;

To

add position:absolute (instead of relative)and top:.8em;

To span.na_pn change padding value to .2em or whatever.

The effect you should see is that the main span is pulled up untill the text elements are bisecting the border of the parent div the em padding on the spans should keep the text centered on the line, increasing text size should result in a sidways expansion and the padding increasing proprtionally keeping the text fixed to the border.

Not sure if that's what you intended?

I must state that this is not tested in other than firefox and the markup and lack of DTD can and probably will cause issues; this is simply to show that it ought to be possible.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

yass
Offline
Regular
Last seen: 11 years 6 days ago
Joined: 2008-07-13
Posts: 19
Points: 0

Ed Seedhouse wrote:I'm not

Ed Seedhouse wrote:

I'm not absolutely certain of anything, including my own existance.

I'm pretty sure that you aren't really listening to either me or Hugo (and Hugo's advice is much more authoritative than mine), so I don't think I'll spend any more of my time on you with this particular matter.

Please bare with me I am very new at this CSS is not my thing at all. I am very very sorry if I am not bring the right information. I feel very bad for causing you nice people trying to help stress like this. I am very sorry I am trying my best to supply the right information. I appreciate the replies though, I posted on other forums and didn't even get 1 reply. So thank you very much for anything and everything you guys have done Smile

Hugo wrote:

This is at a rush as I have to leave work and it's been a long day!

Taking your code as is, incomplete without DTD, and with the markup that isn't the best (again take the advice to markup as a list, but if you do copy the page and work on the copy) I made these changes:

To

add position:relative;

To

add position:absolute (instead of relative)and top:.8em;

To span.na_pn change padding value to .2em or whatever.

The effect you should see is that the main span is pulled up untill the text elements are bisecting the border of the parent div the em padding on the spans should keep the text centered on the line, increasing text size should result in a sidways expansion and the padding increasing proprtionally keeping the text fixed to the border.

Not sure if that's what you intended?

I must state that this is not tested in other than firefox and the markup and lack of DTD can and probably will cause issues; this is simply to show that it ought to be possible.

Thanks very much Hugo I'll try this out if it's not working I'll try to fix markup and DTD. What is DTD though? I honestly don't know exactly what markup is but I'll run my code through the validators in your signature I think that should help?

Again, with all sincerity, thank you all for baring with me.

yass
Offline
Regular
Last seen: 11 years 6 days ago
Joined: 2008-07-13
Posts: 19
Points: 0

Hugo wrote:This is at a rush

Hugo wrote:

This is at a rush as I have to leave work and it's been a long day!

Taking your code as is, incomplete without DTD, and with the markup that isn't the best (again take the advice to markup as a list, but if you do copy the page and work on the copy) I made these changes:

To

add position:relative;

To

add position:absolute (instead of relative)and top:.8em;

To span.na_pn change padding value to .2em or whatever.

The effect you should see is that the main span is pulled up untill the text elements are bisecting the border of the parent div the em padding on the spans should keep the text centered on the line, increasing text size should result in a sidways expansion and the padding increasing proprtionally keeping the text fixed to the border.

Not sure if that's what you intended?

I must state that this is not tested in other than firefox and the markup and lack of DTD can and probably will cause issues; this is simply to show that it ought to be possible.

It worked thanks hugo!!!!!!!!! Now I understand some about em. Thanks very very much for the help.
Sincerely.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

yass wrote: Thanks very much

yass wrote:

Thanks very much Hugo I'll try this out if it's not working I'll try to fix markup and DTD. What is DTD though? I honestly don't know exactly what markup is but I'll run my code through the validators in your signature I think that should help?

This information is already available to you on this site, not to mention in dozens of other places on the web. You would be wise to read through the "How to" forum and then in the other forums read the "sticky" messages that are always bolded and at the start of the forum message index pages.

In short though:

1. You must have a standards triggering Doctype declaration in every page.

2. CSS won't work properly unless your html is valid and, preferably, semantic.

OK, this time I'm *really* bowing out.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.