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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Resizing Menu not working

    Hi Guys,

    i seem to be having a few problems with a website i am working on atm. here is my problem



    as you can see it works fine until i re-size the window, then the top menu that is set to 100% width doesn't follow the rest of the elements on the page, why is this? any help would be greatly appreciated. thanks

    Here is my code:
    Code:
    .menu
    {
    	width:100%;
    	min-width:100%;
    	height:30px;
    	padding-top:5px;
    	text-indent:5px;
    	border-bottom-style:solid;
    	border-bottom-color:#000;
    	border-bottom-width:1px;
    	background-color:#333;
    	position:absolute;
    	top:0px;
    	left:0px;
    }
    
    .leftmenu
    
    {
    	width:300px;
    	height:auto;
    	position:absolute;
    	top:195px;
    	left:50px;
    	text-indent:5px;
    	padding-top:5px;
    	background-color:#333;
    }
    
    .content
    {
    	width:900px;
    	height:auto;
    	position:absolute;
    	top:195px;
    	left:500px;
    	text-indent:5px;
    	padding-top:5px;
    	background-color:#333;
    }
    
    .rightmenu
    {
    	width:300px;
    	height:auto;
    	position:absolute;
    	top:195px;
    	left:1560px;
    	text-indent:5px;
    	padding-top:5px;
    	background-color:#333;
    }
    
    body
    {
    	font-family:Arial, Helvetica, sans-serif;
    	padding-left:10px;
    	color:#CCC;
    	background-image:url(/gnb/images/gnbbg.png);
    	background-repeat:repeat;
    }

  • #2
    New Coder
    Join Date
    Nov 2012
    Location
    India
    Posts
    53
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Make below change in your css file that remove the absolute position. This will help you.

    .menu
    {
    width:100%;
    min-width:100%;
    height:30px;
    padding-top:5px;
    text-indent:5px;
    border-bottom-style:solid;
    border-bottom-color:#000;
    border-bottom-width:1px;
    background-color:#333;
    position:relative;
    top:0px;
    left:0px;
    }


  •  

    Posting Permissions

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