Question

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.

Answer 1

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.

Answer 2

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

Answer 3

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.