Vizitkarte – vertikāli, horizontāli centrēta lapa

8
Dec2

Viens no šī laika “grūtākajiem” layout’iem – vertikāli un horizontāli centrēta lapa, visbiežāk vizitkartes tipa mājaslapa. Šīs problēmas risinājumi arī ir redzēti daudz un dažādi, liekākā daļa, diezgan, līki. Visvieglāk būtu izveidot 100%x100% tabulu ar atribūtiem align=”center” un valign=”middle”, bet priekškam lietot tabulu tur, kur tas nav vajadzīgs? Otrs biežāk pielietotais variants ir tabulas atdarināšana ar elementiem, proti, style=”display: table;” utt. Turklāt šādiem risinājumiem ir problēmas ar XHTML 1.0 Strict un pārlūku savietojamībām.

Parādīšu, kā to daru es, zinot centrējamā elementa augstumu.

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

* {
  margin: 0;
  padding: 0;
}
 
html, body {
  height: 100%;
}
 
body {
  background-color: #fff;
  font-family: Arial;
  font-size: 12px;
  color: #000;
  text-align: justify;
}
 
#top {
  width: 100%;
  height: 50%;
  /* šis elements nebrauks virsū wrapper'im */
  position: relative;
  z-index: -1;
}
 
#wrapper {
  margin: -150px auto 0 auto; /* puse no elementa augstuma */
  padding: 30px;
  width: 440px;
  height: 240px;
  background-color: #eee;
}

HTML

1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Mana lapa</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="/css/layout.css" type="text/css" media="screen" />
 </head>
<body>
 <div id="top">&nbsp;</div>
 <div id="wrapper">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div>
</body>
</html>

Dabā to varam redzēt šeit.
Testēts uz Microsoft Internet Explorer 6, Microsoft Internet Explorer 7, Mozilla Firefix 3, Netscape Navigator 9, Apple Safari 3, Google Chrome, Opera 9.

Filed under: HTML, CSS
Turpināt lasīt

Kalendārs

December 2008
M T W T F S S
« Nov   Jan »
1234567
891011121314
15161718192021
22232425262728
293031  

Jaunākie raksti

Jaunākie komentāri

Kategorijas