JavaScript, non ho idea di cosa sto facendo

Sto cercando di usare JavaScript per impostare una larghezza di elementi relativa alla larghezza della risoluzione dello schermo. Spiegherò un po 'perché ... Ho questa immagine: http://i.stack.imgur.com/HeXvu.png JavaScript, non ho idea di cosa sto facendo

Voglio che questo sia il mio header, non voglio che sia un'immagine completamente statica, voglio che l'intestazione scalare con il risoluzione dello schermo, così ho creato il mio CSS e HTML qualcosa di simile ...

HTML:

<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; 
}

Ora, quello che sto cercando di fare qui è, hai predefinito w spazi e altezze per le parti curate a sinistra e destra dell'intestazione e utilizzare l'intestazione iniziale div (con l'immagine centrale impostata come sfondo). L'unico problema che ho riscontrato qui è questo, lo sfondo del div principale (uno con la parte centrale dell'intestazione), mostra dietro l'immagine che è la curva destra dell'intestazione, in questo modo: http://i.stack.imgur.com/XEq85.png

Come fare Vado in giro a fare questo? Un modo in cui potevo pensare era usare JavaScript. Ecco cosa stavo pensando, prima lo script recupera la larghezza dello schermo degli utenti utilizzando "screen.width", quindi sottrae "63" dal valore (la larghezza della parte curva destra dell'intestazione) e imposta tale valore come intestazione principale la larghezza dell'elemento, che dovrebbe teoricamente risolvere il problema dello sfondo. L'unico problema è che ho poca o nessuna esperienza JavaScript e non so come fare nulla, l'unica ragione per cui so delle poche cose che faccio è principalmente perché ho copiato/incollato qualche altro codice JS in pochi delle mie pagine ... Sì Piuttosto male. Quindi, cosa faccio? o_o

fonte

2012-03-27 Nyanja

Prova a prendere il div giusto e posizionarlo sopra il div principale in modo che sia un fratello. –

Per favore dai alla tua domanda un titolo descrittivo. –

Si potrebbe provare a prendere i div sinistra e intestazione a destra, fuori del div headerMain e metterli allo stesso livello nel DOM. Quindi utilizzare questo CSS modificato:

#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;}

fonte

2012-03-27 02:27:22 KodeKreachor

Ha funzionato alla grande, grazie mille! : O – Nyanja

Sei il benvenuto – KodeKreachor

si potrebbe desiderare di fare qualcosa 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; 
}

fonte

2012-03-27 02:26:01 Joseph

Ecco un esempio di lavoro di ciò che si sta cercando di raggiungere - http://jsfiddle.net/Tq33c/.

fonte

2012-03-27 02:44:38 tjscience

JavaScript, non ho idea di cosa sto facendo

risposta

Problemi correlati