[Owncloud] Re: Mockup (1 - Files)

[Andrej Čremožnik]

Sorry if I wasn't clear before. Of course with center I meant vertical
alignment. My example shows how to put the dropdown arrow right after the
filename and make sure it's correctly vertically aligned in the middle.

I think the code is very straightforward but let me explain once more. When
I talk about line numbers, please refer to the source on
http://www.pastebin.ca/1986120

Alright then:

-lines 1 through 4: As you can see, the arrow anchor isn't in a separate
cell anymore. We put it right after the filename in the same cell. Please
ignore the absence of the image since we will be using css to display it and
not html markup.

-line 3: That is the anchor for the dropdown arrow. The image will be
inserted as a css background for the anchor. The text "Options" (or you can
change it to whatever you would like) is wrapped in an additional span so
that we can hide it later. The text there is important because it will make
sure the arrow is always in the middle of the line if the user changes the
font size - text-zoom.

-line 8 through 12: The first css block sets some properties for all anchors
inside our table cell. We display them as blocks, set their width to auto
which makes them as wide as their contents (filename) and float them left so
that they can be displayed side by side. We also set top and bottom paddings
to add breathing room and vertical-center the text.

-lines 14 through 18: In this block we set the image (arrow) as the
background for the second anchor. The image is not repeated and is centered
in the middle (50% 50% is bg position) of the block. Not that the height of
this block is top padding + text height + bottom padding (which is exactly
the same as the previous filename anchor) and the width is set in css.
Basically this block solves your problem with vertically aligning the arrow
after the filename.

-lines 20 through 24: Well there's that "Options" text that we don't want
displayed because we only want the arrow. We make the span element a block
and make it really wide. Then we align the text inside this span to the
right. Because the parent anchor element has the css property
overflow=hidden, the inner span element will be cut off and the text at the
right end won't be visible.

I hope this makes more sense and if not, just study the code some more. It's
well commented. I also want to point out that this css code works everywhere
(IE included). And the markup is semantically perfect because we use text
and not an image for the anchor element with the drop-down options.

Also make sure you don't use any paddings on the table cells (<td>s) since
you have set paddings on anchors already.

Andrej Čremožnik


On 9 November 2010 11:53, François K. <daitheflu at free.fr> wrote:

> Hi Andrej,
>
> Thank you for your help !
> ...but I think I don't get what you're pointing.
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.kde.org/pipermail/owncloud/attachments/20101109/e1ebffce/attachment.html>