...

View Full Version : CSS menu and content problem



evilgandhi
07-25-2012, 09:09 PM
Hi people, hope your good.

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

look here
http://gandhiproductions.herobo.com/krishna/portfolio-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

tempz
07-25-2012, 11:40 PM
Hi people, hope your good.

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

look here
http://gandhiproductions.herobo.com/krishna/portfolio-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:



* {
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;
}

evilgandhi
07-27-2012, 07:18 PM
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/gandhi2/projects/lovefilth.html)

can you help?

thank and thank you again

Gandhi



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum