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

Discussion in 'Free Hosting' started by maryadav, Apr 19, 2021.

  1. maryadav

    maryadav New Member

    Messages:
    17
    Likes Received:
    0
    Trophy 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.
     
  2. garrettroyce

    garrettroyce Community Support Community Support

    Messages:
    5,601
    Likes Received:
    239
    Trophy 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.
     
  3. maryadav

    maryadav New Member

    Messages:
    17
    Likes Received:
    0
    Trophy Points:
    1
    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.
     
  4. eliteel5

    eliteel5 Member

    Messages:
    30
    Likes Received:
    1
    Trophy Points:
    8
    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: Apr 29, 2021
  5. eliteel5

    eliteel5 Member

    Messages:
    30
    Likes Received:
    1
    Trophy 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
     
  6. akx10mxa

    akx10mxa New Member

    Messages:
    15
    Likes Received:
    0
    Trophy 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.
     
  7. eliteel5

    eliteel5 Member

    Messages:
    30
    Likes Received:
    1
    Trophy Points:
    8

    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: May 13, 2021

Share This Page