Good way to give margin top navbar?

Hello!

I am faced with a simple question:

I have a bar of navigation inside my wrapper div. I want to give a top margin in the navigation bar to say 10 px from the top of the wrapper DIV. But the top margin does not work as I expect.

Here is my code:

< body >
< div id = 'wrapper' >
< div id = "navbar" >
< a href = "index.htm" > home < /a >
< a href = "products.htm" > < /a > Products
< a href = "terms.htm" > < /a > terms
< a href = "shipping.htm" > < /a > shipping
< a href = "about.htm" > us < /a >
< a href = "contact.htm" > < /a > Contact
< / div >
< / div >

< / body >

{#wrapper}
background-color: #000066;
min-height: 600px;
}
{body
margin: 0px;
padding: 0px;
color: #FFFFFF;
do-family: Arial, Helvetica, without serif.
}
{#navbar}
background-color: #035665;
Width: 80%;
margin-right: auto;
left margin: auto;
text-align: center;
}
a: link {}
color: #FFFFFF;
}
a: visited {}
color: #CCCCCC;
}
#navbar a {}
right margin: 8px;
left margin: 8px;
}

What is a good way to push my navigation bar on the top of the wrapper div?

Add padding 1px above your css selector of wrapper (as shown below)

{#wrapper}
background-color: #000066;
min-height: 600px;
padding-top: 1px;
}

Then take the top on your "navbar" 19px margin if you want it to be 20px in total from the top of the browser window.

What is happening is the margin collapses and the wrapper inherits the style if you need create a barrier between the two, the padding of 1px for this.

CSS works in mysterious ways and not always apparently logical.

Tags: Dreamweaver

