Results 1 to 10 of 10

Thread: [RESOLVED] css help

  1. #1

    Thread Starter
    eXtreme Programmer .paul.'s Avatar
    Join Date
    May 2007
    Location
    Chelmsford UK
    Posts
    25,464

    Resolved [RESOLVED] css help

    Q1/ I have 4 html sections with id sectiona, sectionb, sectionc, sectiond. 3 of these sections, i want to set the width to 305px, and centre in the webpage. sectiond, i want to set the width to 700px, and centre in the webpage. What is wrong with this css?

    section {
    width: 305px;
    }
    #sectiond {
    width: 700px;
    }
    section {
    margin-left: auto;
    margin-right: auto;
    }
    Q2/ I have several submit buttons with a class name form-submit. Again my css doesn't work...

    .form-submit {
    background-color: chartreuse;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    }
    .form-submit:hover {
    background-color: yellow;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    }
    I'm testing in chrome, but i can't give you the url for testing.

  2. #2
    PowerPoster
    Join Date
    Jun 2015
    Posts
    2,224

    Re: css help

    so you want a class for sectiona,b,c
    which means you're missing the dot . in front of section {

    then each div must have class="section"

  3. #3

    Thread Starter
    eXtreme Programmer .paul.'s Avatar
    Join Date
    May 2007
    Location
    Chelmsford UK
    Posts
    25,464

    Re: css help

    section {

    }

    Uses the element tag as the selector

  4. #4

    Thread Starter
    eXtreme Programmer .paul.'s Avatar
    Join Date
    May 2007
    Location
    Chelmsford UK
    Posts
    25,464

    Re: css help

    The section elements all display centred at 305px width. By putting the sectiond code after the general section code, i expected it to 'cascade'
    Am i going crazy or is this just a caching error on the server?

  5. #5
    PowerPoster
    Join Date
    Jun 2015
    Posts
    2,224

    Re: css help

    interesting, are you using a reset?

  6. #6

    Thread Starter
    eXtreme Programmer .paul.'s Avatar
    Join Date
    May 2007
    Location
    Chelmsford UK
    Posts
    25,464

    Re: css help

    A reset???

  7. #7

    Thread Starter
    eXtreme Programmer .paul.'s Avatar
    Join Date
    May 2007
    Location
    Chelmsford UK
    Posts
    25,464

    Re: css help

    Quote Originally Posted by DEXWERX View Post
    interesting, are you using a reset?
    It was just a cache error.

  8. #8
    Superbly Moderated NeedSomeAnswers's Avatar
    Join Date
    Jun 2002
    Location
    Manchester uk
    Posts
    2,660

    Re: css help

    The cascade in CSS works maybe slightly different than your expecting.

    .Section - the . indicates a class

    #Section - the # indicates the ID of specific item

    they both apply independently of each other, with the Id overriding the Class style as its more specific

    The cascade works on your other example, you should be able to change this

    Code:
    .form-submit {
    background-color: chartreuse;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
    }
    .form-submit:hover {
    background-color: yellow;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    }
    to this

    Code:
    .form-submit {
    background-color: chartreuse;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
    }
    .form-submit:hover {
    background-color: yellow;
    }
    the original form-submit class still applies to the item and so in the Hover you just need to add what you want to change
    Please Mark your Thread "Resolved", if the query is solved & Rate those who have helped you



  9. #9

    Thread Starter
    eXtreme Programmer .paul.'s Avatar
    Join Date
    May 2007
    Location
    Chelmsford UK
    Posts
    25,464

    Re: css help

    I was right after all of that. Clearing the cache and rebooting was the answer.

  10. #10
    PowerPoster
    Join Date
    Jun 2015
    Posts
    2,224

    Re: [RESOLVED] css help

    cool. in case you're wondering what a reset is, just google css reset.

    They normalizes css differences between browsers. They are typically included with any framework css, or if you're not using a framework you can use a reset on its own.

Posting Permissions

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



Click Here to Expand Forum to Full Width