JavaScript, no tengo idea de lo que estoy haciendo

Estoy tratando de usar JavaScript para establecer un ancho de elementos relativo a su ancho de resolución de pantalla. Voy a explicar un poco por qué ... Tengo esta imagen: http://i.stack.imgur.com/HeXvu.png JavaScript, no tengo idea de lo que estoy haciendo

Quiero que este sea mi encabezado, por lo que no quiero que sea una imagen totalmente estática, quiero que el encabezado se escale con el resolución de la pantalla, por lo que puedo configurar mi CSS y HTML algo como esto ...

HMTL:

<html> 
    <body> 
     <div class="globalContainer"> 
      <div id="headerMain"> 
       <div class="headerLeft"> 
       </div> 
       <div class="headerRight"> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

CSS:

#headerMain { 
    height: 79px; 
    background-image: url(../img/global/middleHeader.png); 
    background-repeat: repeat-x; 
} 
.headerLeft { 
    width: 63px; 
    height: 79px; 
    background-image: url(../img/global/leftHeader.png); 
    background-repeat: no-repeat; 
    float: left; 
} 
.headerRight { 
    width: 63px; 
    height: 79px; 
    background-image: url(../img/global/rightHeader.png); 
    background-repeat: no-repeat; 
    float: right; 
}

Ahora, lo que yo estoy tratando de hacer aquí es, has predefinido w idths y alturas para las partes curadas izquierda y derecha del encabezado, y usa div inicial del encabezado (con la imagen del medio configurada como fondo). El único problema que he encontrado aquí es este, el fondo del div principal (uno con la parte media del encabezado), muestra detrás de la imagen que es la curva derecha del encabezado, así: http://i.stack.imgur.com/XEq85.png

¿Cómo Me muero por hacer esto? Una forma en que podía pensar era usar JavaScript. Esto es lo que estaba pensando, primero el script recupera el ancho de la pantalla de los usuarios usando "screen.width", luego resta "63" del valor (el ancho de la parte curva derecha del encabezado) y establece ese valor como el encabezado principal ancho del elemento, que teóricamente debería corregir el problema de fondo. El único problema es que tengo poca o ninguna experiencia con JavaScript y no sé cómo hacer nada, la única razón por la que sé de las pocas cosas que hago es sobre todo porque he copiado/pegado algunos otros códigos JS en unos pocos. de mis páginas ... Sí. Bastante mal. ¿Entonces qué hago? o_o

Fuente

2012-03-27 Nyanja

Intenta sacar el div correcto y colocarlo encima del div principal para que sea un hermano. –

Por favor, déle un título descriptivo a su pregunta. –

usted podría intentar tomar los divs izquierda y derecha de cabecera de la div headerMain y colocarlos en el mismo nivel en el DOM. A continuación, utilice este CSS modificado:

#headerMain { height: 79px; background-image: url(../img/global/middleHeader.png); background-repeat: repeat-x; position:absolute; top:0px; left:63px; right:63px;} 

.headerLeft { width: 63px; height: 79px; background-image: url(../img/global/leftHeader.png); background-repeat: no-repeat; position:absolute; top:0px; left:0px;} 

.headerRight { width: 63px; height: 79px; background-image: url(../img/global/rightHeader.png); background-repeat: no-repeat; position:absolute; top:0px; right:0px;}

Fuente

2012-03-27 02:27:22 KodeKreachor

Funcionó muy bien, muchas gracias! : O – Nyanja

De nada. – KodeKreachor

es posible que quieras hacer algo like this:

<div id="header"> 
    <div class="leftCurve"></div> 
    <ul> 
     <li> 
      <a href="#">link</a> 
     </li> 
     <li> 
      <a href="#">link</a> 
     </li> 
     <li> 
      <a href="#">link</a> 
     </li> 
    </ul> 
    <div class="rightCurve"></div> 
</div> 

#header{ 
    overflow:hidden; 
    zoom:1; 
} 

#header > *{ 
    float:left; 
} 

#header .leftCurve{ 
    /*curve image*/ 
    width:100px; /*adjust dimensions accordingly*/ 
    height:100px; /*adjust dimensions accordingly*/ 
    background:blue; 
} 

#header .rightCurve{ 
    /*curve image*/ 
    width:100px; /*adjust dimensions accordingly*/ 
    height:100px; /*adjust dimensions accordingly*/ 
    background:blue; 
} 

#header ul{ 
    /*repeating bg image*/ 
    overflow:hidden; 
    zoom:1; 
    width: 20%; 
} 
#header ul li{ 
    float:left; 
    width:33%; /* 100/number of items, in percent */ 
} 

#header ul li a{ 
    display:block; 
    background:red; 
    border: 1px solid #0F0; 
}

Fuente

2012-03-27 02:26:01 Joseph

Aquí es un ejemplo práctico de lo que está tratando de lograr - http://jsfiddle.net/Tq33c/.

Fuente

2012-03-27 02:44:38 tjscience

JavaScript, no tengo idea de lo que estoy haciendo

Respuesta

Cuestiones relacionadas