PDA

View Full Version : Annoying Page Width Issue


monkeymedia
05-21-2010, 11:18 AM
Hi All

When I built this site at home using a 22 inch ws monitor everything looked great, and it still looks right now its published.

At work I have a smaller monitor and I'm getting a scroll bar on the width.

I swear blind I didnt spec a width on the container, just the div in the middle with the remianing space split 50/50 so the page sits in the middle of the screen

Any ideas? no doubt this is annoyingly simple. Annoying becaus eit'll take one of you 30 seconds to sort it and its baffled me for a while now.

Thanks in advance for your help.

gentleone
05-21-2010, 11:56 AM
link or code? :)

monkeymedia
05-21-2010, 12:42 PM
shit sorry. totally forgot that bit, lol

www.frostechnic.com

cocoonfx
05-21-2010, 12:49 PM
Hi It looks fine to me, I am using an IBM laptop 14inch and the site is sitting nicely in the middle with no scroll bars.

gentleone
05-21-2010, 01:20 PM
On my MacBook in Firefox with a resolution of 1200 x 800 i have that horizontal scrollbar. Couldn't find yet what's causing this.
And on another note. Your menu won't be nominated in a 1000 years for the 'menu usability award' Man, I got crazy from it!?! :)

monkeymedia
05-21-2010, 01:55 PM
you're not the first person to comment on the menu. :)

Yeah I realise it's annoying, a suitable yet less annoying menu is being looked for. The problem I have is that there's so many pages the min page length would be huge, and I think would look a bit pants.

Helpful suggestions on a postcard please, lol

gentleone
05-21-2010, 02:03 PM
Helpful suggestions on a postcard please, lol

At CSS play you can get some inspiration, but you'll have to dive into the code to see how its done.

http://www.cssplay.co.uk/menus/

monkeymedia
05-26-2010, 01:32 PM
cheers, will look into different menu's

in the meant time, any ideas on this silly width issue?

DWcourse
05-26-2010, 01:39 PM
not a clue!

monkeymedia
05-26-2010, 02:10 PM
oh no really? you lot are my last hope, lol

DWcourse
05-26-2010, 02:21 PM
Seriously, I looked that page over and found nothing. Like you I'm sure it's something that will probably be obvious in retrospect butů :confused:

urbanrays
05-26-2010, 03:26 PM
The problem is in your footer, I just removed all padding and cleared both and it seems to be working ok

.footer {
background-image: url(images/footer.jpg);
text-align: left;
width: 900px;
height: 220px;
background-repeat: no-repeat;
color: #FFFFFF;
font-weight: bold;
clear: both;
}


Hope this helps

DWcourse
05-26-2010, 04:17 PM
Yep, padding adds to the width of the object (as do margin and border). So, when you applied that style to the paragraphs in the footer they expanded beyond the width of the footer causing your scroll bar.

Great catch urbanrays!

BTW, you seem to be referencing your style sheet multiple times throughout your page. Once is enough.

monkeymedia
06-01-2010, 10:54 AM
thanks urban, you're a legend.

DW - yeah I do that cos I like to work on headers and footers seperately, if you dont link the style sheets you cant see the formatting. I would like to know a better way round this.

Corrosive
06-01-2010, 11:04 AM
DW - yeah I do that cos I like to work on headers and footers seperately, if you dont link the style sheets you cant see the formatting. I would like to know a better way round this.

Finalise your design and THEN break it down into composite parts ;)

urbanrays
06-01-2010, 11:14 AM
<linkrel="Stylesheet" type="text/css" href="layout.css"/>

You have already done it in the head tags of your page,

What do you mean by you work on the footer etc seperatly.
Are you using php include's? if so you still only need to have the link in your head tags

monkeymedia
06-01-2010, 11:28 AM
yes I use php includes.

what I should ahve done is delete the links in the footer and header really, just forgot to

urbanrays
06-01-2010, 11:35 AM
yes I use php includes.

what I should ahve done is delete the links in the footer and header really, just forgot to

You have forgot to delete that bloody navigation too:o

monkeymedia
06-03-2010, 02:51 PM
update:

unless I'm doing somehting horribly wrong, that has fixed the issue, but caused the text in the footer to go all the way to the left, now I remember why that padding was in there.

http://www.frostechnic.com/testsite/index2.php

so...how do I indent the text without screwing up the width?

monkeymedia
06-03-2010, 02:52 PM
new navigation is being worked on btw, I know its annoying

Corrosive
06-03-2010, 03:00 PM
Add padding and take the total of the padding off the width of the div.

Corrosive
06-03-2010, 03:03 PM
Wow, that menu makes me feel seasick ;)

urbanrays
06-03-2010, 03:10 PM
You have a class .footer and id #footer

.footer {
background-image: url(images/footer.jpg);
padding-top: 26px;
padding-right: 50px;
padding-bottom: 0px;
padding-left: 250px;
text-align: left;
width: 900px;
height: 220px;
background-repeat: no-repeat;
color: #FFFFFF;
font-weight: bold;
}

