Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Stretched dotted boarder...

    Hi, I was wondering if anybody knew if it was possible to stretch a dashed boarder (top and bottom only) around my navigation, (see image.)

    The problem I am having is that the dashed boarder breaches the wrapper and width of the navigation area which is at 900px. I am unsure how to stretch across the entire page rather than just within the 900px wrapper.

    Please see the image below to see exactly what I am explaining. I hope i've explained myself clearly

    Thanks in advance!
    Attached Thumbnails Attached Thumbnails Stretched dotted boarder...-screen-shot-2011-07-04-22.20.13.jpg  

  • #2
    New Coder
    Join Date
    Jun 2011
    Posts
    46
    Thanks
    1
    Thanked 2 Times in 2 Posts
    I'm not quite sure what you're trying to do since I can only see an image of your page instead of the actual layout. So I'm not sure exactly how you're trying to place the border.

    This shouldn't be hard to do though. One way would be to set up a div block at the top and bottom of the page and put the image in there (either as one large image or a background that repeats.

    You could also try adding an actual border to the top and bottom of the outside of your layout: http://www.w3schools.com/css/css_border.asp

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, i'll give this a try. Just to give you a better idea, here's the entire page. Thanks for the reply!
    Attached Thumbnails Attached Thumbnails Stretched dotted boarder...-screen-shot-2011-07-04-23.10.10.jpg  

  • #4
    New Coder
    Join Date
    Jun 2011
    Posts
    46
    Thanks
    1
    Thanked 2 Times in 2 Posts
    What I meant was, because you're only posting an image I can't see how you are designing your page. Are you using div blocks? Tables? CSS correctly? Etc.

  • #5
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh right, I see. Here,

    Code:
    <body onload="MM_preloadImages('Images/facebookrollover.png','Images/twitterrollover.png','Images/buttons/workrollover.png','Images/buttons/resumerollover.png','Images/buttons/contactrollover.png')">
    
    <div id="header1"></div>
    
    <div id="wrapper">
    
    <div id="header"><a href="http://www.facebook.com/chardy" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('facebook','','Images/facebookrollover.png',1)"><img src="Images/facebooknormal.png" name="facebook" width="36" height="36" border="0" class="facebook" id="facebook" /></a><a href="http://twitter.com/castihardy" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('twitter','','Images/twitterrollover.png',1)"><img src="Images/twitter.png" name="twitter" width="36" height="36" border="0" class="facebook" id="twitter" /></a></div>
    <div id="nav">
      
      
      <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('works','','Images/buttons/workrollover.png',1)"><img src="Images/buttons/works.png" name="works" width="34" height="18" border="0" class="buttons" id="works" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('resume','','Images/buttons/resumerollover.png',1)"><img src="Images/buttons/resume.png" name="resume" width="44" height="18" border="0" class="buttons" id="resume" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','Images/buttons/contactrollover.png',1)"><img src="Images/buttons/contact.png" name="contact" width="48" height="18" border="0" class="buttons" id="contact" /></a></div>
        
    </div>
    </body>
    
    **CSS**
    
    body{ 
    	background-image:url(../Images/bg.png);
    	background-repeat:repeat;
    	margin: 0;
    	text-align: center;
    	font-size:14.4px;
        font-family:"PT Sans Narrow";
    	line-height:22px;
    	width:100%;
    	} 
    	
    	#header1{
    	text-align:right;
    	height:12px;
    	background-image:url(../Images/toptexture.png);
    	background-repeat:repeat;
    }
    	
    #wrapper{
    	width:900px;
    	 margin: 0 auto; 
     padding: 0; 
     	text-align:center;
    	height:1000px;
    
    }
    
    #header{
    width:900px;
    height:278px;
    margin-left:auto;
    margin-right:auto;
    padding:0 0 13px 0;
    background-image:url(../Images/headerlogo.png);
    background-position:center;
    background-repeat:no-repeat;
    }
    
    #nav{
    	width:900px;
    	height:54px;
    	text-align:center;
    	
    
    } 
    
    .buttons{
    	padding:20px 68px 0 68px;
    	text-align:center;
    }
    
    .navtrim{
    	background-repeat:repeat;
    	clear:both;
    }
    
    .logotop{
    	padding:20px 0 0 0;
    }
    
    .facebook{
    	float:right;
    	padding:20px 3px 0 0;
    	
    }
    I hope this helps.
    Last edited by WA; 07-05-2011 at 02:25 AM.

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Oh I see. Try using a separate div for this one.

    Code:
    .divider {
     width: 100%;
     height: 1px;
     border-bottom: #DDD 1px dotted;
    }
    just place it between the "I'm a web graphic designer..." and "diana j" things.

  • #7
    New Coder
    Join Date
    Jun 2011
    Posts
    46
    Thanks
    1
    Thanked 2 Times in 2 Posts
    Sammy's solution should work. You can also place an image inside that div if you don't want to use the default dotted line that is displayed by the browser.

  • #8
    New Coder
    Join Date
    Feb 2011
    Posts
    41
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Hello ,

    You can use below code do that

    Code:
    border-top:1px dashed  #ddd;
    
    border-bottom:1px dashed #ddd;
    if you are looking for another thing please let me know

  • #9
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks everyone for the help, it's really appreciated. I'll be using this board more often I think.

  • #10
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sammy's solution worked though where I inserted the divs were also within the wrapper section meaning that they only stretched 900px across rather than the entire way across.

  • #11
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,928
    Thanks
    46
    Thanked 203 Times in 202 Posts
    also try using the <hr> tag... I like this tag and feel a lot of people either don't use it or are unaware of how to use it... but it would eliminate and extra div see this site for more info regarding using the <hr> tag to get this effect

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE


  •  

    Posting Permissions

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