Styling and positioning...

I'm having difficulty with 3 things...

1.) I've created a sidebar and published it. The side bar is not showing beside the Component (the article), but instead showing below the article...I'm assuming that there is a mismatch and somehow the Articles are in the Header and not in the Mainbody, how can I check and fix this?

2.) I need to have some of the text in the Front Page Header in "bold", but despite coding for it...it does not appear as bold.

3.) Is there a way to make only 1 Main Menu Item "bold" --- I would like the first "JOIN INNOVO" bold with the rest in normal CSS

4.) Is there a way to increase...approximately 2x the size of the logo?

5.) Is there a way to force the maximum width of the buttons in "gkColorPriceTable", right now it automatically increases/decreases the width. I would like to limit to a maximum of 150px.

For reference, the web site...though only in development and not really live: http://innovo-cloudhost.acmedigitaltechnology.com/

Sorry...this is the page that shows my issue with the sidebar

http://innovo-cloudhost.acmedigitaltech ... contact-us

Hi

1. This looks to be a validation error. http://validator.w3.org/check?uri=http% ... ne&group=0 Please try to fix them (focus on "Unclosed element" and "Stray tag seen")

2. Add this to css:

Code: Select all

b, strong {
    font-weight: 700;
}


3. Add this to css:

Code: Select all

.gkMenu > ul > li > a#menu714 {
    font-weight: 700;
}


4. Add this to css and upload 2x bigger logo image

Code: Select all

#gkLogo {
    height: 80px;
    width: 280px;
}


5. Tell me an url to where I can see it.

Thanks for this...basically all work...except that now the menu jumps to the left on hover...

See: http://innovo-cloudhost.acmedigitaltechnology.com/

Here is the code and where I placed it in Style1.css (right at the top of the list)

/* menu.css */
#gkMainMenu .gkMenu > ul > li > a#menu714 {
font-weight: 700;
}
#gkMainMenu .gkMenu > ul > li.active > a {
color: #00abee;
}
#gkMainMenu .gkMenu > a:hover,
#gkMainMenu .gkMenu > a:active,
#gkMainMenu .gkMenu > a:focus,
#gkMainMenu .gkMenu > li.active > a {
color: #00abee;
}

Hi

Which browser does it jump for You ? I tried Safari and FF, no problem there.

Apologies, I found what was causing and meant to send a note...

Increasing the logo size to 280px made the menu jump. I've since decreased it and as a result the jumping stopped.

Still having issues on points 1 and 5 of the original post:

1.) I've created a sidebar and published it. The side bar is not showing beside the Component (the article), but instead showing below the article...I'm assuming that there is a mismatch and somehow the Articles are in the Header and not in the Mainbody, how can I check and fix this? See Contact Us Menu item

5.) Is there a way to force the maximum width of the buttons in "gkColorPriceTable", right now it automatically increases/decreases the width. I would like to limit to a maximum of 150px.

Hi

1. First of all remove all content from article and show empty one. This way You will know if the broken code is inside this article and You will have to check it closer.

5. Where are this buttons ? I cannot see them ;/ Please guide me to it.

Removed all content from the article... please see: http://innovo-cloudhost.acmedigitaltech ... contact-us

The buttons are on the header... one is labeled Buyer and the other Supplier. These were originally the "plans". There were 3 of them, I removed one and changed the HTML to indicate there are only 2 columns...and it automatically spaces widens the two buttons...tried a "max-width" in the <div>, this helped in the width of the button, but didn't space them evenly on the screen.

Hi

1. Now You can see that left column got back to normal. This means that inside the article which You have removed there is a wrong HTML syntax. Probably unclosed </div> or other HTML element.

5. This buttons looks to be perfectly positioned. Please look at the screenshot.

Hi,

Thanks for the tip...you are correct, probably some bad code I copied from the old site.

on the front page...the question is NOT positioning...but WIDTH of the buttons...is there a way to manipulate the code so that the buttons are:
- smaller...150px wide for example
- evenly spaced....2 150 px wide buttons with, at least, 150 px of space between them?

I found the coding to reduce the size....but then they are in the middle of the page with only a little space between the two.

Thank you

Hi

5. You need to overwrite this class:

Code: Select all

.gkColorPriceTable.col2 dl {
    margin: 0 10%;
    width: 30%;
}


You need to change the width and the margin at the same time.

Excellent! Thank you!

Hi

No problem. Glad I could help