I thought I'd ask. Is anyone really familar with CSS?

maryadav

New Member
Messages
17
Reaction score
1
Points
1
Messed up and posted this in the wrong section first time. But here we go again. (Sorry, tired.)

I was doing a update to my site and realized that I made it a little hard to really update if I wanted to add more pages since the buttons were actually edited in a graphics program. Is there any way to have CSS print text on the buttons without me using the graphics program so I can make it easier to update? Thanks. (If I can figure this out, all I need to do is change one, maybe two files, and that's it.)

The site in question is here.
 

garrettroyce

Community Support
Community Support
Messages
5,611
Reaction score
249
Points
63
Without reading a whole lot into your problem, what you probably want is to use an <a> tag with background-image. Set the padding so the text ends up where you'd like it in the button, then edit the text.

What I would do is open your site and use the developer tools to edit the CSS on the fly (F12 button in most browsers). You can right click and inspect the button, then change the CSS.
 

maryadav

New Member
Messages
17
Reaction score
1
Points
1
Without reading a whole lot into your problem, what you probably want is to use an <a> tag with background-image. Set the padding so the text ends up where you'd like it in the button, then edit the text.

What I would do is open your site and use the developer tools to edit the CSS on the fly (F12 button in most browsers). You can right click and inspect the button, then change the CSS.
Thanks. I'll do a experimental, then get it working. Having to edit a button in a graphics program just cramps my style when I'm trying to update.
 

eliteel5

Member
Messages
36
Reaction score
1
Points
8
Thanks. I'll do a experimental, then get it working. Having to edit a button in a graphics program just cramps my style when I'm trying to update.

Hi maryadav

One of the reasons why graphic image buttons are not a good idea for websites

To begin a website to see how this functions then yes fine but for final solution then the answer is dealy avoid as much as possible unless you intend to use HTML5 canvas which involves JS

Many of your viewers wont have JS turned on which is another point I asserted some years ago when putting together a site for a small company

The reasons for this are activeX , Dlls on windows where you can use JS to interact with the underlying operating system to create instances of activex objects the write directly or read directly from clients machine not that you cannot do this with php you most certainly can

The next reasons are as follows

1: Images dont always display as no doubt you have probably identified

2: You have to pre-cache graphics in order for them to display which typically involves JS creating image arrays to do so that you reduce time to display

3: You are then left with the issues of having to edit an use graphics packages all the time to do anything with the buttons

4: Responsive design will then present you with more issues and you will need to use CSS @media rule settings and scale which can be quite a task on its own

Eg
Code:
@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Try this link It will help you enormously with CSS button creation

https://www.bestcssbuttongenerator.com/
There are also many online tutorials and other sites which provide in depth CSS tutorials for button / menu / title creation
I use three editors for doing this myself

VS code I find is probably the best of all three followed by Geany or notepadd++ , or Bluefish

Here are the links for the above

1: vsCode

2: Geany

3: Notepad++

4: Bluefish editor

All are superb for creating HTML , JS script and CSS

Vs Code being the best as you can code and see in real-time

All are open source and will run on unix / linux / windows os



Here are some good links to CSS tutorials for you

1: https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps

2: https://css-tricks.com/

3: https://www.fadelk.com/files/Resources/153/005CSS.pdf

There are many more articles on the net varying from starting point to highly professional with animations etc

These are all worth looking into and spending some time with

Hope that helps and good luck with your site

Let me know if you are still stuck and Ill see what I can do to assist or point you to areas of expertise with this


Best regards

Mark
 
Last edited:

eliteel5

Member
Messages
36
Reaction score
1
Points
8
I found an excellent set of tutorials which I'm currently following myself with reflection to CSS and html and whilst i appreciate you may already have found a solution I'm going to place a link below that all can follow So far these have proved excellent and extremely well presented I hope this helps all

HTML - CSS Tutorial 11 Part series

This will get most up and running with a more than reasonable amount of know how with regards CSS and HTML

This I found today , its superb !!

Have a good weekend
 

akx10mxa

New Member
Messages
15
Reaction score
0
Points
1
I do buttons totally in css. I didn't invent the code but found it and just modified it. No images required.
The button.css file is as follows:
ul {
list-style-type: none;
font-family: comic sans ms,toledo, comic book, arial, sans;
font-size: 22px;
margin: 0;
padding: 0;
width: 160px;
background-color: transparent;
}


li a {
display: block;
height: 28px;
border: 4px solid #008000;
border-radius: 0px 12px 0px 12px;
text-align: center;
padding: 0px 2px 5px 2px;
text-decoration: none;
color: white;
margin: 0px 0px 5px 0px;
background-color: #170504;
}

li a.active {
background-color: #FFD150; /* ACTIVE */
color: black;
font-style: normal;
font-weight: normal;
}

li a:hover:not(.active) {
background-color: #88ff88; /* HOVER */
color: black;
}

And the usage in your html is to add this line first in the body:
<link href="button.css" type="text/css" rel="stylesheet" />
And then to use it I do this in your html where you want the buttons to appear:
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li><a href="stores.html">Stores</a></li>
<li><a href="resolutions.html">Resolutions</a></li>
<li><a href="club.html">Club</a></li>
<li><a href="shortcuts.html">Shortcuts</a></li>
<li><a href="about.html">About</a></li>
<li><a href="help.html">Help</a></li>
</ul>

This produces the buttons and the text on them. The 'class="active"' defines the active html page and make that specific button highlight.
It works quite nice and is easy to change text font/colors/sizes etc.
 

eliteel5

Member
Messages
36
Reaction score
1
Points
8
I do buttons totally in css. I didn't invent the code but found it and just modified it. No images required.
The button.css file is as follows:
ul {
list-style-type: none;
font-family: comic sans ms,toledo, comic book, arial, sans;
font-size: 22px;
margin: 0;
padding: 0;
width: 160px;
background-color: transparent;
}


li a {
display: block;
height: 28px;
border: 4px solid #008000;
border-radius: 0px 12px 0px 12px;
text-align: center;
padding: 0px 2px 5px 2px;
text-decoration: none;
color: white;
margin: 0px 0px 5px 0px;
background-color: #170504;
}

li a.active {
background-color: #FFD150; /* ACTIVE */
color: black;
font-style: normal;
font-weight: normal;
}

li a:hover:not(.active) {
background-color: #88ff88; /* HOVER */
color: black;
}

And the usage in your html is to add this line first in the body:
<link href="button.css" type="text/css" rel="stylesheet" />
And then to use it I do this in your html where you want the buttons to appear:
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li><a href="stores.html">Stores</a></li>
<li><a href="resolutions.html">Resolutions</a></li>
<li><a href="club.html">Club</a></li>
<li><a href="shortcuts.html">Shortcuts</a></li>
<li><a href="about.html">About</a></li>
<li><a href="help.html">Help</a></li>
</ul>

This produces the buttons and the text on them. The 'class="active"' defines the active html page and make that specific button highlight.
It works quite nice and is easy to change text font/colors/sizes etc.


A small bit of advise for you , "Start changing your width units px to units vw and height units px to units vh " The reason for this as I discovered the hard way is much to do with responsive design

If you like to read up on this then follow this link below for additional tips

Fun with viewports

Now you make responsive design far easier as instead of targeting one view port and not all, you now target all

Yes you can do this media queries as stated in previous posts but .... Any idea how many screens there are now on the market on top of which you will have to target both portrait and landscape to target all.

Here is an example which you can also find on git hub of all the media breaks you would have to implement

Responsive design

Its still good to know some of this anyway , how ever talk about make it hard for yourself while you wrack your brains trying to work out how to cut down your code as much as possible where humanly possible

I would read some of this at any rate but ideally you wont flex displays with CSS and without the shear hard efforts that the above link presents although there will be I'm sure occasions where you need to do this

This had me going for nights on end as to how do I target all devices without all of this code Ouch !!

When to use rem , em , px, and %


Another interesting / educational topic I would read

Its where this pays to look into this in depth and not just at one link but many with regards any subject matter in relation to any topic and consider all suggestions for expertise in these areas

Please note there are tutorials on the net in which their coding is not correct to start with just to make life even more of a misery that coincidently some do deliberately as I also found out and much to my despise often asking ,

"In today's world where all need to know so much is this really to anyone's advantage to teach people to do things and approach subjects all the wrong way round "

Additional tips

Use comments in your CSS file These will help you enormously when debugging your code whilst also prompting you as to what you have done and why

HTML Code for lets say a file named button.html


Code:
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<! -- This is how you write a comment in HTML -->

<! -- link to  our css style sheets  which is  folder cssfolder in this  case  -->

<linkrel="stylesheet"href="cssfolder/button.css">
<title>Document</title>
</head>
<body>


<! -- Enclose all in container so that I can use display = flex -->
<divclass="container">
<buttonclass = "btn">Click me </button>

</div>
</body>
</html>

Here is where we define the css style sheet


EG
Code:
/*Google fonts for use in your webpage should always be the first lines in your css file*/

@importurl('https://fonts.googleapis.com/css2?family=Lobster&family=Teko:wght@300;400;700&display=swap');


/* CSS should then after importing fonts begin with a reset function */


*{
padding: 0;
margin: 0;
box-sizing: border-box;

/* More information on this can be found at address
* https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
*/

}

/* set up general style for body and html over all */

body,html{

background-color: rgb(0, 0, 0);
font-size: 20px;
color:rgb(255, 255, 255) ;
padding: 10px ;

}

.container {

/* I want this to be flex for responsive design */
display: flex;
/*define the width */

/*80% of the view port */
width: 80vw ;

height: 90vh ; /*90% of the viewport */
border-style: solid ;
border-color: white;
border-width: 1px; /* Here ive used px top express width */

/* lets give it some padding and alignment */
/* add padding */
padding :5px ;
margin:auto; /*centralise this container in the page */
/* now centralise content for example */
justify-content: center;
align-items: center;


/*Lets make the corners rounded on this  CONTAINER */

border-radius:10px ;

}

/* Call the class name that refers to the object */


/* In this  case  what happens when we hover over the button  object */

/*  Class : event */

.btn:hover{

/* Change  the  text colour  to  what ever you want VS is  great for this */

color:rgb(240, 214, 15) ;
}


/ * What do we want to see when button is focused  with in * /


.btn:focus-within
{

color:white ;
}


/* DEFINE  THE BUTTON */

.btn {

/*I want this to adjust with box sizing Everything in CSS is a box */

display:flex;

/*Center all items */

align-items:center;


justify-content:center;

/*Notice comments to prompt what we have done
Make liberal use of comments to break CSS code into discrete sections. Use “sentence case” comments and consistent text indentation
*/


width: 30vw; /* Note using single line comment with units now being in vw */
height: 7vh; /* Here I use VH */

/* Change the background color */

background-color: hsl(219, 100%, 50%);

/* Change foreground color */
color:red;

/*Lets change the font */

font-family: 'Teko' , Georgia, 'Times New Roman', Times, serif;
font-weight: 500;
font-size:4vw;
border-radius: 5px;

}

Having got this far you would then use JS to add code to the button.onclick event or using which ever variation of JavaScript framework you dice best suites your requirements

If this a form element then this would be set in your action = script which might call php server side function or another js function or set of functions depending

I hope some may benefit from suggestions made to date

Its a huge subject to take in just on its own and will take you some time so that you understand what your doing , "Patience , this doesn't come in a day , 21 days or even a year 2 , 3 ,5, 10 , little do some perceive despite fast track and apps supposedly that do this all for you "

Hand coding will always be far the best approach to this

That is the only way to become decent professionals


"Often the best learning comes from the hardest of experiences "

Have a good day
 
Last edited:
Top