Question

Page 1 of 1

12 Replies - 491 Views - Last Post: 29 January 2013 - 12:54 PM

#1 lebadapetru  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 24-January 13

Question

Posted 28 January 2013 - 08:47 AM

I need few answers about what i make wrong in this website.
I try to make the background to resize on user resolution but it show like in the pictures below

http://imageshack.us...0128162718.png/ <-thats how it looks on my resolution
http://imageshack.us...otoshare2w.png/ <-thats how it looks on a different resolution

the code is :

<!DOCTYPE html>
<html>
<head>
<title>KriptonixCommunity</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/default.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/init.js" type="text/javascript"></script>
<style>
html,body
{ 
background-image:url('bg.jpg');
background-repeat:no-repeat;
background-position:center;
width: 100%;
height: 100%;
overflow-x:hidden; 
overflow-y:auto;
margin: 0px;
padding: 0px 
}

#banner {
 overflow: hidden;
 margin: 0 0 0 0;
 padding: 0 0 0 0;
width: 101%;
height: 250px;
}
table,th,td
{
border:0px solid black;
background-repeat:no-repeat;
background-position:center;
overflow-x:hidden; 
overflow-y:auto;
}
a {text-decoration: none}
.player
{
  position: fixed;
  top: 300px;
  left: 85%;
  width: 100%;
}
</style>
	
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="Visual Slideshow, Online Slideshow, Photos Slideshow" />
	<meta name="description" content="Visual Slideshow created with Visual Slideshow, a free wizard program that helps you easily generate beautiful web slideshow" />
	<link rel="stylesheet" type="text/css" href="engine/css/slideshow.css" media="screen" />
	<style type="text/css">.slideshow a#vlb{display:none}</style>
	<script type="text/javascript" src="engine/js/mootools.js"></script>
	<script type="text/javascript" src="engine/js/visualslideshow.js"></script>
	
</head>
<body>
<div id="banner" align="center">
<img src="banner2.jpg">
</div>
<div class="menu">
		<a href="#">Forum</a>
		<a href="#">Metin2kTx</a>
		<a href="#">Vote</a>
		<a href="#">Contact</a>
	</div>

<table align="center" border="2" valign="center" width="800" height="500">
<tr><td>
	<div id="show" class="slideshow">
	<div class="slideshow-images">
<a href="#"><img id="slide-0" src="data/images/sigla.jpg" alt="sigla" title="sigla" /></a>
<a href="#"><img id="slide-1" src="data/images/cs.kriptonix.jpg" alt="cs.KripToniX" title="cs.KripToniX" /></a>
<a href="#"><img id="slide-2" src="data/images/kriptonix.jpg" alt="kriptonix" title="kriptonix" /></a>
<a href="#"><img id="slide-3" src="data/images/metin2kriptonix.jpg" alt="metin2KripToniX" title="metin2KripToniX" /></a>


	</div>
	
<td width="156" height="274"><div class="player">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="156" height="274"
  style="position:absolute; left:0;center:0;">
  <param name="movie" value="player.swf" />
  <param name="quality" value="high" />
  <param name="allowScriptAccess" value="always" />
  <param name="wmode" value="transparent">
     <embed src="player.swf"
      quality="high"
      type="application/x-shockwave-flash"
      WMODE="transparent"
      width="156"
      height="274"
      pluginspage="http://www.macromedia.com/go/getflashplayer"
      allowScriptAccess="always" />
</object>
</div>
</table>
<table align="center" valign="center"  width="800" height="490">
<tr><td><span style="background-color: #000000;"><iframe width="800" height="450"  src="http://www.youtube.com/embed/edYCtaNueQY?rel=0;showinfo=0;controls=1;HD=1;" frameborder="0" allowfullscreen></iframe>
</table>
<div id="wrapfooter" align="center" valign="bottom">
	<span class="copyright" style="color:#666666;font-weight:bold"> &copy; 2013 <a href="http://www.kriptonixcommunity.com/" style="color:#669966;font-weight:bold"> kriptonix community</a> , inc. all rights reserved</span>
</div>
</body>
</html>


can someone tell me what i make wrong?
I need it fast so need some advices please.

Is This A Good Question/Topic? 0
  • +

Replies To: Question

#2 FerretHolmes  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 25
  • View blog
  • Posts: 106
  • Joined: 12-November 12

Re: Question

Posted 28 January 2013 - 01:32 PM

The problem is occurring because you have set the background image to no-repeat and gave it a height and width of 100%. What this is doing is telling the browser that the maximum size your background image can go is 100% of it's set dimensions. If you are not worried about scaling issues you could use the cover attribute which would scale the background image to the size of the browser window.
body {
 background-image: url('bg.jpg');
 background-repeat: cover;
 margin: 0;
 padding: 0;
}

Was This Post Helpful? -1
  • +
  • -

#3 andrewsw  Icon User is online

  • Provides a RESTful service
  • member icon

Reputation: 1082
  • View blog
  • Posts: 3,378
  • Joined: 12-December 12

Re: Question

Posted 28 January 2013 - 02:20 PM

View PostFerretHolmes, on 28 January 2013 - 01:32 PM, said:

The problem is occurring because you have set the background image to no-repeat and gave it a height and width of 100%. What this is doing is telling the browser that the maximum size your background image can go is 100% of it's set dimensions. If you are not worried about scaling issues you could use the cover attribute which would scale the background image to the size of the browser window.
body {
 background-image: url('bg.jpg');
 background-repeat: cover;
 margin: 0;
 padding: 0;
}

This is not correct:
The 100% values are being applied to body and html, not to the background-image;
No-repeat is required as the OP only wants a single image;
The cover (or contain) property-values apply to background-size, not to background-repeat.
Was This Post Helpful? 1
  • +
  • -

