Home > DeveloperSection > Forums > How can I remove extra space from the top?
ben reitman
ben reitman

Total Post:96

Points:676
Posted on    September-25-2013 9:14 AM

 CSS-CSS3 CSS-CSS3 
Ratings:


 1 Reply(s)
 1079  View(s)
Rate this:

<html>

<head>

<style type="text/css">

         #wholeborder{

        background-color : #f2f2f2;

        border-radius:5px;

        border:1px solid #222;

        resize:both;

        width:700px;

        height:320px;

        overflow:auto;           

        }

        #navigatorForLinkedIN{

         height:70px;

        }

        ul#breadcrumbs{

            list-style:none;

            /* optional */

            margin:100px;

            padding:10px 2px 10px 10px;

            background:#f2f2f2;

            width:500px;

            height:30px;

            border-radius:5px;

            border:1px solid #222;

            -moz-box-shadow:0 0 3px 0 #000;

        }

        ul#breadcrumbs li{

            float:left;

            background:;

            height:30px;

            padding:0 23px 0 10px;

            text-align:center;

            text-decoration:none;

            text-color:#7a7a7a;

            line-height:32px;

        }

        ul#breadcrumbs li.active{

            background:url(../images/greenNav.png)no-repeat right;

            color:#fff;

        }

        ul#breadcrumbs li a{

            display:block;

            text-decoration:none;

            color:#2d2d2d;

            line-height:32px;

            text-shadow:0 0 1px #222;

        }

        ul#breadcrumbs li a:hover{

            color:#000000;

            background: url(../images/greenNav.png);

        }

    </style>

</head>

<body>

<div class="wholeborder" id="wholeborder">

            <div class="navigatorForLinkedIN" id="navigatorForLinkedIN">

                <ul id="breadcrumbs">

                    <li class="active"><a href="">Connect with LinkedIn</a></li>

                    <li><a href="">Invite Friends</a></li>

                    <li><a href="">Complete Profile</a></li><a href="">

                </a></ul><a href="">

             </a></div><a href="">

                </a><div class="linkedInLoginBox"><a href="">

                    <div class="head">

                        Discover contacts that can help you land your next job

                    </div>

                    </a><div class="body"><a href="">

                        </a><a class="sn-in" href="" title="Sign into LinkedIn" id="sn-lk-sign" rel="nofollow"><span class="sn-in-sign-span">Sign into LinkedIn</span></a>

                        <div class="disclaimer">

                        All information and activity will be kept private. <a href="" target="_blank">Learn More</a>

                        </div>

                    </div>

                </div>

            </div>

</body>

</html>



Pravesh Singh

Total Post:411

Points:2881
Posted on    September-25-2013 10:06 AM

Hi Ben,

the margin is 100px, thats whats pushing it down

        ul#breadcrumbs{

        list-style:none;

        /* optional */

        margin:100px;

        padding:10px 2px 10px 10px;

        background:#f2f2f2;

        width:500px;

        height:30px;

        border-radius:5px;

        border:1px solid #222;

        -moz-box-shadow:0 0 3px 0 #000;

    }

change the margin in this, 100 is pushing it down, you can use stuff like.

margin-top:;

margin-left:;

margin-right:;

margin-bottom:;


Don't want to miss updates? Please click the below button!

Follow MindStick