CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 2 of 2
  1. #1
    Join Date
    Jan 2010
    Posts
    161

    Help:HTML/HTML5 CSS/CSS3 Automatic alignings and resizings

    I'm not sure whether this is the right place to post these sort of requests; I'll be happy to post in a different section if someone points out where I should ask for help.

    I have some very basic knowledge of HTML, CSS; I really like HTML5 and CSS3 and now just wanted to make a simple website;

    One of the main issues I want to deal with is being able to resize and positions my objects automatically depending on the size of the screen(e.g browser). Is it possible to achieve this?

    I currently have a menu and I'd like to center it but don't know how I can do this:

    Here's the code:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <TITLE>Title of the Site</TITLE>
    </head>
    <link href="css\layout.css" rel="stylesheet" type="text/css">
    <body>
    <div id="titlestyle">
    Insert Title
    </div>
    
    <ul id="nav-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Category</a>
            <ul>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
            </ul>
        </li>
    	<li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    
    
    </body>
    </html>
    
    =====================
    CSS
    
    
    body
    {
    background-color:#CDCDCD;
    }
    
    #titlestyle{
    color:#8C7853;
    text-align:center;
    font-family: serif;
    font-size: 48px;
    font-weight:bold;
    
    }
    
    
    #nav-menu { list-style-type: none; height: 40px; padding: 0px; margin:0; }
    #nav-menu li { float: left; position: relative; padding: 0; line-height: 40px; background: #8C7853 repeat-x 0 0; }
    #nav-menu li:hover { background-position: 0 -40px; }
    #nav-menu li a { display: block; padding: 0px 50px; color: #fff; text-decoration: none; }
    #nav-menu li a:hover { color: #a3f1d7; }
    #nav-menu li ul { opacity: 0; position: absolute; left: 0; width: 8em; background: #63867f; list-style-type: none; padding: 0; margin: 0; }
    #nav-menu li:hover ul { opacity: 1; }
    #nav-menu li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
    #nav-menu li:hover ul li { height: 30px; line-height: 30px; }
    #nav-menu li ul li a { background: #8C7853; }
    #nav-menu li ul li a:hover { background: #5a8078; }
    #nav-menu li { -webkit-transition: all 0.2s; }
    #nav-menu li a { -webkit-transition: all 0.5s; }
    #nav-menu li ul { -webkit-transition: all 1s; }
    #nav-menu li ul li { -webkit-transition: height 0.5s
    Can someone tell me how I can put that menu in the middle and also how I can have it across the page horizontally, so that it automatically resize depending on the browser screen size.

    Thank you

  2. #2
    Join Date
    May 2002
    Posts
    10,943

    Re: Help:HTML/HTML5 CSS/CSS3 Automatic alignings and resizings

    Using the width property in percentages will give you resizing content. For example...

    Code:
    <div style="margin: 0px auto; width: 50%; height: 100%; background: #000000;">&nbsp;</div>
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  





Click Here to Expand Forum to Full Width

Featured