Log in

View Full Version : Layout problems



sal
01-02-2010, 04:10 PM
Hi,
I have recently found out that my website doesn't display properly on widescreen monitors and I am struggling to come up with a solution to the problem. I have a background image which is basically a fade down the right side of the screen which is supposed to overlap slightly behind the header and writing but on widescreens it overlaps to a much greater extent obscuring the text. In some cases the text actually goes right through the fade and out the other side.

I am guessing that I need to fix elements in place in some way or permanently right-align the image but I am not quite sure where to start. I'm still really new to all of this and I would really appreciate it if someone could give me some advice please. My website is http://www.sallygraddondesigns.co.uk

Thankyou

jscheuer1
01-02-2010, 05:21 PM
One way would be to switch the background image to the table. Change:


body {
background-color: #FFF;
background-image: url(SGDImages/bgroundposs.jpg);
background-repeat: repeat-y;
}

to:


table {
background-color: #FFF;
background-image: url(SGDImages/bgroundposs.jpg);
background-repeat: repeat-y;
background-position: 100% 0;
}

At that rate you would only need a much smaller version of the background image, which would speed loading of the page, something like:

http://home.comcast.net/~jscheuer1/side/bgposs.jpg

sal
01-02-2010, 05:45 PM
Thankyou for your reply! For some reason if I do as you suggest the image disappears completely - I am sure there is a simple reason why but I can't work out what I am missing?

jscheuer1
01-02-2010, 06:35 PM
Probably forgot to add (highlighted):


table {
background-color: #FFF;
background-image: url(SGDImages/bgroundposs.jpg);
background-repeat: repeat-y;
background-position: 100% 0;
}

But it might be a browser thing, I'll do a mock up and get back to you if anything turns up. I was also thinking that a wrapper might be an even better choice for the background.

sal
01-02-2010, 07:12 PM
Well I have no idea what I was doing before but the image does show - sorry. It is still behind the text though (and actually moves a little further left than it was before - ie even more behind the text). I have just checked my website in IE again and it actually looks ok in it's original format but when I look at it in Chrome the background is in the wrong place in relation to the text. When I play about with zoom in Chrome the background stays in exactly the same place but the text enlarges/reduces in size hence altering it's relationship to the background. I am confused as I am sure that when I looked at it on a friends widescreen computer (that's bigger than mine) there was the same problem in IE as in Chrome.

Please excuse my ignorance but how would I go about using a wrapper?

ETA it is also wrong in firefox unless I zoom in once (on my monitor at least). Is there any way to make it display correctly whatever size monitor and browser is being used? I am wondering if the whole website layout is going to need altering in some way to make it work? Thankyou so much for your help.

jscheuer1
01-02-2010, 09:47 PM
Well, I don't know what 'look right' is. There are various ways it could look, depending upon the resolution and the view port (window) size. On a computer with 800x600 resolution, your table is too wide to fit in a window.

Anyways, this looks pretty good here, on 1024x768 and up:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD>
<meta name="google-site-verification" content="u5vmougxPSogj7oWsLwlvcQ2dONSCXklep3FYaNOJYk" /><META name=GENERATOR content="MSHTML 8.00.6001.18828"></HEAD>
<TITLE>Sally Graddon Designs</TITLE><!-- InstanceBegin template="/Templates/SGDTemplate.dwt" codeOutsideHTMLIsLocked="false" -->
<META content="text/html; charset=unicode" http-equiv=Content-Type><!-- InstanceBeginEditable name="doctitle" --><!-- InstanceEndEditable --><!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
<STYLE type=text/css>
<!--
body {
margin: 0;
padding: 0;
}
table {
margin: auto;
width: 800px;
border: none;
}
body,td,th {
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
}
.verdana {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #333;
}
#wrapper {
max-width: 1000px;
width: 100%;
margin: auto;
text-align: center;
background: #fff url(http://home.comcast.net/~jscheuer1/side/bgposs.jpg) repeat-y 100% 0;
}
-->
</STYLE>
<!--[if lt IE 7]>
<style type="text/css">
#wrapper {
width: 1000px;
}
</style>
<![endif]-->
<!--[if lt IE 6]>
<style type="text/css">
body {
text-align: center;
}
</style>
<![endif]-->
<BODY>
<DIV id="wrapper" align="center"><!-- InstanceBeginEditable name="EditRegion4" --><!-- InstanceEndEditable -->
<TABLE>
<TBODY>
<TR>
<TD colSpan=2><IMG alt="Sally Graddon Designs" src="SGDImages/banner2.jpg"
width=814 height=216></TD></TR>

