Need some HTML/CSS help


#1

Hi!

I’m doing a “Quick Tour” where I have a couple of html pages where the user can go from one to the next.

Now I want to add an indicator on what page we are. I’d like to used a line of dots at the top, all white, only the current page with a black dot.
I made the changes in the “dots” branch at my github for the start-page only so far: See 1-start.html.

Unfortunately, I lack some html/css skills here… :slight_smile:
How do I get to have the current page’s dot black most elegantly?
Please see the “navdots” entry in the Haiku-tour.css how I did so far.

Thanks!


#2

The acronym elements would look better without the dotted underline, which you can remove. And for the current page’s bullet, you can use the same color as you use for the visited links - it stands out better than black. Then you can use that class on the current page’s acronym element.

CSS

    .navdots acronym, .navdots a {
        text-decoration: none;
    }
    acronym.current-page {
        color: #892601;
    }

HTML

<acronym title=“Start page” class=“current-page”>◉< /acronym>

By the way, the Previous and Next buttons are too small for a comfortable navigation with the mouse. Adding the name (text) of their functionality would really help.


#3

the click area of prev/next arrows is smaller than the blue background, I expected for the full button to be clickable


#4

Thanks very much kneekoo! Using the acronym element directly with a class to set it to another color was exactly what I needed.

I also took your other advice and now use “Previous/Next” together with the arrowheads. Makes it bigger and easier to hit.

At least QupZilla and Web+ don’t show an underline for the acronym. You sure it’s needed?


#5

It’s a visual thing - the navigation dots don’t have a clean look with the dotted underline. And the underline shows up in Chrome and Firefox, by using your link.

True, the buttons should be fully clickable. The problem is the links (anchors) are inside the spans, which have padding. The links could be styled without the spans and this problem would go away.


#6

Thanks, I just kept the CSS as you suggested.

The latest version is up at github.
I added a page on replicants and the bare fundamentals on filesystem layout, as suggested by stippi.


#7

Very nice work! It is a good selection of topics and images, and simple enough to be a good and quick read.

I think the first page should start with more positive mood, instead of focusing already on the “confusion”. Just say something cool about Haiku, before approaching the “confusion”. Actually, maybe the sentence could be rephrased in order to avoid that word :wink:

I also have the feeling that some parts of the text could benefit from some skilled native English reviewer. But please don’t get me wrong on this, I really liked this work, and I just think it deserves attention to detail, since soon it’s probably going to be one of the first impressions for new Haiku users.


#8

I’d love to see this live on the main site. Great job! I learned a thing or two.


#9

OK. How about this changed first sentence:

While Haiku shares many ideas with other operating systems, it does have a unique approach in some areas that are worth pointing out. In just a few slides, you’ll learn about the most important Haiku features and peculiarities that’ll help you get a running start.

You’re probably right. If you can be more specific, we can improve these passages.


#10

Looks better :slight_smile:

Ok. I am probably not the best person to review an English version, but I will try to take another look and take a few notes, as soon as I can.


#11

As a native english speaker, I feel the document is a possible candidate for beta release… more eyes find more bugs. It’s a great intro guide as is.


#12

I think it’s planned to have it included with the next Beta. Until then, the QuickTour is also available in HaikuDepot.

@waddlesplash, did you get a look at the user guide translation tool, and how we could deal with the QuickTour pages? I think I remember you mentioning something about that some time ago.


#13

Yes, I’ve just not had time to get to it yet. :confused: Hopefully within the next week.


#14

In 14_mounting.html, it says iso images can be mounted with a double click. This doesn’t work for me (x86_64.) Is this a sneak peek of an upcoming feature?


#15

That should work. We may want to specify “plain ISOs”, as it doesn’t currently work with anyboot images. It does work in general though, try this:

dd if=/dev/zero of=./testfile count=100 bs=1M     # to create a 100 MiB file
mkisofs -V testISO -o test.iso testfile           # to build the image

The resulting test.iso mounts with a double-click.


#16

I’ll try it out sometime. You did hit the nail on the head. I was trying it on an anyboot. That might be a point of clarification in the tour until it’s implemented.


#17

We should make this work for anyboot too. I think it’s a matter of having a MIME sniffing rule detecting the intel partitions in the image, and associating the file with mountvolume?


#18

I think it’s more than that. At least my Haiku Beta anyboot has the correct MIME type application/x-cd-image and default application mountvolume associated. But it still won’t mount on double-click.


#19

On a related note, I’ve been thinking it would be be handy to have a “diskimage register {image}; mount {image}” type command callable from the GUI.