squemish

Author Topic: Header issue  (Read 2071 times)

christynne

  • Guest
Header issue
« on: January 23, 2014, 04:20:33 am »
http://christynne.com/salonnirvana/index.php

If you click between the navigation tabs you will notice the phone number section in the header moves. I can't figure out why it does this. Can I get some guidance?

Thanks!

I could only post 4 files. Please let me know if you need the others.

JennaSetticasi

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 492
Re: Header issue
« Reply #1 on: January 23, 2014, 06:38:22 am »
The height of your header seems different on the products page. I would set the header's height in your external CSS. Any chance that embedded styles on the pages with a difference in the position of the phone number, could be causing the problem? Also, I noticed that you have a div with id of wrapper in the header-inc.php file and in the about.php file. The id should be unique in each page and I would not start the wrapper inside of the header. The header should be inside of the wrapper. I would check all of your HTML tags by going to the page in the browser and then view source to see how the PHP is being rendered. You may need to make some adjustments.
Jenna Setticasi
The Art Institute of Pittsburgh | Online Division
Associate Professor, Web Design and Interactive Media

JennaSetticasi

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 492
Re: Header issue
« Reply #2 on: January 23, 2014, 06:40:52 am »
I just noticed that the services.php page has this embedded CSS:

<style type="text/css">

p{
   padding:0;
   margin:0;
}

</style>


It will affect the paragraph that you have in the header, changing the position of the phone number.

Also in your products.php page:

<style type="text/css">

p{
   font-size:30px;
   padding:20px;
}

#footer p{
   font-size:16px;
   padding:0;
}

</style>

This is again affecting your header. So instead of setting a fixed height on the header you can just modify the embedded styles on the services and products pages to make them more specific. You could use a class instead of the p selector.
Jenna Setticasi
The Art Institute of Pittsburgh | Online Division
Associate Professor, Web Design and Interactive Media

christynne

  • Guest
Re: Header issue
« Reply #3 on: January 23, 2014, 04:22:23 pm »
I forgot about my inline styles. That is for sure the problem. Thank you!

JennaSetticasi

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 492
Re: Header issue
« Reply #4 on: January 23, 2014, 06:14:09 pm »
You're welcome! :)
Jenna Setticasi
The Art Institute of Pittsburgh | Online Division
Associate Professor, Web Design and Interactive Media

christynne

  • Guest
Re: Header issue
« Reply #5 on: January 27, 2014, 06:49:13 pm »
This is what I ended up doing for the service page. It is still an inline style. I just made sure to only call to the <p> within the table. :)

<style type="text/css">
table p {
   padding:0px;
   margin:0px;
}

Same thing with the products page.

Thanks again!

JennaSetticasi

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 492
Re: Header issue
« Reply #6 on: January 28, 2014, 06:16:42 am »
Good! You're welcome!
Jenna Setticasi
The Art Institute of Pittsburgh | Online Division
Associate Professor, Web Design and Interactive Media