How to Center a CSS menu in a table cell

navvcell.jpg

A you can see (with the temporary cell borders applied) the menu to the right of the cell

which puts it slightly off center on the page.

Customer prefer tabular presentation

Site is here: http://www.kardsbykaren.us/index.php

Throughout the CSS is here: http://www.kardsbykaren.us/kk.css

NavBar CSS is here:http://www.kardsbykaren.us/kknav.css

Would appreciate any assistance.

Happy holidays

Add a css class:

#navbar ul {}

margin: 0;

padding: 0;

}

Tags: Dreamweaver

Similar Questions

  • Drop-down menu in the table of cells - how to develop across the width of column?

    Hello!

    A customer migrate their 2 400 forms of old JetForms as PDF (LiveCycle Designer) and would like to keep the same functionality, so that it is used in the old platform. However, some of the old tool features do not seem to be present in LiveCycle.

    Suppose that a drop down menu in a table cell, containing the elements whose lengths are larger than the column of the table. In JetForm, when you open the drop-down menu that spans the columns to display all of its content, do not cut the contents of the drop-down list.

    I tried this in LiveCycle, but the drop down menu gets cut and its content is limited to the column in the table (where the drop-down menu below) width.

    Is there a way to bypass this limitation, even if I use scripts?

    Thank you for all the ideas!

    Marcos

    Hi Marcos,

    I don't think you will get this works reliably in a table

    Niall

  • How do I Center my spry menu bar? (to learn)

    I have a simple Web page, I have a background (color) and a background image of the Center and a picture of the top banner. Then, I inserted a "Spry menu bar" but her sitting to the left of the page? IV been tried at the Center, I tried to put a < div align = "center" > all about all this, but nothing works. even if I switch to the design view and click on the menu bar and click on 'align'-> 'Center', but it still does not. can you please help me!

    Link code in Green is placed just above of your

    Code HTML of Jon added two places below red


    The CSS of Jon code in blue could go in a block style above the tag

    or it could be added to your stylesheet to distance

    Hakisak wrote:

    Hello thanks for the reply, sorry I couldn't respond sooner (I've been busy). but I'm still learning the creation of Internet sites, and I don't understand where to put this code, you said?

    Dreamweaver has insert 'menu spry bar' that looks like this, but I'm still not sure how to Center?

  • How can I get my menu to Center along the navigation bar

    I created a menu using the horizontal menu widget.  I'm placing it inside a box that I created and that spans the width of the screen.  I want the menu to Center on the page, but he continues to be aligned with the navigation bar, that I created.  How can I get the menu to Center on the page.  I chose the icon on the toolbar to center but it does not work.

    Thanks in advance for your help.

    Try to pin the menu or use the scroll without moving to correct the position of the menu on the page.

    Thank you

    Sanjit

  • How to center the text in a table with css?

    I wonder if it is possible to center the text and images in a table.
    I've assigned ID MaTable at my table and then text in the table centered but text aligned statement #mytable. What's wrong?

    "Prajnaparamita" wrote in message
    News:ffitur$5A0$1@forums. Macromedia.com...
    > I wonder if it is possible to center the text and images in a table.
    > I assigned ID MaTable at my table and then text in Center
    > table #mytable, but the text is left-aligned. What's wrong?

    Try to make the switch

    #mytable td

    Since this is the table cell that you really want to have this property.

    --
    Patty Ayers | Adobe Community Expert
    www.WebDevBiz.com
    Free articles on the business of Web development
    Web Design contract, quote request form, estimate Worksheet
    --

  • How to Center a TextArea

    I have a TextArea unmodifiable JavaFX I use to display information. I do it because I want the text automatically the text which can sometimes be long.

    However, I can't get the text to be centered. The CSS style

    -fx-text-alignment: center

    work for text, not the TextArea objects objects.

    Does anyone know how to center text in a non-editable text box? Should I use another control to view my information instead?

    Thank you

    You need

    label.setWrapText(true);
