HTML CSS Windows Photoshop
  • Moje-Mesto header
  • Moje-Mesto header
  • Moje-Mesto header
  • Moje-Mesto header

haber

-

Uçak bileti

-  Avtor: -primož-    02.11.09
CSS okvir na sredini, s slikami               
CSS vodiči
css okvir s slikami na srediniPostavitev galerije na sredini strani

Kliknite na sliko za prikaz

prikaz


CSS in HTML koda:

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
<style type="text/css">
 
body {text-align: center;}
img {border: none;}
 
.okvir {
  width: 690px;
  margin: 0 auto;
}
 
.gPmeni a {
  border: 4px solid #3399ff;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  height: 160px;
  width: 200px;
  float: left;
  margin: 10px;
}
 
.gPmeni a:hover {
  border: 4px solid #ff9900;
}
 
</style>
 
</head>
 
<body>
 
<div class="okvir">
   <div class="gPmeni"><a href="#">
   <img title="" alt="" src="slike/osnove.png" width="200" height="160" /></a></div>
   <div class="gPmeni"><a href="#">
   <img title="" alt="" src="slike/tekst_efekti.png" width="200" height="160" /></a></div>
   <div class="gPmeni"><a href="#">
   <img title="" alt="" src="slike/fotografija.png" width="200" height="160" /></a></div>
   <div class="gPmeni"><a href="#">
   <img title="" alt="" src="slike/animacija.png" width="200" height="160" /></a></div>
   <div class="gPmeni"><a href="#">
   <img title="" alt="" src="slike/spletna_grafika.png" width="200" height="160" /></a></div>
   <div class="gPmeni"><a href="#">
   <img title="" alt="" src="slike/oblikovanje.png" width="200" height="160" /></a></div>
</div>
 
</body>
 
</html>

 


Razlaga kode:

Kako mi je uspelo, da je div postavljen na sredino strani?
za body morate nastaviti text-align: center;
za div (okvir), ki mora biti na sredini pa morate določiti širino (width) in pa levi in desni margin na auto ali margin: 0 auto;
za div (okvir) ne smete določiti float: left;, drugače okvir ne bo na sredini!

img {border: none;} -  obroba slike ni določena zaradi tega, ker je slika povezava in brskalnik avtomatsko naredi modro obrobo, kar pa mi nočemo. Obroba je nato določena pri divu (gPmeni), ki obdaja sliko.

.gPmeni  -  določa obrobo okoli slike, poskrbi pa tudi za to, da se obroba drugače obarva, ko gremo z miško čez (hover).


Lahko bi šli še korak dalje in slike vstavili notri s pomočjo CSS ozadja, toda za moje potrebe je ta koda čisto zadostovala.

Če še česa v kodi ne boste razumeli me vprašajte preko komentarja.



Komentiraj:
Ime
E-mail
Spletna stran

!joomlacomment 4.0 Copyright (C) 2009 Compojoom.com . All rights reserved."
 
Sorodni vodiči

Moje-Mesto.com

Slovenska spletna stran s HTML, CSS, Windows in Photoshop vodiči.

 

Facebook oglaševanje

Izdelava spletnih strani

Ustvari.si

Nescafé, Čokolada

Follow us on Twitter
Follow us on Twitter
Follow us on Twitter

Oglasi