diversa posizione di div contenente testo e immagini contenenti div

Question

Ho avuto un problema con il delineare alcuni degli elementi div.

ho ottenuto la seguente struttura.

<div id="skillcontent">
  <div id="skillname" class="inline">
   <div class="skilllist">
    <div><h3>[SKILL]</h3></div>
    <div><h3>[SKILL]</h3></div>
   </div>
  </div>

  <div id="skillstars" class="inline">
   <div class="skilllist">
    <div>
     <img src="img/star_active.png" alt="" />
     <img src="img/star_active.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
    </div>
    <div>
     <img src="img/star_active.png" alt="" />
     <img src="img/star_active.png" alt="" />
     <img src="img/star_active.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
    </div>
   </div>
  </div>

  <div id="skillinfo" class="inline">
   <div class="skilllist">
    <div><h4>[YEARS],[LEVEL]</h4></div>
    <div><h4>[YEARS],[LEVEL]</h4></div>
   </div>
  </div>
 </div>

Css:

.skilllist div {
    padding: 0px;
    margin: 0px;
    display: block;
    height: 25px; /*same height as star images*/
}

div.inline {
    display: inline-block;
}

h3 {
    font-size: 18px;
    color: #5b5b5b;
    margin: 0px;
}

h4 {
    font-size: 18px;
    color: #808080;
    margin: 0px;
}

img {
    vertical-align: bottom;
}

I div che contengono elementi di testo (H3 e H4) sono un po 'più piccolo, come i div che contengono immagini. Non v'è alcun margine o padding su qualsiasi elemento. L'altezza di tutti i div è lo stesso, ma c'è ancora qualche spazio bianco sulla parte superiore del div con lo skilllist classe che contengono testo. Non v'è alcun spazio bianco sopra il div che contiene le immagini. Perché è questo e come posso risolvere il problema?

Esempio: Clicca

Answer 1

prova ad aggiungere al vostro vertical-align:top; css su tutti gli articoli disallineati. funzionato quando ho fatto questo utilizzando Firebug sulla vostra pagina di prova.

Answer 2

Diverse cose:

• Sembra che tu stia abusando elementi HTML:. h3, h4, ecc sono per In Primo piano
• D'altra parte, si utilizza troppe div. Considerare i molti altri elementi HTML che esiste. Ad esempio, gli elementi che chiamate "skillist" urlare di essere liste (ol, ul).
• Se siete preoccupati per le piccole lacune di pixel del genere, HTML / CSS può essere lo strumento sbagliato per voi. L'intero concetto di HTML / CSS è quello di essere flessibile e consentire diversi rendering su sistemi diversi e non per essere uno strumento di design perfetto del pixel.
• Il problema potrebbe essere dovuto al fatto da immagini predefinite sono elementi in linea che si trovano sulla linea di base del carattere e lasciano spazio per discendenti. Provare a impostare vertical-align: bottom sulle immagini.

Answer 3

Senza vedere il CSS, è difficile da dire.

Bisogna ricordare che ogni elemento ha uno stile predefinito fornito dal / browser standard. Al fine di briscola questo, è necessario definire in modo esplicito i propri valori.

Per esempio, la maggior parte dei browser definire il colore di default una pagina di sfondo per essere: #FFFFFF

Per modificarlo, è necessario fornire il proprio valore.

Spero che questo aiuti.

Answer 4

Potrebbe essere giù per i margini che i browser aggiungere automaticamente a H tag (così come p e alcuni altri tag).

Può essere utile utilizzare un foglio di stile CSS reset per rimuovere un sacco di margini di default e imbottitura che vari browser rendono diverso. C'è uno alla http://developer.yahoo.com/yui/3/cssreset/

Sono d'accordo con tobiasmay - che sarebbe utile se avessimo una pagina di prova o qualcosa del genere

.

Answer 5

è possibile inviare un po 'di CSS o impostare una jsfiddle.net per favore? altrimenti è difficile aiutare a risolvere i vostri divities ..

// EDIT

qui si va, ho fissato il markup completamente:

<div id="skills">
<div class="skillA">
  <h3 class="skill">Skill A</h3>
        <ul class="skillRow">
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_inactive.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_inactive.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_inactive.png" alt="" /></li>
    </ul>
  <p class="foo">Years, Level</p>
</div>
<div class="skillB">
  <h3 class="skill">Skill B</h3>
        <ul class="skillRow">
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_inactive.png" alt="" /></li>
    </ul>
  <p class="foo">Years, Level</p>
</div>
</div>

e il CSS con un lavoro ul li

#skills{
background-color:lightgreen;
overflow:auto;
}
.skillA, .skillB{
overflow:auto;
margin-bottom:10px;
}
ul.skillRow{
display: inline;
}
ul.skillRow li{
list-style-type: none;
float:left;
}
p.foo{
float:left;
font-size:18px;
padding:6px;
}
h3.skill{
float:left;
display:inline;
padding:6px;
}

ecco il link violino: http://jsfiddle.net/tobiasmay/gKrkS/

Answer 6

vertical-align: top o vertical-align: bottom (come preferite ) alla regola div.inline. Che lo fa funzionare in tutti i browser.

Il motivo del div con le immagini è posizionato un poco superiore agli altri è dovuto al il modo in linea blocchi sono allineati nella loro casella contenente linea :

(...) [B] buoi sono disposti in orizzontale, uno dopo l'altro, cominciando dalla parte superiore di un blocco contenitore. margini orizzontali, bordi e padding sono rispettati tra queste caselle. (...) L'area rettangolare che contiene le caselle che formano una linea viene chiamata casella riga .

(...)

Scatola linea A è sempre abbastanza alto per tutte le caselle in esso contenuti. Tuttavia, può essere più alto del box più alto che contiene (se, per esempio, scatole sono allineate in modo che le linee di base allineati). Quando l'altezza di una scatola B è inferiore all'altezza della linea scatola che lo contiene, l'allineamento verticale B nella casella riga è determinata dalla 'vertical-align' .

Si noti la parte in grassetto. Il valore predefinito di vertical-align è baseline. Le immagini nel vostro esempio vengono spostati nella casella di linea per allinearli alla linea di base del testo circostante. In tal modo aumentano l'altezza della linea di scatola, lasciando qualche spazio bianco in più sulla parte superiore del div di testo.

Se ancora non capisco cosa sta succedendo, provare ad aumentare il font-size del h4 nel tuo esempio, per esempio, 32px, e rimuovere il height fisso da .skilllist div.