Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
[?] web se ve mal al cambiar el tamaño de la ventana
#1
Pregunta 
estoy probando crear scripts de webs desde cero para probar lo aprendido y porque no? aprender un poco mas Gran sonrisa (tal vez mas adelante pueda aportar alguno)

me pasa algo curioso al ver la web en cualquien navegador maximizado se visualiza con todo en su lugar:
[Imagen: 2yoel1i.jpg]

pero si achico la ventana quedan los botones en cualquier parte:
[Imagen: rk53l3.jpg]

index.php
Código:
<!DOCTYPE html>
<html lang="es">
    <head>
        <link type="image/x-icon" href="/img/tux.gif" rel="icon" />
        <a href="/sesion/registro.php"  id="btnregistro" >Registrarse</a>
        <a href="/sesion/niciar.php"  id="btnsesion">Iniciar sesión</a>            
        <img src="/img/barranegra.png" width="100%" height    ="">
        <img src="/img/logo.jpg" width="100%">
        <img src="/img/barranegra.png" width="100%" height    ="">
        <link rel="stylesheet" type="text/css" href="index.css">
        <link href='http://fonts.googleapis.com/css?family=Sevillana' rel='stylesheet' type='text/css'>
        <meta charset="utf-8">
        <title>Linux</title>
        <hgroup>
            <h1>titulo</h1>
        </hgroup>
        <nav>
            <ul>
                <li id="home">Home</li>
                <li id="distros">Distros</li>
                <li id="soporte">Soporte</li>
                <li id="juegos">Juegos</li>            
            </ul>
        </nav>
    </head>
    <body>
          
    </body>
</html>

index.css
Código:
h1
{
    margin:0 auto;
    color:#e44e2d;
    font-family: 'Sevillana', cursive;
}
body
{
    text-align:center;
    margin:0 auto;
}
#btnsesion
{
    color:#fff;
    cursor:pointer;
    border:none;
    padding: 3px;
    margin-right:5px;
    background-color: #339900;
    text-decoration:none;
    position:absolute;
    top:2px;
    left:90%;
    
}
#btnregistro
{
    color:#fff;
    cursor:pointer;
    margin-right:5px;
    border:none;
    padding:3px;
    background-color: #CC3300;
    text-decoration:none;
    position:absolute;
    top:2px;
    left:81%;
}
nav ul li
{
    display:inline-block;
}
#home
{
    color:#e44e2d;
    position:absolute;
    top:272px;
    left:5px;
}
#distros
{
    color:#e44e2d;
    position:absolute;
    top:272px;
    left:62px;
}
#soporte
{
    color:#e44e2d;
    position:absolute;
    top:272px;
    left:130px
}
#juegos
{
    color:#e44e2d;
    position:absolute;
    top:272px;
    left:205px
}

cual es mi error de novato?
#2
(22-11-2012, 01:49 AM)xxRIPPERxx escribió: [...] cual es mi error de novato?

Usas porcentajes, y ésto hace que dependiendo del tamaño del contenedor, se a comode en determinado espacio, el enlace se muestra abajo porque la regla de CSS así lo establece.

Recomendaciónes personales:
  • Jamás uses porcentajes a menos que sea estrictamente necesario.
  • El uso de ID's es sólo para elementos que se muestran/usan una sola vez, trata de usar clases (.ejemplo{width:100px;}), deja los ID's para JavaScript.
  • Establece un ancho máximo a tu página, en monitores grandes (+1300 px de ancho), la web mostrara los párrafos casi en un solo renglón.
  • En medida de lo posible, trata de usar fuentes tipográficas standard (Arial, sans-serif, Helvetica, Tahoma, etc), cargar fuentes externas disminuye el tiempo de carga de tu sitio.
  • Trata de usar lo menos que puedas imágenes grandes (e imágenes en general), y si es necesario usarlas de gran tamaño, dividelas en partes y muestralas en "trozos".
  • Dale una repasada a tus tutoriales de HTML y CSS ya que tienes "código basura" (hgroup es inecesario), además de que el cuerpo de tu sitio esta en el head, ahí solo van metatags, scripts y hojas de estilo.

Supongo quieres que los enlaces "Regístrate", algo un poco más ordenado sería así:

Código:
<!DOCTYPE html>
<html lang="es">
<head>
<link type="image/x-icon" href="/img/tux.gif" rel="icon" />
<style type="text/css">
body {
    margin:0 auto;
}
a,a:visited{
    text-decoration:none !important;
}
a:hover{
    text-decoration:underline !important;
}
#sidebar-wrapper{
    background-color:#333;
    padding:5px 0;
}
.entrada{
    max-width:990px;
    margin:0 auto;
}
.entrada h1{
    margin:0 auto;
    color:#e44e2d;
    font-family: 'Sevillana', cursive;
    text-align:center;
}
.e-sitio{
    padding:3px;
    color:#fff;
}
.f-rojo {
    background-color: #CC3300;
}
.f-verde{
    background-color: #339900;
}
ul#sidebar{
    text-align:right;
}
nav ul,ul#sidebar{
    padding:0;
    margin:0;
}
nav ul li,ul#sidebar li{
    display:inline-block;
}
nav ul li{
    padding:0 10px;
}
nav ul li a{
    color:#e44e2d;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Sevillana' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<title>Linux</title>
</head>
<body>

<div id="sidebar-wrapper">
<ul id="sidebar">
<li><a href="/sesion/registro.php" class="f-rojo e-sitio">Registrarse</a></li>
<li><a href="/sesion/niciar.php" class="f-verde e-sitio">Iniciar sesión</a></li>
</ul>
<div class="clear"></div>
</div>

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Distros</a></li>
<li><a href="#">Soporte</a></li>
<li><a href="#">Juegos</a></li>
</ul>
</nav>

<div class="entrada">
<h1>Título</h1>
<img src="/img/barranegra.png" width="100%" />
<img src="/img/logo.jpg" width="100%" />
<img src="/img/barranegra.png" width="100%" />
</div>

</body>
</html>
WWW
#3
Creo que sería recomendable usar "float" creo que con eso se acomodaría soy bien malo en css
#4
(24-11-2012, 01:56 AM)variux escribió: Creo que sería recomendable usar "float" creo que con eso se acomodaría soy bien malo en css


As intentado usar dreamweaver? es mas facil para los novatos, y no uses porcentajes usa valores en pieles por que sino todo se te estira, Lengua!! todos tuvimos que haber sido novatos una vez.. la cosa es que no renuncies!! n_n
#5
Cita:AbaddonOrmuz
muchas gracias por tus comentarios mas que nada por tus consejos me han servido de mucho

lo que no entendi muy bien es como posicionar bien los objetos y me quedó un detalle que me recomiendas?:
elemento {margin-top: valor;}
elemento {margin-right: valor;}
elemento {margin-bottom: valor;}
elemento {margin-left: valor;}
o
top:valor;
left:valor;
[Imagen: 15fm7g9.jpg]

Codigo ligeamente modificado
index.php
Código:
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <title>Movidas</title>
        <link type="image/x-icon" href="/img/head.gif" rel="icon" />
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    
    <body>
        <div class="logo">
            <img src="/img/toke.jpg" width="100%">
        </div>
        
        <div id="sidebar-wrapper">
            <ul id="sidebar">
                <li><a href="/sesion/registro.php" class="f-rojo e-sitio">Registrarse</a></li>
                <li><a href="/sesion/niciar.php" class="f-verde e-sitio">Iniciar sesión</a></li>
            </ul>
            <nav>
                <ul>
                    <li><a href="#">Cartelera</a></li>
                    <li><a href="#">Tokes</a></li>
                    <li><a href="#">Eventos</a></li>
                    <li><a href="#">Bares</a></li>
                    <li><a href="#">Wiskerias</a></li>
                    <li><a href="#">Cines</a></li>
                </ul>
            </nav>                
        </div>
    </body>
</html>

index.css
Código:
body {
    margin:0 auto;
}
a,a:visited{
    text-decoration:none !important;
}
a:hover{
    text-decoration:underline !important;
}
#sidebar-wrapper{
    background-color:#333;
    padding:5px 0;
}
.logo{
    max-width:990px;
    margin:0 auto;
}
.e-sitio{
    padding:3px;
    color:#fff;
}
.f-rojo {
    background-color: #CC3300;
}
.f-verde{
    background-color: #339900;
}
ul#sidebar{
    text-align:right;
}
nav ul,ul#sidebar{
    padding:0;
    margin:0;
}
nav ul li,ul#sidebar li{
    display:inline-block;
}
nav ul li{
    padding:0 10px;
}
nav ul li a{
    color:#e44e2d;
}
#6
Hola!! lo que pasa es que estas usando porcentajes, usa valores en px, por que en porcentajes aparte de hacerse auto ampliable se vera diferente según el tamaño de la pantalla o el porcentaje de zoom!!


mira tu error: <img src="/img/toke.jpg" width="100%"> usa pixeles! C:

Y centralo ejemplo:


<div class="logo" align="center">
<img src="/img/toke.jpg" width="990">
</div>


:3!! es sencillo!! n_n
#7
(25-11-2012, 06:09 AM)NunzioSR escribió: Hola!! lo que pasa es que estas usando porcentajes, usa valores en px, por que en porcentajes aparte de hacerse auto ampliable se vera diferente según el tamaño de la pantalla o el porcentaje de zoom!!

(25-11-2012, 06:09 AM)NunzioSR escribió: Hola!! lo que pasa es que estas usando porcentajes, usa valores en px, por que en porcentajes aparte de hacerse auto ampliable se vera diferente según el tamaño de la pantalla o el porcentaje de zoom!!


mira tu error: <img src="/img/toke.jpg" width="100%"> usa pixeles! C:


ok tal vez los entreveré un poco Lengua el logo está bien por lo menos es lo maximo que puedo esperar con mis conocimientos actuales XD
lo que quiero acomodar es lo del siguiente div;
DIV
Código:
<div id="sidebar-wrapper">
            <ul id="sidebar">
                <li><a href="/sesion/registro.php" class="f-rojo e-sitio">Registrarse</a></li>
                <li><a href="/sesion/niciar.php" class="f-verde e-sitio">Iniciar sesión</a></li>
            </ul>
            <nav>
                <ul>
                    <li><a href="#">Cartelera</a></li>
                    <li><a href="#">Tokes</a></li>
                    <li><a href="#">Eventos</a></li>
                    <li><a href="#">Bares</a></li>
                    <li><a href="#">Wiskerias</a></li>
                    <li><a href="#">Cines</a></li>
                </ul>
            </nav>                
        </div>

Css del DIV
Código:
}
#sidebar-wrapper{
    background-color:#333;
    padding:5px 0;
}
}
.e-sitio{
    padding:3px;
    color:#fff;
}
.f-rojo {
    background-color: #CC3300;
}
.f-verde{
    background-color: #339900;
}
ul#sidebar{
    text-align:right;
}
nav ul,ul#sidebar{
    padding:0;
    margin:0;
}
nav ul li,ul#sidebar li{
    display:inline-block;
}
nav ul li{
    padding:0 10px;
}
nav ul li a{
    color:#e44e2d;
}
#8
Háblame por mp C:! y te ayudo mas rápido! Lengua
#9
(25-11-2012, 06:16 AM)xxRIPPERxx escribió: ok tal vez los entreveré un poco Lengua el logo está bien por lo menos es lo maximo que puedo esperar con mis conocimientos actuales XD
lo que quiero acomodar es lo del siguiente div;
DIV
Código:
<div id="sidebar-wrapper">
            <ul id="sidebar">
                <li><a href="/sesion/registro.php" class="f-rojo e-sitio">Registrarse</a></li>
                <li><a href="/sesion/niciar.php" class="f-verde e-sitio">Iniciar sesión</a></li>
            </ul>
            <nav>
                <ul>
                    <li><a href="#">Cartelera</a></li>
                    <li><a href="#">Tokes</a></li>
                    <li><a href="#">Eventos</a></li>
                    <li><a href="#">Bares</a></li>
                    <li><a href="#">Wiskerias</a></li>
                    <li><a href="#">Cines</a></li>
                </ul>
            </nav>                
        </div>

Css del DIV
Código:
}
#sidebar-wrapper{
    background-color:#333;
    padding:5px 0;
}
}
.e-sitio{
    padding:3px;
    color:#fff;
}
.f-rojo {
    background-color: #CC3300;
}
.f-verde{
    background-color: #339900;
}
ul#sidebar{
    text-align:right;
}
nav ul,ul#sidebar{
    padding:0;
    margin:0;
}
nav ul li,ul#sidebar li{
    display:inline-block;
}
nav ul li{
    padding:0 10px;
}
nav ul li a{
    color:#e44e2d;
}

Acomodarlo de qué forma? :???:


(25-11-2012, 06:21 AM)NunzioSR escribió: Háblame por mp C:! y te ayudo mas rápido! Lengua

Emmm... para eso está el foro, para compartir conocimiento públicamente...
WWW
#10
[Imagen: 20ze1ee.jpg]
acomodar los botones y links en la barra


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  [Duda] Con respecto de cambiar color a una plantilla con seleccionador Hostingbir 0 320 21-09-2016, 03:04 PM
Último mensaje: Hostingbir
Pregunta Cambiar a versión movil celticslment 12 939 02-12-2014, 10:43 PM
Último mensaje: YamaT
  Cambiar idioma según país del usuario Tzar 5 676 31-10-2014, 11:41 PM
Último mensaje: Minikole
  Cambiar el Zoom de mi sitio web Cine-lan 4 536 17-07-2014, 06:04 PM
Último mensaje: Vicen
  Cambiar Header de Wordpress DelPieri 9 957 05-02-2014, 03:42 AM
Último mensaje: DarkMaster
  [Tutorial] Aumentar el Tamaño Máximo al Cargar Archivos con PHP y Apache papanoel 0 780 22-01-2014, 04:38 AM
Último mensaje: papanoel
Lengua Como cambiar una plantilla Prediseñada de Joomla roblop 4 977 18-12-2012, 01:58 AM
Último mensaje: BrayanFG
  Cambiar archivo de BD SQLite a MySQL fullfta 4 1,058 02-08-2012, 12:55 AM
Último mensaje: Juliens
  Cambiar fondo al hacer click CSS soporteptc 5 4,983 23-04-2012, 06:58 PM
Último mensaje: DarkMaster
  Cambiar color de texto con jQuery. Juliens 1 6,680 16-04-2012, 07:45 PM
Último mensaje: luis70043



Usuarios navegando en este tema: 1 invitado(s)