label.setTextAlignment(TextAlignment.CENTER);

  • How to Center my slideshow?

    I rushed here, then it will be quite a small matter. How to Center my slideshow? Here are the codes that you need to know:

    My slide show Code

    This goes in the < head > < / head >

    " < link rel ="stylesheet"href =" http://MaxCDN.bootstrapcdn.com/bootstrap/3.3.5/CSS/bootstrap.min.CSS ">

    " < script src =" https://AJAX.googleapis.com/AJAX/libs/jQuery/1.11.3/jQuery.min.js "> < / script > .

    " < script src =" http://MaxCDN.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js "> < / script > .

    < style >

    . Carousel-Interior > .item > img,.

    . Carousel-Interior > .item > a > img {}

    Width: 100%;

    margin-left: 20px;

    margin-right: 20px;

    }

    < / style >

    This goes in the < body > < / body >

    < div class = "container" >

    < br >

    < div id = 'myCarousel' class = "slide Carousel" data-ride = "Carousel" >

    <! - indicators - >

    < ol class = "Carousel-indicators" >

    < li data-target = "#myCarousel" data-slide-to = "0" class = "active" > < /li >

    < li data-target = "#myCarousel" data-slide-to = "1" > < /li >

    < li data-target = "#myCarousel" data-slide-to = "2" > < /li >

    < li data-target = "#myCarousel" data-slide-to = "3" > < /li >

    < /ol >

    <!--> wrapper for slides

    < div class = "Carousel-interiors" role = "listbox" >

    < div class = "active item" >

    < img src = "Fallout 4 Slideshow.jpg" alt = "Fallout 4" width = "460" height = "345" >

    < div class = "Carousel-caption" >

    < h3 > Fallout 4 release < / h3 >

    November 10 < /p > < p >

    < / div >

    < / div >

    < div class = "item" >

    < img src = 'Rainbow Six seat Slideshow.jpg' alt = 'Rainbow Six seat"width ="460"height ="345">

    < div class = "Carousel-caption" >

    Chania < h3 > < / h3 >

    < p > the atmosphere in Chania has a touch of Florence and Venice. < /p >

    < / div >

    < / div >

    < div class = "item" >

    < img src = "Fallout_PIP - Boy_2000.jpg" alt = "Flower" width = "460" height = "345" >

    < div class = "Carousel-caption" >

    Flowers of < h3 > < / h3 >

    < p > beautiful flowers to Kolympari, Crete. < /p >

    < / div >

    < / div >

    < div class = "item" >

    < img src = "img_flower2.jpg" alt = "Flower" width = "460" height = "345" > "

    < div class = "Carousel-caption" >

    Flowers of < h3 > < / h3 >

    < p > beautiful flowers to Kolympari, Crete. < /p >

    < / div >

    < / div >

    < / div >

    <!-left and right controls->

    < a class = "Carousel-control left" href = "#myCarousel" role = "button" data-slide 'prev' = >

    < span class = "glyphicon glyphicon-chevron-left" aria-hidden = "true" > < / span >

    < span class = "sr only" > </span > previous

    < /a >

    < a class = "carousel-control right" href = "#myCarousel" role = "button" data-slide 'next' = >

    < span class = "glyphicon glyphicon-chevron-right" aria-hidden = "true" > < / span >

    < span class = 'sr only' > next </span >

    < /a >

    < / div >

    < / div >

    My CSS:

    left margin: auto;
    margin-right: auto;
    Width: 92%;
    Max-width: 1200px;
    padding-left: 3,275%;
    padding-right: 3,275%;

    My CSS Iframe (the slideshow is in an iframe)

    IFRAME {}

    Width: 768px;

    height: 450px;

    margin: 0px;

    padding: 0px;

    background: Blue;

    border: 0px;

    display: block;

    }

    My Iframe in source code:

    < iframe src = "slideshow Iframe.html homepage.

    frameborder = "0" scrolling = "no" >

    Your browser does not support IFrames.

    < / iframe >

    I hope that's all you need, thank you: D

    I want to thank Nancy O who helped me on the slideshow and the calendar, I'll you credit in my Web site

    I can't imagine why you need or even want to use an iframe for it.  It is totally useless.

    That said, to center the page elements, you need 2 things:

    1. a width specified in pixels or in percent which is lower than 100%.
    2. a margin-left and margin to the right of the car.

    #myCarousel {

    Width: 1000px; / * adjust as needed * /.

    margin: 0 auto;

    }

    Nancy O.

  • I have 6 buttons on the navigation bar that point to 6 different pages - the buttons are all the same color - if I am currently on [say] page 3-How can I me key menu 3 to change color and state that I am on page 3?

    I have 6 buttons on the navigation bar that point to 6 different pages - the buttons are all the same color - if I am currently on [say] page 3-How can I me key menu 3 to change color and state that I am on page 3?   using DreamWeaver CC

    Among the contributors here has a nice page explaining how to do what you want, using css.

    Indicator of persisting in the Menus - Page http://alt-web.com/

  • Newbie question: how to center or align an object in the middle of the CC PS document?

    How to center or align an object in the middle of the CC PS document?

    Put a clean diaper on.  Then select all to select the size of the canvas to the document and use menu layer > Align layer to selection twice.  Centering in either sense. You get us there.

  • How to create multiple CSS navigation bars?

    Hello

    How to create multiple CSS navigation bars?

    I currently have the code below (and it works very well) for a navigation bar, but I'm trying to create navigation bars .  Can I just change the 'nav ul li a""NAV ul li b"(note the 'a' change to a 'b') or something similar?  I can not understand the correct coding...

    Thanks in advance for any help!  I very much appreciate quick and precise Adobe support team answers!

    NAV ul {}

    margin: 0;

    padding: 0;

    }

    NAV ul li {}

    list-style-type: none;

    float: left;

    Display: block;

    height: 60px banner;

    Width: 333px;

    text-align: center;

    line-height: 55px;

    do-family: Arial, Helvetica, without serif.

    font-size: 33px;

    }

    NAV ul li a {}

    text-decoration: none;

    color: white;

    }

    NAV ul li: hover {}

    background-color: rgb (0,0,255);

    }

    NAV li: hover ul a {}

    Display: block;

    color: white;

    }

    No, the 'a' you see is an html element, , you can not change this.

    It's very simple.

    You can create a class, the name you want (I used .yourclass), add it to the second

  • CSS Menu - drop down list help.

    Hi guys,.

    I am re - create a website for a friend and am currently finding the difficult Menu CSS coding.

    Here is MY version of the Web site:

    http://abacusmortgages.co.uk/index.html

    Here is the current version, which I am trying to copy:

    http://sdhmarketing.co.UK/

    Pages: Our types of customers and what you need to have special css menu dropdown lists that come when you hover over the button.

    Here is the CSS code that I have so far:

    #holding ul {}

    margin: 0px;

    padding-left: 0px;

    list-style-type: none;

    do-family: Arial;

    do-size: 14px;

    make-weight: bolder;

    color: #506F1A;

    background-image: url(images/navbg.jpg);

    position: absolute;

    left: 0px;

    Top:-3px;

    }

    #holding ul li {}

    float: left;

    Width: 200px;

    margin: 0px;

    make-weight: bold;

    }

    #holding ul li a {}

    do-family: Arial;

    do-size: 11pt;

    color: #506F1A;

    text-decoration: none;

    background-color: Transparent;

    text-align: center;

    display: block;

    padding: 5px;

    }

    #navigation {}

    }

    #holding ul li a: hover {}

    color: #FFF;

    background-color: #333;

    make-weight: bolder;

    do-size: 14px;

    }

    .menu {}

    }

    Here is the HTML code I use:

    < ul >

    < li > < a href = "index.html" > HOME < /a > < /li >

    < li > < a href = "ourclienttypes.html" > OUR CUSTOMER TYPES < /a > < /li > ""

    < li > < a href = "whatdoyouneed.html" > of WHAT do you NEED? " < /a > < /li >

    < li > < a href = "casestudies.html" > CASE STUDIES < /a > < /li > ""

    < li > < a href = "managementteam.html" > MANAGEMENT TEAM < /a > < /li > ""

    < /ul >

    If someone could help it would be much appreciated.

    Thank you all!

    . Selected a: hover {}

    background-color: #444;

    color: #fff;

    }

    }< remove="" that="">

  • Help needed with CSS menu dropdown

    Hi guys,.

    I'm currently building a drop-down list for my site, but, despite seeing some tutorials and examples, I have had no luck yet!

    I'm sure that my HTML is correct...

    Code:

        <ul id="nav">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a>
            <ul>
                <li><a href="#">Drop Down 1</a></li>
                <li><a href="#">Drop Down 2</a></li>
                <li><a href="#">Drop Down 3</a></li>
                <li><a href="#">Drop Down 4</a></li>
            </ul>
        </li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
    </ul>

    My CSS looks like this right now...

    Code:

    ul#nav {width:920px; height:35px; list-style:none; padding:0; margin:0; background:url(navBg.jpg) repeat-x; font-family:'OpenSansRegular'; font-size:11px; font-weight:700; text-transform:uppercase; -moz-box-shadow:0px 0px 10px #1c1c1c; -webkit-box-shadow:0px 0px 10px #1c1c1c; box-shadow:0px 0px 10px #1c1c1c; z-index:999;}
