Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    Apr 2013
    Location
    Germany
    Posts
    41
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Internet Explorer How to make buttons like in the Microsoft website?

    Link.
    See these buttons: "Yes", "Somewhat", "No"? How to style my buttons like these?

  • #2
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    a.mylink
    {
    background-color:blue;
    height:25px;
    padding-left:5px;
    padding-right:5px;
    }

    a.mylink:hover
    {
    background-color:#000066;
    }
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #3
    New Coder
    Join Date
    Apr 2013
    Location
    Germany
    Posts
    41
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by whizard View Post
    a.mylink
    {
    background-color:blue;
    height:25px;
    padding-left:5px;
    padding-right:5px;
    }

    a.mylink:hover
    {
    background-color:#000066;
    }
    In Mozilla and Chrome it doesn't work but it looks good in IE 10. Any suggestions?

  • #4
    New Coder
    Join Date
    Jun 2013
    Posts
    34
    Thanks
    1
    Thanked 2 Times in 2 Posts
    For Mozilla I think it should be like this,
    a.mylink
    {
    background-color:blue;
    height:25px;
    padding-left:5px;
    padding-right:5px;
    -moz-padding-left: 5px;
    -moz-padding-right: 5px;
    }

    a.mylink:hover
    {
    background-color:#000066;
    }
    For Chrome sorry I don't know...

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    For Mozilla I think it should be like this,
    a.mylink
    {
    background-color:blue;
    height:25px;
    padding-left:5px;
    padding-right:5px;
    -moz-padding-left: 5px;
    -moz-padding-right: 5px;
    }
    No. That implies Firefox needs proprietary extensions to support padding. The actual css used on that site (removing the classes etc) is:

    Code:
    button{
        border: 0 none;
        font-size: 16px;
        font-weight: 600;
        height: 34px;
        line-height: 22px;
        margin-bottom: 5px;
        margin-left: 0;
        margin-right: 1px;
        padding: 4px 11px 10px;
        color: #FFFFFF;
        background-color: #00CCFF;
    }
    
    button:hover{
        background-color:#24459A
    }
    Firebug (see sig) will let you view the html/css used on any website (or you can use Opera Dragonfly, Chrome Dev Tools (or IE dev tools if you must))
    Last edited by SB65; 07-06-2013 at 09:22 AM.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #6
    New Coder
    Join Date
    Apr 2013
    Location
    Germany
    Posts
    41
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    No. That implies Firefox needs proprietary extensions to support padding. The actual css used on that site (removing the classes etc) is:

    Code:
    button{
        border: 0 none;
        font-size: 16px;
        font-weight: 600;
        height: 34px;
        line-height: 22px;
        margin-bottom: 5px;
        margin-left: 0;
        margin-right: 1px;
        padding: 4px 11px 10px;
        color: #FFFFFF;
        background-color: #00CCFF;
    }
    
    button:hover{
        background-color:#24459A
    }
    Firebug (see sig) will let you view the html/css used on any website (or you can use Opera Dragonfly, Chrome Dev Tools (or IE dev tools if you must))
    Thank you, you are right.

  • #7
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,976
    Thanks
    15
    Thanked 229 Times in 229 Posts
    You don't even need to use a button. You can use a div with a class, and style it to your hearts content.
    Using a button, li, p or any other element with inherent style, means that you have to 'style away' that inherent style to get what you want. Much, much simpler to just use divs and style for what you want, without having to style away stuff.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #8
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by AnnaMaria View Post
    For Mozilla I think it should be like this, [...]

    -moz-padding-left: 5px;
    -moz-padding-right: 5px;
    Umm... LOL.

    Quote Originally Posted by SB65 View Post
    The actual css used on that site (removing the classes etc) is:
    You forgot font-family:

    Code:
    font-family: Segoe UI, Tahoma, Helvetica, sans-serif;
    Segoe UI actually refers to Segoe UI Semibold due to font-weight: 600.

    Quote Originally Posted by DrDOS View Post
    You don't even need to use a button. You can use a div with a class, and style it to your hearts content.
    Using a button, li, p or any other element with inherent style, means that you have to 'style away' that inherent style to get what you want. Much, much simpler to just use divs and style for what you want, without having to style away stuff.
    Please consult the HTML spec:

    Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.
    That said, an a element would be an acceptable alternative if looking for an easier-to-style element.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #9
    New Coder
    Join Date
    Apr 2013
    Location
    Germany
    Posts
    41
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Arbitrator View Post
    Umm... LOL.

    You forgot font-family:

    Code:
    font-family: Segoe UI, Tahoma, Helvetica, sans-serif;
    ...
    Now with this everything fits.

  • #10
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,976
    Thanks
    15
    Thanked 229 Times in 229 Posts
    Quote Originally Posted by Arbitrator View Post
    Originally Posted by DrDOS:
    You don't even need to use a button. You can use a div with a class, and style it to your hearts content.
    Using a button, li, p or any other element with inherent style, means that you have to 'style away' that inherent style to get what you want. Much, much simpler to just use divs and style for what you want, without having to style away stuff.

    Please consult the HTML spec:



    That said, an a element would be an acceptable alternative if looking for an easier-to-style element.
    SERIOUSLY ! You could get by with just one block element, and maybe one inline element, and a few things like the a element for links, and code an entire page easily. It's not about THEM inventing clever elements and dictating how to use them, it's about US coding pages that work in different browsers on different OS'es
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #11
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by DrDOS View Post
    SERIOUSLY ! You could get by with just one block element, and maybe one inline element, and a few things like the a element for links, and code an entire page easily. It's not about THEM inventing clever elements and dictating how to use them, it's about US coding pages that work in different browsers on different OS'es
    Even from a purely practical perspective, a div element would still be suboptimal. The most optimal solution would be a submission button element within a form element. That works without client-side scripting, it provides a clear purpose for the content to automated technologies and the next person looking at your code, and, incidentally, it complies with the requirements of the HTML specifications.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #12
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,976
    Thanks
    15
    Thanked 229 Times in 229 Posts
    Quote Originally Posted by Arbitrator View Post
    Even from a purely practical perspective, a div element would still be suboptimal. The most optimal solution would be a submission button element within a form element. That works without client-side scripting, it provides a clear purpose for the content to automated technologies and the next person looking at your code, and, incidentally, it complies with the requirements of the HTML specifications.
    I use those. But I also use div or p elements that call a JS function which does some work before it submits the form. Both methods work great, and the code is simple and transparent, I use whichever is best in a given situation.

    One problem we have is all these different groups which know what is best for us, the CSS people, the JS people, the HTML people, etc.,etc., and each has their own version of the Gospel, and wants it done with their code, their way. And we have to choose what works best in a given situation.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #13
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    How do you create with javascript?

  • #14
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can actually used images if you're not into coding the css. Just make a ready made button image with those texts within it.

  • #15
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Make a database in Web

    Dear all,

    I have been an Access database developer. For a while I was away from programming. Now, back, and a friend asked me to make him a multi-user database web-based. It's a simple database to keep and update the information of the employees of his company. About 10 to 15 users should be able to access the database from different locations (from the web) and make new record / update the data. I have a domain (bought from Google) and host too.

    Would I be able to make a database just by HTML coding? I read some guide and see to make Forms and Tables by HTML, but where the data will be recorded??

    Could you please help me from the first step (a to z)? As I am new to HTML and web based database programming. What should I do? Is it more HTML or CSS??

    In Aceess, I make Tables, Queries, and then Forms and Reports. I make some modules (coding) and then in a netwrok database is shared. Users have username and password and can connect, make records, and update in the same time.
    How can do such thing in the web??

    Thank you very much for your help.

    Best Regards,
    J.E.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •