CSS Auto resize menu coding for reference

Asked By fox riley 0 points N/A Posted on - 12/19/2012

I am not an expert in CSS coding but can understand the coding a bit, can anyone help me by sending me the css auto resize menu coding.

• Status: Open
• Question Views: 952
• Answer Count: 3
• Vote Up 0 Vote Down

• Answer Accepted: Yes
• Question Category: .NET Programming

Best Answer by Luker Malcom

Go To Solution

Best Answer

Best Answer

Answered By Luker Malcom 5 points N/A #157137

CSS Auto resize menu coding for reference

Hey there,

Auto-resizing in CSS is most likely done to make sure that the page you are creating will fit perfectly on any type of screen resolution. This capability is only supported on CSS3 and since it’s fairly new, older browsers does not support it.

Let us say that you want to resize a background image.

With new development created in CSS3, you can now use ‘background-size’ to make sure that the image will keep its aspect ratios even if its width or height is defined.

Let the length measurement be:

background-size: width height;

Now let’s use it in a CSS3 code.

body{
    background: #000 url(image_200x200.jpg) center center fixed no-repeat;
    background-size: 100px 200px;
}

In the example CSS code above, we have set the width to half of its original size and retain the height. This code can be simplified as:

    background-size: 100px;

This code is identical with the above because it simply infers that without defining the height, CSS3 will automatically assume its on ‘auto’, which is the same size as the image’s original height.
Hope this helps you.

About Luker Malcom

Questions
0

Answers
173

Best Answers
108

• Vote Up 0 Vote Down

• Posted on - 01/21/2013
• Question Category: .NET Programming

Answered By Shifflett Laurel 0 points N/A #157138

CSS Auto resize menu coding for reference

Hellow Fox Riley,

I have realized the matter of your concentrations.

As a web Designer I want to suggest you to use the following CSS3 properties:

resize: none or both or horizontal or vertical

For example: The division can be resized as:

div
{
resize:both;
overflow:auto;
}

The resize property is supported in Firefox 4++,Safari,Chrome.

The resizing code for javascript:object.style.resize="both"

I hope you will understand .

Thanking you

Shifflett Laurel

About Shifflett Laurel

Questions
2

Answers
154

Best Answers
78

• Vote Up 0 Vote Down

• Posted on - 01/21/2013
• Question Category: .NET Programming

Answered By Taylor Laura 15 points N/A #157140

CSS Auto resize menu coding for reference

Hi,

 

Here’s a detailed solution for this one.  

 

First program your menu box similar to this one:

 

    <div id="YourMenuBoxContainer">  

        <div id="MBox1"></div>

        <div id="MBox2"></div>

        <div id= MBox3"></div>

    </div>

 

Here’s how should your CSS be programmed to make YourMenuBoxContainer aturo resize :

 

#YourMenuBoxContainer {

    display:inline-block;

    margin: 0px auto 10px auto;

    text-align: left;

}

 

#MBox1,

#MBox2,

#MBox3 {

    width: 120px;

    height: 120px;

    background: #cacaca;

    display: inline-block;

}

 

Setting your display property to inline-block should resize your menu according to the size of your screen.

 

Regards,

Taylor

 

 

About Taylor Laura

Questions
4

Answers
102

Best Answers
77

• Vote Up 0 Vote Down

• Posted on - 01/21/2013
• Question Category: .NET Programming