8 Replies - 5083 Views - Last Post: 09 March 2012 - 02:30 AM

#1 ccsknight  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 15
  • Joined: 01-March 12

Shrinking Browser Window Problem

Posted 08 March 2012 - 09:33 PM

This might be hard to explain but:

In any browser, when I make the window smaller (not minimize, but "restore down"), at a certain size it begins to
start chopping off my top navigation bar, even though it's set at 100%. Not sure what I'm missing.

SCREENSHOT<--------

Any suggestions would be very helpful, thanks!



HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>my website</title>
<link rel="stylesheet" type="text/css" media="all" href="question.css" />
	<nav id="top_nav_wrap" role="navigation">
		<div id="top_nav_bg">
		<div class="wrapper">
		  <ul id="top_nav">
			<li><a href="http://www.google.com/">Home</a></li>
			<li><a href="http://www.google.com/">Links</a></li>
			<li><a href="http://www.google.com/">Favorites</a></li>
			<li><a href="http://www.google.com/">About</a></li>
		  </ul>
		</div>
		</div>
	</nav>
</head>
<body>

<!-- content goes here -->

</body>
</html>


CSS
html{
	width:100%;
	height:100%;
	background-color:#555555;
	margin:0 auto
}
body{
	width:100%;
	height:100%;
	font-family:courier;
	color:#000000;
	margin:0 auto;
	text-align:center
}
.wrapper{
	background:none;
	width:960px;
	height:auto;
	display:block;
	margin:0 auto;
	padding:0
}
#top_nav_bg{
	background-color:#303030; 
	width:100%;
	height:45px;
	display:inline;
	float:left;
	margin:0 auto;
	padding:0
}
ul#top_nav{
	width:960px;
	height:25px;
	float:left;
	border:none;
	list-style:none;
	display:inline;
	margin:0;
	padding:10px 0
}
ul#top_nav li, .menu-blog-container ul li{
	float:right;
	line-height:25px;
	color:#f2f2f2;
	font-weight:400;
	font-size:12px;
	text-transform:uppercase;
	padding:0 0 0 40px
}
ul#top_nav li a, .menu-blog-container ul li a{
	color:#f2f2f2;
	text-decoration:none
}
ul#top_nav li a:hover, .menu-blog-container ul li a:hover{
	color:#ffffff;
	text-decoration:none
}


Is This A Good Question/Topic? 0
  • +

Replies To: Shrinking Browser Window Problem

#2 aklo  Icon User is offline

  • D.I.C Head

Reputation: 18
  • View blog
  • Posts: 229
  • Joined: 23-January 09

Re: Shrinking Browser Window Problem

Posted 08 March 2012 - 10:23 PM

I think* because you are setting a width of 960px to the unordered list <ul>
while using width = 100% for your #top_nav_bg

So if your browser window is resized till 300px, the black bar on your navigation will be only 300px because you are using width 100% (if follows your browser window current size) while your unordered list will still remain at 960px because that is how you want it.


The css is not very well written maybe you can tell us what are you trying to achieve here so we can suggest removing some extra css styles or modifying to make it work.


BTW:
In my browser, your menu is not really aligned center, it is slightly to the right is that what you want?
Was This Post Helpful? 1
  • +
  • -

#3 ccsknight  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 15
  • Joined: 01-March 12

Re: Shrinking Browser Window Problem

Posted 08 March 2012 - 10:53 PM

Hmm I see your point. I'm actually just posting you a crappy clone of my real website, so the CSS won't be 100% accurate because I left some chunks out. And yes, the menu is supposed to be off to the side.

I guess how I see it is that the wrapper starts repeating, when I want it to end at the edge of 960px. If you open Facebook for example, it has a blue nav bar at the top. When you view it in a smaller window, you can just scroll left or right and it stops at the edge, while retaining a clear look.

I tried changing my 960px values to 100% (dreamcode.net is written like this), but then you can't scroll. You're forced to maximize or you can't see the whole nav bar.

