How do i get my navbar to stay on one line when the browser window is minimized?

I am new to coding and have just created my first website in html and css. I know that the coding is pretty dire and that I have a lot to learn and hope that someone can guide me in how to solve this problem. When the browser window is minimized, the navbar breaks down into 2 or 3 lines but I want the navbar to fit to the window whatever the size of the client machine.
I think I need to add a media query but i'm not sure if i do and if so what code to use and where to put it?
I am worried that the page will only be viewable properly on a desktop and i really want to learn how to make a fluid layout which can be viewed on 320px, 768px and 1200px.
Any guidance would be greatly appreciated.
Here is my code:
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>The Engineer's Corset</title>
<link href="styles/style.css" rel="stylesheet" type="text/css" media="screen">
<style type="text/css">
body {
    background-color: #000;
</style>
</head>
<body>
<div id="container">
<div id="navbar">
    <ul id="nav">
    <li><span class="current-menu-item">Home</span></li>
    <li><a href="about.html">About Us</a></li>
    <li><a href="workshops.html">Workshops</a></li>
    <li><a href="news.html">News</a></li>
    <li><a href="gallery.html">Gallery</a></li>
    <li><a href="contact.html">Contact Us</a></li>
    </ul>
</div>
<div id="header">
<img src="images/final/headerbeauty3.png" width="1100" height="341" alt="The Engineer's Corset">
</div>
<div id="links">
<ul id="link">
<li><a href="https://www.facebook.com/Bristolengineer" target="_blank"><img src="images/final/fb3.png" width="200" height="45" alt="Follow Us on Facebook"></li>
<li><a href="https://twitter.com/Engineerscorset" target="_blank"><img src="images/final/twitter2.jpg" width="200" height="45" alt="Follow us on Twitter"></a></li>
</ul>
</div>
<div class="chantry">
<img src="images/final/CD Logo fin.png" width="240" height="200" alt="Chantry Dance Company">
</div>
<div class="about">
<p> The Engineer's Corset is a new play written by Janet Goddard for performance by the community of Bristol in 2015. <br> ~ <br>
The play is based on the extraordinary real-life events of 1843 surrounding Isambard Kingdom Brunel's near-death experience after swallowing a coin. We travel through time to explore the adventure and horror of Victorian industrialisation. <br> ~ <br> Using a community theatre group The Engineer’s Corset tells a familiar tale of Brunel’s near death experience when he swallows a gold half sovereign. His wife Mary fights to maintain her composure but is ripped apart by the waiting game. Her servants and his workforce, using dance and sound, broaden her horizons. Just like Mary the audience too will see life in the 1840s through a different lens.</p>
</div>
<div class="workshops">
<img src="images/final/bridgebridge.jpg" width="1100" height="713" alt="clifton suspension bridge">
<span><a href="workshops.html">We will be running a series of workshops prior to production and hope you will join us. For further information, click here.</a></span>
</div>
<div id="sponsorspace"></div>
<div id="footer"> <p> © Heartprints Web Design 2014 </p> </div>
</div>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:125%;
@media screen {
    #navbar:
#navbar li {
    font: 25px Arial;
    display: inline;
    list-style-type: none;
    background: #09F;
    color: #000;
    border-radius: 20px;
    padding: 15px 25px;
.current-menu-item {
    color: #0FF;
#navbar a {
    padding: 15px 25px;
    background-color: #6cf;
    color: #000;
    text-decoration: none;
    border-radius: 20px;
#navbar a:hover {
    background-color:#0FF;
    color: #000;
    padding: 15px 25px;
#header {
    width: 1100px;
    height: 340px;
    margin-left: 50px;
    margin-top: 0px;
    margin-bottom: 0px;
    border-style: ridge;
    border-width: 5px;
    border-color:#09F;
#links li {
    display: inline;
    width: 700px;
    margin-left: 300px;
.chantry {
    margin-left: 40px;
.about {
    position: relative;
    width: 860px;
    text-align:center;
    background-color: #CCC;
    color: #000;
    border-style: ridge;
    border-width: 3px;
    border-color:#09F;
    border-radius: 15px;
    float: right;
    margin-top: -200px;
    margin-right: 90px;
.workshops{
    position:relative;
    width: 1100px;
    height: 713px;
    font-size:24px;
    margin-left: 50px;
    border-style: ridge;
    border-width: 5px;
    border-color:#09F;
    margin-top: 130px;
.workshops span {
    position: absolute;
    background: #6CF;
    color: #000;
    left: 30px;
    top: 30px;
    right: 800px;
    padding: 15px;
    font: 1em georgia, serif;
    font-style:italic;
    text-align:center;
    border: 5px solid #09F;
    border-radius: 20px;
    margin-top: 35px;
.workshops span a {
    color: #000;
#link li {
    border-style: solid;
    border-color: #6CF;
    padding: 30px 10px 5px 10px;
.info {
    text-align:center;
    width: 1100px;
    margin-top: 50px;
    margin-bottom: 50px;
.CDC {
    float: left;
    margin-right: 50px;
    margin-left: 45px;
.workshopinfo {
    height: 250px;
    text-align:center;
    margin-top: 50px;
.photos {
    Height: 500px;
    text-align:center;
    margin-top: 50px;
#footer {
    text-align:center;
    margin-top: 700px;
    color:#0CF;
.brunel {
    margin-top: 50px;
    margin-left: 400px;
#workshops2{
    width: 1000px;
    border-style: outset;
    border-width: 5px;
    padding: 15px;
    border-color:#09F;
    background-color: #6CF;
    margin-left: 100px;
    text-align:center;
#workshops2 a {
    color: #000;
#sponsorspace {
    height: 300px;
    background-color: #6CF;
    border-style: outset;
    border-color: #09f;
    margin-top: 15px;

Give #navbar a width that is wide enough to hold all of the buttons within it.
#navbar {
width:####px;
Replace #### with a pixel number large enough to hold the nav buttons.

Similar Messages

I traded iPads with my daughter. How do I get my iTunes account on this one? When I try to update it wants her information?

I traded iPads with my daughter. How do I get my iTunes account on this one? When I try to update it wants her iTunes information.

You can tap on the account in Settings > Store (Settings > iTunes & App Stores if it's on iOS 6) and log out of it and then log in with yours. But if any of the apps that are currently on the iPad were downloaded by her account then only her account will be able to download updates to those apps - content from the store is tied to the account that downloaded it, not to the account that is currently logged in.

In Acrobat, I wrote a script to turn fields gray if a checkbox was checked. How can I get it to reset to white (or clear) when the reset form button is clicked?

In Acrobat, I wrote a script to turn fields gray if a checkbox was checked. How can I get it to reset to white (or clear) when the reset form button is clicked?

Thank you so much for your reply . . . but . . . I should have shared my original script with you -- it was a little more complicated than I led you to believer. I was triggering a group of text fields to become disabled as well as gray. Below is the original script so that when the checkbox is checked, it causes several "Co" fields to be disabled and gray.
// Mouse Up script for check box
// If checked, certain fields should be disabled
var f_prefix = "Co";
// Get a reference to all of the "Co" fields
var f = getField(f_prefix);
// Reset the Co fields
resetForm([f_prefix]);
if (event.target.value === "Off") {
    // Enable the Co fields
    f.readonly = false;
    f.fillColor = color.transparent;
} else {
    // Disable the Co fields
    f.readonly = true;
    f.fillColor = color.gray;
To recap -- my goal is to get those gray fields to revert to transparent if the form is reset. I'm willing to create my own custom "Reset Form" button but I'm not sure I understand how that would look. Wouldn't it be quite lengthy? I think I'm having a brain freeze -- can't figure it out!

How do I get my project back? I closed it in the File window.

I closed my project in the file window, and I accidently saved and closed premire pro. When I opened it again, all my video clips and other stuff was there, but none of my edited work. How do I get it back?

Sequence will still be in the Project Window.
You just saved a Project with the sequence closed.

How do I get my old Itunes on my new computer when the old one is broken?

Hi. I have got a new computer because my old one broke down. How do I get everything that I have already bought on Itunes on the new one?

See Recover your iTunes library from your iPod or iOS device.
tt2

How Do I Get A Split Screen View? (Two views in the main window)

I basicly want 1 UIView at the top and then below another UIView. How would I go about doing this? I need to be able to execute methods to it like -(void) viewDidLoad.
my iPhone app
First view
Second view
How do I do this?
If you could explain in detail that would be great.
Thanks so much.
Note:
I have tried inserting 1 extra view (Into the view that starts up with your app. Reason I only put in one view is because, I dont need 2 really. How I mean by two is 1 extra view and the default view that was there anyway) and in interface builder clicking on the view I have just dragged in, then clicking on: File > Write Class Files. But I colud not execute code to it for some reason. (For example I could not use the classes made with the Write Class Files. If I put the -(void) viewDidLoad method in with an NSLog it would not run.)
Help?
Thanks allot!
Im using Xcode 3 By the way.

Well, yeah. Im really sure. There is no other way I want it.
I want to have 2 views in one window.
The reason why, is so I can have a Core Plot view at the top, and just the bog standard UIView at the bottom (But I know what to do with Core Plot aslong as I know how to get 2 UIViews both with working view controllers).
My main question basicly is that fact that I want to be able to have a secondviewViewController with all the right IBOutlets like dataSource to make it work.
Thanks alot.

Since I began to use Time Warner Cable internet connection, I find it difficult to get Firefox to open. Firefox.exe opens, but the browser window seldom opens. How can I fix this? I use Windows XP Home.

A few times, I have gotten Firefox to open.

Try changing firefox to the default browser: [http://kb.mozillazine.org/Setting_Your_Default_Browser]. That will probably get firefox to open when you dial up.
I'm not sure what you mean by "the meter accelerating the web page". Can you explain that?
Thank you

How can I get my Epson NX625 printer back on line?

How can I get my Epson NX625 printer back on line?

The solution to your issue is in this thread:https://discussions.apple.com/thread/5233149
Specifically this post:
"astonishingly as it may seem, epson support sent me this 6 hours after i contacted them-
Subject
when attempting to print the epson print program shows "stopped - 'filter' faile
Discussion Thread
Response (Rodolfo M)
08/16/2013 03:21 PM
Dear Robert,
Thank you for contacting Epson.
I am sorry to hear that you are experiencing difficulties with your Epson Artisan 710 because of rastertoescpII error. To resolve this issue, please try the following steps below:
Power off the printer.
From the , select System Preferences.
Choose Sharing.
Check if "Computer Name" field is empty or not.
If the "Computer Name" is empty enter a name for the computer.
Restart the Computer.
Test if you are able to print.
We take your satisfaction seriously and hope that we have helped resolve your issue. If you receive a survey from us, we would greatly appreciate if you could take a few minutes to provide us with feedback about your support experience. Your ratings and comments are extremely important to us.
If this did not resolve your issue, please reply to this email for further assistance. If you have a different support issue, submit a request via our U.S. Support Site and we will respond in a timely manner.
Thank you again for contacting Epson.
Jun M."

How to bring the browser window from background/minimized to on top of all windows in Flex

Hi I have the requireemnt where based on some condition I am opening a JSP in a new window by calling
navigateToURL(myFormData, _MYWINDOW);
Calling this will open a new browser window. My requirement is when the new window if minimized or behind other windows, how can I bring this window(MYWINDOW) infront of all the windows using JavaScript in Flex.
In which file under html-template do I have to write my JavaScript function.
Any help on how to call JS from Flex and handling in JS is very much appreciated.
Someone please share with me if there is any sample code. Thanks in advance

hi
to communicate with javascript, use ExternalInterface (see http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/external/External Interface.html for an example)
you can add your JS directly to the index.template file or create a separate JS file and add the link
not sure what JS you would use to bring window to front but i am guessing there is something...

How can i get my items to stay in place and not cross over each other when readjusting the browser s

How can i get my items to stay in place and not cross over each other when readjusting the browser size.
Basically on my site when i go from a small screen to a big screen everything doesn't adjust to the screen size. I don't know what im missing
Here's the link to the page all the pages & they all do it
http://theatricalworkslive.com/
Thanks in advance

Please read this whole message before doing anything.
This procedure is a diagnostic test. It’s unlikely to solve your problem. Don’t be disappointed when you find that nothing has changed after you complete it.
The purpose of the test is to determine whether the problem is caused by third-party software that loads automatically at startup or login, or by a peripheral device.
Disconnect all wired peripherals except those needed for the test, and remove all aftermarket expansion cards. Boot in safe mode and log in to the account with the problem. Note: If FileVault is enabled, or if a firmware password is set, or if the boot volume is a software RAID, you can’t do this. Post for further instructions.
Safe mode is much slower to boot and run than normal, and some things won’t work at all, including wireless networking on certain Macs. The next normal boot may also be somewhat slow.
The login screen appears even if you usually log in automatically. You must know your login password in order to log in. If you’ve forgotten the password, you will need to reset it before you begin. Test while in safe mode. Same problem? After testing, reboot as usual (i.e., not in safe mode) and verify that you still have the problem. Post the results of the test.

How can I get my MacBook to stay on and not sleep when lid is closed?

How can I get my MacBook to stay on and not sleep when lid is closed?

try this: http://www.macupdate.com/app/mac/37991/nosleep

How can I get location services to stay on inside?

I have a WiFi iPad 2 w/iOS 8.1. I want to use PayPal Here that requires location services in my nursery. It works fine outdoors but inside our metal buildings with metal roofs the location services do not work (and PayPal Here does not work) even though I am still connected to our WiFi network. PayPal support is no help. How can I get location services to stay on inside the buildings?
<Re-Titled By Host>

Got to Settings > General > Autolock to set the lock time.

How do i get my macbook to stay connected to my wireless network . i have to constantly rejoin it when i go online.

How do i get my macbook to stay connected to my wireless network . i have to constantly rejoin it when i go online.
Wayne

Open System Preferences > Network > Advanced, and see if your network appears in Preferred Networks. If not, do it

How do I get my soundtracks to stay together instead of separating them by artist?

How do I get my soundtracks to stay together instead of separating them by artist?

My bookmarks sidebar opens when I (accidentally) press Ctrl+b.
You also can open and close the sidebar using
View > Sidebar > Bookmarks
If you are displaying the orange Firefox button rather than the classic menu bar, tap the Alt key to display the menus temporarily and then you can use the View menu.

How do I get my iPhone to stay listed under devices on iTunes page after I have unplugged my iPhone from my Mac? My iPad stays listed under devices.

How do I get my iphone to stay listed under devices on Itunes page after I have unplugged it from my Mac? My ipad stays listed under devices.

Phone not recognised in itunes
iPhone not recognised by iTunes on PC or iPhone not recognised by iTunes on Mac

How do i get my navbar to stay on one line when the browser window is minimized?

Similar Messages

Maybe you are looking for