When trying to position items, temporarily set the parent div to an easily recognisable background-colour. I use snow, Aqua, lime or red because they are easy to type. The problematic item should then be seen and how it it positioned within the enclosed parent.
1 Like
Is “goldenrod” a background-color?
Try changing the button background-color.
Edit:
The color should be applied to the button’s parent.
@John_Betong yes it is a background color, as far as I know, listed in the HTML colors. I already tried changing the button background color.
“Goldenrod” is a color which can be applied to either but not both background-color and foreground color. The former can just use background : goldenrod; and the latter color: goldenrod;
I will try later, when I’m on the desktop to explain how I would position the button contents.
1 Like
@John_Betong ok thanks, I’d appreciate that. I didn’t apply goldenrod to both. I just applied it to the arrow only.
With reference to Post: 40
Here we go:
https://this-is-a-test-to-see-if-it-works.tk/sp-a/ladans37/index-001.php
Edit:
The basic idea is to:
1 start with an outline
2. create and position containing elements
3. put text, etc inside the elements
4. remove background colours, borders, etc when complete.
You still seem to be having a problem with the basics of CSS. float will position the <button>, and text-align will position the text within the button. You really need to stop playing about with animations and fancy effects for a while and spend some time learning the basics of layout, rather than continually guessing at how things work.
This is not the first time I or others have advised you to do this. There are plenty of resources around, such as https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics
I don’t have a problem with that. I know what each of them do. I’m just trying to find out why when I move just the arrow, the whole element moves. I’ve tried text-align, and it didn’t work out.
Use the link to open the web page, view the source and make a note of the CSS and HTML script.
1 Like
@John_Betong ok cool, so I see here, you’re using text-align more than once. I didn’t know you could do that.
#btn {
/*
background:black;
border:none;
padding: 0em 17em;
line-height: 1.61em;
cursor: pointer;
filter: drop-shadow(1px 1px 5px #000);
text-align: center;
text-align: left;
text-align: right;
display: inline-block;
width: 4.2em; height: 1.5em;
font-size: 1.5em;
line-height: 1.88em;
background-color: snow; color: goldenrod;
*/
}
Look again and notice absolutely nothing is being used because every statement is between /* … */
They are only there to be copied and pasted and to observe their effect.
Yes noticed the comment outs. Ok so I’ll put that in with those.
And now I get this
#btn {
/*
background:black;
border:none;
padding: 0em 17em;
line-height: 1.61em;
cursor: pointer;
filter: drop-shadow(1px 1px 5px #000);
text-align: center;
text-align: left;
text-align: right;
display: inline-block;
width: 4.2em; height: 1.5em;
font-size: 1.5em;
line-height: 1.88em;
background-color: snow; color: goldenrod;
*/
}
Played with it some, and eliminated some properties
#btn {
background-color: snow;
color: black;
border:none;
display: inline-block;
text-align:center;
width: 3em;
height: 3em;
}
Is there anything else I should do with the CSS you shared?
The CSS was mostly from your original script and only included to show that nothing was required in order to produce the wire frame similar to Post #40.
The wire frame on the web page was to be adjusted to meet your requirements, tested after each modification to ensure the script remained responsive and only then was formatted content to be added.
I would suggest deleting all your script and starting again with only the wire frame then gradually add the required content. After the content is responsive then to add fonts, colors, shading, etc.
I’ll see what I can do. Found a tutorial actually that looked helpful.
Ok I decided to give it another try. So I added this :
#btn::after {
position: absolute;
right: -27px;
top: 3px;
text-align:center;
content: '⪢';
color: #fff;
font-size:1.5em;
font-weight: bold;
transform: translateX(0);
transition: all 0.4s;
}
But now, getting this all on my blog seems difficult, as it does not look good. Tried it earlier today before making this change for the button. Everything was fine, except the button wasn’t showing up, and the nav itself was misaligned a little bit.