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 Coder
    Join Date
    Aug 2011
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation CSS menu and content problem

    Hi people, hope your good.

    I'm having problems getting my content to appear next to my menu.....

    look here
    http://gandhiproductions.herobo.com/...o-options.html

    the black arrows should be next to the first menu option (portfolio), but it appears below the menu.... is this to do with the "inline-block"??

    any help would very much appreciated.

    Gandhi

  • #2
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Quote Originally Posted by evilgandhi View Post
    Hi people, hope your good.

    I'm having problems getting my content to appear next to my menu.....

    look here
    http://gandhiproductions.herobo.com/...o-options.html

    the black arrows should be next to the first menu option (portfolio), but it appears below the menu.... is this to do with the "inline-block"??

    any help would very much appreciated.

    Gandhi
    Select all of your css scripting, hit delete;

    Paste this in:

    Code:
    * {
    	margin:0;
    	padding:0;
    }
    img {
    	border-style: none;
    }
    #body-container {
    	margin-right:auto;
    	margin-left:auto;
    	width: 960px;
    	float:none;
    	height:auto;
    }
    body {
    	font-family: Arial, Helvetica, Verdana, Sans-serif;
    	font-size: 14px;
    	color: #666666;
    }
    
    #logo {
    	width: 206px;
    	height: 96px;
    }
    #menu {
    	width: 206px;
    	height: 547px;
    }
    
    #page-container {
    	width: 940px;
    	height: inherit;
    	padding:0px;
    	display:inline;
    	float:left;
    }
    
    #content{
    	height: auto;
    	float: left;
    	display:inline;
    	position:absolute;
    	top:100px;
    	right:600px;;
    }
    
    ul.cssmenu {
    	list-style:none;
    	}
    
    .displace {
    	position: absolute;
    	left: -5000px;
    	}
    
    ul.cssmenu li {
    	float: left;
    	}
    
    ul.cssmenu li a {
    	display:inline-block;
    	width: 206px;
    	height: 74px;
    	background:url(images/menu.jpg);
    	}
    
    /*
    *	Normal Links
    */
    ul.cssmenu li.portfolio a {
    	background-position: 412px 0;
    	}
    
    ul.cssmenu li.blog a {
    	background-position: 412px -74px;
    	}
    	
    ul.cssmenu li.contact a {
    	background-position: 412px -148px;
    	}
    	
    ul.cssmenu li.techmoon a {
    	background-position: 412px -222px;
    	}
    
    ul.cssmenu li.info a {
    	background-position: 412px -296px;
    	}
    	
    ul.cssmenu li.links a {
    	background-position: 412px -370px;
    	}
    
    
    /*
    *	Hover Links
    */
    ul.cssmenu li.portfolio a:hover {
    	background-position: -206px 0;
    	}
    
    ul.cssmenu li.blog a:hover {
    	background-position: -206px -74px;
    	}
    
    ul.cssmenu li.contact a:hover {
    	background-position: -206px -148px;
    	}
    
    ul.cssmenu li.techmoon a:hover {
    	background-position: -206px -222px;
    	}
    
    ul.cssmenu li.info a:hover {
    	background-position: -206px -296px;
    	}
    
    ul.cssmenu li.links a:hover {
    	background-position: -206px -370px;
    	}
    
    
    /*
    *	Clicked Links
    
    ul.cssmenu li.portfolio a:active {
    	background-position: 412px 0px;
    	}
    
    ul.cssmenu li.blog a:active {
    	background-position: -134px -40px;
    	}
    
    ul.cssmenu li.contact a:active {
    	background-position: -402px -40px;
    	}
    
    ul.cssmenu li.techmoon a:active {
    	background-position: -268px -40px;
    	}
    
    ul.cssmenu li.info a:active {
    	background-position: -268px -40px;
    	}
    
    ul.cssmenu li.links a:active {
    	background-position: -268px -40px;
    	}
    */
    /*
    *	Selected/Active Links
    
    ul.cssmenu li.portfolio a.selected {
    	background-position: 0 -40px;
    	}
    
    ul.cssmenu li.blog a.selected {
    	background-position: -134px -40px;
    	}
    
    ul.cssmenu li.contact a.selected {
    	background-position: -268px -40px;
    	}
    	
    ul.cssmenu li.techmoon a.selected {
    	background-position: -402px -40px;
    	}
    	
    ul.cssmenu li.info a.selected {
    	background-position: -402px -40px;
    	}
    	
    ul.cssmenu li.links a.selected {
    	background-position: -402px -40px;
    	}
    */
    
    #portfoliomenuoptions {
    	width: 338px;
    	height: 222px;
    	float:left;
    }
    
    #portfolioarrows {
    	width: 103px;
    	height: 222px;
    	float:left;
    }
    
    ul.portfoliomenu {
    	padding-top:74px;
    	list-style:none;
    	}
    
    .displace {
    	position: absolute;
    	left: -5000px;
    	}
    
    ul.portfoliomenu li {
    	float: left;
    	}
    
    ul.portfoliomenu li a {
    	display:inline-block;
    	width: 235px;
    	height: 74px;
    	background:url(images/portfolio-options.gif);
    	}
    
    /*
    *	Normal Links
    */
    ul.portfoliomenu li.illustration a {
    	background-position: 470px 0;
    	}
    
    ul.portfoliomenu li.paint a {
    	background-position: 470px -74px;
    	}
    
    /*
    *	Hover Links
    */
    ul.portfoliomenu li.illustration a:hover {
    	background-position: -235px 0;
    	}
    
    ul.portfoliomenu li.paint a:hover {
    	background-position: -235px -74px;
    	}

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for your previous help!!!

    have a look at this http://www.gandhidesign.com

    But i'm wondering why this page won't load properly in IE7/8 (i'm on a mac and finding hard to check these things), i'm not sure where the problem is.........the first page has a java image slider (to display the projects) but is seem quite broken in IE7/8 BUT i've used the same java slider on the other pages in this project (see http://gandhiproductions.herobo.com/...lovefilth.html)

    can you help?

    thank and thank you again

    Gandhi


  •  

    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
    •