Mise en page CSS pour MVC4 Web

J'ai obtenu un site Web en désordre comme ci-dessous. Mise en page CSS pour MVC4 Web

Code Mon _Layout.cshtml est:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>@ViewBag.Title</title> 
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
<meta name="viewport" content="width=device-width" /> 
@Styles.Render("~/Content/css") 
@Scripts.Render("~/bundles/modernizr") 
</head> 
<body> 

<div id="wrap"> 
    @RenderBody() 
    <header> 
     <h1>Document Heading</h1> 
     <div id="nav"> 
      <ul id="menu"> 
       <li>@Html.ActionLink("Home", "Index", "Home")</li> 
       <li>@Html.ActionLink("About", "About", "Home")</li> 
       <li>@Html.ActionLink("Contact", "Contact", "Home")</li> 
       <li>@Html.ActionLink("Sermon", "Sermon", "Home")</li> 
      </ul> 
     </div> 
    </header> 
    <div id="main-content"> 

     <h2>Column 1</h2> 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p> 
    </div> 
    <div id="sidebar"> 
     <h2>Column 2</h2> 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p> 
     <ul> 
      <li><a href="#">Link 1</a></li> 
      <li><a href="#">Link 2</a></li> 
     </ul> 
    </div> 
    <footer>FOOTER</footer> 

</div>

La vue est assez simple:

@{ 
ViewBag.Title = "Index"; 
Layout = "~/Views/Shared/_Layout.cshtml"; 
}

et CSS:

body 
{ 
    background-color: #FFCC99; 
    border-top: solid 10px #000; 
    color: #333; 
    font-size: .85em; 
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif; 
    margin: 0; 
    padding: 0; 
} 

#nav 
{ 
    float: left; 
} 
/* menu 
----------------------------------------------------------*/ 
ul#menu 
{ 
    font-size: 1.3em; 
    font-weight: 600; 
    margin: 0 0 5px; 
    padding: 0; 
    text-align: right; 
} 

ul#menu li 
{ 
    display: inline; 
    list-style: none; 
    padding-left: 15px; 
} 

    ul#menu li a 
    { 
     background: none; 
     color: #999; 
     text-decoration: none; 
    } 

     ul#menu li a:hover 
     { 
      color: #333; 
      text-decoration: none; 
     } 

header 
{ 
    background-color: #7ac0da; 
    background-image: -ms-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%); 
    background-image: -o-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%); 
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #a4d4e6)); 
    background-image: -webkit-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%); 
    color: #3e5667; 
    padding: 20px 40px 30px 40px; 
} 

#main-content 
{ 
    float: left; 
    width: 75%; 
} 

#sidebar 
{ 
    float: right; 
    width: 25%; 
}

CE QUE JE VEUX EST DE MODIFIER CSS POUR FIXER LES PROBLÈMES.

La colonne 1 de largeur doit être de 25%, colonne 2 doit être de 75%. ça ne marche pas avec CSS.
Le pied de page n'est pas en position réelle inférieure.

Source

2013-06-10 Anonymous

Voici un bon lien avec différents scénarios ... http://slodive.com/web-development/css-page-layouts/ –

La raison pour laquelle le pied de page n'apparaît en bas est parce que rien n'est compensation les flotteurs. L'ajout d'un clear: both à votre pied de page résoudra le problème.

Source

2013-06-10 20:13:41 Jacob

Mise en page CSS pour MVC4 Web

Répondre

Questions connexes