Jump to content


Photo

css borders


  • Please log in to reply
4 replies to this topic

#1 jackfusion

jackfusion
  • New Members
  • Pip
  • Newbie
  • 2 posts

Posted 07 April 2006 - 04:21 PM

here is my css

div#pullquote
{
    margin: 1em;
    background: #01f url(lefttopcorner.jpg) no-repeat;
    background-position: top left;
}

div#pullquotea
{
    background-image: url(righttopcorner.jpg);
    background-position: top right;
    background-repeat: no-repeat;
}

div#pullquoteb
{
    background-image: url(rightbottomcorner.jpg);
    background-position: bottom right;
    background-repeat: no-repeat;
}

div#pullquotec
{
    background-image: url(leftbottomcorner.jpg);
    background-position: bottom left;
    background-repeat: no-repeat;
}

.main
{
    margin: 20px;
    padding: 3% 2% 3% 2%;
    font: normal 85% arial, helvetica, sans-serif;
    color: #000;
}

.containingbox
{
    width: 100%;
    height: 100%;
    background: #FFF;
}

h2
{
    border-bottom: 10px solid blue;
    padding: 20px 0;
    text-align: center;
}

.floatleft
{
    float: left;
    width: 15%;
    display: inline;
    margin: 10px;
    padding: 0 0;
    border-right: 10px solid blue;
}

Here is my html
<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<link rel="stylesheet" type="text/css" href="borders.css">
</head>

<body>
    <div id="pullquote">            
        <div id="pullquotea">
            <div id="pullquoteb">
                <div id="pullquotec">
                    <div class="main">
                        <div class="containingbox">
                             
        <h2>Kenny's Web Site</h2>
        <div class="floatleft">
        <p>            
            <br>    
            <br>    
            <br>    
            <a href="#">More information</a>
        </p>
        </div>
        <p>            
            Lorem ipsum sit amet...
        </p>        
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

The problem I am having is the vertical border is not going to the top under the heading and not going to the bottom of the container. I tried to putting the [!--coloro:#FF0000--][span style=\"color:#FF0000\"][!--/coloro--]floatleft[!--colorc--][/span][!--/colorc--] in the p tag and the problem still not fixed. I am new at css so you might notice newbie way of doing things.

Please help!!

Have not tested in any browser only in front page 2003

#2 Ninjakreborn

Ninjakreborn
  • Members
  • PipPipPip
  • Information Technology Specialist
  • 3,922 posts
  • Age:33

Posted 18 April 2006 - 02:19 AM

border-bottom-width:
border-top-width:
border-left-width:
border-right-width
border-bottom-color:
border-top-color:
border-right-color:
border-left-color:
border-top-style:
border-bottom-style:
border-left-style:
border-right-style:
these are the tags in css to manipulate and control borders.
to set page width it's
margin-bottom:
margin-top:
margin-right:
margin-left:

------

Business Website: http://www.infotechnologist.biz

Personal Website: http://www.joyelpuryear.com

Blog Site: http://www.realmofwriting.com
Services: Web development, application development, mobile development, and custom development. All services listed on my website.


#3 spyke01

spyke01
  • Members
  • PipPipPip
  • Advanced Member
  • 74 posts

Posted 24 April 2006 - 04:41 PM

you can also do this
sample1 {
     border: 1px solid #000000;
}
sample2 {
     border: 5px solid #000000;
}
first number is the width

[a href="http://www.fasttracksites.com" target="_blank"]Cheap PHP Hosting[/a]

#4 jackfusion

jackfusion
  • New Members
  • Pip
  • Newbie
  • 2 posts

Posted 03 August 2006 - 01:59 PM

I have got it work now and would like to thank ever one for their help.  Here is the url http://kennyleitz.go...om/borders.html

the code


<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<link rel="stylesheet" type="text/css" href="borders1.css">
</head>
<body>
<div id="pullquote">
  <div id="pullquotea">
   <div id="pullquoteb">
    <div id="pullquotec">
     <div id="mainbox">

      <div id="container">
      <div id="top">Ken's Comp. Repair</div>
       	<div id="leftnav">
	 <p>Here is some basic text for the left column.
	 Hi my name is Kenny Leitz
         And here is where the right column goes. Notice that this works well in both IE and FireFox, too.</p>
	</div>
	<div id='content'>
	 <p>Hi my name is Kenny Leitz
         And here is where the right column goes. Notice that this works well in both IE and FireFox, too.</p>

	<a href="http://sexy.namedecoder.com">
	<img src="http://sexy.namedecoder.com/webimages/champagne-m-KENNY.png" width="240" height="180" alt="Knockout Exchanging Naughty Necking and Yeses" border="0"></a>
        </div>
	<div id="footer">
	 Kenny Is Cool
	</div>
       </div>
     </div>
   </div>

  </div>
 </div>

</div>
</body>
</html>



#5 jcombs_31

jcombs_31
  • Staff Alumni
  • Advanced Member
  • 2,066 posts
  • LocationFL

Posted 04 August 2006 - 04:57 PM

Wow that's a lot of divs




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users