CSS Dashed Border

Discussion in 'Web Design & Coding' started by undeadpenguin, Apr 20, 2004.

  1. undeadpenguin

    undeadpenguin Bang. VIP Member

    Joined:
    Sep 1, 2003
    Messages:
    925
    Likes Received:
    4
    Location:
    US, CT
    I just made a quick rewrite of my site because I was bored. See the dashed border on the table? I'd like that to extend all the way down the page, but I don't know how; it's only going the length of the table. Here's what I have for CSS concerning that:
    Code:
    .left {
       border-right-width: 1px;
       border-right-style: dashed;
       border-right-color: #969696;
       font-family: sans-serif;
       line-height: 200%;
       color: #969696;
       background-color: #242424;
       font-size: small;
      }
    I think I may have to do something with the td to make it work though, but I dunno, I've never done anything like this. Anyone know how to do it?

    [edit]
    I also noticed it's not touching the top of the page, and I'd like it to do that as well.
     
    undeadpenguin, Apr 20, 2004
    #1
    1. Advertisements

  2. undeadpenguin

    James Photojournalist

    Joined:
    Dec 24, 2002
    Messages:
    6,662
    Likes Received:
    35
    The best way to accomplish this is to not use tables, but complete CSS. You can take a span class and position it and style it pretty much however you want. I have done this on some test pages and it works well.

    edit: Try this though,
    HTML:
    border-style: dashed #969696 1px
    instead of the separate lines for it.
     
    Last edited: Apr 21, 2004
    James, Apr 20, 2004
    #2
    1. Advertisements

  3. undeadpenguin

    undeadpenguin Bang. VIP Member

    Joined:
    Sep 1, 2003
    Messages:
    925
    Likes Received:
    4
    Location:
    US, CT
    No, that didn't work (it made the dashed border disappear). On the other thing, taking a span class, etc. can you give me an example of this? I can't figure out how to do it by looking at w3schools page.
     
    undeadpenguin, Apr 21, 2004
    #3
  4. undeadpenguin

    undeadpenguin Bang. VIP Member

    Joined:
    Sep 1, 2003
    Messages:
    925
    Likes Received:
    4
    Location:
    US, CT
    Err... nevermind. I made a drawing of what I want it to look like next and I can easily code it. I actually think it'll look cooler if I box that thing up in dashes :D
     
    undeadpenguin, Apr 21, 2004
    #4
  5. undeadpenguin

    James Photojournalist

    Joined:
    Dec 24, 2002
    Messages:
    6,662
    Likes Received:
    35
    HTML:
    <div id="dotted"> 
      	content on the right
      </div>
      <div id="left">
      	menu stuff on the left
      </div>
    HTML:
      #dotted { 
     	border-left: dotted black 2px; 
     	border-bottom: dotted black 2px;
     	background-color: #FFFFFF;
     	color: #000000;
     	padding-top: 5px;
     	padding-left: 5px;
     	padding-right: 8px;   
     }
     #dotted p {
     	margin-top: 0px;
     }
     #left {
     	position: absolute;
     	left: 10px;
     	top: 10px;
     	width: 200px;
     }
     #left p {
     	   margin-top: 0px;
    Something like that. I fixed a mistake in my previous post.
    margin-top: 0px;
     
    James, Apr 21, 2004
    #5
  6. undeadpenguin

    undeadpenguin Bang. VIP Member

    Joined:
    Sep 1, 2003
    Messages:
    925
    Likes Received:
    4
    Location:
    US, CT
    Hey, thanks I'll have to try that :D. It's great to learn something new.
     
    undeadpenguin, Apr 21, 2004
    #6
  7. undeadpenguin

    undeadpenguin Bang. VIP Member

    Joined:
    Sep 1, 2003
    Messages:
    925
    Likes Received:
    4
    Location:
    US, CT
    Well, James, I'm trying to do it the way you said with CSS, but it's not working perfectly. For some reason, links on my navigation bar thingy are the wrong color, no matter what I do. Here's the relevant code:
    Code:
    #left-nav-menu { <!-- navigation menu on the left -->
     				   position: absolute;
     				   left: 10px;
     				   right: 5px;
     				   top: 0px;
     				   bottom: 0px;
     				   width: 200px; 
     	 			    border-right-style: dashed;
     	 			    border-right-width: 1px;
     	 			    border-right-color: #927616;
     	 			    border-left-style: dashed;
     	 			    border-left-width: 1px;
     	 			    border-left-color: #927616;
     	 			    background-color: #6d1200;
     	 			    color: #927616;  
     				  }
     				  
        a.nav-menu { <!-- links for the navigation menu -->
     			   color: #002e15;
     			   border-bottom-style: dashed;
     			   border-bottom-color: #002e15;
     			   border-bottom-width: 1px;
     			  }
       
        a:hover.nav-menu { <!-- hovering links for navigation menu -->
     					 color: #002e15;
     					 background-color: #927616;
     					 border-style: dashed;
     					 border-width: 1px;
     					 border-color: #002e15;
     					}
    Code:
    <div id="left-nav-menu">Does this even <a class="nav-menu" href="http://members.cox.net/khockey1015/index.txt">work</a>?</div>
    I also tried doing it the way you said, #left-nav-menu a { etc., etc.} but that didn't work, either.

    One other thing, while the #left-nav-menu is the correct color, the body isn't. It stays white, even though I have body { background-color: #somecolor;} Is it supposed to do that?
     
    undeadpenguin, May 16, 2004
    #7
  8. undeadpenguin

    S Walch MAME 0.64 :) VIP Member

    Joined:
    Jun 2, 2003
    Messages:
    1,026
    Likes Received:
    14
    Location:
    Manchester
    ...do you actually have a link to your site, the one in our first post gives a 404 error =/
     
    S Walch, May 16, 2004
    #8
  9. undeadpenguin

    undeadpenguin Bang. VIP Member

    Joined:
    Sep 1, 2003
    Messages:
    925
    Likes Received:
    4
    Location:
    US, CT
    I don't have a site there anymore... it's index.txt not html and the browser doesn't auto load it.
     
    undeadpenguin, May 16, 2004
    #9
  10. undeadpenguin

    James Photojournalist

    Joined:
    Dec 24, 2002
    Messages:
    6,662
    Likes Received:
    35
    It's working for me now. In CSS, don't use normal <!-- comment tags. You have to use these /* Comment here */.
     
    James, May 16, 2004
    #10
  11. undeadpenguin

    undeadpenguin Bang. VIP Member

    Joined:
    Sep 1, 2003
    Messages:
    925
    Likes Received:
    4
    Location:
    US, CT
    Oh! Woops... Thanks, James ^_^
     
    undeadpenguin, May 16, 2004
    #11
  12. undeadpenguin

    undeadpenguin Bang. VIP Member

    Joined:
    Sep 1, 2003
    Messages:
    925
    Likes Received:
    4
    Location:
    US, CT
    Well... now the main parts are working but the body background still isn't... I don't understand why not. I have
    Code:
    body {
      background-color: #ffffff
      }
    and place everything in body tags, but it's still not showing up.

    [edit]
    D'oh! Nevermind, I had an HTML style comment next to it.
     
    Last edited: May 16, 2004
    undeadpenguin, May 16, 2004
    #12
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.