ugrás a tartalomhoz

Line-height + vertical-align

Creative · 2011. Okt. 20. (Cs), 14.39
Üdv,

Az alábbi két aprósággal lennének gondjaim, s fordulok segítségért a szakavatott, sokat-tapasztalt sitebuilder-zsenikhez ^^

1. A line-height css tulajdonságot ha megadom body-ban, hiába resetelem előtte a böngésző alapértelmezett css-formázásait, böngészőnként más és más eredményt kapok. Próbáltam px és em, valamint % megadásával is. A legpontosabb eredményt em -el kapom, azonban így is az alábbi eltéréseket tapasztalom:
Firefox és Safari megfelelően mutatja, míg a Chrome, Opera és IE alatt sokkal nagyobbak a sorközök. Jelenleg alkalmazott idevágó css-részletem:
body {
  font-size: 12px;
  line-height: 1.41em; /*12 * 1.41 ~ 17px, ez kell nekem :) */
}
2. Adva vagyon egy div, mely minden böngészőben, minden körülmények között szépen jelenik meg, tartalmával vertikálisan középen, amit a height és line-height attribútumokkal értem el. És most jön a nagy De! Ahogy ígértem :) ... de ha kompatibilitási módban, vagy alap IE 7 -ben nézem, akkor a tartalma felülre igazítva jelenik meg. Itt pedig az ide-vágó css-részletem:
#footer { 
  background: #1e8041 url("../images/footer_bg.gif") bottom center repeat-x;
  color: #bdc087;
  font-size: 11px;
  height: 35px;
  line-height: 16px;
  position: relative;
  width: 960px;
  margin: 10px 15px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  behavior: url("../css/pie.htc");
}
#copyright {
  float: left;
  padding: 0 0 0 13px;
}
#social {
  float: left;
  padding: 0 0 0 15px;
}
#social a {
  height: 16px;
  display: block;
  overflow: hidden;
  position: relative;
  width: 16px;
}
#social a span {
  background-image: url("../images/icon_facebook.png");
  background-position: 0 0;
}
#social a:hover span {
  background-position: -16px 0;
}
#created {
  position: absolute;
  right: 13px;
  top: 0;
}
Várom a sokat-látott builderek hozzászólásait :$ ^^

C.
‹ jQuery + PHP real-time ellenőrzés OFF: Levlista ›
 ■
1

Válaszok

Poetro · 2011. Okt. 20. (Cs), 15.21
Az egyes kérdés esetében az a probléma, hogy a böngészők máshogyan kerekítenek. Ezért érdemes nekik minél pontosabban megadni a méreteket, ez jelen esetben három tizedesjegyig értendő. Azaz 1.417em-et kellene megadni, mivel 17 / 12 = 1.4166666666.... Ekkor minden böngészőben a megfelelő eredményt fogod kapni.

A második kérdésre a HTML ismeretének hiányában nem igazán lehet válaszolni.
2

Additional :)

Creative · 2011. Okt. 20. (Cs), 16.21
Köszönöm az extra információt. Ezt az 'em-megadáshoz 3 tizedesjegy kell' -módit nem ismertem eddig. Itt a css-hez tartozó html-kód:
<div id="footer">
  <p id="copyright">Copyright 2011</p>
  <p id="social"><a href="#" target="_blank" title="Facebook">Facebook</a></p>
  <p id="created">created by <a href="#" target="_blank" title="Z">Z</a></p>
</div>
C.
3

Margin

Poetro · 2011. Okt. 20. (Cs), 16.42
Mivel a p margin-ja kilóg a dobozból, ezért tolódik el az elem a középtől.
<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <style type="text/css">
#footer {
  background: #1e8041 url("../images/footer_bg.gif") bottom center repeat-x;
  color: #bdc087;
  font-size: 11px;
  height: 16px;
  line-height: 16px;
  position: relative;
  width: 944px;
  margin: 10px 15px;
  padding: 11px 13px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  behavior: url("../css/pie.htc");
}
#copyright,
#social {
  float: left;
}
#footer p {
  margin: 0;
}
#social a {
  display: block;
  overflow: hidden;
  position: relative;
  width: 16px;
}
#social a span {
  background-image: url("../images/icon_facebook.png");
  background-position: 0 0;
}
#social a:hover span {
  background-position: -16px 0;
}
#created {
  float: right;
}
  </style>
</head>
<body>
<div id="footer">
  <p id="copyright">Copyright 2011</p>
  <p id="social"><a href="#" target="_blank" title="Facebook">Facebook</a></p>
  <p id="created">created by <a href="#" target="_blank" title="Z">Z</a></p>
</div>
</body>
</html>
4

valóban

Creative · 2011. Nov. 1. (K), 10.45
Valóban, görögök a falóban ^^
Ezer hála és köszönet Poetro :)

C.