Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

HTML Forum


You are currently viewing our HTML Forum as a guest. Please register to participate.
Login



Post a Project »

Find a Professional HTML Freelancer!

Find a Freelancer to help you with your HTML projects

FREE Outsourcing eBook!

Reply
problems with aligning and centering 3 background images
Old 11-17-2006, 01:38 PM problems with aligning and centering 3 background images
Junior Talker

Posts: 3
Trades: 0
Dear Forum

I am working on an html site that is about 600pixels wide and 600pixels in height. Center / Top align. The site will not appear as a popup so I don't have control over the resize functionality or the scrollbars of the browser window.

I would however like to control the appearance of the left and right and bottom parts of the page if additional images (they're not repeatable backgrounds, but rather 500x800pixel gif images) in case the user resizes the window manually.

--------------------------------------------------------------------------------
Main Main Question is : How do I do that without having the horizontal scrollbars appear?
--------------------------------------------------------------------------------

Let's say I have three images that are next to each other aligned on the top of the browser:

[a] [b] [c]

Image [b] should always be 600 pixels. Image [a] and [c] should resize depending on the browsersize, so that image [b] remains centered at all times. So if the browser window is 1200pixels images [a] and [c] should both be 300 pixels.

image [a] should align top right.
image [b] should always be centered.
image [c] should align top left.

Here is the code I have so far:

Any help appreciated.

thanks

stephan

-------------------------------

<style type="text/css">
<!--

#a{
background-color: #00078;
background-image: url(images/lines_01.gif);
background-repeat: no-repeat;
background-position: top right;
position: static;
height: 600px;
width: 300px;
}

#b{
background-color: yellow;
background-image: url(images/lines_02.gif);
background-repeat: no-repeat;
background-position: top center;
position: static;
width: 700px;
height: 600px;
}

#c{
background-color: yellow;
background-image: url(images/lines_03.gif);
background-repeat: no-repeat;
background-position: top left;
position: static;
height: 600px;
width: 300px;
}




-->
</style>


</HEAD>
<BODY BGCOLOR="#FFFFFF" LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0">

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><div id="a"></div></td>
<td><div id="b"></div></td>
<td><div id="c"></div></td>

</tr>
</table>
</td>
</tr>
</table>


</BODY>
stephank is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 11-17-2006, 01:55 PM Re: problems with aligning and centering 3 background images
vangogh's Avatar
Post Impressionist

Latest Blog Post:
Why Responsive Design?
Posts: 10,815
Name: Steven Bradley
Location: Boulder, Colorado
Trades: 0
I'll be honest that I'm not sure this sounds like the best appoach to a design, but what you need to do is specify the widths of images a and c as a % instead of a fixed amount. Using px will force the images o be a certain size, but using % will allow them to resize.

I also noticed you're giving image b a width of 700px even though you only want it to be 600px.
__________________
l Search Engine Friendly Web Design |
Please login or register to view this content. Registration is FREE

l Tips On Marketing, SEO, Design, and Development |
Please login or register to view this content. Registration is FREE

l
Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
vangogh is offline
Reply With Quote
View Public Profile Visit vangogh's homepage!
 
Old 11-17-2006, 03:21 PM Re: problems with aligning and centering 3 background images
Junior Talker

Posts: 3
Trades: 0
Dear vangogh

Thanks for your reply. You're right it's supposed to be 600pixels.

I have tried to use % for images a and c but without success. Both image disappear if I do that for some reason.

Do I need to dig into other solutions for this that involve javascript onresize events and then crop the images somehow?

Any ideas or approaches appreciated.


Best

StephanK

Quote:
Originally Posted by vangogh View Post
I'll be honest that I'm not sure this sounds like the best appoach to a design, but what you need to do is specify the widths of images a and c as a % instead of a fixed amount. Using px will force the images o be a certain size, but using % will allow them to resize.

I also noticed you're giving image b a width of 700px even though you only want it to be 600px.
stephank is offline
Reply With Quote
View Public Profile
 
Old 11-18-2006, 03:32 PM Re: problems with aligning and centering 3 background images
vangogh's Avatar
Post Impressionist

Latest Blog Post:
Why Responsive Design?
Posts: 10,815
Name: Steven Bradley
Location: Boulder, Colorado
Trades: 0
I generally don't design with images that can change size so I'm not certain, but I'm thinking the % doesn't work because it's a background image and that it might need to be coded in the html instead.

It's more of a guess, but try placing one of the images directly inside the table if that's possible and then apply the % width to it.

You can use JavaScript, but I think that will be more of a pain than it's worth.
__________________
l Search Engine Friendly Web Design |
Please login or register to view this content. Registration is FREE

l Tips On Marketing, SEO, Design, and Development |
Please login or register to view this content. Registration is FREE

l
Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
vangogh is offline
Reply With Quote
View Public Profile Visit vangogh's homepage!
 
Old 11-19-2006, 01:59 PM Re: problems with aligning and centering 3 background images
Junior Talker

Posts: 3
Trades: 0
Hmmm. Yeah I tried the table with the % instead of absolute values... the problem of the horizontal scrollbars remains.

