How can I get my navigation bar to stay on one line when the browser window is reduced to the minimum?

I am new to coding and that you just created my first website in html and css.  I know that coding is quite disastrous, and I have a lot to learn and I hope someone can guide me in the way to solve this problem.  When the window is minimized, the navigation bar is broken down into 2 or 3 lines but I want the navigation bar to fit the window, regardless of the size of the client machine.

I think I should add a media query, but I don't know if I do and if until the code to use and where to put?

I fear that the page will be visible correctly on a desktop computer and I really want to learn how to make a fluid layout that can be accessed on 320px, 768px and 1200px.

Any guidance would be greatly appreciated.

Here is my code:

HTML

<! doctype html >

< html >

< head >

< meta charset = "utf-8" >

The Engineer < /title > < title > corset

< 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 ="of engineering the 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 = "charming" >

< img src = "images/final/CD Logo fin.png" width = "240" height = "200" alt = "Chantry Dance Company" >

< / div >

< div class = "about" >

< P > corset engineer is a new play written by Janet Goddard for the performance by the Bristol community in 2015. < br > ~ < br >

The game is based on the extraordinary events of real life of 1843 surrounding Catholic.org Kingdom Brunel's near-death experience after having swallowed a coin.  We travel through time to discover the adventure and horror of the Victorian industrialization. < Br > ~ < br > using the Corset of a community theater group The Engineer tells a familiar story of Brunel near death experience when he swallows a half sovereign gold. His wife, Mary fights to keep his cool but is torn by the waiting game. His servants and his staff, using dance and sound, expand his horizons. Like Mary the public 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" > will host us a series of workshops before production and hope that you will join us.  For more information, click here. < /a > < / span >

< / div >

< div id = "sponsorspace" > < / div >

< div id = "footer" > < p > & copy; Heartprints Web Design 2014 < /p > < / div >

< / div >

< / body >

< / html >

CSS

@charset "utf-8";

/ * CSS document * /.

{body

do-family: Arial, Helvetica, without serif.

font-size: 125%;

}

@media screen {}

#navbar:

#navbar li {}

Police: Arial 25px;

display: inline;

list-style-type: none;

Background: #09F;

Color: #000;

border-radius: 20px;

Padding: 15px 25px;

}

.the-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;

width of the border: 3px;

border-color: #09F;

border-radius: 15px;

float: right;

margin-top:-200px;

right margin: 90px;

}

level {}

position: relative;

Width: 1100px;

height: 713px;

font-size: 24 PX.

margin-left: 50px;

border-style: ridge;

border width: 5px;

border-color: #09F;

top of the margin: 130px;

}

level span {}

position: absolute;

Background: #6CF;

Color: #000;

left: 30px;

top: 30px;

right: 800px;

Padding: 15px;

font: 1em Georgia, serif;

make-style: italic;

text-align: center;

border: 5px solid #09F;

border-radius: 20px;

top of the margin: 35px;.

}

duration of grade a {}

Color: #000;

}

#link li {}

border-style: solid;

border-color: #6CF;

padding: 10px 10px 30px of 5px;

}

{} .info

text-align: center;

Width: 1100px;

top of the margin: 50px;

margin-bottom: 50px;

}

. CDC {}

float: left;

right margin: 50px;

left margin: 45px;

}

{.workshopinfo}

height: 250px;

text-align: center;

top of the margin: 50px;

}

.pictures {}

Height: 500px;

text-align: center;

top of the margin: 50px;

}

#footer {}

text-align: center;

top of the margin: 700px;

color: #0CF;

}

{.brunel}

top of the margin: 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;

top of the margin: 15px;

}

Gives #navbar a width that is large enough to hold all the buttons it contains.

{#navbar}

Width: ###px;

}

Replace # with a number of pixels, large enough to hold the nav buttons.

Tags: Dreamweaver

