What to do for opening and closing the menu then? How else can I do that?
I think you need to read that again. <a> is explicitly NOT allowed.
That’s why you should be using the validator. It tells you what’s wrong with your code.
2 Likes
<a>, if it contains only phrasing content
So the phrasing content would be <button>, right?
I’m sorry, I don’t understand what you could be thinking with that last remark.
-
What are you trying to do? You are trying to create a button.
-
What text should be displayed on that button? ⪢
-
Do you need an extra element to insert that text? No.
You can remove the <div> and simply use
<button id="btn">⪢</button>
Add these two rules to your styles for #btn:
font-size:1.5em;
color:goldenrod;
You can remove the rules you have for trying to position the arrow on the button.
(As far as I can see, your button layout is hopelessly broken, but that’s another issue.)
3 Likes
I will try all that out, thanks. Broken apart from what it is now? You mentioned the div not supposed to be in the button. Assuming that’s what you mean by broken.
Ok with all that done, it’s here now :
#btn {
display:block;
background:black;
width:8%;
height:5.5%;
cursor:pointer;
border:3px solid black;
filter: drop-shadow(1px 1px 5px #000);
font-size:1.5em;
color:goldenrod;
padding:0em 0.7em;
}
So this is what I saw yesterday when I validated, and just now. Seems to relate to the page source and not what I have on CodePen.
You can remove the rules you have for trying to position the arrow on the button.
So, can I do this then?
<button id="btn" type="button"><span>⪢</span></button>
I can then position the span, as the button’s in that. If I just position <button>, it will move the whole thing, and not only the arrow. I just want to move the arrow.
It is valid to use a <span> if you actually need one, but a more normal approach (and one less likely to break at different screen resolutions and font sizes) would be to use padding or text alignment to set the text in the correct position.
When I run your code, with my adjustment, I see this at smaller screen sizes:
Ok I tried both padding and text alignment. Neither worked out. Anything else? And should I move the <button> elsewhere, since you said it should not be inside the <div>? I don’t know what to do here, trying different things.
At no point did I say the button should not be inside the div. I said it was not valid to have a div inside the button.
Then I would suspect that you have done something wrong. Without seeing the code you used, I can’t comment further.
I’m sorry. I misunderstood that. Ok here is the code.
#btn {
display:block;
background:black;
cursor:pointer;
border:none;
filter: drop-shadow(1px 1px 5px #000);
font-size:1.5em;
color:goldenrod;
text-align:center;
padding:0em 17em;
line-height: 1.61em;
}
And what are you expecting that code to do that it does not? How and where should your button appear?
@TechnoBear so I want the button where it is as it shows in the screen shot I shared earlier. Code should open/close the side menu. That it does, but now I have this long bar like you saw in that screen shot. I think that happened when you said to remove the positioning styles, and go with the padding and text alignment. I tried both these separately also, but it did not give me good results.
You want the arrow on the left, as in the screenshot in post 31? If that’s the case, why have you aligned the text center and added 17 em of padding? What effect did you expect those rules to have?
2 Likes
So again, why are you using those rules? If you want something on the right, why not align it right?
1 Like
Do you mean float:right. I’ve tried text-align:right, but it didn’t change.
