Getting initial to work at the top of the code?

HTML & CSS
1

How would I get: initial to work at the top of the code?

Working code: Links at the top

I was told to ask in here because it involves a CSS answer, not javascript.

This specifically:

It would take some kind of CSS change to hide the initial image. I recommend that you get the advice of CSS people to find out the CSS changes to get that initial one to work, and whether it means adding another classname to it, or some other technique.

.initiale {
  position: relative;
  width: 260px;
  height: 168px;
  background: url("https://i.imgur.com/BBYxKcf.jpg");
  border: 3px solid #0059dd;
  cursor: pointer;
}

p {
  font-family: Tahoma;
  font-weight: bold;
  font-size: 30px;
  color: #0059dd;
  line-height: 40px;
  text-align: center;
}

.initiale::before,
.initiale::after {
  content: "";
  position: absolute;
  top: 0;
  left: 86px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.initiale::after {
  left: 177px;
}

.linkse {
  width: 266px;
  height: 174px;
  overflow: hidden;
}
2

I think that it must be asked. Why do you want initial at the top of the code, instead of where it works?

1 Like
3

To “work” how? What is it you want to achieve?

4

I wanted to know if I can place it at the top of the code in the html instead of in the middle.

5

Then the question is the one Paul just asked: why?

6

The flow of it.

So that, it goes from:

The image

then to the links.

7

In the code you’ve posted, initiale is the div which wraps everything apart from the audio. In what way do you think it could be moved “to the top”?

8

Right now in the code I posted it is at the top, but when you click on it the links don’t appear.

I’m trying to get the links to appear when you click on the image.

9

Ah, not two dimensional, but three dimensional top. I don’t see any z-index rules, so I’m guessing it’s absolute position interfering. If you temporarily add
outline: solid 1px #0AF;
to the
initiale::before, initiale::after
does the outline show that to be over the click target?

10

I don’t understand, what’s the inclusion of Outline meant for?

What purpose does it serve?

12

It lets you easily see where linkse::before and ::after are, and whether or not they are intercepting click events intended for what’s below them

975Ă—638 355 KB
.

off-topic “linkse” is that a Scandinavian spelling?

13

It’s because he has linksa and linksb and linksc and linksd and so on as well.

1 Like
14

He does the same with playa and playb and pausea and pauseb and hidea and hideb too.

Can someone here please help to educate him on the error of his ways?

1 Like
15

@asasass: I see that you have once again edited you initial post, long after the discussion has moved on, to add significant information, despite the number of times you have been asked not to do that. You seem determined to make life as difficult as possible for those attempting to assist.

In your working code, initiale is a separate div which comes after the links div. In your non-working code, you have not moved initiale above links; you have used it as a wrapper for everything. I suggest you amend the HTML as a first step, and move the div to the top, if that’s what you want.

16

We have been trying for many months, but he prefers to ignore sound advice and do things his own way. :rolleyes:

1 Like
17

When editing a post, the question that must be asked is “How can anyone that’s already viewed my post, going to find out about the changes that I’m making?”

Most of the time people that are actively involved, cannot learn about the edits that you’ve made to a post. Because of that, it’s best to restrict edits to fixing the occasional spelling mistake. When you forget to add new information to a post, you really need to place that new information in a new post.

2 Likes
18

re poor naming: Well, I’m willing to confess. Been there, done that.

At the time I didn’t know any better and it “worked”. I didn’t have much trouble keeping things sorted when there was only a little of it and it was fresh in my mind. But for larger amounts and when I had been away from it for a while, I had to figure out all over again what it was I was doing. Fun, not.

I have since become a little bit better at choosing what names to have. And I have become a bit better at not writing code that isn’t needlessly bloated. I wouldn’t say my code is %100 DRY (Don’t Repeat Yourself) but I try my best. Especially when I catch myself repeating myself.

19

Sometimes @asasass asks “which is better” of different sets of code.

When it comes to comparing these two code samples, one where separate class names are used:

/* code for button a */
.playa { ... }
.pausea { ... }
.hidea {display: none;}

/* code for button b */
.playb { ... }
.pauseb { ... }
.hideb {display: none;}

/* code for button c */
.playc { ... }
.pausec { ... }
.hidec {display: none;}

and one where the same classnames are used:

/* code for button a */
.playButtona .play { ... }
.playButtona .pause { ... }
.hide {display: none;}

/* code for button b */
.playButtonb .play { ... }
.playButtonb .pause { ... }
.hide {display: none;}

/* code for button c */
.playButtonc .play { ... }
.playButtonc .pause { ... }
.hide {display: none;}

Which way is better to use, and why?

And, are there even better ways than the above code?

20

I would argue that it’s actually bad to keep your code 100% DRY, because it is only when you have two examples of repetition, preferably three, that you should seek to remove that repetition.

1 Like
21

Except for the second having more specificity, they look the same to me in terms of being prone to problems.

I must disclose that my approach to HTML and CSS could be considered “minimalist”. I prefer to have only as much as needed and I’m easily satisfied way before any of my design efforts get anywhere near being “art”.

There are different ways of writing CSS to be sure. First I write the tag selectors. eg.

p { font-family: "Comic Sans MS", cursive, sans-serif; }

Then I try to have classes for “groups” of elements that have style properties in common with each other. eg.

.required_input { 
  font-weight: bold;
  color: #A33;
}

And finally, in extremely small doses, ids where they are unique and having it be an id won’t cause specificity problems. eg.

#company_phone_number { font-family: monospace; }