...

View Full Version : Stretched dotted boarder...



hardy9298
07-04-2011, 10:33 PM
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!

kwdamp
07-04-2011, 11:08 PM
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

hardy9298
07-04-2011, 11:22 PM
Ok, i'll give this a try. Just to give you a better idea, here's the entire page. Thanks for the reply!

kwdamp
07-04-2011, 11:51 PM
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.

hardy9298
07-05-2011, 12:06 AM
Oh right, I see. Here,


<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.

Sammy12
07-05-2011, 12:29 AM
Oh I see. Try using a separate div for this one.



.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.

kwdamp
07-05-2011, 02:42 AM
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.

shankar.adodis
07-05-2011, 07:18 AM
Hello ,

You can use below code do that



border-top:1px dashed #ddd;

border-bottom:1px dashed #ddd;


if you are looking for another thing please let me know

hardy9298
07-05-2011, 11:14 AM
Thanks everyone for the help, it's really appreciated. I'll be using this board more often I think.

hardy9298
07-05-2011, 11:21 AM
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.

alykins
07-05-2011, 02:59 PM
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 :D see this (http://www.thatvoodooyoudo.com/css/styling-horizontal-rules/) site for more info regarding using the <hr> tag to get this effect



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum