Problemas con el posicionamiento.

Pikus · #1 (**permalink**) 06/07/2010, 11:23

Hola a todos.

Llevo bastante tiempo echándole vistazos a CSS, y finalmente me decidí a hacer mi primera maquetación de una web. La maquetación va a ser bastante simple y cutrecilla pero lo importante es ir aprendiendo. El problema que tengo es el siguiente:

Tengo una cabecera, un menú, un lado izquierdo con el contenido y un lado derecho con un menú lateral que no va a cambiar nunca (realmente sólo va a cambiar el contenido y dos botones de los menús dependiendo de si se está conectado como administrador o no).

Tras un buen rato de sufrimiento conseguí colocar unas cuantas cosas pero me encuentro con un problema enorme en el menú lateral, las cosas que le añado salen justo a un nivel inferior que lo que mida el contenido... ¿Podríais ayudarme?

Una imagen para que lo veáis:

http://img249.imageshack.us/img249/2001/maquetado1.jpg

Los códigos HTML y CSS son estos. Cualquier sugerencia es bienvenida, ya que creo que los sistemas que he utilizado para posicionar son excesivamente malos, creo.

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
  <title>Tu Blog sobre Arch</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <link href="css/estilo.css" rel="stylesheet"  type="text/css" />
</head>
<body>
    <div class="ventana">
        <div class="cabecera"><a href="index.php"><img src="imgs/logo.gif" alt="Logo"/></a></div>
        <div class="menu">
            <div class="logout">
                <a href="index.php" class="botonoff"><img src="imgs/inicio.png" alt="inicio"/></a>
                <a href="index.php?p=sugerencias" class="botonoff"><img src="imgs/sugerencias.png" alt="sugerencias"/></a>
                <a href="index.php?p=redactores" class="botonoff"><img src="imgs/redactores.png" alt="redactores" /></a>
                <a href="index.php?p=log" class="botonoff"><img src="imgs/loguear.png" alt="login"/></a>
            </div>
            <div class="login">
                <a href="index.php?p=redactar" class="botonons"><img src="imgs/escribir.png" alt="Escribir noticia" /></a>
                <a href="index.php?p=administrar" class="botonona"><img src="imgs/administrar.png" alt="Administrar blog" /></a>
            </div>
        </div>  
        <div class="contenido">
<p class="warning">Error, la p&aacute;gina que intenta visitar no est&aacute; disponible. <br /><img src="imgs/construccion.gif" alt="En construccion" /></p>
        </div>
        <div class="menulateral">
            <p class="buscador">Buscar: </p>
            <form method="get" action="index.php">
                <input type="hidden" name="p" value="buscar" />
                <input type="text" name="buscar" id="buscar" class="inputbuscar" />
            </form>
        </div>
    </div>
</body>
</html>

Y este, es el CSS:

Código CSS:

Ver original*{
    margin: 0;
    padding: 0;
}
a{
    border: 0px;
}
body{
    background-image: url('../imgs/fondo.png');
    background-repeat: repeat-x;
    background-color: #1484bd;
    font-family: 'Trebuchet MS', 'Verdana', 'Lucida Sans Unicode';
}
img{
    border: 0;
}
.ventana{
    width: 990px;
    margin: 0 auto 8px auto;
    background-color: #FFFFFF;
}
.cabecera{
    margin-top: 10px;
    margin-left: 1px;
    margin-right: 1px;
    padding-top: 1px;
    padding-bottom: 5px;
}
.menu{
    width: 100&#37;;
}
.login{
    position: relative;
}
.botonoff {
    width: 214px;
    margin: 5px 14px;
}
.botonons{
    width: 214px;
    position: relative;
    left: 135px;
    top: 2px;
    margin: 0 270px 0 0;
}
.botonona{
    width: 214px;
    position: relative;
    left: 135px;
    top: 2px;
}
.warning{
    color: red;
    font-size: 16px;
    font-weight: 900;
    text-align: center;
}
.contenido{
    width: 720px;
    position: relative;
    top: 0;
    left: 17px;
    margin: 7px 0;
    float: left;
}
.menulateral{
    width: 230px;
    background-color: #f5f5f5;
    position: relative;
    left: 750px;
    top: 0;
    margin: 7px 0;
}

Gracias, y siento el código tan enorme (en realidad es pequeño pero es bastante grande para la "tontería" que quiero preguntar, lo que no sé es si el problema viene desde modificaciones css previas)

Un saludo.

joseomaker · #2 (**permalink**) 06/07/2010, 13:19

haber si lo entiendo,te molesta que el menu en vez de quedar alineado quede en zip-zap?

Pikus · #3 (**permalink**) 06/07/2010, 13:28

Cita:

Iniciado por joseomaker

haber si lo entiendo,te molesta que el menu en vez de quedar alineado quede en zip-zap?

No, eso está hecho así adrede. El problema me lo da en el menú lateral, si te fijas en la foto, el "buscar" y el input salen abajo del todo, cuando tendrían que salir a la misma altura que el texto en rojo, sólo que en la derecha.

Edit: Esto sería, digamos, el aspecto final http://img684.imageshack.us/img684/1476/blogv1.jpg

Estoy adaptado un proyecto que hice hace varios meses, que estaba completamente con tablas (y sus limitaciones xD) para transformarlo en CSS. Así, tendré el código más limpio y podré aprender a usar CSS. La idea principal es dejarlo como estaba antes y luego ya podré ponerme a toquetear con cómo dejarlo "más chulo".

joseomaker · #4 (**permalink**) 06/07/2010, 14:11

haber,tu lo que buscas es una estructura asi:

bueno es muy simple,aca te dejo el codigo:

Código HTML:

Ver original<html>
<head>
<title>ayuda</title>
<link rel="stylesheet" href="css" type="text/css">
</head>
<body>
<div id="header"><br>
</div>
<div id="" menu=""><br>
</div>
<div id="contenido1"><br>
</div>
<div id="contenido2"><br>
</div>
<div><br>
</div>
<div id="footer"><br>
</div>
</body>
</html>

ahi tienes el HTML y el css:

Código CSS:

Ver original* {
  margin-bottom: 0px;
  padding-right: 0px;
  padding-left: 0px;
}
#contenido1 {
  float: left;
  width: 70%;
}
#contenido2 {
  width: 30%;
  float: right;
}
#header {
  background-color: red;
}
#menu {
  background-color: #3366ff;
}
*|#contenido1 {
  background-color: #33cc00;
}
*|#contenido2 {
  background-color: black;
}
*|#footer {
  background-color: #cc66cc;
}

una sugerencias,usa porciento (%) y no px ^^.

Saludos

PD: ya te di plantilla para que la estudies,solo te falta añadir el texto,etc.

Pikus · #5 (**permalink**) 06/07/2010, 14:40

No quiero usar porcentajes porque no quiero que esté relleno como lo has hecho tú, aunque supongo que aún así podría tirar de márgenes para hacerlo... pero es que mira lo que hace si hago eso:

http://img192.imageshack.us/img192/3002/blogv2l.jpg

Si le pongo fondo blanco "quedaría igual", pero no quiero ponerlo así porque "contenido" no ocupa todo el ancho, entonces no quedaría igual del todo.

joseomaker · #6 (**permalink**) 06/07/2010, 15:45

no ellos ocupan sierto % de donde esten,solo metelos en un div contenedor con siertamedia y listo.

Saludos