Configurar las dimenciones del body html
Publicado por Roberto (1 intervención) el 19/08/2020 18:38:32
Hola como están, muy buenas tardes. soy nuevo hace tres días vengo haciendo algo con html y bootstrap
por favor ayúdenme ya que por mis medios ya no puedo no consigo resolver este problema que tengo.
tengo un sidebar bueno esta en el costado izquierdo de la pagina. y su contenido a la derecha.
estoy trayendo con @renderbody vistas desde mvc pero tengo la ligera impresión que algo anda mal en las dimensiones de mi contenido dentro del body, lo digo porque no puedo ver mi formulario horizontal como me indica en los ejemplos de bootstrap.
permitan mostrar las lineas de código que tengo, y la imagen
el código de mi _Layout.cshtml
esta es mi hoja de estilos.css
y aquí les muestro una vista, por ejemplo del formulario Crear Usuario
ahora les adjunto la imagen que ayudara a dar mas luces del problema que veo en la pagina
por favor no se preocupen, cualquier tipo de comentarios, correcciones sugerencias para ayudarme
muchas gracias de antemano.
Roberto
por favor ayúdenme ya que por mis medios ya no puedo no consigo resolver este problema que tengo.
tengo un sidebar bueno esta en el costado izquierdo de la pagina. y su contenido a la derecha.
estoy trayendo con @renderbody vistas desde mvc pero tengo la ligera impresión que algo anda mal en las dimensiones de mi contenido dentro del body, lo digo porque no puedo ver mi formulario horizontal como me indica en los ejemplos de bootstrap.
permitan mostrar las lineas de código que tengo, y la imagen
el código de mi _Layout.cshtml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css2?family=Concert+One&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<title>Document</title>
<link href="~/Content/bootstrap-grid.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-reboot.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/estilos.css" rel="stylesheet" />
<link href="~/Content/bootstrap-datepicker.standalone.css" rel="stylesheet" />
<link href="~/Content/bootstrap-datepicker.min.css" rel="stylesheet" />
</head>
<body>
<div class="sidebar">
<h2> MENU</h2>
<ul>
<li>@Html.ActionLink("Crear Cargo", "Create", "cargoes")</li>
<li>@Html.ActionLink("Crear Empleado", "Create", "empleadoes")</li>
<li>@Html.ActionLink("Crear Extension", "Create", "extensioncis")</li>
<li>@Html.ActionLink("Crear Estado", "Create", "estados")</li>
<li>@Html.ActionLink("Crear Moneda", "Create", "monedas")</li>
<li>@Html.ActionLink("Unidad Med.", "Create", "unidadmedidas")</li>
<li>@Html.ActionLink("Tipo Iva", "Create", "tipoIvas")</li>
<li>@Html.ActionLink("Crear Perfil", "Create", "perfiles")</li>
<li>@Html.ActionLink("Crear Usuario", "Create", "usuarios")</li>
<li>@Html.ActionLink("Crear Producto", "Create", "productos")</li>
<li><a href="">Consultas</a></li>
<li><a href="">Salir</a></li>
</ul>
</div>
<div class="contenido">
<img src="Lista.png" alt="" class="menu-bar">
@RenderBody()
</div>
<script src="~/Scripts/bootstrap.bundle.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/bootstrap-datepicker.min.js"></script>
<script src="~/Scripts/app.js"></script>
<script src="~/Scripts/bootstrap-datepicker.js"></script>
<script src="~/Scripts/bootstrap-datepicker.es.min.js"></script>
</body>
</html>
esta es mi hoja de estilos.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
body { margin: 0; overflow: hidden;}.sidebar {
width: 100%;
height: 100%;
background: #333;
color: #fff;
outline: 1px solid #2a2a2a;
position: absolute;}.sidebar h2 {
font-family: 'Concert One', cursive;
text-align: center;
padding: 10px;background: #2a2a2a;
}.sidebar ul {
list-style: none;
padding: 0; margin: 0; }.sidebar li {
outline: 1px solid #2a2a2a;
transition: all 0.3s;
}.sidebar li:hover {
background: #444;
border-left: 5px solid #eee;
}.sidebar a {
display: block;color: #fff;
text-decoration: none;
padding: 10px; }.contenido {
left:15%;
width: 100%;
height: 100%;
position: absolute;background: #000000;
padding: 3px;}.menu-bar {
cursor: pointer; width: 30px;}/*.abrir { transform: translateX(250px);}*/y aquí les muestro una vista, por ejemplo del formulario Crear Usuario
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
@model InventarioWeb.Models.Modelo.usuario
@{ViewBag.Title = "Create";
}<h2>Create</h2>
@using (Html.BeginForm())
{@Html.AntiForgeryToken()
<form class="form-horizontal">
<h4>usuario</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.nombreUsuario, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.nombreUsuario, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.nombreUsuario, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.contrasenha, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.contrasenha, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.contrasenha, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.perfilId, "perfilId", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("perfilId", null, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.perfilId, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.empleadoId, "empleadoId", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("empleadoId", null, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.empleadoId, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.estadoId, "estadoId", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("estadoId", null, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.estadoId, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10" style="text-align:right">
<input type="submit" value="Crear" class="btn btn-primary" />
</div>
</div>
</form>
}<div>
@Html.ActionLink("Back to List", "Index")
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
ahora les adjunto la imagen que ayudara a dar mas luces del problema que veo en la pagina
por favor no se preocupen, cualquier tipo de comentarios, correcciones sugerencias para ayudarme
muchas gracias de antemano.
Roberto
Valora esta pregunta
0