css borders

jackfusion · April 7, 2006

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

Ninjakreborn · April 18, 2006

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:

spyke01 · April 24, 2006

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

jackfusion · August 3, 2006

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]

jcombs_31 · August 4, 2006

Wow that's a lot of divs

Sign In

css borders

Recommended Posts

jackfusion

Link to comment

Share on other sites

Ninjakreborn

Link to comment

Share on other sites

spyke01

Link to comment

Share on other sites

jackfusion

Link to comment

Share on other sites

jcombs_31

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information