Adding Text Into The Header

dbltoe:

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[I]<div class="logoText"><?php echo nl2br("'This is my text1.\n\rThis is my text2."); ?></div>[/I]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 ??

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;/}

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;/}

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 ;)

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.

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.

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.

https://www.jmdelisupplies.co.uk/index.php

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.

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.

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

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.

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

@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.

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.

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 Ive put in this post might be completely wrong LOL but Im 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.

When you are inspecting the code using those tools, and you "click" on the taglinewrapper, you should be shown the "history" of presenting that css. Everything involved should show how that specific object has come to have the formatting that it does. This should include at least one reference to taglinewrapper and should show the filename and line number at which the assignment is located.

Or while the same is displayed, you can search the css files for that particular attribute, but one should be wary of the results especially in a responsive template because of how the css "sections" are applied. Finding and changing a definition for a small resolution will do no good for a large resolution nor affect the large resolution or vice versa, they each control their resolution's presentation...

mc12345678:

When you are inspecting the code using those tools, and you "click" on the taglinewrapper, you should be shown the "history" of presenting that css. Everything involved should show how that specific object has come to have the formatting that it does. This should include at least one reference to taglinewrapper and should show the filename and line number at which the assignment is located.

Or while the same is displayed, you can search the css files for that particular attribute, but one should be wary of the results especially in a responsive template because of how the css "sections" are applied. Finding and changing a definition for a small resolution will do no good for a large resolution nor affect the large resolution or vice versa, they each control their resolution's presentation...

Its just so frustrating, I now understand how my customers feel when their computers/laptops don`t work.

I'm trying to get my head around Firebug, its different to CSS Viewer because it allows you to change elements of the file and see the result before you edit the .css file. As you move over the code it highlights areas on the page, everytime it highlights anything within the header itself I look through the code in the right box and cannot see anything that mentions height ??

I'm obviously either being thick or I`m missing something really obvious :blush:

Understood, and I'd say neither on the last part. When it is "highlighted" though the right side doesn't get updated, so need to click on that "section" to update the right side. Also there are a couple of other tabs on that right side to show various characteristics of the selected "field".

It is a bit of a learning process. Learning can be aggravating when trying to get something done. Again, I'm useless on the details of the css on your site because I'm not able to access that information (sensibly) from my mobile device. :P

FYI, "height" can be made/provided by other characteristics. Basically the push and pull of various items and where they are positioned. For example if there was a header row, then the next line has an image that is x tall, then some other items, then the next row, well the overall height becomes dependent on the first object. "Review" of these objects becomes important to see how they each interact.

Other cases, it's obvious. :P not always though.

mc12345678:

FYI, "height" can be made/provided by other characteristics. Basically the push and pull of various items and where they are positioned. For example if there was a header row, then the next line has an image that is x tall, then some other items, then the next row, well the overall height becomes dependent on the first object. "Review" of these objects becomes important to see how they each interact.

Other cases, it's obvious. :P not always though.

LOL Ive looked so many times and tried to make sense, most of the time if you look closely it does make sense, in this case for me it does not, common sense would say that in the CSS there would be a setting that said Height = X LOL

Occasionally, height is based on the image size selected for that area. In that case, there is code that determines what is going to happen. Your situation is worsened by the fact that there is already a -100px margin-top call in the stylesheet.css on line 73.
Change that to -50px, then add the margin, text-align, and float BACK INTO line 74.
The two lines should now look like```
#navMainWrapper {margin:0 auto;color:#444;margin-top: -50px;}#navMain ul {margin:0 auto;padding: 0px 0 0.5em 0;list-style-type:none;text-align:right;line-height: 1.5em;float:right;}

Tweak as required.
BTW, I used firebug for some time but I always look for anything more helpful.  Right now, I use chrome and Web Developer by Chris Pederick.  It can be used with Firefox as well but, I like its operation with chrome.

dbltoe:

BTW, I used firebug for some time but I always look for anything more helpful. Right now, I use chrome and Web Developer by Chris Pederick. It can be used with Firefox as well but, I like its operation with chrome.

Just installed it, looks good, my only issue is my knowledge of CSS, Firebug highlights the area in question, I suppose using them in conjunction with each other would work.