I realize this is confusing :/ It's just a convenience, so if nobody can figure out what I'm saying it's not a big deal haha.

Was This Post Helpful? 0
  • +
  • -

#4 aklo  Icon User is offline

  • D.I.C Head

Reputation: 18
  • View blog
  • Posts: 229
  • Joined: 23-January 09

Re: Shrinking Browser Window Problem

Posted 08 March 2012 - 11:46 PM

html{
	width:100%;
	height:100%;
	background-color:#555555;
	margin:0 auto
}
body{
	width:100%;
	height:100%;
	font-family:courier;
	color:#000000;
	margin:0 auto;
	text-align:center
}
.wrapper{
	width:100%;
	height:auto;
	display:block;
	margin:0 auto;
	padding:0
}
#top_nav_bg{
	background-color:#303030; 
	width:960px;
	height:45px;
	margin:0 auto;
	padding:0
}
ul#top_nav{
	height:25px;
	float:right;
	border:none;
	list-style:none;
	display:inline;
	margin:0;
	padding:10px 0
}
ul#top_nav li, .menu-blog-container ul li{
	float:right;
	line-height:25px;
	color:#f2f2f2;
	font-weight:400;
	font-size:12px;
	text-transform:uppercase;
	padding:0 0 0 40px
}
ul#top_nav li a, .menu-blog-container ul li a{
	color:#f2f2f2;
	text-decoration:none
}
ul#top_nav li a:hover, .menu-blog-container ul li a:hover{
	color:#ffffff;
	text-decoration:none
}

[color="#4169E1"][b]#top_nav_wrap{
	background-color:#303030; 
	height:45px;
	margin:0;
	padding:0;
}[/b][/color]




This should work.

Note: Works in firefox, chrome but not int IE7 due to the <nav> tag
Seems like IE7 do not support nav tag...

I'm quite new to html 5 haven't have the time to try out the new tags but you can replace the <nav> tag with a <div> and it should work with IE7 and above.