#4 FerretHolmes  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 25
  • View blog
  • Posts: 106
  • Joined: 12-November 12

Re: Question

Posted 28 January 2013 - 02:27 PM

View Postandrewsw, on 28 January 2013 - 02:20 PM, said:

View PostFerretHolmes, on 28 January 2013 - 01:32 PM, said:

The problem is occurring because you have set the background image to no-repeat and gave it a height and width of 100%. What this is doing is telling the browser that the maximum size your background image can go is 100% of it's set dimensions. If you are not worried about scaling issues you could use the cover attribute which would scale the background image to the size of the browser window.
body {
 background-image: url('bg.jpg');
 background-repeat: cover;
 margin: 0;
 padding: 0;
}

This is not correct:
The 100% values are being applied to body and html, not to the background-image;
No-repeat is required as the OP only wants a single image;
The cover (or contain) property-values apply to background-size, not to background-repeat.


You are absolutely right. I didn't double check my facts before I replied.
Was This Post Helpful? 1
  • +
  • -

#5 lebadapetru  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 24-January 13

Re: Question

Posted 29 January 2013 - 05:23 AM

im glad you have understood that problem holmes but...how this can help me?
i wrote background-size: cover;
but i dont think this would help me alot.
So nothing from my code is wrong? or what beacuse i dont get it...
Was This Post Helpful? 0
  • +
  • -

#6 lebadapetru  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 24-January 13

Re: Question

Posted 29 January 2013 - 05:32 AM

ahh sorry o spoke to fast:(
I was testing the website again and .. i did it...its awesome
Thanks alot andrewsw.:)
Just one more question if you let me....background-size: cover; worked for background but it will work for banner/slideshow/youtube frame also?
Was This Post Helpful? 0
  • +
  • -

#7 lebadapetru  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 24-January 13

Re: Question

Posted 29 January 2013 - 06:00 AM

sss

Oh sorry it i've try it and it seems it works.Thanks andrewsw:)
One more question if you let me....how you can see above i have a banner a slideshow a youtube frame as content... how can i make them to have the same resolution everywhere?? Now the background its the same on every resolution but the content still differ from each other
Was This Post Helpful? 0
  • +
  • -

#8 andrewsw  Icon User is online

  • Provides a RESTful service
  • member icon

Reputation: 1082
  • View blog
  • Posts: 3,378
  • Joined: 12-December 12

Re: Question

Posted 29 January 2013 - 06:27 AM

You could investigate device-dependent CSS stylesheets ("resolution dependent layouts"). This page should get you started.

However, it may also require the use of Javascript. There are probably packages (plug-ins) that can assist with this process.

It depends.. Little research required!
Was This Post Helpful? 0
  • +
  • -

#9 lebadapetru  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 24-January 13

Re: Question

Posted 29 January 2013 - 10:17 AM

the background is good now but idk how to make a general size for every resolution....any idea?
Was This Post Helpful? 0
  • +
  • -

#10 lebadapetru  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 24-January 13

Re: Question

Posted 29 January 2013 - 10:38 AM

View Postlebadapetru, on 29 January 2013 - 10:17 AM, said:

the background is good now but idk how to make a general size for every resolution....any idea?


for the content i mean... a general size for the content
Was This Post Helpful? 0
  • +
  • -

#11 FerretHolmes  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 25
  • View blog
  • Posts: 106
  • Joined: 12-November 12

Re: Question

Posted 29 January 2013 - 12:34 PM

You could use a wrapper div to hold all of your page content at a fixed size. Using a fixed width of 960px you can ensure that the page will display the same on any sized browser.
 
#wrapper {
  margin: 0 auto;
  width: 960px;
}
#content {
  margin: 0 auto;
  width: 100%;
}

And the html.
<div id="wrapper">
  <div id="content"> 
     banner, content, etc.
  </div>
</div>

Was This Post Helpful? 0
  • +
  • -

#12 andrewsw  Icon User is online

  • Provides a RESTful service
  • member icon

Reputation: 1082
  • View blog
  • Posts: 3,378
  • Joined: 12-December 12

Re: Question

Posted 29 January 2013 - 12:38 PM

View PostFerretHolmes, on 29 January 2013 - 12:34 PM, said:

You could use a wrapper div to hold all of your page content at a fixed size. Using a fixed width of 960px you can ensure that the page will display the same on any sized browser.
 
#wrapper {
  margin: 0 auto;
  width: 960px;
}
#content {
  margin: 0 auto;
  width: 100%;
}

And the html.
<div id="wrapper">
  <div id="content"> 
     banner, content, etc.
  </div>
</div>

Why are you using two divs?!
Was This Post Helpful? 0
  • +
  • -

#13 FerretHolmes  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 25
  • View blog
  • Posts: 106
  • Joined: 12-November 12

Re: Question

Posted 29 January 2013 - 12:54 PM

View Postandrewsw, on 29 January 2013 - 12:38 PM, said:

View PostFerretHolmes, on 29 January 2013 - 12:34 PM, said:

You could use a wrapper div to hold all of your page content at a fixed size. Using a fixed width of 960px you can ensure that the page will display the same on any sized browser.
 
#wrapper {
  margin: 0 auto;
  width: 960px;
}
#content {
  margin: 0 auto;
  width: 100%;
}

And the html.
<div id="wrapper">
  <div id="content"> 
     banner, content, etc.
  </div>
</div>

Why are you using two divs?!


It is a personal preference. While they are essentially serving the same purpose in this context, if I wanted to add two containers like a footer or maybe even a header I would obviously nest them inside of the wrapper.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1