Align UL in ASP MVC

Page 1 of 1

4 Replies - 1388 Views - Last Post: 18 January 2012 - 06:22 AM Rate Topic: -----

#1 raziel_  Icon User is offline

  • Like a lollipop
  • member icon

Reputation: 458
  • View blog
  • Posts: 4,222
  • Joined: 25-March 09

Align UL in ASP MVC

Posted 13 January 2012 - 09:33 AM

Hi :)
I`m trying to create a menu for a site and i want to align UL in the center. It works fine if i test it on the w3school try it your self thing but not on the MVC site.css file.
here is my _layout file

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>

<body>
    <div id="header">
        <h1>
            My web site
        </h1>
        <div id="menu">
            <ul id="navlist">
                <li class="first">
                    <a href="/" id="current">Home</a>
                </li>
                <li>
                    <a href="/About">About Me</a>
                </li>
            </ul>
        </div>
    </div>
    @RenderBody()
</body>
</html>


and my site.css file
body
{
    font-size: .85em;
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
    color: #232323;
    background-color: #fff;
}

header,
footer,
nav,
section {
    display: block;
}

/* Styles for basic forms
-----------------------------------------------------------*/

fieldset 
{
    border:1px solid #ddd;
    padding:0 1.4em 1.4em 1.4em;
    margin:0 0 1.5em 0;
}

legend 
{
    font-size:1.2em;
    font-weight: bold;
}

textarea 
{
    min-height: 75px;
}

.editor-label 
{
    margin: 1em 0 0 0;
}

.editor-field 
{
    margin:0.5em 0 0 0;
}


/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error
{
    color: #ff0000;
}

.field-validation-valid
{
    display: none;
}

.input-validation-error
{
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors
{
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid
{
    display: none;
}

#menu
{
    margin-top:40px;
    clear:both;
}
ul#navlist
{
    border-bottom:1px #5C87B2 solid;
    padding: 0 0 2px;
    position: relative;
    margin: 0;
    text-align:center;
}

i`m new to MVC and Web dev as whole so any help will be appreciated

This post has been edited by raziel_: 13 January 2012 - 09:33 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Align UL in ASP MVC

#2 Martyr2  Icon User is online

  • Programming Theoretician
  • member icon

Reputation: 3875
  • View blog
  • Posts: 11,414
  • Joined: 18-April 07

Re: Align UL in ASP MVC

Posted 13 January 2012 - 10:28 AM

Well the fact that it is MVC means nothing. Your problem is a CSS one. All you need to do is give your #menu item a width and set its left and right margins to "auto"

#menu {
   width: 200px;
   margin-left: auto;
   margin-right: auto;
}


This should then center the "menu" div in its container.

:)

This post has been edited by Martyr2: 13 January 2012 - 10:30 AM

Was This Post Helpful? 1
  • +
  • -

#3 raziel_  Icon User is offline

  • Like a lollipop
  • member icon

Reputation: 458
  • View blog
  • Posts: 4,222
  • Joined: 25-March 09

Re: Align UL in ASP MVC

Posted 13 January 2012 - 01:49 PM

ty for your replay as always much appreciated. did i miss something else in my HTML file? i did try what you suggested and still dose not do what i want(its still the same thing). here is what i have done:
_layout file
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>

<body>
    <div id="header">
        <h1>
            My web site
        </h1>
        <div id="menu">
            <ul id="navlist">
                <li class="first">
                    <a href="/" id="current">Home</a>
                </li>
                <li>
                    <a href="/About">About Me</a>
                </li>
            </ul>
        </div>
    </div>
    @RenderBody()
</body>
</html>

and the site.css file
body
{
    font-size: .85em;
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
    color: #232323;
    background-color: #fff;
}

header,
footer,
nav,
section {
    display: block;
}

/* Styles for basic forms
-----------------------------------------------------------*/

fieldset 
{
    border:1px solid #ddd;
    padding:0 1.4em 1.4em 1.4em;
    margin:0 0 1.5em 0;
}

legend 
{
    font-size:1.2em;
    font-weight: bold;
}

textarea 
{
    min-height: 75px;
}

.editor-label 
{
    margin: 1em 0 0 0;
}

.editor-field 
{
    margin:0.5em 0 0 0;
}


/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error
{
    color: #ff0000;
}

.field-validation-valid
{
    display: none;
}

.input-validation-error
{
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors
{
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid
{
    display: none;
}

#menu
{
    width: 200px;
    margin-left: auto;
    margin-right: auto;
}
ul#navlist
{
    border-bottom:1px #5C87B2 solid;
    padding: 0 0 2px;
    position: relative;
    margin: 0;
    text-align:center;
}

Attached Image

all i want is to place them as if they are navigation menu.
God CSS hates me :P

This post has been edited by raziel_: 13 January 2012 - 01:52 PM

Was This Post Helpful? 0
  • +
  • -

#4 Nakor  Icon User is offline

  • Professional Lurker
  • member icon

Reputation: 431
  • View blog
  • Posts: 1,452
  • Joined: 28-April 09

Re: Align UL in ASP MVC

Posted 17 January 2012 - 10:41 PM

What browser are you testing in? What you have seems to display the ul items in the middle of the header on IE9, Firefox and Chrome.

This post has been edited by Nakor: 17 January 2012 - 10:50 PM

Was This Post Helpful? 0
  • +
  • -

#5 raziel_  Icon User is offline

  • Like a lollipop
  • member icon

Reputation: 458
  • View blog
  • Posts: 4,222
  • Joined: 25-March 09

Re: Align UL in ASP MVC

Posted 18 January 2012 - 06:22 AM

i`m using Chrome. However i find this site that keep me going so everything is fine now :)
http://atashbahar.co...navigation.aspx
its for MVC2 so i got to change it a little bit but i got it working :)

This post has been edited by raziel_: 18 January 2012 - 06:22 AM

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1