Burig
14 Apr 2010, 04:19 AM
Hi there, I didn't see an introduction thread-type-post here, so I'm hoping that you guys dont mind me just posting a problem that I had been having (I'm well aware that in several forums, there is a forum ettiquete where you post introductions and things of that nature).
So, assuming I'm not doing anything wrong, I'll jump right in.
I've been having a problem with the navigation bar of a website in relation to the size of the monitor that is being used by the viewer. I use a 22" screen (resolution at 1920x1080), and usually will change the resolution to find out what it looks like on smaller screens.
Most of the website is okay (the images resize correctly, as do the text boxes) but the navigation bar is the one thing that is resisting change; I can either make it look good on the screen size I have, in which it's far too big on a smaller one, or make it look good on a smaller screen where it looks far too small on this size.
I've tried messing around with min-widths, but I can't find a way of making all the buttons stay in a line.
CSS coding:
div.navigation{background-color:lightblue; position:absolute; top:5%; right:0%; width:15%; min-width:500px; height:10%; min-height:70px; border:3px solid #5ab0cd; text-align:center; font-size:0.9em;}
#navigation {list-style:none; margin:0px; padding:0px; width:100%;}
#navigation li {float:right; border:0px; width:10%; min-width:100px;}
#navigation li a{display:block; background:lightblue; text-align:cener; color:darkblue; padding:3px 0; width:100%;}
#navigation li a:hover {background:#5ab0cd; color:lightblue; font-weight:bold; width:100%; min-width:100%; height:96%;}
HTML coding:
<div class="navigation">
<ul id="navigation">
<li><a href="reviews.html"><img class="testimonalscontact" src="Images/reviews.png" width="37%" height="60%"><br>REVIEWS</a></li>
<li><a href="prices.html"><img class="boardingprices" src="Images/pricelogo2.png" width="30%" height="60%"><br>PRICES</a></li>
<li><a href="contact.html"><img class="testimonalscontact" src="Images/contactlogo.png" width="40%" height="60%"><br>CONTACT</a></li>
<li><a href="coverage.html"><img class="area" src="Images/areascovered2.png" width="33%" height="60%"><br>AREAS COVERED</a></li>
<li><a href="boarding.html"><img class="boardingprices" src="Images/boardinglogo2.png" width="27%" height="60%"><br>BOARDING</a></li>
<li class="locksmithing"><a href="locksmithing.html"><img class="locksmithing" src="Images/locksmithlogo.png" width="28%" height="60%"><br>LOCKSMITHING</a></li>
</ul>
</div>
I've tried making the buttons smaller, and while it does help a little, a gap appears between the buttons, meaning not all of them fit into the navigation bar. I was hoping I could have removed the space between the buttons and then use min-width, but fiddling around with the code, I've had no luck in doing so.
Is anyone able to help?
So, assuming I'm not doing anything wrong, I'll jump right in.
I've been having a problem with the navigation bar of a website in relation to the size of the monitor that is being used by the viewer. I use a 22" screen (resolution at 1920x1080), and usually will change the resolution to find out what it looks like on smaller screens.
Most of the website is okay (the images resize correctly, as do the text boxes) but the navigation bar is the one thing that is resisting change; I can either make it look good on the screen size I have, in which it's far too big on a smaller one, or make it look good on a smaller screen where it looks far too small on this size.
I've tried messing around with min-widths, but I can't find a way of making all the buttons stay in a line.
CSS coding:
div.navigation{background-color:lightblue; position:absolute; top:5%; right:0%; width:15%; min-width:500px; height:10%; min-height:70px; border:3px solid #5ab0cd; text-align:center; font-size:0.9em;}
#navigation {list-style:none; margin:0px; padding:0px; width:100%;}
#navigation li {float:right; border:0px; width:10%; min-width:100px;}
#navigation li a{display:block; background:lightblue; text-align:cener; color:darkblue; padding:3px 0; width:100%;}
#navigation li a:hover {background:#5ab0cd; color:lightblue; font-weight:bold; width:100%; min-width:100%; height:96%;}
HTML coding:
<div class="navigation">
<ul id="navigation">
<li><a href="reviews.html"><img class="testimonalscontact" src="Images/reviews.png" width="37%" height="60%"><br>REVIEWS</a></li>
<li><a href="prices.html"><img class="boardingprices" src="Images/pricelogo2.png" width="30%" height="60%"><br>PRICES</a></li>
<li><a href="contact.html"><img class="testimonalscontact" src="Images/contactlogo.png" width="40%" height="60%"><br>CONTACT</a></li>
<li><a href="coverage.html"><img class="area" src="Images/areascovered2.png" width="33%" height="60%"><br>AREAS COVERED</a></li>
<li><a href="boarding.html"><img class="boardingprices" src="Images/boardinglogo2.png" width="27%" height="60%"><br>BOARDING</a></li>
<li class="locksmithing"><a href="locksmithing.html"><img class="locksmithing" src="Images/locksmithlogo.png" width="28%" height="60%"><br>LOCKSMITHING</a></li>
</ul>
</div>
I've tried making the buttons smaller, and while it does help a little, a gap appears between the buttons, meaning not all of them fit into the navigation bar. I was hoping I could have removed the space between the buttons and then use min-width, but fiddling around with the code, I've had no luck in doing so.
Is anyone able to help?