entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

3votos

maquetación de página web

buen día, tengo un problema con la maquetación de una página.... el encabezado es lo que me está partiendo la cabeza, lo que pasa es que necesito tener en el encabezado una imagen (Logo de width: 296px; height: 83px;) en la esquina superior izquierda, seguido de la imagen (a la altura del medio de la imagen) necesito tener un texto y seguido de el texto, en la esquina superior derecha necesito tener una imagen pequeña pequeña que es el icono para salir... debajo de estos 3 elementos "divs" podría decir, va el menú.... el problema es que cuando redimensiono el navegador solo se queda el logo y lo demás se empieza a poner debajo pero se sale del fondo que abarca el "header".

este es mi código CSS

footer{
text-align:center;
font-size:0.8em;
padding: 0px 0;

}
#contenedorSalir{
    padding: 0px 20px;
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}
#mainWrapper{
    border-radious: 5px;
    margin: 0 auto;
    margin-top: 10px;
    max-width: 1000px;
}
#fa{
    display:none;
}

#aBuscar{
    display:none;
}
#titleContent{
background:#999999;
font-size:16px;
font-style:oblique;
}

.fotosMenu{
    float: rigth;
    width: 25px;
    height: 25px;
    margin: 0 auto 10px;
    display: block;
}
.ul-salir{
  float: right;
  width: auto;
  margin: 6px 2%;
}

.botonimagen{
  background-image:url(imagen.jpg);
}
.back_header {
  background: #fafafa;
  width: auto;
  height: 140px;
  -webkit-box-shadow: 0 3px 3px 1px rgba(0,0,0,.2);
  box-shadow: 0 3px 3px 1px rgba(0,0,0,.2);
   margin-top: 0px;
}

#principal{
float:left;
   display: block;
}

#menu{
clear:both;}

.logo {
  background: url(../media/imagenes/logo.png) left top no-repeat;
  width: 296px;
  height: 83px;
  margin: 0 0 -10px;
  float: left;
  text-indent: -99999px;
}

código HTML

<div class="back_header">
 <div class="logo">
  <a href="index3.php">logo</a>
 </div>
 <header id="principal" >
  <h1>Texto enseguida de la imagen<h1>
 </header>
 <div id="contenedorSalir">
  <ul class="ul-salir">
  <br>
  <input type="image" src="../media/imagenes/salir.png" name="imagenSalir" onclick="location.href='../log_out.php'" class="fotosMenu" >
  <br>
  <?php echo"<b><i>Bienvenido: </i></b><u>".$_SESSION['nombre']." ".$_SESSION['apellido']."</u>"; ?>
  </ul>
 </div>
 <br>
 <div id="menu"class="bs-example ">
    <ul class="nav nav-tabs" id="myTab">
     <li class="dropdown">
         <a data-toggle="dropdown" class="dropdown-toggle" href="#BuscarUbicacion" id="BuscarUbicacionn" >Ubicación <b class="caret"></b></a></li>
     <li class="dropdown">
     <a data-toggle="dropdown" class="dropdown-toggle" href="#BuscarArea" id="BuscarAreaa">Área <b class="caret"></b></a></li>
     <li class="dropdown">
     <a data-toggle="dropdown" class="dropdown-toggle" href="#BuscarOficina" id="BuscarOficinaa">Oficina <b class="caret"></b></a></li>
     <li class="dropdown">
 <a data-toggle="dropdown" class="dropdown-toggle" data-hover="dropdown" href="#BuscarUsuario" id="BuscarUsuarioo">Usuario <b class="caret">                             </b></a></li>
         <li class="dropdown">
         <a data-toggle="dropdown" class="dropdown-toggle" id="CrearFormularioo" href="#CrearFormulario">Crear Formulario <b class="caret"></b></a></li>
        </ul>
       </div>
      </div>
<div id="mainWrapper" >
CONTENIDO.........
</div>

la verdad es que voy empezando con css y no se mucho de ello.

3 Respuestas

2votos

cobasESP Puntos19650

El problema es que tienes varios contenedores y en cada contenedor metes una cosa (la imagen, el texto y lo de salir), te recomiendo que para la barra de arriba, osease para el header, crees un solo div unico con la propiedad "display: inline", y dentro de este pongas el logo, el texto y lo de salir dentro de 3 spans, con la misma propiedad inline, asi conseguiras que este todo en la misma fila y al redimensionar no se colapse, ya que los divs se comportan como cajas fisicamente, al agotarse su espacio (redimensiojnar la ventana) si no caben se apilaran, con un solo div y todo organizado con o sin spans dentro de este no ocurrirá esto.

Aun asi te recomiendo que eches un vistazo a paginas web con diseño responsive y hagas tus futuras páginas asi ya que te quitas muchos problemas.

0voto

fack comentado

Waw! Primero que nada, muchas gracias por tomarte el tiempo para contestar y por tu consejo, la vdd es que voy empezando con esto, pero si me esta agradando, me mantengo animado aun aunque sea frustrante algunas veces... Checare eso de los maquetados responsive... Muchas gracias

1voto

M1ckey Puntos450

Yo lo haría con flex layout, pondría un flex-inline que actúe como la imagen de fondo y con un justify-content: right para que se alineen los elementos a la derecha, luego otro flex dentro com un tamaño de 100% / 2 - 20px que sería del ícono 'salir', con lo que este elemento comenzaría a la mitad y el ícono quedaría en la esquina superior derecha.

Te dejo un ejemplo: Demo JsFiddle

0voto

leowebseo Puntos140

Hola. Deberías de dar por cerrado el tema y respondiendo a la pregunta es mejor trabajar la maquetacion con CSS GRID o con un framework.

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta