SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    BoOm-Rocka! Smarky's Avatar
    Join Date
    Jun 2000
    Location
    England
    Posts
    1,319
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to do this? Links with borders

    Heyah,

    Can someone point me in the right place as to doing something like the nav bar on the left with CSS. http://www.eastofthesun.com/pi6/wood.htm

    I've tried to do this already and my efforts have produced something that crashes internet explorer the moment the page loads

    Thanks!
    Garlic bread, I've tasted it, it's the future

  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)
    Taken from the page itself:

    Code:
     <p class="navButts"><a href="../s1main.htm">Site Contents</a></p>
    This is the code for the paragraph. The stylesheet probably looks like so:

    Code:
    .navButts{
      background-color: #eee;
      border: 1px solid #ccc;
      color: #eee;
    }
    Hope this helps you out!

    --Vinnie

  3. #3
    SitePoint Addict mixmastermidori's Avatar
    Join Date
    Sep 2001
    Posts
    337
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's "P7" in the code, so I think she got the code from projectseven.com. There's a tutorial here.

    Hope that helps,
    Midori
    Nature's Sunshine herbs and supplements

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2002
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use the following on my site's stylesheet:

    div#navigation a:hover {
    color: #fff00f;
    background-color: #000000;
    }

    This is based on:
    http://www.meyerweb.com/eric/css/edge/menus/demo.html

  5. #5
    SitePoint Wizard iTec's Avatar
    Join Date
    May 2001
    Location
    Sydney, Australia
    Posts
    2,243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: How to do this? Links with borders

    Originally posted by Smarky
    Heyah,

    Can someone point me in the right place as to doing something like the nav bar on the left with CSS....
    Code:
    CSS
    a.nav {
    	display: block;
    	width: 170px;
    	margin-bottom: 10px;
    	padding: 5px;
    	padding-left: 20px;
    	background-color: #CCCCCC;
    	border: 1px solid #000000;
    }
    a.nav:hover {
    	background-color: #0066FF;
    }
    
    HTML
    <a class="nav" href="#">this is a link</a><a class="nav" href="#">this is a link</a>

  6. #6
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    573
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i downloaded p7's w3c change object class behavior but it is greyed in the behaviours panel, anyone know whats going on?

  7. #7
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by mumford1
    i downloaded p7's w3c change object class behavior but it is greyed in the behaviours panel, anyone know whats going on?
    You need to create the class css set first.

    Create a css class set in either the header or an external css file, then apply the behaviour.

    You need to have at least one css class established before you can apply the P7 behaviour as it uses the list of existing class sets during the set-up.

    The P7 behaviour could do with being a bit more 'intelligent' and could at least allow you to type in a className even though that class has not yet been created (or linked to the page).
    That way it wouldn't be greyed out.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature


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
  •