ul#nav li a:hover, #nav li a:active {background:url(navOn.jpg) repeat-x; text-decoration:none;}
ul#nav li a {border-right:1px solid #000; color:#E0E2E7; display:inline-block; float:left; margin:0; padding:10px 19px; width:auto; text-decoration:none;}

* html #nav li {display:inline; float:left; }  /* for IE 6 */
* + html #nav li {display:inline; float:left; }  /* for IE 7 */


ul#nav li ul {left:-9999px; position:absolute; list-style:none;}
ul#nav li:hover ul {left:0; position:absolute;}

ul#nav li ul li {}
ul#nav li ul li a {width:230px; background-color:#efefef; color:#2e2e2e; font-family:Arial, Helvetica, sans-serif; font-size:10px; font-weight:normal; border-bottom:solid 1px #FFF; padding:7px; margin:0;}
ul#nav li ul li a:hover {background-color:#028efd; background-image:none; color:#FFF;}

    I am really struggling with this. Anyone know how I can get 3 Menu to display the drop-down list four items below - not the same width as the button Menu 3 but just online with it.

    Thank you very much and I hope to hear from you.

    SM

    Try this. It's been adapted from a menu that I've done on another site.

    #menu {width:920px; height:35px; padding:0; margin:0; background:url(navBg.jpg) repeat-x; -moz-box-shadow:0px 0px 10px #1c1c1c; -webkit-box-shadow:0px 0px 10px #1c1c1c; box-shadow:0px 0px 10px #1c1c1c;}
