CODEWITHSUNDEEP
csshtmlheader
Howard Stark
Howard Stark

Reputation: 73

How do I get the window size in css?

I am currently writing my header for my website, and I have a friend who is helping me. We have two very different computers (PC and Mac) and used different browsers to ensure that it is multiplatform and everything, and we found that the header doesn't fit on his screen. So I realized it would be easier to just get the windows width and divide that by four and make that the size of the buttons. How would I going about doing this?

Thanks so much!

EDIT: Here is what I am using:

    div.horizontal
{
    position: relative;
    width: 100%;
    height:45px;
}   

div.horizontal ul
{
list-style-type:none;
margin:0;
padding:0;
} 

div.horizontal li
{
float:left;
}

div.horizontal a
{
display:block;
background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.10) 52%, rgba(255,255,255,0) 100%), url("../img/truefactzheader.png");
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(52%,rgba(255,255,255,0.10)), color-stop(100%,rgba(255,255,255,0))), url("../img/truefactzheader.png");
background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.10) 52%,rgba(255,255,255,0) 100%), url("../img/truefactzheader.png");
background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.10) 52%,rgba(255,255,255,0) 100%), url("../img/truefactzheader.png");
background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.10) 52%,rgba(255,255,255,0) 100%), url("../img/truefactzheader.png");
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.10) 52%,rgba(255,255,255,0) 100%), url("../img/truefactzheader.png");
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=0 );
width:25%;
height:35px;
}

div.horizontal a:link,div.horizontal a:visited
{
font-weight:bold;
color:#FFFFFF;
text-align:center;
vertical-align:middle;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}

div.horizontal a:hover,div.horizontal a:active
{
height:45px;
background: -moz-linear-gradient(top,  rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.25) 100%), url("../img/truefactzheader.png");
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.25)), color-stop(100%,rgba(0,0,0,0.25))), url("../img/truefactzheader.png");
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.25) 100%), url("../img/truefactzheader.png");
background: -o-linear-gradient(top,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.25) 100%), url("../img/truefactzheader.png");
background: -ms-linear-gradient(top,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.25) 100%), url("../img/truefactzheader.png");
background: linear-gradient(to bottom,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.25) 100%), url("../img/truefactzheader.png");
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99000000', endColorstr='#99000000',GradientType=0 );
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
}

Upvotes: 0

Views: 30093

Answers (1)

BenM
BenM

Reputation: 53228

Well, assuming that your header element is 100% width of the screen, and you want the buttons to be equal width, the maths should be > 100 / 4 = 25%. Each of your buttons should occupy 25% of the header's width.

So, in your CSS you should define them as follows:

#my_header {
    width: 100%;
    float: left;
}
    #my_header a.button {
        display: block;
        float: left;
        width: 25%;
        height: 30px
    }

Please see this jsFiddle demo.

So, you need to update your code as follows (I've taken out the browser-specific properties for clarity:

div.horizontal {
    position: relative;
    width: 100%;
    height:45px;
}   

div.horizontal ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
} 
div.horizontal li {
    float: left;
    width: 25%;
}

div.horizontal a {
    display: block;
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.10) 52%,rgba(255,255,255,0) 100%), url("../img/truefactzheader.png");
    height:35px;
}

Upvotes: 3

Related Questions