Similar Questions

  • Good way to appear on top of something?

    I don't know the best way to approach this problem, so I want to search for some ideas. I have a page with a lot of TitleWindows to this topic and I need to have the update appear above those of others. Does anyone have a good method to do something like that?

    Thank you

    I thought about it... It takes only 3 lines of code too so I thought I'd share
    Given:





    You can simply call this function to set on top of other windows of title:
    private void setWindowOnTop(tw:TitleWindow):void
    {
    for (var i: Number = parent.getChildIndex (tw) + 1;
    {
    parent.swapChildren (tw, parent.getChildAt (i));
    }
    }

  • Good way to start with learning the concepts of 11g

    Hello

    I have a work experience on the BEA weblogic server 8.1 sp4 on which I have worked for about 2 years now. My current mission requires work to Installation / development and deployment on the server of Fusion middleware 11g. Could some body if you please suggest me a good way to start with learning the concepts of 11g.

    I understand that all the documentation is available in the Oracle forum, but I want to know where to go.

    My essential tasks in the assignment would be
    1. installation (OSB on top of WLS).
    2 development/configuration on OSB.
    3 deployment and administrative tasks.

    Kind regards
    Angelique

    Some former OSB tutorials are mentioned here: Oracle OSB - tutorial for using Eclipse plugin development

    The development of OSB guide (which shows how to use Eclipse) can be found here: http://download.oracle.com/docs/cd/E17904_01/doc.1111/e15866/toc.htm

    For now (to my knowledge), Eclipse is used for the development of OSB. Note that JDeveloper is used for development with the Oracle SOA Suite (for example Oracle BPEL).

  • CS6 InD, what happened to the margin-top in EPUB CSS property?

    I've been playing with EPUB export in InDesign CS6. What struck me most surprised are the missing CSS property. What is the reason for which leave margin-top property paragraph styles? This is a characteristic, a bug or I'm just something wrong? Others noticed this too?

    Another thing that surprised me is the device that they use in the margins. Earlier we got em, but now it has pixel. No way to change this?

    A couple told us in the engineer that the programs for CS6 to PEPCON EPUB. He said, that it was intended as a feature, but after hearing this reaction, they consider it a bug and not expect to be fixed, perhaps in the first CS6 bug fix.

  • Margin-top with floating divs property

    I am trying to position a div element that contains the text ("" Bakersfield, CA / contact us "") 50 pixels below two elements floated to the right by using the margin-top property. When I apply the margin-top property, the div does not seem to move down below the floating elements, and it is vertical position does not appear to change.

    When I clicked on the div to join us, it's "indicator margin" stretched to the top of the design view window, which I suppose is the top of the browser window.

    I tried to place a not launched div which did not include any content below the floating elements, using the distance from the bottom to place the "Bakersfield, CA / contact us» While it was operating in design mode, there no mode live view.

    How to set the margin-top property so that it positions the div contact us relative elements floating and not by the top of the browser window?

    Here's the code. The div I'm positioning has the id 'footer', and I'm trying to set the 'bionav' and 'biodescript '.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    #container {
         width: 1050px;
         margin-top: 0px;
         overflow: hidden;
         padding: 5px;
    }
    #header {
         border-bottom-width: 2px;
         border-bottom-style: solid;
         border-bottom-color: #999;
         overflow: hidden;
    }
    #nav {
         margin: 0px;
         padding: 0px;
         width: 100%;
         margin-top: 25px;
    }
    #nav li {
         display: inline;
         margin: 0;
         padding: 0;
         margin-left: 60px;
    }
    #nav .noncurrent a:link, #nav .noncurrent a:visited {
         font-family: Calibri;
         font-size: 20px;
         color: #999;
         text-transform: uppercase;
         text-decoration: none;
    }
    #nav .noncurrent a:hover, #nav .noncurrent a:focus {
         color: #000;
    }
    #nav .current a {
         font-family: Calibri;
         font-size: 20px;
         color: #000;
         text-transform: uppercase;
         text-decoration: none;
    }
    .floatleft {
         float: left;
    }
    #bionav {
         overflow: hidden;
         clear: both;
         margin-top: 10px;
    }
    #bionav div {
         margin-left: 8px;
         float: left;
         width: 96px;
         height: 96px;
         position: relative;
    }
    #bionav img {
         position: absolute;
    }
    #bionav .galnoncurrent a:link img, #bionav .galnoncurrent a:visited img {
         border-top-style: none;
         border-right-style: none;
         border-bottom-style: none;
         border-left-style: none;     
    }
    #bionav .galnoncurrent a:hover img, #bionav .galnoncurrent a:focus img {
         border: medium solid #09C;
    }
    #bionav .galcurrent img {
         border: medium solid #09C;
    }
    #bioimg, #biodescript {
         float: right;
         margin-top: 10px;
    }
    #biodescript {
         margin-right: 25px;
         width: 480px;
         padding-right: 5px;
         padding-left: 20px;
         height: 350px;
         border-left-width: 2.5px;
         border-left-style: solid;
         border-left-color: #999;
    }
    #biodescript h2 {
         text-transform: capitalize;
         font-size: 24px;
         color: #666;
          font-family: Calibri;
    }
    #bioimg {
         margin-right: 20px;
    }
    .subtext, .subtextbold {
         font-family: Calibri;
         font-size: 14px;
    }
    .subtextbold {
         font-weight: bold;
         font-family: Calibri;
    }
    #footer {
         margin-top: 50px;
         clear: both;
    }
    #extinfo {
         text-align: center;
    }
    
    -->
    </style>
    </head>
    
    <body>
    <div id="container">
      <div id="header">
        <img src="../images/colorblindlogonaked.png" width="250" class="floatleft"/>
        <ul id="nav">
          <li class="noncurrent"><a href="../index.html">home</a></li>
          <li class="current"><a href="#">meet the band</a></li>
          <li class="noncurrent"><a href="#">audio samples</a></li>
          <li class="noncurrent"><a href="#">contact us</a></li>
        </ul>
      </div>
      <div id="bionav">
        <div class="galcurrent"><a href="#"><img src="../images/anthonybiothumbcon.jpg" width="90" /></a></div>
        <div class="galnoncurrent"><a href="#"><img src="../images/brentbiothumbcon.jpg" width="90" /></a></div>
        <div class="galnoncurrent"><a href="#"><img src="../images/adambiothumbcon.jpg" width="90" /></a></div>
        <div class="galnoncurrent"><a href="#"><img src="../images/mikebiothumbcon.jpg" width="90" /></a></div>
        <div class="galnoncurrent"><a href="#"><img src="../images/chuckbiothumbcon.jpg" width="90" /></a></div>
        <div><img src="../images/graybox.jpg" width="90" /></div>
        <div><img src="../images/graybox.jpg" width="90" /></div>
        <div><img src="../images/graybox.jpg" width="90" /></div>
        <div><img src="../images/graybox.jpg" width="90" /></div>
        <div><img src="../images/graybox.jpg" width="90" /></div>
      </div>
      <div id="biodescript">
        <h2>band member</h2>
        <p>
          <span class="subtextbold">Instrument: </span>
          <span class="subtext">instrument title</span>
        </p>
        <p>
          <span class="subtextbold">Quote: </span>
          <span class="subtext">"Favorite quote of band member or personal quote, i.e. I like music and making music."</span>
        </p>
        <p>
          <span class="subtextbold">History: </span>
        <span class="subtext">Brief history of band member's music career, i.e. band member started playing in high school band at age of etc. </span> </p>
    </div>
      <div id="bioimg"><img src="../images/anthonybio.jpg" width="350" /></div>
      <div id="footer">
        <p id="extinfo">
          <span class="subtext">Bakersfield, CA | </span>
          <span class="subtext"><a href="#">Contact Us</a></span>
        </p>
      </div>
    </div>
    </body>
    </html>
    
    

    It is a float problem.  If you go overboard both #biodescript and #bioimg in a div with a style of overflow: hidden, then your margin would come into force.  Alternatively, if you have given #extinfo a width of 100% and he floated left, he should also effect.  But perhaps more simply, if you give #footer a style of overflow: hidden, which toured also.

    Judge people...

  • We can add money on an iphone to get the new, a good way would it cost?

    We can add money on an iphone to get the new, a good way would it cost?

    You must speak to your support for example provider (at & t, Verizon, etc.) about adding money to pay your device if not already eligible for an upgrade. Hope this helps, good luck to you.

  • What is a good way to use the queues for the model of consumers/producers?

    Hi all

    I am following the model of consumers/producers to use the queue to synchronize the following process: the producer is a loop to produce a number N, I will put each number generated in a table and after each 5 numbers generated, I put the table in the queue and pass it on to the consumer. I have to wait the use by consumers of the data and it will then remove the item from queue so that producers will have the chance to produce another 5 numbers. As I put the maximum size of the queue one, I expect that the producer and the consumer turns to produce / consume all five numbers and the opportunity to another. Here is my code

    When the checkbox is false, the code will be

    For the first 5 numbers, product will generate every thing right and put it in the table, and it's going to pass the array to the quere so that the consumer will have the chance to loop through the table. I except the procude loop will continue only when the queue is available (i.e. all items are deleted), but it seems that once the consumer starts the loop loop of the product will continue (if the indicator x + 1 and x 2 will be changed to numbers). But this isn't what I want, I know there must be something wrong, but I can't say it is.

    dragondriver wrote:

    As you say in 1, sequency structure to enforce the order of execution, that's why I put it here, in this example, the simple question, I replace the complete code with increase in the number, in the real case, the first markers + 1 and + 2 must be performed in this order.

    Mikeporter says:
    1. get rid of all the structures of the sequence. None of them are nothing but apply a work order which would have been the same without them.

    So even if you delete the sequence structure, there will be a fixed & defined order and it is because LabVIEW follows the MODEL of FLOW OF DATA.

    Data flow model (more precisely in the context of LabVIEW): a block diagram node runs when it receives the required inputs. When a node is running, it produces output data and transmits data to the next node in the path of the data stream. The flow of data on the nodes determines the order of execution of the VIs and functions on the block diagram (click here for reference).

    Now in your code, just remove the sequence structure will not make you order will be going to stay the same, but you need to do some very minor changes (as thread of the error in loop, before that he go to the node "Élément Dequeue").

    Come to the main point: it's a good way to use the queue for the consumer/pmodel that?
    The model you are using (and qualifying as consumer/pmodel) is much too deviated from the original consumer/pmodel which model.

    dragondriver wrote:

    For the second, Yes, it's my fault for delete, though. I'm actually the example of model of producer/consumer design pattern, but I do not pay attention to the while loop in the part of the consumer.

    While loops (two producers & consumers) are the essential part of this architecture and cannot be deleted. You can start your code using standard model.

  • Is there a way to give a user access to the users and computers active directory, without being an administrator

    I want to be able to allow user group to be able to reset passwords and create accounts in an organizational unit.  I delegate control of the organizational unit for the group, but if I connect to the domain controller and try opening users and computers active directory, we wonder an administrator password.  I have a mix of two domain controllers Server 2003 and a Server 2008 DC.  Is there a way to give a group access to the users and computers active directory without being administrator?

    For assistance, please ask for help in the appropriate Microsoft TechNet Windows Server Forum.

    Thank you.

  • When I scroll a page all of a sudden the page jumps all the way back to the top

    When I scroll a page all of a sudden the page jumps all the way back to the top

    Hey LouiseReed,

    This could be a problem with your keyboard. For example if your House key was stuck or if you accidentally touch while scrolling the page would jump to the top of the screen. If possible, try to connect to another keyboard and test to see if the same thing happens.

    Another possibility is that your mouse has a top button which is on the Home button. While scrolling if you accidentally hit this button, the page jump to the top.

    If the above information doesn't help you find causing jumps, please provide more specific information such as: what do you use to scroll when this happens, the problem is easily reproducible whether the problem occurs randomly, etc.

    Hope that helps.

  • Is there a good way to archive historical data?

    Our planning cubes become too big with 5 years of forecasting and budgeting data.

    Is there a good way to archive historical data?

    How you guys do it?

    I know a simple way is easy make a copy planning essbase cubes.  However, is there text, attachments and support details, these will be lost unless there is a way to archive a RDBMS repository data for planning.  Even in this case - all links and hooks of the Essbase cubes in these RDBMS repository will be broken.

    The old fashion method is to print all reports in PDF and archiving.

    Given that the plan changes every month, reprocess you history until you check in?

    Thanks for your advice.

    This can be done in 2 ways...

    1. just make a copy of the old 'DATA' in text file or another essbase cube history. Clear only the historical data for the current application. This will keep other information as text in the intact cell. In case the user wants to refer to the old texts/support cell details they can do by going directly into the application and for part of data, they can look in old PDF report.

    2. a copy of the planning application to create a copy of the current request. Keep all old data, text etc in old app of cells. All previous reports also point this app. Then erase current app and can be simply provide read access to older data App users can be trained to use older applications for all historical data and current app for existing budgets. Also this app can be used during the period of archiving all data.

  • Best way to discover the top N

    Hi all

    Sorry to ask a question on Friday. I've had this issue for some time now, what is the best way to discover the first N?

    For example, how do you know top 10 Web hosts that have the highest use of CPU for a certain period of time.

    One way to do is to create a WCF application that returns topN HostCPUs order to use/period/average. When the interval is small, like the last hour, it works, but if I increase the time range from 1 day, the request will expire after 60 seconds. We have 500 + guests on this FMS. Not only we want to watch the hot servers right now, but also want to watch the hot servers say yesterday, or last month.

    Another way is to use groovy code below, when I use retrieveLatestValue to get the current value, it's fast, but if I replace it with retrieveAggregate and make the time range for the previous 24 hours, it takes a few minutes to run.

    #! HostCPUs # .getTopologyObjects (extinguish) {a, b->

    go = server. DataService.retrieveLatestValue (a 'use'). value?. AVG

    If (goes == null)

    go = 0

    VB = server. DataService.retrieveLatestValue (b, 'use'). value?. AVG

    If (vb is nothing)

    VB = 0

    VA - vb > 0? 0: 1

    } .subList (0, 10)

    Then, of course, these are not very effective. Is there a better way to get this top N list I'm looking for?

    Thank you

    Xiaoning

    Here is an example of the batch api to query the memory of the virtual machine, and then I take action on a specific period of time.

    import com.quest.nitro.service.sl.interfaces.data.IDataService;

    import com.quest.nitro.service.sl.interfaces.data.ObservationQuery;

    import com.quest.nitro.model.topology.TopologyObject;

    import com.quest.nitro.service.sl.ServiceLocatorFactory;

    Import org.apache.log4j.Logger;

    def LOG = Logger.getLogger ("batch.query.test");

    topologyObjects = new HashSet (#!) VMWVirtualMachineMemory # .topologyObjects);

    Log.info ("topology objects querying ${topologyObjects.size ()}...");

    endTime = System.currentTimeMillis ();

    startTime = endTime - (4 * 60 * 60 * 1000 L);

    IDataService dataSvc is ServiceLocatorFactory.getLocator () .getDataService ();.

    Query ObservationQuery = dataSvc.createObservationQuery ();

    query.setStartTime (startTime);

    query.setEndTime (endTime);

    Query.include (topologyObjects, "active");

    Query.include (topologyObjects, "affected");

    Query.include (topologyObjects, "zero");

    result = dataSvc.performQuery (query);

    long term = System.currentTimeMillis () - endTime;

    Log.info ("request completed in ${duration} ms.");

  • vSphere 5.5 using the uplink of LBT group that does not have a good way

    We use LBT since our recent deployment, which is new for us.  Everything seemed fine and dandy, until recently the VMs began dropping their connectivity to what looked like at random times.  The first fix out the door had to disconnect and reconnect the vNIC for each virtual computer.  Sometimes, it took a few tries before it worked.  We discovered that LBT moved VMS to the other group of uplink, which was a physical affair.  Unfortunately, someone didn't configure the port correctly on the remote switch, so while link came, he could not access the VLAN correct.  My question is, why the LBT would move virtual machines to an uplink group which did not have a good way?  He seeks only a physical link?  Looks like this problem waiting to happen.  Or, more likely, we have something misconfigured.  Any help would be wonderful, I don't like the idea to return to etherchannel or LACP with IP hash with blades chassis.  Thank you!

    My question is, why the LBT would move virtual machines to an uplink group which did not have a good way?

    Is that a "good path" can mean many different things in different circumstances of different points of view, if it's out of reach for LBT. It will be only on the physics of the status of the link. There is beacon probing too which can detect switch upstream outages but it can be used only with at least 3 vmnic uplinks and it has a few disadvantages, see:

    http://virtechgeek.com/2013/05/06/beacon-probing-vSphere-network-policy/

    http://thomaslowblog.blogspot.de/2011/10/vswitch-network-failover-detection.html

    You can use the dvSwitch health check feature to make sure that all the natachasery of all the hosts connected to a dvSwitch can access the same VLAN. It will not prevent LBT to move virtual machines, but it will at least raise an alarm if a bear cannot access a VIRTUAL LAN. Take a look at this article:

    http://wahlnetwork.com/2012/08/27/new-5-1-distributed-switch-features-part-1-network-health-check/

  • Is there a good way to do it?

    Is there a good way to write messages of errors in PL/SQL? For example:

    IF < variable > IS NULL THEN

    dbms_output.put_line ("' error message");

    END IF;

    OR

    IF < variable > IS NULL THEN

    RAISE < exception >;

    END IF;

    What is the most correct? Or maybe the two are quite right?

    Thank you.

    Hello

    Dbms_output is a good way of packing to write messages for debugging PL/SQL code.  It is not very good for anything else.  It is particularly inappropriate for the error messages, since the output can easily be missed, if it is never displayed at all.

    The second way you posted (STIMULUS) is good.  Create user-defined exceptions and RAISE them explicitly.

  • Is there a good way to automate changing existing links to external PDF to be attachments in PDF with the same names?

    Greetings!

    Can someone tell me a good way to automate changing hyperlinks existing PDF 'main' to an external PDF rather do links to attachments PDF for the main PDF (the PDF attached to have the same filenames as the external PDF files)?

    The current link to main PDF format:
    Navigate to a page in another document
    File: C:\\path\filename.pdf
    Name of the destination: P:1

    When the link is manually changed to link to a PDF file that was attached to the main PDF:

    Navigate to a page in another document
    : PDF attachment
    Page: 1
    Zoom level: page Fit

    The new PDF link does not list the name of the attachment PDF file in the link.

    The file main PDF (the one that has the connection I would change automatically) is generated with hyperlinks to other documents PDF from Adobe FrameMaker 11.  In FrameMaker11, we have added text marker special "openpage filename.pdf:1' which is 'automatically' has been changed to hyperlinks to PDF files external when the main PDF file is created (postscript file is processed) Adobe Acrobat Pro 11.

    My first choice is to be able to change the format of the text in the file source Adobe FrameMaker special marker, but I found no way to specify a link for a PDF attachment with a certain file name.

    However, I also very much the ability to run a command on a main PDF file to change the links there.

    Has anyone tried using only Adobe ExtendScript ToolKit CS6? In other words, a script that could automatically change the hyperlinks in a PDF document to a link to attachments in PDF instead of external PDF files, or to modify the links not transformed, while they are still in Postscript file format format, or change the text in FrameMaker marker instead of creating a link to a PDF file in the same directory as the main processing PDF to create a link to a PDF attachment files?

    Thank you
    Judith Wallace
    [email protected]

    FrameMaker hyperlink feature has no ability to "connect" with an attachment on/in a PDF target.

    PDFs from FM may have named destinations listed FM files created as a link of file01.fm to the named destination specified in file01.fm will be functional in the PDF files created from the files of FM.

    Then, of course, it is the possible dynamics by use o FM books. But it is the grist mills in the FM 2 user forum.

    RE: Script - PDF scripting is via Acrobat JavaScript. It is something yet and by Adobe, even though it may migrate to a Standard ISO (or be wound in a future standard ISO 32000).

    Then, to the point - look at Acrobat JavaScript for the script.

    Be well...

  • I cannot add a video to Muse. Does anyone know a good way to get where I want to go?

    I have integrated a YouTube video on a site before Muse. I used the embed code and the URL successfully in the past. Now, the widget displays a notice, "unable to generate the thumbnails.

    In addition, YouTube launched a policy where they run ads unless I monetize firstly for the privilege to disable ads. I love YouTube because they offer a choice of sizes for the player, but have no interest in signing up for Google Adsense. I don't see any option of size on Vimeo. In addition, a Vimeo version load into the widget with the URL or embed code to be.

    All I want is a simple player for a video slideshow portfolio HD. I need the player to fill more of the page than the player of 560 x 315. Does anyone know a good way to get where I want to go?

    Hello

    If you ready to welcome video on the host server you can do this by importing mp4 files in the current folder and then you can use the HTML code to play this video in HTML5 player and you can set the size in code.

    Please take a look at the steps of the example.

    1. go to file > add files to download > (select the file you want and it will be moved in the current folder)

    2. go to object > insert HTML and the following code Type code

    ' assets / "Filename".mp4" type =" video/mp4">".

    "Filename" should be replaced with the exact name of the video file that you imported in step 1

    3. you can change the width and height according to your requirement.

    This will create the image of the video in HTML5 player, and you can place it in the Page as a pet your condition.

    Concerning

    Vivek

Maybe you are looking for

  • Aperture 3 hungry

    I have what I thought, it was an iMac Apple reasonable suitable for mounting all kinds of great images, take a look... iMac 27 inch end 2013, 3.2 GHz intel core i5, 16 GB 1600 MHz DDR3, NVIDIA GeForce GT755M 1024 MB, so why my editing in my opening v

  • Need recovery product for Satellite M30-106 cd

    Misplaced my product recovery CD. Where can I get one from?

  • My Satellite C650-110 will not work

    Hello My laptop will not work. It is still covered by warranty Toshibas. The problem is the charger does not work or there is a problem with the connection inside the laptop. When you try and turn on the laptop a yellow light flashes but does not ill

  • 12V car charger for notebook 10TS?

    Recently, I've had this laptop. Been very happy with it, but one of the reasons for getting a small unit is if I can use it in the motorhome. A charger 12 Vcc ("vehicle power") is available for this?

  • Uninstall siemens step7 v5.5

    Hey I want to uninstall siemens step7 v5.5 (plc) to my windows 7, actually by mistake first I uninstall the license of siemens Manager so he demonstrated a program file is not in your computer.   could you please help me how to uninstall the software