5 Replies - 594 Views - Last Post: 27 January 2013 - 04:39 PM

#1 lebadapetru  Icon User is offline

  • New D.I.C Head

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

question about percentage instead of pixels

Posted 24 January 2013 - 11:00 AM

So im trying to insert a banner into my web page with the code below but when i set width/height with pixels, the banner isnt setting centralized.I mean for my resolutin it looks fine but on other one it looks terrible.
SO my question is can i set percentage instead of pixels? If its posible can you show me an example?
#logo {
    height:30%;
    width:70%;
    margin: 0 auto;
    background: url(banner.jpg);
  } 



Is This A Good Question/Topic? 0
  • +

Replies To: question about percentage instead of pixels

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2890
  • View blog
  • Posts: 9,597
  • Joined: 12-December 12

Re: question about percentage instead of pixels

Posted 24 January 2013 - 11:21 AM

You haven't really provided enough information: what type of element is logo? What parent element does it have, etc.?

Nonetheless, using percentages as height/width means this percentage of its parent element. If the parent doesn't have a pre-determined height/width then the percentage won't work.
Was This Post Helpful? 0
  • +
  • -

#3 lebadapetru  Icon User is offline

  • New D.I.C Head

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

Re: question about percentage instead of pixels

Posted 24 January 2013 - 01:18 PM

oh yeah sorry , so
<div id="logo"></div>
and i dont really kow what you mean with parents element cuz im still learning, but i think this is
body
{ 
background-image:url('bg2.jpg');
background-repeat:no-repeat;
background-position:center;
width: 100%;
height: 100%;
overflow-x:hidden; 
overflow-y:auto; 
}



I mean i need to set width/height percentage of this background size wich is also set to user resolution i think..
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2890
  • View blog
  • Posts: 9,597
  • Joined: 12-December 12

Re: question about percentage instead of pixels

Posted 24 January 2013 - 02:46 PM

You are setting the height/width for the div, not the background image for this div.

There are background properties which you should study. There is background-size: cover if you are trying to stretch the background image, but it is not fully supported cross-browser.

BTW If you are trying to stretch the BODY to the height of the browser (the viewport) then you also need html { height: 100%; }.

An understanding of the term parent or parent-element is essential in CSS (and HTML):

<body>
<div>The parent to this DIV is BODY.</div>
</body>


Hint: apply background-colours to your body, div, etc., temporarily when testing so that you can see clearly what is happening.

This post has been edited by andrewsw: 24 January 2013 - 02:45 PM

Was This Post Helpful? 0
  • +
  • -

#5 lebadapetru  Icon User is offline

  • New D.I.C Head

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

Re: question about percentage instead of pixels

Posted 25 January 2013 - 06:33 AM

Eh now you really stucked me...ok so maybe i can understand better if il show you the entire code and a picture with my index,i also mark the errors.

<!DOCTYPE html>
<html>
<head>
<title>KriptonixCommunity</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />	
<meta name="description">
<link rel="stylesheet" type="text/css" href="Untitled-1.css" />
<style>
body
{ 
background-image:url('bg2.jpg');
background-repeat:no-repeat;
background-position:center;
width: 100%;
height: 100%;
overflow-x:hidden; 
overflow-y:auto; 
}
#logo {
    height: 274px;
    width: 1212px;
    margin: 0 auto;
    background: url(banner.jpg);
  } 
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: 60px;
  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="logo"></div>
<ul id="menu">
	<li>
		<a href="#">Forum</a>
		<ul>
			<li><a href="#">Click pentru pentru a accesa forumul.</a></li>
		</ul>
	</li>
        <li><a href="#" target="_blank">Vote</a></li>
        <li><a href="#">Contact</a>
        <ul>
            <li><a href="#">Nr de telefon:0769867245</a></li>
	    <li><a href="#">ID Messenger:ktx_14k@yahoo.com</a></li>
        </ul>
        </li>
</ul>
<table align="center" 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>
<a href="#"><img id="slide-4" src="data/images/cinesuntem.jpg" alt="Cinesuntem" title="Cinesuntem" /></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>



http://imageshack.us...9/68726653.jpg/ <--- here is the picture

in the red marks is the centralizing error.
with blue is the navigation bar wich i cant center it between slideshow and banner.Even if it show me centred on a different resolution is a little bit in left or right.

I know the rules.I just want to know my mystakes,im still a kid and this is the best way to learn those codes.
Besides i dont even know much english so its hard for me to understand what you are saying.Thanks in advance
Was This Post Helpful? 0
  • +
  • -

#6 LuckyRoot  Icon User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 7
  • Joined: 27-January 13

Re: question about percentage instead of pixels

Posted 27 January 2013 - 04:39 PM

To answer your question yes, you could use percentages instead of pixels. That may not be the best practice here,like andrew said the percentages would be determined by the parent element. Are you familiar with the box-model plot?
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1