Hey guys, I'm trying to create a simple blue border in dreamweaver like the one displayed here: www.stopfibroids.com this is the code I am currently using: body { background-image: url(r_border.jpg)top center no-repeat; background-repeat: no-repeat; margin-left: 0px; margin-right: 0px; padding-right: 0px; } How do I do this? Thank you!!
The page you found is much more complicated than you think - its using sliced images as a background, its not just a simple border using CSS.
Rounded corners are not "easy" because from the get go the web supported grids, tables and boxes. Anything rounded is a trick. Try this website. It has a list of a number of approaches. http://www.smileycat.com/miaow/archives/000044.php
Hey xira thanks for the link. BTW just clicked through your signature and home on the xira webpage has a typo! I think it should read 'company' not 'comany'
hey it's actually pretty easy to accomplish (I use divs) 1. In photoshop use the rounded corner tool to create a round cornered box the size of the site. The site you linked to is roughly 790px wide so set the rounded corner tool to 790px wide. The box has to be created on a new layer. 2. Ctrl + Click the layer with the box to select it. When its selected up the top go to Select > Modify > Contract and contract it to whatever width you want your border to be. 3. Now that the selection is contracted hit crtl+x to remove the new selection and your left with something like this... 4. Now simply join the border layer and the background layer then select the top part of the image. select from the top border to the bottom of the top rounded corners. Ctrl+C the selection open a new photoshop canvas and paste it in. Save it as something like bordertop.gif vertically flip the image and save it again as borderbottom.gif top: bottom: 5. Now you have your images just throw in the CSS .border-top { background:url(../imgs/bordertop.gif) no-repeat; width:790px; height:25px; } .border-bottom { background:url(../imgs/borderbottom.gif) no-repeat; width:790px; height:25px; } .border-content{ width:760px; padding:0 10px; border-left:solid 5px #aec5ea; border-right:solid 5px #aec5ea; } Code (markup): <div class="border-top"></div> <div class="border-content"> blah blah blah blah site content here </div> <div class="border-bottom"></div> Code (markup): If you want the text higher into the top border just make the top border image higher and change the css .border-top { background:url(../imgs/bordertop.gif) no-repeat; width:790px; height:80px; padding-top:10px; } rest of css as above Code (markup): <div class="border-top"> Heading </div> <div class="border-content"> blah blah blah blah site content here </div> <div class="border-bottom"></div> Code (markup):
Mine suggestion for you that use photo shop its the best way to create graphics and best border with attractive looks.