[djhektik]

hello

i have a problem positioning a link in a header: the following screens will illustrate what i mean:

what i want to achieve:



what i have so far:



so basically i want to align the link so its a little higher.

the site is designed using a combination of table layout and css - as its a closed-access service delivery portal, compatibility is critical

heres the page markup:

<tr>
<td valign="top">
<div class="header">
	<H1>SADAD Portal</H1>
	<img src='...sadad_logo.png' />
	<a href="/wps/myportal/..">العربية</a>
</div>
</td>
</tr>

here's the css:

div.header {
	height: 100px;
	background: url(...header_bg.gif);
}
div.header h1 {
	display: none;
}
div.header img {
	float: right;
	margin: 0;
}
div.header a {
	float: left;
	margin: 0 0 25px;
}

[herkalees]

The easiest way to do it would involve the use of the position property. Change your CSS to this:

div.header {
	position: relative;
	height: 100px;
	background: url(...header_bg.gif);
}
div.header h1 {
	display: none;
}
div.header img {
	float: right;
	margin: 0;
}
div.header a {
	position: absolute;
	top: 75px; /*Change this value*/
	left: 10px; /*Change this value*/
	float: left;
	margin: 0 0 25px;
}

[djhektik]

that worked fine - thanks

but i'm trying to avoid such absolute positioning as that link is for language switching to arabic, which is right-to-left, so the whole interface will be mirrored. is there no way to define:

div.header a
align: left
vertical align: center

so that way in the arabic stylesheet i can change align: left to align: right

that's what i was trying to achieve with float and margin, but that didnt work

[herkalees]

Will the vertical position of the anchor always be the same? Or will both vertical and horizontal positions need to change?

[Sri]

I think positioning is the best solution, anyway pls try this:
Enclose both elements(anchor and logo) inside seperate SPANs and add fixed width to both.
hope this will help.

[djhektik]

Originally Posted by herkalees

Will the vertical position of the anchor always be the same? Or will both vertical and horizontal positions need to change?

vertical position will stay the same - the site will just be mirrored horizontally. i used this and it works fine for now:

/*Arabic stylesheet*/
div.header a {
	position: absolute;
	top: 75px;
	right: 10px;
}
/*English Stylesheet*/
div.header a {
	position: absolute;
	top: 75px;
	left: 10px;
}

Originally Posted by Sri

I think positioning is the best solution, anyway pls try this:
Enclose both elements(anchor and logo) inside seperate SPANs and add fixed width to both.
hope this will help.

...how will this help? both the logo and anchor are block-level elements, right? why should i enclose them in spans?

[Sri]

img and anchor tags are defenitely inline elements; not block level.

Block-level elements
Headings, paragraphs, lists, or tables are "large" structures containing other blocks, inline elements, or text (but see nesting rules, below). They are usually displayed as independent "blocks" separated from other blocks by vertical space (margins).

Inline or text-level elements
Hyperlinks, citations, quotations, or images are "small" structures that represent or describe small pieces of text or data. They may contain only text or other inline elements, and are usually displayed one after another on a line within the block that contains them.

[ICDesigns]

always keep in mind the ordering of your CSS.. make sure that things that are used frequently in your site are placed to the top of the list

[djhektik]

Originally Posted by Sri

img and anchor tags are defenitely inline elements; not block level.

Block-level elements
Headings, paragraphs, lists, or tables are "large" structures containing other blocks, inline elements, or text (but see nesting rules, below). They are usually displayed as independent "blocks" separated from other blocks by vertical space (margins).

Inline or text-level elements
Hyperlinks, citations, quotations, or images are "small" structures that represent or describe small pieces of text or data. They may contain only text or other inline elements, and are usually displayed one after another on a line within the block that contains them.

of course. but instead of nesting <span>'s, won't display: block; do the same thing?

[pgo]

Sorta. If you do what Sri is suggesting (wrapping spans) they'll still be inline. If you do display block, they will be block elements - if that's what you want.

Interesting problem you've got there (the ltr and rtl problem).

[NicolaFred]

put the link before the image...??
and dont use tables??? :-)

[pgo]

Originally Posted by NicolaFred

and dont use tables??? :-)

This too.