Fmdpa Posted May 9, 2010 Share Posted May 9, 2010 I have posted a topic similar to this already, but it is just not working for me. This time I will stop playing games and just ask for the code. Here is the code for my background: body{width:1000px;height:2000px;background:#000 url('bg.jpg') no-repeat center top;} I want to align, say, 3 images using the <ul> and ul,li {display:inline;} I want to display the list of images at 100px from the top and 280px from the left. I was able to do this easily, but when I zoomed out, "ul {left:200px;}" no longer seemed to be relative to the body {width:1000px;}. The height still seemed fine, but the width was messed up. Using the ideas I've posted (BG image(url) no-repeat center top, width:1000px, height:2000px; AND 3 list images), what would your code be for this page to keep the images aligned consistently at all magnifications? Link to comment Share on other sites More sharing options...
thescientist Posted May 9, 2010 Share Posted May 9, 2010 i don't see any of the list code you're talking about, and I'm guessing you were using some sort of positioning attributes?Personally, for the kind of specificity you are looking for, I would just skip trying to make the list and just make the BG image look exactly like it would if you were trying to align three images and then make that the background (basically a composite). Using fixed width on the body should help keep everything from getting displaced when a user changes window size. Link to comment Share on other sites More sharing options...
Fmdpa Posted May 9, 2010 Author Share Posted May 9, 2010 Basically, this is the code I came up with (background and image list): <html><head><style type="text/css">body{width:1000px;height:2000px;background:#000 url('bg.jpg') no-repeat center top;}ul,li {display:inline;}.a{position:relative;left:180px;top:100px;}.b{position:relative;left:10px;}.c{position:relative;left:10px;}</head><body><ul> <li class="a"><img src="tab1.gif" /> </li> <li class="b"><img src="tab2.gif" /> </li> <li class="c"><img src="tab3.gif" /> </li></ul></body></html> The problem is that it doesn't seem to acknowledge the body "width:1000px;" That's what my real trouble is. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 9, 2010 Share Posted May 9, 2010 are you trying to achieve something like this (used text instead of image, html bg color(don't use in page) to identify what is going on. <html><head><style type="text/css">html {background-color:#FF9999;}body{width:800px;height:2000px;background:#000 url('bg.jpg') no-repeat center top;}ul {position:relative; top:100px; left:280px;}ul,li {padding:0;display:inline;}.a{/*position:relative;left:180px;top:100px;*/}.b{/*position:relative;left:10px;*/}.c{/*position:relative;left:10px;*/}</style></head><body><ul> <li class="a">A<!--<img src="tab1.gif" />--> </li> <li class="b">B<!--<img src="tab2.gif" />--> </li> <li class="c">C<!--<img src="tab3.gif" />--> </li></ul></body></html> Link to comment Share on other sites More sharing options...
Fmdpa Posted May 10, 2010 Author Share Posted May 10, 2010 Here's the code I used based off of yours: <html><head><style type="text/css">html {width:800px;height:2000px;background:#000 url('bg.jpg') no-repeat center top;}ul {position:relative; top:100px; left:280px;}ul,li {padding:0;display:inline;}.a{/*position:relative;left:180px;top:100px;*/}.b{/*position:relative;left:10px;*/}.c{/*position:relative;left:10px;*/}</style></head><body><ul> <li class="a"><img src="tab1.gif" /> </li> <li class="b"><img src="tab2.gif" /> </li> <li class="c"><img src="tab3.gif" /> </li></ul></body></html> It achieves the affect I want of keeping the page elements in the correct position at all magnifications, but the background image is no longer centered. It is aligned to the left. Any ideas? Link to comment Share on other sites More sharing options...
dsonesuk Posted May 10, 2010 Share Posted May 10, 2010 instead ofhtml {width:800px;height:2000px;background:#000 url('bg.jpg') no-repeat center top;}what happens withbody{width:800px;height:2000px;background:#000 url('bg.jpg') no-repeat center top;} Link to comment Share on other sites More sharing options...
Fmdpa Posted May 10, 2010 Author Share Posted May 10, 2010 instead ofhtml {width:800px;height:2000px;background:#000 url('bg.jpg') no-repeat center top;}what happens withbody{width:800px;height:2000px;background:#000 url('bg.jpg') no-repeat center top;}The latter method is what I was doing originally. BTW, is there a reason that you changed the page width to 800px, instead of the original 1000px to which I had set it? Anyway, what happens is that the background is then centered (which I want), but the images are not seeming to acknowledge the width:1000px; when I change the magnification.Here are screenshots taken at 100% and 50%: Link to comment Share on other sites More sharing options...
Fmdpa Posted May 10, 2010 Author Share Posted May 10, 2010 100%: Link to comment Share on other sites More sharing options...
Fmdpa Posted May 10, 2010 Author Share Posted May 10, 2010 BTW, there is an image that would go in that white space. The white is just a placeholder. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 10, 2010 Share Posted May 10, 2010 right! think i get it now, you want menu buttons to remain within the white area.at the moment they left of the screen width, and always stay left 280px of that, you need to create a container div width:960px (for 1024 screen, and allow for scrollbar), and reset left to about 20px, and move height, width from body to div.body{background:#000 url('bg.jpg') no-repeat center top;}.menu {width:960px;height:2000px; margin: 0 auto; border:1px dashed red; overflow:hidden;}ul {position:relative; top:100px; left:20px;}<div class="menu"><ul> <li class="a">A<!--<img src="tab1.gif" />--> </li> <li class="b">B<!--<img src="tab2.gif" />--> </li> <li class="c">C<!--<img src="tab3.gif" />--> </li></ul></div> Link to comment Share on other sites More sharing options...
ShadowMage Posted May 10, 2010 Share Posted May 10, 2010 I'm guessing you're also using absolute positioning on your menu. Try dsonesuk's idea but also add position: relative to that div. What I think is happening is that absolute positioning is positioned relative to it's nearest parent with position other than static. If no parent exists, then the <html> is used as the parent. This is why it works when you add the CSS to the html and not the body. So by adding position: relative to the div that dsonesuk suggested you will create a parent container to use for positioning your menu.BTW, a better solution would be to get rid of the absolute positioning on your menu. Absolute positioning is bad news. You should use floats or modify the display property instead. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 10, 2010 Share Posted May 10, 2010 The reason, it didn't work with html and body is that even though the width is set, the setting of the alignment in center was not provided (margin: 0 auto;), and was aligned left by default. With this set it would had probably work. But it is not correct to center, set width, height (except for some occasions to get fixed elements header, footer for example to work in IE6) in the html and body, it should be left to container elements, within the body to do this.As jkloth said positioning should be used as the last resort, and float, margins used instead. Link to comment Share on other sites More sharing options...
Fmdpa Posted May 11, 2010 Author Share Posted May 11, 2010 Fabulous! I've been trying to solve this for a LONG time. Thanks so much! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.