Similar Questions

  • How can I get my navigation bar to align properly in Internet Explorer?

    How can I get my navigation bar to align properly in Internet Explorer?  My www.breastcancerbodies.com site displays correctly on windows seen FIREFOX, SAFARI, OPERA, CAMINO and Mac computers, but using IE the navbar covers a part of the body of text.  Any help would be appreciated. Thank you.

    You have this piece of code (see below) in the middle of your HTML pages. How he got there, I don't know, but it is there if you need to remove it. Go to code in Dreamweaver and make view scroll down the page until you get to it, just select and delete.


  • How can I get Lightroom to find photos on a USB key when the drive letter changes?

    This is probably a simple question, but I keep getting stuck.  I have ha

    ve my catalog and some pictures on my laptop hard drive, but most are on

    an external USB drive.  Sometoimes the car is affected

    E:, F.; or G: and when it cahnges, the catalog says the photos are missing.  How can I get

    Lightroom for photos?

    Tom Barnwell

    The quick solution is to click on the folder that contains the missing files and choose "update folder location" and then search for the file on the USB drive. The longer term and fix, you must apply is to configure Windows to always give the same drive letter USB. You can do this through the XP disk management application in the management of the computer (the control panel applet). The following screenshot is for XP and Vista and Win 7 will be something similar which is accessed via the administrative tools (see second screenshot).

  • How can I get my address bar to work? I type in the words and the menu drop-down suggests sites, but when I click on one and press 'Enter', it does not advance.

    I can type in the full web addresses, keywords, click on the drop sites, but no matter what, nothing to do with happen when I hit "enter". I read an article that said to type in everything: config in the address bar to access some options, but when I type which in and press ENTER, nothing happens. I like Firefox, but I can't go anywhere unless I use my search of google on the side toolbar or if it's a bookmark.

    Can you post the bad add-on so others know?

  • How can I get my Menu bar to stay there all the time?

    I just reset my old Macbook Pro for five years. Since it has been reset, the Menu bar to the top of the top keeps disappearing. I was using the same OS before I reset my laptop.

    I don't know how to change this, I looked each in System Preferences.

    Kind regards

    Andrew

    What operating system do you use? You info States 10.11.1 if that is correct go to prefs sys - general - check / uncheck Hide the menu bar.

  • How can I get my menu bar on my macbook pro? The dock also disappeared. I know I have to take my pointer upwards (or downwards), but it's a waste of time and that bothers me. Its only happens on Safari, and not on other applications.

    How can I get my menu bar on my macbook pro? The dock also disappeared. I know I have to take my pointer upwards (or downwards), but it's a waste of time and that bothers me. Its only happens on Safari, and not on other applications.

    You could try starting in safe mode:

    • Try safe mode if your Mac does not end commissioning - Apple Support

    Which can allow additional troubleshooting.

    Also, sometimes there may be a hardware problem which may help a SMC reset with

    Depending on the cause:

    • Reset the management system (SCM) controller on your Mac - Apple Support

    You can try the test equipment to see what appears in the results:

    • With the help of Apple Hardware Test - Apple Support

    Other options include an appointment with a genius of Apple Store or a

    service provider authorized Apple for the device inspected, diagnostic tests, etc.

    There may be system software or hardware problems, in order to solve the problems with the aim

    to see what the cause, can take time. If you have a backup in Time Machine &

    end by using OS X Recovery to see OS X Utilities usage, disk utility or

    other functions, be aware that this can make the more advanced features; It may not need.

    Because this question appears as a symptom in Safari, which makes it more curious.

    • Stop the pop-up ads and advertising on Safari - Apple Support

    http://etrecheck.com/ http://www.adwaremedic.com/index.php   

    There may be a weird extension in Safari that may relate to some adware or other

    elements, so this is another issue to consider. a report of Etrecheck may tell you if

    some candidates are there; but maybe not. I do not primarily use Safari

    so, my other two browsers work slightly differently.

    Good luck & happy computing!

  • How can I get Firefox 9.0.1 to remember form data? (I use Windows XP. Yes, I already looked under tools/options/privacy and don't see anything useful.)

    How can I get Firefox 9.0.1 to remember form data? I use Windows XP. Yes, I already looked under tools/options/privacy and don't see anything useful. I don't see that 'monitoring' and 'bar' on the Privacy tab. The previous version I was using shape data stored without any problem. I can't get 9.0.1 to remind OF THE form data.

    'Re missing you the section history of this window. See the screenshot I posted below.

    Try Firefox SafeMode to see how it works there.

    A way of solving problems, which disables most of the modules.

    (If you use it, switch to the default theme).

    • You can open the mode without failure of Firefox 4.0 + by pressing the SHIFT key when you use the desktop Firefox or shortcut in the start menu.
    • Or use the Help menu option, click restart with the disabled... modules while Firefox is running.

    Do not choose anything at the moment, just use 'continue in safe mode.

    To exit safe mode of Firefox, simply close Firefox and wait a few seconds before using the shortcut of Firefox (without the Shift key) to open it again.

    If it's good in Firefox Safe mode, your problem is probably caused by an extension, and you need to understand that one.

    http://support.Mozilla.com/en-us/KB/troubleshooting+extensions+and+themes

    When find you what is causing that, please let us know. It might help others who have this problem.

  • How can I get rid of a message asking to £100 while surfing the web?

    How can I get rid of a message asking to £100 while surfing the web?

    It's a pop-up. You will need to clear your history of navigation via settings > Safari > clear the history and data from the Web site.

    Since this is a pop up you can just avoid going on the site that caused it uh... pop up! That or just keep delete your history when it arrives.

  • How can I get Firefox saves my my hotmail MSN live login and the password

    How can I get Firefox saves my my hotmail MSN live login and the password,.
    My settings are all correct and must be saving them, but for some reason that it is the only account that it won't save.

    Hello

    1. what version of Firefox are you using?

    I would recommend that you follow the steps in this article.

    http://support.Mozilla.com/en-us/KB/make-Firefox-remember-usernames-and-passwords

  • HOW CAN I GET A HP LASERJET 4V IN ORDER TO PROPERLY USE THE OPERATING SYSTEM TO XP PRO AND USB USING A PARALLEL CABLE?

    HOW CAN I GET A HP LASERJET 4V IN ORDER TO PROPERLY USE THE OPERATING SYSTEM TO XP PRO AND USB USING A PARALLEL CABLE?

    The printer works at all with this cable?

    The cable has recognized and installed by Windows XP when you logged on to the computer?

    If the cable has been recognized, what steps have you taken to install the printer then (be as accurate and complete as possible)?

    You get an error message?  If so, please provide, without paraphrasing.

    This printer has already been installed on this computer?  If so, with what type of connection?

    And especially, what is the brand and model of the USB to parallel cable?  Many of them do not work.  See, for example, the comments here , which suggests that 25% of the units will simply not work.  This seems to be one of these products you should buy at a local store, rather than on the Internet, then you can continue taking it back until you get a working unit.

  • How can I get rid of an extra copy of My Documents in the music folder?

    My wife now seems to have an extra copy of the My Documents folder in the music folder. It is not an independent copy, that the deletion of it removes also from the normal location of My Documents. How can we get it returned to normal?

    It seems that the folders "My Documents" and "Public Documents" are somehow added to the music library. Simply right click on 'Music' Library/topic, and then select Properties.

    Click 'Restore Defaults' and click OK.

  • In an attempt to sign and date a w-9, I get the following message.  "This form is editable in Adobe Acrobat DC.  Please use Adobe life cycle Designer. "How can I get this document dated and signed without having to buy the life cycle Designer?

    Please provide ideas to the next question. In an attempt to sign and date a w-9, I get the following message.  "This form is editable in Adobe Acrobat DC.  Please use Adobe life cycle Designer. "How can I get this document dated and signed without having to buy the life cycle Designer?

    Thank you

    Rick

    Assuming that you are dealing with a PDF file provided by the IRS, you will not be able to e-sign. but you can fill the fields using Adobe Reader or Acrobat. The version of form W-9 that I have does not include a date field, but you can use the feedback tool add text to add a date. You can also digitally sign or use the annotation of pencil tool to draw a signature.

  • How can I get a google font (Capriola) in Muse. I pasted the code in the head of html, but the police will not be displayed. Can anyone help with teamviewer?

    How can I get a google font (Capriola) in Muse. I pasted the code in the head of html, but the police will not be displayed. Can anyone help with teamviewer?

    This is kind of a hack, but it will work.

    1. you will need to download a copy of the Capriola on your computer and install it as a system font. Google Fonts will allow you to install it as a system font in some methods (download a.) (ZIP file, synchronization with SkyFonts or downloadable on the project in Google Code). Edit: the simplest is to add the font to your collection of fonts in Google and then download one. ZIP file of your font collection.

    2. the font squirrel website has a generator of quality web fonts. It may take a font installed on your computer system and generate all the files of web fonts needed him. Place the web font files in the folder of your Muse project where you want to store the web fonts self-hosted. Use the add web fonts in Muse and select the tab fonts self-hosted.

    IMPORTANT: Please read the license terms for any font that you want to use on your website. Fonts Open source as Capriola may seem safe to use at first, but the developer of fonts may have some requirements, such as the display of a link to their web site somewhere in your own site. Other fonts may have monthly limit on number of pages seen.

  • Ho I convert my catalog of items 5 to 13 items that I just bought.  I took one of the tutorials and I converted my catalog of 5 elements in a file 'pse.13db '.  How can I get 13 elements to recognize this converted file?  When I open it Ca 13 items

    Ho I convert my catalog of items 5 to 13 items that I just bought.  I took one of the tutorials and I converted my catalog of 5 elements in a file 'pse.13db '.  How can I get 13 elements to recognize this converted file?  When I open elements 13 Catalog Manager and navigate to the correct location, it does not show the file.  Help!  Thank you

    Hi bumps and Spooley,.

    Would it be possible for us to have a look at the file catalog.pse13db from your machine?

    If the file size is not too large, please feel free to send me by email @ [email protected]. If it is too big, I'll share with you a Dropbox folder where you can download the same.

    Thank you

    Catherine

  • How can I get data from each associated XMLnode in movieclips separated when you click a line in the combobox

    How can I get data from each associated XMLnode in movieclips separated when you click a line in the combobox?

    A sample of XML is like this:

    <>planter

    < Lauvtre >

    < Botanisk_navn > Acer campestre < / Botanisk_navn >

    < Norsk_navn > Naverlonn < / Norsk_navn >

    Gronn < Farge > < / fan >

    H4 < Herdighet > < / Herdighet >

    < Hoyde > 10-15 m < / Hoyde >

    < / Lauvtre >

    I have a combobox where it shows the botanical name and the Norwegian name. But the rest of the info in movieclips seem separate.

    Someone has an idea how to do this? Can I use the trace function maybe? Here is my AS3 code so far:

    var loader: URLLoader = new URLLoader();

    loader.addEventListener (Event.COMPLETE, onLoaded);

    list.addEventListener (Event.CHANGE, itemChange);

    function itemChange(e:Event):void

    {

    your. Text = list.selectedItem.data;

    TB. Text = list.selectedItem.label;

    }

    var xml;

    function onLoaded(e:Event):void

    {

    XML = new XML (e.target.data);

    var it: XMLList = xml. Planter.Lauvtre;

    for (var i: uint = 0; i < il.length (); i ++)

    {

    list.addItem ({data: it.}) Farge.Text ([i]) + "\n"+ it.» Herdighet.Text ([i]) + "\n" + it. Hoyde.text ([i]),

    label: it. Botanisk_navn. Text() [i] + "\n"+ it.» Norsk_navn. Text() [i]});

    }

    }

    Loader.Load (new URLRequest ("lauvtre.xml"));

    Thank you!

    Rheus.

    I don't know what you're trying to do.  but, if you want to fill one combobox with the botanical names and when one is chosen, the other use of logins:

    var loader: URLLoader = new URLLoader();

    loader.addEventListener (Event.COMPLETE, onLoaded);

    list.addEventListener (Event.CHANGE, itemChange);

    function itemChange(e:Event):void {}

    var selectedObj:Object = a [list.selectedIndex]

    trace (selectedObj ['fan'], selectedObj ['Botanisk'], etc);

    }

    var xml;

    var a: Array = [];

    function onLoaded(e:Event):void {}

    XML = new XML (e.target.data);

    var it: XMLList = xml. Lauvtre;

    for (var i: uint = 0; i

    list.addItem({label:il[i].child('Botanisk_navn').toString()});)

    a [i] = {'Fan': it [i].child('Farge').toString (), 'Herdighet': it [i].child('Herdighet').toString (), "Hoyde": he [i].child('Hoyde').toString (), 'Botanisk':il[i].child('Botanisk_navn').toString(),'Norsk_navn':il[i].child('Norsk_navn').toString()};}

    }

    }

    Loader.Load (new URLRequest ("test.xml"));

