Public Forums 71,145 posts

[nashlah Friend nashlahJoin date: November 2006Posts: 29Downloads:5Uploads:0 Thanks: 4]

#136691

Hello,

I have posted about this somewhere else, but I’m hoping that by posting it here I might find a bit more help.

I’m having an issue with my site where if the size of the browser changes, the menu and logo slide off to the sides.

I’m totally stumped and can’t figure out how to make it stay put in one place regardless of the size of the browser window / monitor.

At a 1280 x 800 resolution my website displays perfectly with the menu and logo centered in relation to the website, but anything other than that makes them slide off to the left or to the right.

Do you know how to make my menu stick to one place? I desperately need a fix for this.

Thanks for your help!

Here’s the website: http://66.147.242.93/~endinmin/

Running Joomla 1.5.8
JA PyriteTemplate

Here’s an image to illustrate the problem: http://66.147.242.93/~endinmin/images/stories/screenweb.jpg

-Nash

[jay973 Friend jay973Join date: October 2008Posts: 401Downloads:0Uploads:12 Thanks: 28 Thanked: 105 times in 68 posts]

#284656

Hi,

It looks like the padding in the header is throwing it off. I changed it to 140 and it looked good on my screen.

Try adjusting the ja-header div in template.css (line 778) like below:

#ja-header {
float:left;
line-height:normal;
padding: 0 0 0 140px; <——– THIS LINE
position:relative;
text-align:center;
width:15%;
z-index:0;
}

Hope this helps,

Jason.

[nashlah Friend nashlahJoin date: November 2006Posts: 29Downloads:5Uploads:0 Thanks: 4]

#284671

Hey Jason –

Thanks for taking the time to help!

When I change the padding to 140 it looks good on a smaller screen (800×600 monitor), but with a little bigger browser window it slides off to the left.

Is there a way to make that padding fixed or something?

Thanks a bunch for the help!

[scotty Friend scottyJoin date: March 2008Posts: 2339Downloads:0Uploads:13 Thanks: 76 Thanked: 827 times in 595 posts]

#284689

The problem is you have set ja_header to always be 140px from the left regardless of screen res but the rest of the page is centered.

The main body of the page needs to be set to a certain width and you need to get rid of that padding so that everything stays in line. Here’s how you can do it…

Open template.css and find on line 25…

body#bd {
background:#FFFFFF none repeat scroll 0 0;
color:#333333;
}
change this to…

body#bd {
background:#FFFFFF none repeat scroll 0 0;
color:#333333;
margin:10px auto;
width:750px;
}
Now get rid of the 140px padding and tidy it up a little….

Find on line 778…

#ja-header {
float:left;
line-height:normal;
padding:0 0 0 140px;
position:relative;
text-align:center;
width:15%;
z-index:0;
}

and change to…

#ja-header {
float:left;
line-height:normal;
padding:0 15px 0 0;
position:relative;
text-align:center;
z-index:0;
}


Find on line 793…

h1.logo a {
background:transparent url(../images/logo.gif) no-repeat scroll left center;
display:block;
height:85px;
width:100%;
}

and change to…

h1.logo a {
background:transparent url(../images/logo.gif) no-repeat scroll left center;
display:block;
height:85px;
width:149px;
}


2 users say Thank You to scotty for this useful post

1. nashlah
2. thatcomputerdude

[nashlah Friend nashlahJoin date: November 2006Posts: 29Downloads:5Uploads:0 Thanks: 4]

#284700

That did it! Thank you so much, Scotty!!
I’m super happy! 😀

[markb1439 Friend markb1439Join date: August 2008Posts: 124Downloads:0Uploads:1 Thanks: 14 Thanked: 34 times in 11 posts]

#287209

<em>@nashlah 103392 wrote:</em><blockquote>That did it! Thank you so much, Scotty!!
I’m super happy! :D</blockquote>
Do you know about FireBug? In case you don’t, it’s a FireFox extension that lets you identify various CSS components and other items, and change the settings to experiment. So in a future case like this, you could use it to try different settings and see which one fixes the problem.

[nashlah Friend nashlahJoin date: November 2006Posts: 29Downloads:5Uploads:0 Thanks: 4]

#287213

Thanks for the tip, mark! I have installed it! 😉

[Author]

Posts