Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Css dynamic positioning

    Hi guys,i have got a little menu on my web-page,it is in a div and i want items of that menu to automatically resize while i resize my page in a browser.setting width to percentage didn't help
    HTML
    [
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link type = "text/css" rel = "stylesheet" href = "home.css"/>

    </head>

    <body>

    <div id = "menu">

    <ul>
    <li><a href = "#"> Algebra Liniowa </a>
    <ul>
    <li><a href = "#">Link item</a></li>
    <li><a href = "#">Link item</a></li>
    <li><a href = "#">Link item</a></li>
    <li><a href = "#">Link item</a></li>
    <li><a href = "#">Link item</a></li>
    </ul><!-- end of the inner ul-->
    </li><!-- end of the main li-->
    </ul><!-- end of the main ul-->

    <ul>
    <li><a href = "#"> Matematyka Dyskretna </a>
    <ul>
    <li><a href = "#">Link item</a></li>
    <li><a href = "#">Link item</a></li>
    <li><a href = "#">Link item</a></li>
    <li><a href = "#">Link item</a></li>
    </ul><!-- end of the inner ul-->
    </li><!-- end of the main li-->
    </ul><!-- end of the main ul-->
    <ul>
    <li><a href = "#"> Kalkulatory </a>
    <ul>
    <li><a href = "#">Link item</a></li>
    <li><a href = "#">Link item</a></li>
    <li><a href = "#">Link item</a></li>
    </ul><!-- end of the inner ul-->
    </li><!-- end of the main li-->
    </ul><!-- end of the main ul-->
    <ul>
    <li><a href = "#" id = "szukaj">Sciągnij</a>
    <ul>
    <li><a href = "#"></a></li>
    </ul>
    </li><!-- end of the main li-->
    </ul><!-- end of the main ul-->
    </div><!-- end of the menu-->
    <table id = "table">
    <th id = "header">HEADER</th>
    <tr id = "row"><td>ROW</td></tr>
    </table>
    <footer id = "footer">
    <ul>
    <li><a href="#">O nas</a></li>
    <li><a href="#">Skontaktuj się z nami</a></li>
    </ul>
    </footer>


    </body>
    </html>

    ]

    css
    [
    body{
    background-color:#562500;
    background:url('image_for_website.jpg') repeat;
    }
    #menu {
    width:60%;
    height:35px;
    margin-left:auto;
    margin-right:auto;
    margin-top:-5px;
    padding:3px;
    border-radius:0px 0px 3px 3px;
    box-shadow:1px 2px 3px 2px #1F0000;
    -moz-box-shadow:1px 2px 3px 2px #1F0000;
    -webkit-box-shadow:1px 2px 3px 2px #1F0000;
    text-shadow:1px 1px 1px black;
    border-bottom:1px solid rgba(255,255,255,0.2);
    background:rgba(0,0,0,0.2);
    }

    #menu ul{
    margin:0;
    padding:0;
    }
    #menu li{
    margin:0;
    padding:0;
    list-style:none;
    float:left;
    position:relative;
    }

    #menu ul li a{
    text-align:center;
    font-family:"Comic Sans MS", cursive, sans-serif;
    font-size:1em;
    text-decoration:none;
    height:39px;
    width:200px;
    display:inline-block;
    color:white;
    }
    #menu ul ul{
    position:absolute;
    visibility:hidden;
    line-height:40px;
    top:39px;
    }

    #menu ul li:hover ul{
    visibility:visible;
    background:rgba(51,23,0,1.0);
    }
    #menu ul li:hover ul li{
    border:1px inset black;
    margin:0px -1px;
    }

    #menu ul li:hover ul li a:hover{
    background:rgba(64,21,0,0.5);
    }
    #table{
    width:60%;
    height:270px;
    margin-left:auto;
    margin-right:auto;
    margin-top:50px;
    border:1px inset rgba(255,255,255,1.0);
    border-radius:1px;
    border-collapse:collapse;
    }
    #header{
    height:10%;
    text-align:left;
    font-size:16px;
    font-family:"Comic Sans MS", cursive, sans-serif;
    border-bottom:2px solid white;
    background-color:rgb(200,200,155);
    }
    #row{
    font-size:14px;
    font-family:"Comic Sans MS", cursive, sans-serif;
    word-wrap:break-word;
    background-color:rgb(155,100,55);
    }
    #footer{
    position:fixed;
    border-top:1px inset rgba(255,255,255,0.4);
    border-radius:2px;
    width:20%;
    float:right;
    margin:0;
    padding:0;
    bottom:0;
    right:0;
    height:30px;
    background:rgba(0,0,0,0.2);
    box-shadow:0px 2px 2px 3px rgb(0,0,0);
    }
    #footer ul{
    margin:0;
    padding:0;
    line-height:30px;
    }
    #footer li{
    list-style:none;
    position:relative;
    float:left;
    padding:0px 5px;
    width:20%;
    }

    #footer ul li a{
    font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    text-decoration:none;
    height:20px;
    width:30px;
    color:white;
    }
    #footer ul li:hover {
    background-color:rgba(0,0,0,0.4);
    }
    #footer li:nth-child(2){
    width:70%;
    border-left:1px solid black;
    margin:auto;
    }

    ]

  • #2
    Regular Coder Nerevarine's Avatar
    Join Date
    Jan 2013
    Location
    Phendrana Drifts, Tallon IV, W-Class
    Posts
    285
    Thanks
    0
    Thanked 17 Times in 17 Posts
    Blog Entries
    3
    Okay, first of all, use the
    Code:
     Code and /code
    tags. Secondly, can you be more specific about your problem? Which div do you want help with?
    Time kills us in our sleep and we watch it happen in our dreams. -K.K.
    THE END-ALL PROGRAMMING REFERENCE: CLICK HERE (Courtesy of Major Payne)
    My username was previously L0adOpt1c. :: Please read this before posting in the HTML/CSS forum.
    Validate your HTML here and your CSS here. :: Need basic HTML/CSS tutorials? Click here, don't post about it.

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,217
    Thanks
    23
    Thanked 605 Times in 604 Posts
    What you want to look into is called Responsive web design, google it.
    You might also want to look into Twitters Bootstraphttp://twitter.github.io/bootstrap/index.html, It's my favorite.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Tags for this Thread

    Posting Permissions

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