Jump to content

Archived

This topic is now archived and is closed to further replies.

jackfusion

css borders

Recommended Posts

here is my css[code]

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;
}[/code]

Here is my html
[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="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>
[/code]

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

Share this post


Link to post
Share on other sites
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:

Share this post


Link to post
Share on other sites
you can also do this
[code]
sample1 {
     border: 1px solid #000000;
}
sample2 {
     border: 5px solid #000000;
}
[/code]
first number is the width

Share this post


Link to post
Share on other sites
I have got it work now and would like to thank ever one for their help.  Here is the url [url=http://kennyleitz.googlepages.com/borders.html]http://kennyleitz.googlepages.com/borders.html[/url]

the code

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

[/code]

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.