Code in bold and blue are new addition(do you have existing #top_nav_wrap ?), there is also slight changes to a few as well...just try the entire chunk of code and backup your old codes.

This post has been edited by Shane Hudson: 09 March 2012 - 03:19 AM
Reason for edit:: Swapped quote tag to code

Was This Post Helpful? 1
  • +
  • -

#5 ccsknight  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 15
  • Joined: 01-March 12

Re: Shrinking Browser Window Problem

Posted 09 March 2012 - 12:26 AM

That worked perfectly, thank you once again.

Below is the style to my actual website. As you can see, I have a gradient in the top nav bar. The only problem that arose with your solution is that the gradient no longer spans 100% of the width. (The grey #303030 was only there for IE, because I couldn't get gradients to work in IE.)

I apologize, I should've been showing you this sheet from the beginning.


html{
	width:100%;
	height:100%;
	margin:0 auto;
	background-color:#f2f2f2;
	background-image:-moz-radial-gradient(center, circle farthest-corner, #F2F2F2 0%, #b5b5b5 100%);
	background-image:-o-radial-gradient(center, circle farthest-corner, #F2F2F2 0%, #b5b5b5 100%);
	background-image:-webkit-gradient(radial, center center, 0, center center, 510, color-stop(0, #F2F2F2), color-stop(1, #b5b5b5));
	background-image:-webkit-radial-gradient(center, circle farthest-corner, #F2F2F2 0%, #b5b5b5 100%);
	background-image:radial-gradient(center, circle farthest-corner, #F2F2F2 0%, #b5b5b5 100%)
}
body{
	width:100%;
	height:100%;
	margin:0 auto;
	color:#303030;
	font-family:arial;
	text-align:center
}
.wrapper{
	display:block;
	width:100%;
	height:auto;
	margin:0 auto;
	padding:0
}
#top_nav_bg{
	width:980px;
	height:45px;
	margin:0 auto;
	padding:0;
	background-color:#303030; 
	background-image:-moz-linear-gradient(bottom right, #051535 0%, #3b5998 55%);
	background-image:-o-linear-gradient(bottom right, #051535 0%, #3b5998 55%);
	background-image:-webkit-gradient(linear, right bottom, left top, color-stop(.0, #051535), color-stop(.55, #3b5998));
	background-image:-webkit-linear-gradient(bottom right, #051535 0%, #3b5998 55%);
	background-image:linear-gradient(bottom right, #051535 0%, #3b5998 55%)
}
ul#top_nav{
	height:25px;
	margin:0;
	padding:10px 0;
	float:right;
	border:none;
	list-style:none;
	display:inline
}
ul#top_nav li, .menu-blog-container ul li{
	line-height:25px;
	padding:0 0 0 40px;
	float:right;
	color:#f2f2f2;
	font-size:14px;
	text-transform:uppercase
}
ul#top_nav li a, .menu-blog-container ul li a{
	display:block;
	color:#f2f2f2;
	text-decoration:none;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .8s ease-in-out;
    -o-transition: all .4s ease-in-out
}
ul#top_nav li a:hover, .menu-blog-container ul li a:hover{
	color:#f2f2f2;
	text-shadow: 0px 1px 10px #ffffff;
	text-decoration:none;
	-webkit-transform: rotate(-15deg) scale(1);
    -o-transform: rotate(-15deg) scale(1);
    -ms-transform: rotate(-15deg) scale(1.5)
}
#top_nav_wrap{
	height:45px;
	margin:0;
	padding:0;
	background-color:#303030; 
 }

Was This Post Helpful? 0
  • +
  • -

#6 aklo  Icon User is offline

  • D.I.C Head

Reputation: 18
  • View blog
  • Posts: 229
  • Joined: 23-January 09

Re: Shrinking Browser Window Problem

Posted 09 March 2012 - 01:32 AM

Use this instead, replace your current #top_nav_wrap
#top_nav_wrap{
	height:45px;
	margin:0;
	padding:0;
	background-color:#303030;  
	background:-moz-linear-gradient(bottom right, #051535 0%, #3b5998 55%);
	background:-o-linear-gradient(bottom right, #051535 0%, #3b5998 55%);
	background:-webkit-gradient(linear, right bottom, left top, color-stop(.0, #051535), color-stop(.55, #3b5998));
	background:-webkit-linear-gradient(bottom right, #051535 0%, #3b5998 55%);
	background:linear-gradient(bottom right, #051535 0%, #3b5998 55%);
 }




Replace your #top_nav_bg with:
#top_nav_bg{
	width:980px;
	height:45px;
	margin:0 auto;
	padding:0;
	background-color:#303030; 
	background-image:-moz-linear-gradient(bottom right, #051535 0%, #3b5998 55%);
	background-image:-o-linear-gradient(bottom right, #051535 0%, #3b5998 55%);
	background-image:-webkit-gradient(linear, right bottom, left top, color-stop(.0, #051535), color-stop(.55, #3b5998));
	background-image:-webkit-linear-gradient(bottom right, #051535 0%, #3b5998 55%);
	background-image:linear-gradient(bottom right, #051535 0%, #3b5998 55%)
}



Best I can come up with, there are 2 places with the radial gradient
#top_nav_bg
and
#top_nav_wrap


If you view it on a high resolution monitor you can see a difference in color at the end...and I have no idea how to solve it.

This post has been edited by aklo: 09 March 2012 - 01:59 AM

Was This Post Helpful? 1
  • +
  • -

#7 ccsknight  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 15
  • Joined: 01-March 12

Re: Shrinking Browser Window Problem

Posted 09 March 2012 - 01:40 AM

I tried that as well, but then the original problem I posted about comes back :crazy:

Still trying to make it work
Was This Post Helpful? 0
  • +
  • -

#8 aklo  Icon User is offline

  • D.I.C Head

Reputation: 18
  • View blog
  • Posts: 229
  • Joined: 23-January 09

Re: Shrinking Browser Window Problem

Posted 09 March 2012 - 02:16 AM

Not sure if you noticed but I edited the latest solution so now you are guaranteed to have colors even if you resize your window to small...

Downside is if you have a really big monitor and view it in full browser mode, the gradient will be uneven because there are 2 layers 1 which is following 960px, another is following the size of the viewport.


Right now I cannot think of a solution but maybe there is javascript or to load different style sheet base the users device/monitor resolution.
Was This Post Helpful? 1
  • +
  • -

#9 ccsknight  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 15
  • Joined: 01-March 12

Re: Shrinking Browser Window Problem

Posted 09 March 2012 - 02:30 AM

I did notice! Very clever.

I ended up sacrificing a little style so it would be consistent on large monitors, but it seems to be the only solution without adding javascript.

html{
	width:100%;
	height:100%;
	margin:0 auto; 
	background-image:-ms-linear-gradient(bottom, #F2F2F2 0%, #B5B5B5 100%);
	background-image:-moz-linear-gradient(bottom, #F2F2F2 0%, #B5B5B5 100%);
	background-image:-o-linear-gradient(bottom, #F2F2F2 0%, #B5B5B5 100%);
	background-image:-webkit-gradient(linear, left bottom, left top, color-stop(.0, #F2F2F2), color-stop(1, #B5B5B5));
	background-image:-webkit-linear-gradient(bottom, #F2F2F2 0%, #B5B5B5 100%);
	background-image:linear-gradient(bottom, #F2F2F2 0%, #B5B5B5 100%)
}
body{
	width:100%;
	height:100%;
	margin:0 auto;
	color:#303030;
	font-family:arial;
	text-align:center
}
.wrapper{
	display:block;
	width:100%;
	height:auto;
	margin:0 auto;
	padding:0
}
#top_nav_bg{
	width:980px;
	height:45px;
	margin:0 auto;
	padding:0;
	background-color:#303030;
	background-image:-ms-linear-gradient(bottom, #3B5998 0%, #051535 100%);
	background-image:-moz-linear-gradient(bottom, #3B5998 0%, #051535 100%);
	background-image:-o-linear-gradient(bottom, #3B5998 0%, #051535 100%);
	background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0, #3B5998), color-stop(1, #051535));
	background-image:-webkit-linear-gradient(bottom, #3B5998 0%, #051535 100%);
	background-image:linear-gradient(bottom, #3B5998 0%, #051535 100%)
}
ul#top_nav{
	height:25px;
	margin:0;
	padding:10px 0;
	float:right;
	border:none;
	list-style:none;
	display:inline
}
ul#top_nav li, .menu-blog-container ul li{
	line-height:25px;
	padding:0 0 0 40px;
	float:right;
	color:#F2F2F2;
	font-size:14px;
	text-transform:uppercase
}
ul#top_nav li a, .menu-blog-container ul li a{
	display:block;
	color:#F2F2F2;
	text-decoration:none;
	text-shadow: 0px 1px 10px #99AAEE;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .8s ease-in-out;
    -o-transition: all .4s ease-in-out
}
ul#top_nav li a:hover, .menu-blog-container ul li a:hover{
	color:#F2F2F2;
	text-shadow: 0px 1px 10px #FFFFFF;
	text-decoration:none;
	-webkit-transform: rotate(-15deg) scale(1);
    -o-transform: rotate(-15deg) scale(1);
    -ms-transform: rotate(-15deg) scale(1.5)
}
#top_nav_wrap{
	height:45px;
	margin:0;
	padding:0;
	background-color:#303030; 
	background-image:-ms-linear-gradient(bottom, #3B5998 0%, #051535 100%);
	background-image:-moz-linear-gradient(bottom, #3B5998 0%, #051535 100%);
	background-image:-o-linear-gradient(bottom, #3B5998 0%, #051535 100%);
	background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0, #3B5998), color-stop(1, #051535));
	background-image:-webkit-linear-gradient(bottom, #3B5998 0%, #051535 100%);
	background-image:linear-gradient(bottom, #3B5998 0%, #051535 100%)
 }



Thanks for all your help today. :^:
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1