Adding Text Into The Header

[MCS_Computers]

The reason I was taking another look is that I wanted to make sure this wasn't going to break with a PHP upgrade. Let's try

<div class="logoText"><?php echo nl2br("'This is my text1.\n\rThis is my text2."); ?></div>

If there's too much spacing between the lines, remove the \r to see if that helps. The example shown should result in

This is my text1.

This is my text2.

Without the \r the result should be

This is my text1.
This is my text2.

That worked however the result was the same as using the <br> option. Bare in mind that the coding is beyond my capabilities to create so all I`m doing is letting you know the results. With the code you suggested we got exactly what I needed but it threw out the icons below as seen in this screenshot.


Using the BR option along with an extra line for an email link worked but still threw out the icons.


Would I be right in assuming that somewhere in the CSS file there is something stopping the header from adjusting its size to accommodate the lines of text and the icons or maybe something there to control the placement of the icons ??

[dbltoe]

I think an aesthetically pleasing change would be to remove the margin:auto, text-align:right and float:right from the calls in line 74 of your stylesheet.css

#navMain ul  {/*margin:0 auto;*/padding: 0px 0 0.5em 0;list-style-type:none;/*text-align:right;*/line-height: 1.5em;/*float:right;*/}

You can play with other settings in that area to see what you'd like as a result.

[MCS_Computers]

I think an aesthetically pleasing change would be to remove the margin:auto, text-align:right and float:right from the calls in line 74 of your stylesheet.css

#navMain ul  {/*margin:0 auto;*/padding: 0px 0 0.5em 0;list-style-type:none;/*text-align:right;*/line-height: 1.5em;/*float:right;*/}

You can play with other settings in that area to see what you'd like as a result.

That looks 100% better although at some point I was hoping to utilise that space for a few product pictures. That row of icons looks much better though shifted across like that ;)

[dbltoe]

We have completely turned off the logoWrapper in most of our mobile cases. IMHO, adding too much in that area detracts rather than adds to the mix.
For example, Amazon used to be the barest of websites with little or no images and lots of info. Take a look at today's amazon.com BUT use a developer tool for your browser to Disable Images. What you see is what a Search Engine (SE) would see. They are blind. SEs cannot see images. Only alt text.
Thus if you are "too big to care", put more images on a page. However, you will get rank with content.
Content impresses the SEs, the SEs tell potential customers, you put plenty of content AND images on the product page. Win, win, win.

[MCS_Computers]

We have completely turned off the logoWrapper in most of our mobile cases. IMHO, adding too much in that area detracts rather than adds to the mix.
For example, Amazon used to be the barest of websites with little or no images and lots of info. Take a look at today's amazon.com BUT use a developer tool for your browser to Disable Images. What you see is what a Search Engine (SE) would see. They are blind. SEs cannot see images. Only alt text.
Thus if you are "too big to care", put more images on a page. However, you will get rank with content.
Content impresses the SEs, the SEs tell potential customers, you put plenty of content AND images on the product page. Win, win, win.

I could not agree more with you, could I please bother you one last time, could you take a look at the site once more, is there any way of moving the the HOME/LOGIN/SHOPPING CART icons in the header and put them under the email address ?? they look fine to me but they want them underneath.

www.jmdelisupplies.co.uk/index.php

[CSGODeimos]

Crazy that you're from Brid, I'm from Hull but just moved to the US. Didn't expect to see anyone on here from close to home aha. Hope you get your issue fixed as I'm looking to do the same thing on my site.

[CSGODeimos]

We have completely turned off the logoWrapper in most of our mobile cases. IMHO, adding too much in that area detracts rather than adds to the mix.
For example, Amazon used to be the barest of websites with little or no images and lots of info. Take a look at today's amazon.com BUT use a developer tool for your browser to Disable Images. What you see is what a Search Engine (SE) would see. They are blind. SEs cannot see images. Only alt text.
Thus if you are "too big to care", put more images on a page. However, you will get rank with content.
Content impresses the SEs, the SEs tell potential customers, you put plenty of content AND images on the product page. Win, win, win.

I have mine positioned where I want it ALMOST. I just need to bring it down a little so in the center of the white space. How would I do this? I tried margin-top and margin-bottom but they ######## up the white space completely.

http://www.westnewtonsupply.com

[MCS_Computers]

Crazy that you're from Brid, I'm from Hull but just moved to the US. Didn't expect to see anyone on here from close to home aha. Hope you get your issue fixed as I'm looking to do the same thing on my site.

Small world LOL and hope you get yours sorted too, there is some clever people here I`m sure someone will help ;)

[dbltoe]

@MCS - Your only hope is to increase the height of the overall area. Right now, there's not enough room to put all the text and their margins together without some weird coding. Also there are a bunch of large margins both negative and positive that are making it very difficult to sort.

@CSG you give us a link but I don't quite get what you want to change. Can you be more specific.

[MCS_Computers]

@MCS - Your only hope is to increase the height of the overall area. Right now, there's not enough room to put all the text and their margins together without some weird coding. Also there are a bunch of large margins both negative and positive that are making it very difficult to sort.

Ok mate that's fair comment, I like the way it is laid out and I personally think if you make the whole header area bigger it will look rubbish, I`ve tried explaining this to the person involved (My Cousin).

I already thought the same as you have confirmed that the area would need to be bigger. Where is the setting to do this ?? I tried using firebug and also CSS Viewer but again having limited experience in CSS its confusing.

Ive looked in the stylesheet.css file, CSS Viewer says that the area is #taglinewrapper ?? The only reference to tagline in the stylesheet.css is ...

#tagline {margin:0;color:#444;font-size:150%;text-align:left;text-transform:lowercase;clear:both;margin-left:30px;margin-top:15px;}

There is no mention of height here ???

You might be smiling right now as what I`ve put in this post might be completely wrong LOL but I`m doing the best I can and trying to learn as I go, forget about the icons below the text, it is how it is, but for my own sanity point me to the header height setting just to put me out of my misery.