SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict trigger's Avatar
    Join Date
    Jun 2003
    Location
    Eagan
    Posts
    342
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS-P, pseudoclasses and form positioning

    I got a search form in my template, or page. I'm trying to make the form a list element in a list id'd as "toplevellist". I want to give the form a little more margin and/or padding on the right side. You can take a look at http://www.nasi.com/test.htm to see my idea, but I'm giving it a pseudoclass of

    ul#toplevellist:searchbox li{
    display: block;
    float: left;
    width: auto;
    padding: 0 15em 0 0;
    margin-right: 15em;
    position:relative;
    }

    <li id="toplevellist:searchbox">

    in the list. I plan on using these pseudoclasses more in another list, so is there anything I'm doing wrong with my pseudoclass identifier or syntax or something? Is this something I just can't do with <form> elements?

    p.s. I know 15em is a huge amount, but its just for a test.

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    I'm not sure what you're trying to do, but you can't define your own CSS pseudo classes. Here is a listing of all the available pseudo-classes in CSS2. A few of them work in IE/Windows, most of them work everywhere else. If you need more help, let me know .

  3. #3
    SitePoint Addict trigger's Avatar
    Join Date
    Jun 2003
    Location
    Eagan
    Posts
    342
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    does anyone get what I'm trying for? A list element that is of a different class than the rest of the list elements in the unordered list, so I can set different properties for it? That doesn't seem to work either, setting the searchbox as
    ul#searchbox li{
    display: block;
    float: left;
    width: auto;
    padding: 0 15em 0 0;
    margin-right: 15em;
    position:relative;
    }
    and the list element as
    <li id="searchbox">
    doesn't seem to work, either

  4. #4
    SitePoint Zealot johno's Avatar
    Join Date
    Sep 2003
    Location
    Bratislava, Slovakia
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think CSS selector was wrong
    Code:
    ul li#searchbox {
    display: block;
    float: left;
    width: auto;
    padding: 0 15em 0 0;
    margin-right: 15em;
    position:relative;
    }
    (X)HTML is the same
    Code:
    <li id="searchbox">
    Last edited by johno; Oct 14, 2003 at 07:35.

  5. #5
    SitePoint Addict trigger's Avatar
    Join Date
    Jun 2003
    Location
    Eagan
    Posts
    342
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you very much, worked like a charm!

  6. #6
    SitePoint Zealot johno's Avatar
    Join Date
    Sep 2003
    Location
    Bratislava, Slovakia
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should probably read the syntax of CSS selectors.


Bookmarks

Posting Permissions

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