Grow your CSS skills. Land your dream job.

Help with Re-sizing navigation

  • # August 30, 2012 at 10:28 pm

    I need some help with my code … What I have happening is the clipboard shrinks in width and height as the window size is changed. But I am having some trouble getting the navigation to shrink along with it … so any help would be appreciated!!

    http://campsforchrist.netne.net/#

    #nav-main {
    width: 100%;
    height: 100%;
    position: relative;
    }

    #nav-main a {
    position: relative;
    font-family: 'permanent_markerregular', Colibri, Consolas;
    text-decoration: none;
    list-style-type: none;
    z-index: 1000;
    }

    #camps {
    text-transform:rotate(-5deg);
    -ms-transform:rotate(-5deg); /* IE 9 */
    -moz-transform:rotate(-5deg); /* Firefox */
    -webkit-transform:rotate(-5deg); /* Safari and Chrome */
    -o-transform:rotate(-5deg); /* Opera */
    }

    #camps a {
    color: #1900d7;
    font-size: 1.1em;
    position: relative;
    top: -180px;
    left: -12px
    }

    #home a {
    color: #1900d7;
    font-size: 1.3em;
    position: relative;
    top: -261px;
    left: 338px
    }

    #contact {

    text-transform:rotate(10deg);
    -ms-transform:rotate(10deg); /* IE 9 */
    -moz-transform:rotate(10deg); /* Firefox */
    -webkit-transform:rotate(10deg); /* Safari and Chrome */
    -o-transform:rotate(10deg); /* Opera */
    }

    #contact a {
    color: #1900d7;
    font-size: .9em;
    position: relative;
    top: -466px;
    right: -677px;

    }

    #references {
    text-transform:rotate(4deg);
    -ms-transform:rotate(4deg); /* IE 9 */
    -moz-transform:rotate(4deg); /* Firefox */
    -webkit-transform:rotate(4deg); /* Safari and Chrome */
    -o-transform:rotate(4deg); /* Opera */
    }

    #references a {
    color: #1900d7;
    font-size: .8em;
    position: relative;
    top: -330px;
    left: 40px
    }

    #register {
    text-transform:rotate(-4deg);
    -ms-transform:rotate(-4deg); /* IE 9 */
    -moz-transform:rotate(-4deg); /* Firefox */
    -webkit-transform:rotate(-4deg); /* Safari and Chrome */
    -o-transform:rotate(-4deg); /* Opera */
    }

    #register a {
    color: #1900d7;
    font-size: 1.2em;
    position: relative;
    top: -420px;
    right: -580px
    }



    #header_drop {
    width: 100%;
    height: 5px;
    position: absolute;
    top: 159px;
    z-index: 100;
    margin: 0 auto;
    }


    #main_content {

    width: 75%;
    height: 100%;
    margin: 0 auto;
    position: relative;
    top: 0px;
    min-width: 650px;

    }

    #main_content p {
    color: #363636;
    font-family: 'permanent_markerregular', Colibri, Consolas;

    }

    #clip-bord {
    background-image: url(clip-bord.png);
    width: 450px;
    position: relative;
    height: 225px;
    top: -151px;
    margin: 0 auto;
    background-repeat: no-repeat;
    z-index: 1000;
    }

    #marker {
    background-image: url(marker.png);
    background-repeat: no-repeat;
    width: 230px;
    position: absolute;
    height: 40px;
    top: -151px;
    margin: 0 auto;
    z-index: 100;
    }

    #bg { position: absolute; top: 60px; }
    .bgwidth { width: 100%; min-width: 665px;}
    .bgheight { height: 100%;}

    #text {
    position: relative;
    top: -155px;
    }


















    # August 31, 2012 at 2:49 am

    All of your navigation elements are positioned with pixels. Use % and it should work.

    # August 31, 2012 at 12:53 pm

    wow … guess that was kinda obvious :) … alright now I cannot seem to keep an equal height distance between the different nav a ….

    # September 1, 2012 at 3:31 am

    You can keep vertical pixel distance; it’s just the horizontal that needs percentages.

    # September 1, 2012 at 9:52 am

    well take a quick look at on a smart phone or just shrink the browser and you will see what I mean. Since I have the text and background to shrink to a certain point the distance between each link becomes too much ….

    # September 1, 2012 at 11:36 am

    Then just shrink their margin or padding. But when using a website on a phone you need a lot of space between links, because your finger takes up a certain amount of space.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".