asked on

Center two words

Please go to

http://www.[ my last name ].name/levchenko/football/

and help me get the first and last name and the ball to stay centered

Thanks

Michel Plungjan

Dean OBrien

Hi Mplungjan,

From what i can see the image is not perfectly centered, i removed outer edges to make sure centered. Then used script below to center.

Seems to work for me.

Regards
Easynow

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://www.plungjan.name/levchenko/football/main.css" />
<style>
html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
#bg_image { position: fixed; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; }
#scrollable { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 2; }
</style>
<script type='text/javascript' src='http://www.plungjan.name/levchenko/football/js/jquery.js'></script>
	<script type='text/javascript' src='http://www.plungjan.name/levchenko/football/js/jquery.swfobject.js' ></script>
	<script type='text/javascript' src='http://www.plungjan.name/levchenko/football/js/jquery.metadata.js'></script>
	<script type='text/javascript' src='http://www.plungjan.name/levchenko/football/js/jquery.color.js'></script>
    <script type='text/javascript' src='http://www.plungjan.name/levchenko/football/js/jquery.ceebox.js'></script> 
    <script type='text/javascript' >
    jQuery(document).ready(function(){
		debugging = true; 
		$.fn.ceebox.videos.base.param.allowScriptAccess = "sameDomain" //added to kill the permissions problem
		
		//$().ceebox(); //used to test to make sure the init call works.
		$(".ceebox").ceebox({boxColor:'#fff',borderColor:'#525252',textColor:'#333',videoJSON:"js/humor.json"});
		$("map").ceebox({fadeOut:"slow",fadeIn:"slow",onload:function(){$("#cee_box").animate({backgroundColor:"#F00"},function(){$(this).animate({backgroundColor:"#fff"})});}});			
		$(".ceebox2").ceebox({unload:function(){$("body").css({background:"#ddf"})}});
		//window.console.log($.fn.ceebox.videos.colbertFull)
		$("body").ceebox(); //uncomment and every link on the page is in one gallery
		var testhtml = "<a href='http://balsaman.org' title='Balsa Man'>Balsa Man</a>"
		var testhtml2 = "<div style='padding:20px;text-align:center'><h2>Hi I am some content built as a javascript variable!</h2><p><a href='#' class='cee_close'>Close Me</a></p></div>"
		$("#testlink").click(function(){
			$.fn.ceebox.overlay();
			$.fn.ceebox.popup(testhtml,{htmlWidth:800});
			return false;		  
		});
		$("#testlink2").click(function(){
			$.fn.ceebox.overlay();
			$.fn.ceebox.popup(testhtml2,{width:600,height:400});
			return false;
		});
	});
    </script>
    
	<link rel="stylesheet" href="http://www.plungjan.name/levchenko/football/css/ceebox.css" type="text/css" media="screen" />
	<style type="text/css">
		body{font:12px Arial, Helvetica, sans-serif; color:#222222;}
		p,h1,h2,ul{margin:10px 0 4px;}
		#wrap{width:800px;margin:auto;}
		#ajaxcontent {border:1px dotted #777;padding:6px;color:#666;text-align:center;margin-top:10px;}
		ul {padding-left:40px;}
		hr {margin:40px 0;}
		a {color:#222222; font-weight:bold }
	</style>
<script>
function center(){
 var bdy = document.body;
 var browseWidth=bdy.clientWidth; 
 var browseHeight=bdy.clientHeight;
 var theball = document.getElementById('ball');
 theball.style.left=browseWidth/2-44;
 theball.style.top=browseHeight/2-40;
}
</script> 
</head>
<body onload="center();">
<div><img id="bg_image" src="soccer_fieldg.jpg" alt="" title="" /></div>
<div id="scrollable" ><!-- style="background:url(http://www.plungjan.name/levchenko/football/images/football_t.png); background-repeat:no-repeat" --> 
<div style="position:absolute;top:2.5%; left:48.5%"><br /><a href=""><img src="http://www.plungjan.name/levchenko/football/images/nl.png" border="0" alt="NL" /></a>&nbsp;&nbsp;&nbsp;<a href=""><img src="images/ru.png" alt="RU" border="0" /></a>&nbsp;&nbsp;&nbsp;<a href=""><img src="images/gb.png" alt="EN" border="0" /></a></div>
<a href="bio.html" style="position:absolute;top:4%;left:7%">BIO</a> 
<a href="gallery.html" style="position:absolute;top:4%;left:90%">GALLERY</a>
<a href="social.html" style="position:absolute;top:95%;left:7%">NEWS/SOCIAL</a>
<!-- a href="news.html" style="position:absolute;top:50%;left:8%">NEWS</a -->
<a href="contact.html" style="position:absolute;top:95%;left:88%">CONTACT/LINKS</a>
<!-- a href="links.html" style="position:absolute;top:50%;left:91%">LINKS</a -->
<div style="position:absolute;top:50%;left:40%">
<table style="font-size:20pt;margin:0;padding:0; border:0px solid white" ><tr><td style="background-color:#4f4f4f;">EVGENIY</td><td style="width:80px"></td><td style="background-color:#4f4f4f;">LEVCHENKO</td></tr></table>
</div>
<img src="http://www.plungjan.name/levchenko/football/images/football_icon.png" id ="ball" style="position:absolute;left:100px;top:100px;"/> 
<!--div id="nav">
<div id="head">
<span style="float:left"><h1 style="margin:0 0 0 30%;color:#222222;font-size:330%"></h1></span>
</div>
<div id="menu"  style="float:right; width:50%; margin-right:5%">
<span id="navbuttons"><a href="index.html">HOME</a>  <a href="bio.html">BIO</a>  <a href="gallery.html">GALLERY</a> <a href="blog.html">WEBLOG</a> <a href="contact.html">CONTACT</a></span>
</div-->
<!-- img src="http://www.plungjan.name/levchenko/football/images/football_t.png" height="500" --> 
</div></div>
</body>

Open in new window

Dean OBrien

I forgot, it will need recalling on resize.
Easynow

Dean OBrien

Haha sorry for the multie posts....

Didnt read full question regaring the names etc, do adapt above to include the names as well, just set a div that contains both the names and the ball to a fixed size i.e. 300px, then be sure to subtract 150px in the calculaton etc.

Michel Plungjan

ASKER

thanks, I'll take a look. I already had the image in the center cell but the hard part seemed to be that the text is not symmetric

Michel Plungjan

ASKER

This is almost it !

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://www.plungjan.name/levchenko/football/main.css" />
<style>
html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
#bg_image { position: fixed; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; }
#scrollable { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 2; }
</style>
<script type='text/javascript' src='http://www.plungjan.name/levchenko/football/js/jquery.js'></script>
        <script type='text/javascript' src='http://www.plungjan.name/levchenko/football/js/jquery.swfobject.js' ></script>
        <script type='text/javascript' src='http://www.plungjan.name/levchenko/football/js/jquery.metadata.js'></script>
        <script type='text/javascript' src='http://www.plungjan.name/levchenko/football/js/jquery.color.js'></script>
    <script type='text/javascript' src='http://www.plungjan.name/levchenko/football/js/jquery.ceebox.js'></script> 
    <script type='text/javascript' >
    jQuery(document).ready(function(){
                debugging = true; 
                $.fn.ceebox.videos.base.param.allowScriptAccess = "sameDomain" //added to kill the permissions problem
                
                //$().ceebox(); //used to test to make sure the init call works.
                $(".ceebox").ceebox({boxColor:'#fff',borderColor:'#525252',textColor:'#333',videoJSON:"js/humor.json"});
                $("map").ceebox({fadeOut:"slow",fadeIn:"slow",onload:function(){$("#cee_box").animate({backgroundColor:"#F00"},function(){$(this).animate({backgroundColor:"#fff"})});}});                      
                $(".ceebox2").ceebox({unload:function(){$("body").css({background:"#ddf"})}});
                //window.console.log($.fn.ceebox.videos.colbertFull)
                $("body").ceebox(); //uncomment and every link on the page is in one gallery
                var testhtml = "<a href='http://balsaman.org' title='Balsa Man'>Balsa Man</a>"
                var testhtml2 = "<div style='padding:20px;text-align:center'><h2>Hi I am some content built as a javascript variable!</h2><p><a href='#' class='cee_close'>Close Me</a></p></div>"
                $("#testlink").click(function(){
                        $.fn.ceebox.overlay();
                        $.fn.ceebox.popup(testhtml,{htmlWidth:800});
                        return false;             
                });
                $("#testlink2").click(function(){
                        $.fn.ceebox.overlay();
                        $.fn.ceebox.popup(testhtml2,{width:600,height:400});
                        return false;
                });
                center();
        });
    </script>
    
        <link rel="stylesheet" href="http://www.plungjan.name/levchenko/football/css/ceebox.css" type="text/css" media="screen" />
        <style type="text/css">
                body{font:12px Arial, Helvetica, sans-serif; color:#222222;}
                p,h1,h2,ul{margin:10px 0 4px;}
                #wrap{width:800px;margin:auto;}
                #ajaxcontent {border:1px dotted #777;padding:6px;color:#666;text-align:center;margin-top:10px;}
                ul {padding-left:40px;}
                hr {margin:40px 0;}
                a {color:#222222; font-weight:bold }
        </style>
<script>
function center(){
 var bdy = document.body;
 bdy.style.background="url()";
 var browseWidth=bdy.clientWidth; 
 var browseHeight=bdy.clientHeight;
 var theball = document.getElementById('ball');
 theball.style.left=browseWidth/2-44;
 theball.style.top=browseHeight/2-40;
 var fs = parseInt(document.getElementById('t1').style.fontSize);
 document.getElementById('t1').style.fontSize=(parseInt(browseWidth/300))+'em'
}
window.onresize=center;
</script> 
</head>
<body>
<div><img id="bg_image" src="http://www.plungjan.name/levchenko/football/images/soccer_fieldg.jpg" alt="" title="" /></div>
<div id="scrollable" ><!-- style="background:url(http://www.plungjan.name/levchenko/football/images/football_t.png); background-repeat:no-repeat" --> 
<div style="position:absolute;top:2.5%; left:48.5%"><br /><a href=""><img src="http://www.plungjan.name/levchenko/football/images/nl.png" border="0" alt="NL" /></a>   <a href=""><img src="http://www.plungjan.name/levchenko/football/images/ru.png" alt="RU" border="0" /></a>   <a href=""><img src="http://www.plungjan.name/levchenko/football/images/gb.png" alt="EN" border="0" /></a></div>
<a href="bio.html" style="position:absolute;top:4%;left:7%">BIO</a> 
<a href="gallery.html" style="position:absolute;top:4%;left:90%">GALLERY</a>
<a href="social.html" style="position:absolute;top:95%;left:7%">NEWS/SOCIAL</a>
<!-- a href="news.html" style="position:absolute;top:50%;left:8%">NEWS</a -->
<a href="contact.html" style="position:absolute;top:95%;left:88%">CONTACT/LINKS</a>
<!-- a href="links.html" style="position:absolute;top:50%;left:91%">LINKS</a -->
<div style="position:absolute;top:50%;left:30%">
<table id="t1" style="font-size:3em;margin:0;padding:0; border:0px solid white" ><tr><td style="background-color:#4f4f4f;">EVGENIY</td><td style="width:80px"></td><td style="background-color:#4f4f4f;">LEVCHENKO</td></tr></table>
</div>
<img src="http://www.plungjan.name/levchenko/football/images/football_icon.png" id ="ball" style="position:absolute;left:100px;top:100px;"/> 
</div></div>
</body>

Open in new window

Dean OBrien

The reason it appears slightly out, is because both your images are not symmetrical, thus the centre of the image is not the centre of the pitch. Try swapping for the two images that i have attached.

Easynow
football-icon.png
soccer-fieldg.jpg

Michel Plungjan

ASKER

Erm..

I did not see much change...

Do you by the way have a good way to put the white back in the transparent parts of the ball?

Dean OBrien

The margin of the left was larger than on the right, thus the middle line would have been in a different place depending on the width of the browser. I have attached a new ball with the white added back in. I forgot to mention, you should also amend the offset values in the center() function:

theball.style.left=browseWidth/2-41;
theball.style.top=browseHeight/2-41;

Because the new ball image is 82px wide. Let me know if it works.
Cheers
Easynow
football-icon.png

Dean OBrien

For info, have a look at this attached file.
It is the file that you are currently using for your pitch, split directly in the middle. You can see the mid line is off-centre.

Easynow
soccer-fieldg2.jpg

Michel Plungjan

ASKER

Wow.

VERY close

Thanks for the ball. I made a new background with the page grayscaled

http://www.plungjan.name/levchenko/football/test.html

Please give me a hand with the last bit. The name scales but I have a hard time keeping it in the center :(

ASKER CERTIFIED SOLUTION

Dean OBrien

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Michel Plungjan

ASKER

Thanks - that will do I think

I added the change of font back in, I really should make the table/div correspondingly narrower OR make the border the same dark grey since when really narrowing the window, the background of the div/table with the name overlaps the lighter border...

But thanks for your help.

What do you think of the concept by the way?

Michel Plungjan

ASKER

Thanks again

Dean OBrien

You can just remove background colors from the table cells and then you wont have the overlap on the border. Might be useful if you could reduce the width of the centre cell (as at smaller widths it pushers the text to far away) and font size, depending on the width of the browser.

Concept seems good, appreciate working progress, but the front page is in danger of being a bit dull.

Regards
Easynow

p.s. cheers for points

Michel Plungjan

ASKER

Hehe.. Perhaps we can find a way to put the left part of this one
http://www.plungjan.name/levchenko/football/images/football.jpg
there

It should ideally also resize and be transparent

Dean OBrien

Try this file instead:

Easynow
soccer-fieldg2.jpg

Michel Plungjan

ASKER

VERY nice - can you tell me how to do that (PSP7 or Gimp) or do it with this file instead (no green artifacts), please?

Perhaps only in the left square

soccer-fieldg.jpg

Dean OBrien

No probs, i normally use photoshop, but heres how to do it using the latest version of GIMP.

First step is do make sure the overlay image (football.jpg) is exactly the same dimensions as the background image (soccer_field.jpg).

To do this, open overlay -> Scale image -> click chainlink logo to unconstrain -> change dimensions to match (i.e. 1024pxx768px) -> save image.

Next step (whilst having above image open) -> select file -> open as layer -> background image (soccer_field.jpg).

You will then see both images on the right hand side in the layers panel. Make sure the background layer is beneath the overlay. Then select the overlay layer (on the right), then in the same panel at the top you will see a opacity slider, reduce the opacity of the overlay image to suit.

Regards
Easynow

Michel Plungjan

ASKER

Great - so if I want only the left part of the image (crop about 2/3 of the right side) I still need to paste it into a canvas of the same size as the soccer field?

Dean OBrien

Yeh, you would crop the overlay, you can use any size overlay, problem being if its too small you can see the edge of the overlay and it make look messy. One way would be to ensure the overlay finishes exactly on the half way line to give a neat finish.

regards
Easynow