ul#nav a {font: 700 11px 'OpenSansRegular', arial, helvetica, sans-serif; text-transform:uppercase; margin:0; padding:5px 15px; line-height:25px; color: #666; text-decoration: none; display:block; list-style: none;}
ul#nav a:hover, ul#nav a.active {color: #999; background:url(navOn.jpg) repeat-x; text-decoration:none;}
ul#nav {position: relative; margin: 0; padding: 0;}
ul#nav ul {display: none;}
* html #nav li {display:block; float:left; }  /* for IE 6 */
* + html #nav li {display:block; float:left; }  /* for IE 7 */
ul#nav li, ul#nav li li {position: relative; float: left; list-style: none; border-right:1px solid #000;}
ul#nav li:hover ul {position: absolute; top: 35px; left: -1px; display:block; padding: 0; margin: 0;}
ul#nav li li {width:230px; background-color:#efefef; color:#000;  font: normal 10px 'OpenSansRegular', arial, helvetica, sans-serif; border-bottom:solid 1px #FFF; border-right:none; border-left:1px solid #000; padding:0 5px;}
ul#nav li li:hover, ul#nav li li a:hover {background-color:#028efd; color:#FFF;}

  • CSS menu Spry will not appear

    I'm putting a bar of menus vertical spry on my home page, which is already two CSS files. The menu bar has its own CSS that does not appear on my homepage. How can I get the menu bar CSS to replace the general CSS page?

    Here are links to the CSS that I have in my head:

    < link href = "css/iais2012.css" rel = "stylesheet" type = "text/css" / > "

    < link href = "css/prettyPhoto.css" rel = "stylesheet" type = "text/css" / > "

    < link href = "css/SpryMenuBarVertical.css" rel = "stylesheet" type = "text/css" / > "

    UL. MenuBarVertical a

    {

    display: block;

    cursor: pointer;

    background-color: #cc6633;

    Padding: 0.4em 0.5em;

    color: #FFF;

    text-decoration: none;

    line-height: 24 PX. / * adjust as desired * /.

    border-bottom: 2px solid #FFF;

    }

    Nancy O.

    ALT-Web Design & Publishing

    Web | Graphics | Print | Media specialists

    http://ALT-Web.com/

  • How can I make the menu title of a different color when it is horizontal Spry menu menu?

    How can I make the menu title of a different color when it is horizontal Spry menu menu?

    Dreamweaver CS5.5

    Apple OS X.6.8

    Display of the site to: http://Dorsay-Easton-Indian-law.com/staging/index.html

    Steps to follow:

    1. click on the link to land on the home page

    2 link see Home in the Spry horizontal navigation menu

    Real:

    Title of the home menu is the same color as all the others.

    Expected:

    The title of the active menu is color: #FFC.

    I was hoping that a: active would give me this feature, but it's not how it is described. All suggestions are welcome!

    The tag BODY nothing that I tried in the editable model. This is why I wonder how to disconnect the model individual pages. Adding an ID to each body tag is a condition sine qua non of the how-to page that you provided.

    You are not theeditable in a template tag.

    You are the attributes of theeditable tag.

    Do not unplug the model child pages.

    Specify editable tag attributes in a template

    http://help.Adobe.com/en_US/Dreamweaver/CS/using/WScbb6b82af5544594822510a94ae8d65-7aa3a.h tml

    In the model:

    1. Select ittag (in the tag selector, or click inside the)tag in Code view)
    2. Modify > templates > make attribute editable
    3. Select the code in the drop down attribute
    4. If there is no ID attribute then click Add and type the ID in the next dialog box
    5. Attribute: ID
      Check the box 'Make attribute editable '.
      Enter anything in the field of the default label for example foo
      Ok
    6. Dreamweaver will change thetag to read
    7. The ID is now editable
    8. Save the model and update the child page

    In each page of the child:

    1. Edit > properties of the model
    2. Select the id attribute in the list (it's probably the only one listed)
    3. Change its name in the box to any name matches your CSS rule for the active state of the page
    4. Ok
    5. Save
    6. Download

  • How to Center content?

    I have a layout of the basic web site, but I would like to ask in the middle of the screen no matter what size is the browser, similar about each model on DW CS4.

    I've been messing around with the CSS for the div container:

    {body

    are-family: "Comic Sans MS", Chalckboard, without serif.

    background-color: #0CF;

    }

    #container {}

    position: absolute;

    background-color: #0FF;

    margin-left: auto;

    margin-right: auto;

    }

    {#layout}

    border: 0px;

    border-bottom-color: #0EE.

    background-color: #FFF;

    }

    {#spacers}

    background-color: #09C;

    border: 0px;

    }

    #header {}

    line-height: 125%;

    background-color: #09C;

    }

    #header p {}

    make-weight: bold;

    are-size: 48px;

    text-align: center;

    }

    #sidebar {}

    background-color: #09C

    }

    #footer {}

    background-color: #0CC.

    Anyone know how always Center the container?

    Jack Stratton

    You need 3 basic things to Center web pages:

    (1) a document valid HTML - DW type this for you, when you create a new page.

    (2) with a width of container in px, ems or %.

    (3) margin-left and margin-right to auto (default value of the browser).

    NOTE: The absolute positioning elements cannot be centered without additional coding.  Don't use no absolute positioning here.

    Try this:

    #container {}

    background-color: #0FF;

    Width: 970px; / * set Req'd width * /.

    margin: 0 auto;

    }

    Nancy O.
    ALT-Web Design & Publishing
    Web | Graphics | Print | Media specialists
    http://ALT-Web.com/
    http://Twitter.com/ALTWEB

Maybe you are looking for