I started digging into javascript which I'm fairly new to. But it seems to work in mozilla on PC. I think I need to do a sepearte code for explorer. No scrollbars. however when it refreshes the width and the position of the images I sometimes get a one pixel line between the images. Not sure how to avoid that...?

I'll try it this way and test it in all the browsers. If I get decent results I'll stick with it, otherwhise I might need to switch to flash, (which would be unfortunate, just to accomodate the background design...)



------------------------------------------------------------------

<script type="text/javascript">

function updateView() {
if (document.getElementById("bg1")) {
var bg1 = document.getElementById("bg1");
var bg2 = document.getElementById("bg2");
var bg3 = document.getElementById("bg3");

var bg1_origWidth = 600;
var bg2_origWidth = 700;
var bg3_origWidth = 600;

var scrWidth = window.innerWidth;
var scrHeight = window.innerHeight;

bg3.style.width = (scrWidth-bg2_origWidth)/2;

bg1.style.left = ((scrWidth-bg2_origWidth)/2)-bg1_origWidth;
bg2.style.left = (scrWidth-bg2_origWidth)/2;
bg3.style.left = ((scrWidth-bg2_origWidth)/2)+bg2_origWidth;

}
}
</script>






<STYLE TYPE="text/css">
<!--

#bg1 {
position:absolute;
height: 600px;
width: 600px;
background-image: url('images/lines2_01.gif');
background-repeat: no-repeat;
}
#bg2 {
position:absolute;
height: 600px;
width: 700px;
background-image: url('images/lines2_02.gif');
background-repeat: no-repeat;
}
#bg3 {
position:absolute;
height: 600px;
width: 600px;
background-image: url('images/lines2_03.gif');
background-repeat: no-repeat;
}




-->
</STYLE>





</HEAD>
<BODY onload="updateView();" onresize="updateView();" STYLE="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">

<DIV ID="bg1"></DIV>
<DIV ID="bg2"></DIV>
<DIV ID="bg3"></DIV>
stephank is offline
Reply With Quote
View Public Profile
 
Old 11-19-2006, 07:00 PM Re: problems with aligning and centering 3 background images
vangogh's Avatar
Post Impressionist

Latest Blog Post:
Why Responsive Design?
Posts: 10,815
Name: Steven Bradley
Location: Boulder, Colorado
Trades: 0
It's the image though you need to specify in %. If you set the table in %, but leave the image in px then it will force the table cells to be at least the size of the image.

I'd try all combinations of % on images, table cells, etc before trying this in JavaScript. The JavaScript will just be a pain and I don't think it's going to be necessary.
__________________
l Search Engine Friendly Web Design |
Please login or register to view this content. Registration is FREE

l Tips On Marketing, SEO, Design, and Development |
Please login or register to view this content. Registration is FREE

l
Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
vangogh is offline
Reply With Quote
View Public Profile Visit vangogh's homepage!
 
Old 11-19-2006, 07:51 PM Re: problems with aligning and centering 3 background images
mgraphic's Avatar
Truth Seeker

Latest Blog Post:
JAMISONTUNES
Posts: 2,918
Name: Keith Marshall
Location: Connecticut
Trades: 0
FYI - You can resize the parent window with javascript, but beware because this can be considered as annoying to most users.

<body onload="window.resizeTo(600,600);"> (width, height)
__________________

<mgraphic /> - I don't have a solution but I admire the problem.
mgraphic is offline
Reply With Quote
View Public Profile
 
Old 11-21-2006, 12:14 AM Re: problems with aligning and centering 3 background images
vangogh's Avatar
Post Impressionist

Latest Blog Post:
Why Responsive Design?
Posts: 10,815
Name: Steven Bradley
Location: Boulder, Colorado
Trades: 0
The first time a site resizes my browser is the last time I visit that site. Changing things on my side is a deal breaker for me and I'm sure many others as well so be careful if you decide to do it.
__________________
l Search Engine Friendly Web Design |
Please login or register to view this content. Registration is FREE

l Tips On Marketing, SEO, Design, and Development |
Please login or register to view this content. Registration is FREE

l
Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
vangogh is offline
Reply With Quote
View Public Profile Visit vangogh's homepage!
 
Old 11-21-2006, 01:55 PM Re: problems with aligning and centering 3 background images
ADAM Web Design's Avatar
Canadastaninianite

Posts: 5,935
Name: Adam for web page design, not program
Location: Toronto, Ontario, Canada
Trades: 0
That sounds like a messed-up design to me. If they're not backgrounds, why would you treat them as backgrounds?

Having said that, this sounds like a case for the overflow: auto; property. Rather than have users resize the page, put your entire page in a 600 x 600 div with overflow: auto set (this will keep everything constrained) and then go from there.

(You may need it on your other divs as well.)
__________________

Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
(my blog)


Please login or register to view this content. Registration is FREE
(with proof)
ADAM Web Design is offline
Reply With Quote
View Public Profile Visit ADAM Web Design's homepage!
 
Reply     « Reply to problems with aligning and centering 3 background images
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.85327 seconds with 12 queries