#footer {
width: 900px;
clear: both;
color: #333;
padding: 0px;
height: 220px;
margin: 0px;
}

I would get rid of .footer
and use

#footer {
width: 900px;
background-image: url(images/footer.jpg);
background-repeat: no-repeat;
clear: both;
color: #333;
padding: 0px;
height: 220px;
margin: 0px;
}

#footer p {
width: ###px
margin-left: ##px
color: #FFFFFF;
font-weight: bold;
}

And in your html

<div id="footer">
<p>Telephone: 01295 266500 Fax: 01295 275434<br />

Company Reg No: 02880840<br />

To read our full terms and conditions please click <a href="download/frostechnic_terms_and_conditions.pdf" target="_blank"><img src="images/pdf_icon_small.png" alt="Terms and Conditions" width="40" height="18" border="0" /></a></p>


Then all you need to do is mess around with #footer p to align.

monkeymedia
06-03-2010, 03:47 PM
thanks again urban, reckon that's fixed. you're also making me think more about the structure of what I am doing, which is a good thing.

monkeymedia
06-08-2010, 08:35 AM
do you think this menu is less annoying?

http://www.cssplay.co.uk/menus/dl-slide.html#url

monkeymedia
06-08-2010, 04:21 PM
http://www.frostechnic.com/testsite/inc_menu.html

so... first off thanks for the help so far!

I've taken on the comments about how annoying the menu is and am trying to change it. The link above is the proposed new menu which hopefully is less irritating for the user. It is however more irritating for me because I am modifying someone elses menu (who in the event of this working, shall be informed/thanked/paid)

I've been changing a bit at a time and when it broke going back a step but I am now stuck. Why are the menu items 20px too narrow? originally the menu was 150 wide and I increasd it to 170 so there must be a remnant kicking about, but I'm buggered if I can find a '150px' in the style sheet that doesnt screw it up when adjusted.

gentleone
06-08-2010, 10:30 PM
dl.menu {
width:300px;
float:left;
margin:-32700px -150px 0 0;
background:url(images/menu_light.png) no-repeat left bottom;
}


This -150px you should probably change to -170px and...

dl.menu dt a {
background:transparent;
width:150px;
}


this 150px change to 170px.

monkeymedia
06-09-2010, 02:56 PM
I tried that, altering the first one appeared to do nothing, altering the 1st and and the 2nd one gives the following results

http://www.frostechnic.com/testsite/index2.php

as you can see, all is not well.

Could someone explain to me what this is all about?

dl.menu {
width:300px;
float:left;
margin:-32700px -150px 0 0;
background:url(images/menu_light.png) no-repeat left bottom;
}

The -32700 bit is what I am referring to, I really dont understand what that is doing in there or what effect it might have.

DWcourse
06-11-2010, 03:12 AM
looks like this will do it on http://www.frostechnic.com/testsite/index2.php

dl.menu dd a.last1 {
border-bottom:30px ridge #FFFF00;
}
newmenu.css (line 42)
dl.menu dd a {
background-color:#0066FF;
background-image:url(images/menu_light.png);
width:150px;
}

Change width to 170px

DWcourse
06-11-2010, 03:26 AM
Here's what I don't understand:

dl.menu {
width:300px;
float:left;
margin:-32700px -150px 0 0;
background:url(images/menu_light.png) no-repeat left bottom;
}

dl.menu dt {
float:left;
padding:0;
margin:32700px 0 0 0;
position:relative; z-index:50;
}


What does the 32700px top margin accomplish? Why not just set the top margin to 0 for both?

monkeymedia
06-11-2010, 06:58 AM
I dont understand it either, I got it off cssplay, was hoping it would make sense to one of you guys.

monkeymedia
06-18-2010, 08:51 AM
ok thats weird, if you swap the -32700 to 0, the menu go's massively long. 32700px at a guess.

right I officially admit I dont understand that menu at all. time for something else

Corrosive
06-18-2010, 09:17 AM
How about a nice and simple styled list? ;)

monkeymedia
06-18-2010, 01:44 PM
am I being a girl about it? I'm being a girl about it aren't I? ;)

right, going to work out how many buttons total and see what my min page length will be if I just do a list

Corrosive
06-18-2010, 01:59 PM
I wouldn't like to comment but the first menu was mad as a box of frogs. Users don't want to chase your links all over the place...they just want to click them! I am a firm believer in dead simple menus, styled list and that's it.

monkeymedia
06-19-2010, 07:58 AM
its ok you can call me a girl I dont mind ;)

http://frostechnic.com/testsite/

something I knocked up yesterday to see how it would look, or rather how long it would look with just a list. my personal feelings are that there's way too much on there so I need some sort of non annoying expanding menu that I can actually customise for my purposes.

thoughts?

Corrosive
06-19-2010, 08:27 AM
I wouldn't dare use girl as a term of abuse... my Mrs would kill me ;)

I agree that the menu is quite long so I can see why you want to show/hide.

How about a nice and simple toggle using span tags with an id;

http://www.codingforums.com/showthread.php?t=143309