Help with Re-sizing navigation

[JosiahB]

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;

}

Camps For Christ
























Camps


Home


Contact


References


Register

[Billy]

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

[JosiahB]

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

[Billy]

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

[JosiahB]

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 ….

[Billy]

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.

[Author]

Posts