Maybe you are looking for

  • HP Pro: recovery of Windows 10 for Windows 7

    I bought my computer with Windows 7 and the computer came with a recovery partition.  When I upgraded to Windows 10 I guess the recovery partition would bring back me to 7.  Now I read here that it won't. I passed the time when Windows 10 will allow

  • Satellite C660 - 13r PSC0LE - BIOS update problem

    I bought the Satellite c660-13r 11.05.2011 After installing and configuring Internet conection, only he had messages on the Bulletin Board, NEW BIOS update the bios of the laptop of TOSHIBA BULLETIN BOARD. I updated the bios to 1.30 without any probl

  • STOP 0x07a Lenovo3000 g430 20003

    Hello, everyone.I have laptop Lenovo3000 g430 20003.and I have error KERNEL_DATA_INPAGE_ERROR STOP 0x07a (0xc0000185, 0x55a6b820, 0xc0487F70, 0x90feee7e).I read that 0xC0000185 or STATUS_IO_DEVICE_ERROR, indicates improper termination or defective ca

  • HP envy j023ea upgrade wifi card!

    I have a Ralink 3290 and I want to upgrade with a processor intel. What card intel is compatible with my laptop! I can update with the: Intel Dual Band Wireless-AC 7260? Thank you

  • How to clear the stack

    Hi friends, I have a small doubt here in my application I'm just pushing the screens I'm not poping up screens. Here, I want to keep that one version of data not multiple versions of the data That's why I push screens here I am pressing back I go to