resizing problem

gabi

New Member
Hello!

I have this problem,

my navigation is wide like whole site and when I try to resize the site with Ctrl and (-), the last button is pushed below navigation bar.

here is the link of my site: http://tri.site90.net/index.html (still under construction)

and my html:

<body>

<div id="main_container">

<div id="header">

<div id="logo"></div>
<div id="logo_info">
<ul>
<li>Nazovite nas: <span class="number">095<span style="display:none">_</span> 9006907</span></li>
<li><li>
</ul>
</div>


<div id="nav">
<ul>
<li><a href="#">Početna</a></li>
<li><a href="#">O nama</a></li>
<li><a href="#">Galerija</a></li>
<li><a href="#">Reference</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">myMaja.com</a></li>
</ul>
</div>
</div>

</div>

</body>

and #nav css:

#nav {margin: 0px;padding: 0px;clear: both;width: 960px;}
#nav ul li {text-decoration: none;padding: 0px; float: left;margin: 0px;}
#nav ul li a:link {font-size: 14px;line-height: 18px;font-weight: normal; color: #FFFFFF;text-decoration: none;padding-top: 25px;
padding-right: 52px;padding-bottom: 24px;padding-left: 52px;
background-color: transparent;margin-top: 0px;margin-right: 1px;
margin-bottom: 0px;margin-left: 0px; display: block;
text-align: center;}

#nav ul li a:hover {backckground-position: left top;
background-image: url(img/nav_hover_bgr.png);
background-repeat: repeat-x;}

I know that a little number of people do the resizing, but my web design teacher said that a site is good designed when you resize it and it not crumble down!

Any suggestion? I appreciate it very much, thanks a lot!!
 

Phreaddee

Super Moderator
Staff member
Actually em is better. As it is relative.
For you nav and resizing % & px would be one and the same essentially.
 

gabi

New Member
thanks!
I tried that and played with position and overfolw, it works fine in IE, mozilla and Opera, but in Safari and Chrome it is the same!!

I will try something else!!
 

DOAWebDesigns

New Member
Use CSS Browser Selector

thanks!
I tried that and played with position and overfolw, it works fine in IE, mozilla and Opera, but in Safari and Chrome it is the same!!

I will try something else!!

Have you tried using CSS Browser Selector? It should solve your issue or you should be able to do width: 100%. By the way your teacher is right.

Hope that helps.
 

PixelPusher

Super Moderator
Staff member
Inorder to accomodate a user zooming the browser window you will want to do like other have suggested, use the "em" unit. Ems scale by nature and each element on the page inherits its size from its parent.

Here is a good blog post to help you understand how each unit type works: CSS Font size units

Using "em" in padding will also allow the padding to scale. If you look at one of the products on our website you can see that the grey sub menu bar scales accordingly when zooming.

Because im meticulous about keeping code as concise as possible, I have reduced you css rules slightly with the css shorthand properties.

Code:
div#nav {
  margin: 0;
  padding: 0;
  clear: both; /* if your header or following sibling is not floating, erase this property */
  width: 960px;
  overflow:hidden; /* allow parent to resize for floated children */
}
div#nav ul li {
  float: left;
  padding: 0;
  margin: 0;
}
div#nav ul li a:link {
  font-size: 14px;
  line-height: 18px;	
  color: #FFFFFF;
  text-decoration: none;
  padding:25px 52px 24px;
  margin:0 1px 0 0;	
  display: block;
  text-align: center;
}

div#nav ul li a:hover {
  background: url(img/nav_hover_bgr.png) left top repeat-x;
}
 

gabi

New Member
Thanks a lot!!

I changed the font size from px in ems and works fine!!

Should I make div width and height also in ems?
 
Top