?
Solved

How do I make these title headers look like the rest of the site?

Posted on 2012-08-19
9
Medium Priority
?
312 Views
Last Modified: 2012-08-28
I have page here:

http://mamafrancescacheese.com/recipes

where I've changed the background to orange and font color to white of the header title "Recipes"...but I need it to be narrower and hitting the green latest news box like the other titles (see products, nutrition, etc)

I also need the title to look like products and nutrition for http://mamafrancescacheese.com/recipes/46-parmesan-veggie-blend-recipes where is says "Parmesan Veggie Blend Recipes".

Finally, I need that same look for the detail page http://mamafrancescacheese.com/recipes/46-parmesan-veggie-blend-recipes/1-hearty-vegetable-lasagna where is says Hearty Vegetable Lasagna (but it does not need to hit the green latest news box.

Any help would be most appreciated.
category.png
detail.png
recipes.png
0
Comment
Question by:Donnie Walker
  • 4
  • 4
9 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38311226
the html on your website is so convoluted you're going to have a hard time getting your styles to be consistent. You have way too many div wrappers. What are you using to generate the html? you need to get your self a better tool, or write it by hand. The actual layout of your site is not that complicated.

You'll have better luck getting help with the CSS once the hml is cleaned up.

hope this is of some help.

cheers.
0
 
LVL 18

Expert Comment

by:nap0leon
ID: 38311425
For the "Recipes" header, remove the DIVs that you placed on this page that are not found on the "Products" page (gcbTopmain, gcbmain, gcbheadercontainer, and gcbintro).  This will make the line for "Recipes" look just like the line for "Products" which also looks the same as the line for "Parmesan Veggie Blend".

For the "detail" page... if you want the product title to look like the other pages, your easiest route may be to create a new class with exactly what you want it to look like and label everything with "important".
0
 

Author Comment

by:Donnie Walker
ID: 38311596
This is not my work. It is a Joomla template with another component added for the recipes. The recipe component also has it's own css.

I believe I've removed the gcbTopmain, gcbmain, gcbheadercontainer, and gcbintro sections but it is still not right.

Any suggestions?
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 18

Expert Comment

by:nap0leon
ID: 38312176
To move "Recipes" up, right after:
<div id="component" class="clear">

Open in new window


Remove this line of HTML:
&#65279;

Open in new window


BTW - the way I found these things is to open the "Recipes" page and the "Products" page in separate tabs in FireFox and use the FireBug plug-in.  You can easily spot differences in the HTML structure this way and when you see something that looks different between the pages, view the CSS properties that each DIV to spot what might be causing it.

For the change above, the HTML structure (wrapping divs, etc.) all look the same and the CSS properties are identical, so I looked at the HTML and saw the "&#65279;" is on the Recipes page but not Products, so I removed that HTML and saw the word Recipes  move up to where it is supposed to be,
0
 

Author Comment

by:Donnie Walker
ID: 38312264
I don't see "&#65279;" anywhere in the code or the css.

I loaded up Firebug and I didn't see it either.
0
 
LVL 18

Expert Comment

by:nap0leon
ID: 38312439
it doesn't appear in the "HTML" view ... but there is an empty line that you can see.  Click "Edit" and it will take you to the raw HTML that you can edit and you will see it there.

The unicode character: &#65279; is a 'ZERO WIDTH NO-BREAK SPACE'
Somewhere in your content editor, someone put in a "non-breaking space" - which explains why you can't see it when you look for it.  It's there though... so where you know it is, just delete any "spaces" you see (and re-add them as regular spaces if you actually need them there).
0
 

Author Comment

by:Donnie Walker
ID: 38312937
What is above and below it?
0
 
LVL 18

Accepted Solution

by:
nap0leon earned 1500 total points
ID: 38317444
See attached screen shot
untitled.bmp
0
 

Author Comment

by:Donnie Walker
ID: 38341247
I can't see &#65279; with Firebug or in the code so I'm just going to close this. Thanks for trying to help.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month16 days, 8 hours left to enroll

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question