SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: Layout

  1. #1
    SitePoint Member
    Join Date
    Nov 2003
    Location
    nigeria
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face Layout

    <table width ="600">
    <div align="center">
    <table>
    <tr>
    <td width="20%"></td>
    <td Width 5%></td>
    <td width="70%"></td>
    </tr>
    </table>
    </div>
    </table>

    Keeping in mind the screen resolution of user (min-640x480)
    hw can i transfer this code layout to a tableless Css layout and hw do i create a css menu that contain sub-menus

  2. #2
    \m/\m/ karinne's Avatar
    Join Date
    Dec 2002
    Location
    Aylmer, QC, Canada
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    SitePoint Addict Knightime's Avatar
    Join Date
    Jan 2003
    Location
    USA
    Posts
    376
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    chuxc, I think you will have better luck making a menu with submenus (dynamic) if you use javascript. A CSS menu can only get you so much, but if you want a simple menu, then you could probably do it. There is a great article on making a somewhat dynamic menu at alistapart.com:

    http://www.alistapart.com/articles/slidingdoors/

    Good luck.
    Troy

  4. #4
    SitePoint Addict Knightime's Avatar
    Join Date
    Jan 2003
    Location
    USA
    Posts
    376
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is part 2 to that article.

    http://www.alistapart.com/articles/slidingdoors2/
    Troy

  5. #5
    SitePoint Member
    Join Date
    Nov 2003
    Location
    nigeria
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Layout

    thanx karinne. Can u help me out on hw to create and apply ccs styles to html form controls i.e <input type="text">, <select>,<input type="button">...

  6. #6
    \m/\m/ karinne's Avatar
    Join Date
    Dec 2002
    Location
    Aylmer, QC, Canada
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure... the simple use of a class will do the job

    Code:
    .formfield {
     border: 1px solid #999;
     color: #000;
     background-color: #eee;
     font-size: 12px;
    }
     
    .formbutton {
     border: 1px solid #000;
     color: #000;
     background-color: #c33;
     font-size: 12px;
    }
    HTML Code:
    <input type="text" name="name" value="" size="40" class="formfield">
     
    <input type="submit" value="submit" name="submit" class="formbutton">
    That should work.

    And then you can always have a bit of fun and add some onfocus and mouseover effects

    Use the same code for the CSS and this for the HTML

    HTML Code:
    <input type="text" name="name" size="40" class="formfield" onfocus="this.style.background='#fff'" onblur="this.style.background='#ded'">
     
    <input type="submit" value="submit" name="submit" class="formbutton" onmouseover="this.style.background='#f66'" onmouseout="this.style.background='#c33'">
    Have fun with it

  7. #7
    SitePoint Member
    Join Date
    Nov 2003
    Location
    nigeria
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Layout

    thanx alot
    Quote Originally Posted by karinne
    Sure... the simple use of a class will do the job

    Code:
    .formfield {
     border: 1px solid #999;
     color: #000;
     background-color: #eee;
     font-size: 12px;
    }
     
    .formbutton {
     border: 1px solid #000;
     color: #000;
     background-color: #c33;
     font-size: 12px;
    }
    HTML Code:
    <input type="text" name="name" value="" size="40" class="formfield">
     
    <input type="submit" value="submit" name="submit" class="formbutton">
    That should work.

    And then you can always have a bit of fun and add some onfocus and mouseover effects

    Use the same code for the CSS and this for the HTML

    HTML Code:
    <input type="text" name="name" size="40" class="formfield" onfocus="this.style.background='#fff'" onblur="this.style.background='#ded'">
     
    <input type="submit" value="submit" name="submit" class="formbutton" onmouseover="this.style.background='#f66'" onmouseout="this.style.background='#c33'">
    Have fun with it


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
  •