<TR>
<TD colSpan=2 align=left>
<DIV align=right><A href="index.html"><IMG border=0 alt=Home
src="SGDImages/home.jpg" width=101 height=49></A><A href="about.html"><IMG
border=0 alt=about src="SGDImages/About.jpg" width=101 height=49></A><A
href="faq.html"><IMG border=0 alt=faqs src="SGDImages/faqs.jpg" width=101
height=49></A><A href="events.html"><IMG border=0 alt=events
src="SGDImages/events.jpg" width=101 height=49></A><A
href="terms.html"><IMG border=0 alt=terms src="SGDImages/terms.jpg"
width=101 height=49></A><A href="links.html"><IMG border=0 alt=links
src="SGDImages/links.jpg" width=101 height=49></A></DIV></TD></TR>
<TR>
<TD vAlign=top width=183><A href="chainmaille.html"><IMG border=0 alt=chainmaille
src="SGDImages/chainmaille2.jpg" width=182 height=68></A><A
href="cmnecklaces.html"><IMG border=0 alt=necklaces
src="SGDImages/necklaces.jpg" width=183 height=30></A><A
href="cmbracelets.html"><IMG border=0 alt=braceets
src="SGDImages/bracelets.jpg" width=183 height=30></A><A
href="cmearrings.html"><IMG border=0 alt=earings
src="SGDImages/earrings.jpg" width=183 height=30></A><A
href="pearl.html"><IMG border=0 alt="pearl jewellery"
src="SGDImages/pearljewellery.jpg" width=183 height=69></A><A
href="pjnecklaces.html"><IMG border=0 alt=necklaces
src="SGDImages/necklaces.jpg" width=183 height=30></A><A
href="pjbracelets.html"><IMG border=0 alt=bracelets
src="SGDImages/bracelets.jpg" width=183 height=30></A><A
href="pjearrings.html"><IMG border=0 alt=earrings
src="SGDImages/earrings.jpg" width=183 height=30></A><A
href="gems.html"><IMG border=0 alt="gem jewellery"
src="SGDImages/gemjewellery.jpg" width=183 height=69></A><A
href="gjnecklaces.html"><IMG border=0 alt=necklaces
src="SGDImages/necklaces.jpg" width=183 height=30></A><A
href="gjbracelets.html"><IMG border=0 alt=bracelets
src="SGDImages/bracelets.jpg" width=183 height=30></A><A
href="gjearrings.html"><IMG border=0 alt=earrings
src="SGDImages/earrings.jpg" width=183 height=30></A></TD>
<TD vAlign=top width=613><!-- InstanceBeginEditable name="maintext" -->
<P class=verdana><br>Welcome to Sally Graddon Designs! I hope you enjoy exploring the site and
looking at my handcrafted chainmaille, gemstone and pearl jewellery. <br><br>
You can click on the Chainmaille, Gem Jewellery or Pearl Jewellery buttons on the left hand side to read
a little bit more about my jewellery. I only ever use top quality findings and all of
my silver pieces are made using sterling silver wire and findings.<br><br>

