¿Cómo hacer que mi sitio web sea móvil amigable?

i7strelok · 31 Mar 2017

Hola,

este es mi primer tema en este foro.
Hice un sistema básico, pero resulta que no se adapta a los móviles, por lo que tengo 2 opciones.

1- Hacer resposive la web.
2- Hacer aplicaciones

La opción 2 también requiere que se tengan en cuenta los diferentes móviles, pero ninguna es viable para mi porque soy pésimo con el diseno.
Me podrían dar una mano? al menos con la barra de navegación.

mrtorpedin · 31 Mar 2017

Hola Puedes pasar la web o el codigo con el que tienes problemas?

i7strelok · 31 Mar 2017

Insertar CODE, HTML o PHP:

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" href="style.css"/>
</head>
	    <header>
                <img src="img/logo.png" id="img_logo" alt="Empresa" />                
                <!-- NAV-->
                <nav class="nav_panel">
                    <ul>
                        <li><a href="item1.php" class="btn_menu">Item 1</a></li>
                        <li><a href="javascript:void(0)" class="btn_menu">Item 2</a>
                        <ul>
                            <li><a href="subitem21.php" class="btn_menu">SubItem 2.1</a></li>
                            <li><a href="subitem22.php" class="btn_menu">SubItem 2.2</a></li>
                        </ul>
                        </li>
                        <li><a href="javascript:void(0)" class="btn_menu">Item 3</a>
                        <ul>
                            <li><a href="subitem31.php" class="btn_menu">SubItem 3.1</a></li>
                            <li><a href="subitem32.php" class="btn_menu">SubItem 3.2</a></li>
                        </ul>
                        </li>
                        <li><a href="javascript:void(0)" class="btn_menu">Item 4</a>
                        <ul>
                            <li><a href="subitem41.php" class="btn_menu">SubItem 4.1</a></li>
                            <li><a href="subitem42.php" class="btn_menu">SubItem 4.1</a></li>
                        </ul>
                        </li>
                        <li><a href="javascript:void(0)" class="btn_menu">Mi cuenta</a>
                        <ul>
                            <li><a href="edit-profile.php" class="btn_menu">Modificar mis datos</a></li>
                            <li><a href="logout.php" class="btn_menu">Cerrar sesion</a></li>
                        </ul>
                        </li>

                    </ul>
                </nav>
            </header>

Insertar CODE, HTML o PHP:

{
    margin: 0;
    padding: 0;
}

header
{
    background: #007;
}

ul
{
    padding: 0;
    display: inline;
    list-style: none;
    text-align: right;
}

li
{
    display: inline;
}

header > img, header > nav 
{
    display: inline-block; 
    vertical-align: top;
}

#img_logo
{
    display: inline;
    position: relative;
    width: 200px;
    padding: 10px;
}


.nav_panel
{
    display: inline;
    position: relative;
    float: right;
    font-size: 0.9em;
    margin: 10px 20px 0 0;
    padding: 10px 0;
    height: 40px;
    z-index: 100;
}

.nav_panel a   
{
    color: #fff;
    text-decoration: none;
}

.nav_panel li
{
    list-style: none;
    position: relative;
}


.btn_menu, .btn_submenu
{
    display: inline-block;
    width: 80px;
    text-align: center;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1em;
    color: #FFF;
}

.btn_menu:hover, .btn_submenu:hover
{
    background: #ff0;
    color: #007;
}
/*
.btn_menu:active, .btn_submenu:active
{
    background: linear-gradient(#527b07, #679b08);
}
*/
.nav_panel li li a
{
    width: 150px;
    display: inline-block;
}
.nav_panel li li li a
{
    width: 150px;
    display: inline-block;
}

.btn_corto
{
    width: 80px;
}

.nav_panel li ul
{
    width: 190px;
    margin: auto;
    float: right;
    text-align: center;
    display: none;
    background: #fff;
    border: 1px #ff0 solid;
    position: absolute;
    left: -70px;
}

.nav_panel li ul a
{
    color: #007;
}

.btn_largo
{
    width: auto;
}

nav li:hover ul
{
    display: block;
}

.marco
{
    background: #007;
    color: #fff;
    padding: 20px 25px;
    margin: 30px;
    width: 500px;
    text-align: left;
}

h2
{
    text-align: center;
}

.select
{
    padding: 5px 10px;
    margin: 5px;
    color: #007;
    border: 1px #007 solid;
    width: 150px;
    border-radius: 3px;
}

jearj · 5 Abr 2017

Prueba de esta forma:

HTML:

#img_logo
{
    display: inline;
    position: relative;
    height:40px;
    padding-left: 10px;
}

.nav_panel
{
    display: inline;
    position: relative;
    float: right;
    font-size: 0.9em;
    height: 40px;
    z-index: 100;
    padding-right: 10px;
}

.btn_menu, .btn_submenu
{
    display: inline-block;
    width: 80px;
    text-align: center;
    padding: 12px 20px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1em;
    color: #FFF;
}

¿Cómo hacer que mi sitio web sea móvil amigable?

i7strelok

mrtorpedin

i7strelok

jearj

Temas similares