I am more
than happy to undertake commissions and if you would like to know more
about my work or have any comments or questions please <A
href="mailto:enquiries@sallygraddondesigns.co.uk">email</A> me. If there
is anything you think I can do better please do let me know!<br><br>You can see more of my
work on <A
href="http://www.flickr.com/photos/sallygraddondesigns/">Flickr</A> and
find all my latest news on <A
href="http://sallygraddondesigns.blogspot.com/">my blog</A>. </P>
<P class=verdana align=center><IMG alt=Maille src="SGDImages/maille.jpg"
width=500
height=375></P><!-- InstanceEndEditable --></TD></TR></TBODY></TABLE></DIV><!-- InstanceEnd --><script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-11258017-1");
pageTracker._trackPageview();
} catch(err) {}</script></BODY></HTML>



Use the whole page. And if you use my background image, please make a copy of it, rather than hotlinking to it as I have in the above demo.

sal
01-02-2010, 10:25 PM
That is fantastic - thankyou so much! In an ideal world I would really like to push the image a bit more to the right (so that the left edge of the fade is roughly in line with the 'i' or 'n' of the Links tab). If I changed the wrapper to 1200 (which pushes the background to pretty much where I want it to be) how will it display on a smaller screen? Would it just chop off the right side? Is there a way to make it display correctly on a smaller screen (by changing other code perhaps)? I am just interested to learn more as much as anything.

Thankyou so much again.

jscheuer1
01-03-2010, 04:06 AM
First off (as far as smaller screens go) your banner2.jpg image is 814 pixels wide. So without some relatively major shakeup, the page will never look all that great on an 800x600 display. There is a technique whereby one assumes, as is usually the case that folks with smaller screens surf with a smaller default font. One can then set one's images dimensions in em units and they will usually scale for smaller screens. But some distortion of images is likely at that point. If not in their aspect ratio, then simply in the pixelation - lines becoming either blurry or jagged. Modern browsers can and/or do compensate, but for older machines with smaller monitors, the browser may be older as well. The other approach I'm aware of is to have a more fluid layout with images no wider than 400 pixels. That way they can wrap if need be.

But one can take one's best shot with what you have, tweaking things so that, if not optimal on smaller screens, the page is at least usable. This may be able to be refined further, and shouldn't look too different at the higher resolutions, other than moving things around a little to make them more like I think you want (only the styles have changed, and only slightly, from my last demo):


<STYLE type=text/css>
<!--
body {
margin: 0;
padding: 0;
}
table {
margin: auto;
width: 800px;
border: none;
position: relative;
left: -38px;
}
body,td,th {
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
}
.verdana {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #333;
margin: 1em 0;
}
#wrapper {
max-width: 1038px;
width: 100%;
margin: auto;
padding-top: 15px;
text-align: center;
background: #fff url(http://home.comcast.net/~jscheuer1/side/bgposs.jpg) repeat-y 100% 0;
}
-->
</STYLE>
<!--[if lt IE 7]>
<style type="text/css">
#wrapper {
width: 1038px;
}
</style>
<![endif]-->
<!--[if lt IE 6]>
<style type="text/css">
body {
text-align: center;
}
</style>
<![endif]-->

sal
01-03-2010, 08:59 AM
Thankyou so, so much - you are an absolute star! I would never have been able to work that out on my own. I shall have a good look at the code and try to work it all out!

Thankyou again.

sal
01-28-2010, 04:40 PM
Hi,
I am so sorry to pester you yet again but I have got a bit stuck. Your coding works brilliantly but I am getting stuck when I try to apply it to a page which has lightbox 2.04a and omni on it. I have gone through and changed the other pages on my site and used external stylesheets rather than having all on the one page without any problems but I just can't work out how to use your coding for the fade and have the rest of the layout stay as I originally had it. Am I missing something really simple? You can see a basic page with your coding working at www.sallygraddondesigns.co.uk and www.sallygraddondesigns.co.uk/cmbracelets.html One of the pages which I can't get to work is www.sallygraddondesigns.co.uk/chainmaillebracelets/viperscale.html

I would really appreciate any advice. Thankyou so much,
Sally