Raivis.purins Posted May 5, 2010 Report Share Posted May 5, 2010 Jautājums sekojošs, esmu izveidojis trīs blokus, galvene, rumpis un kājas. Rumpim galvenie parametri ir min-height un height:auto, bet tiko es pievienoju vairākus attēlus, tā attēli pārklāj fūteri. Ko es šeit esmu palaidis garām? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>MANDORLA</title> <link href="css/css.css" rel="stylesheet" type="text/css" /> <style type="text/css"> body { background-color:#636469; } </style> </head> <body> <div id="header"> <div id="headerimg"><a href="#"><img src="img/header_mandorla.png"></a> </div> <div id="headerlist"><p><a href="#">Bolderaja</a> <a href="#">bumbuļi</a> <a href="#">aliņš</a> <a href="#">Bolderaja</a> <a href="#">bumbuļi</a> <a href="#">aliņš</a> <a href="#">Bolderaja</a> <a href="#">bumbuļi</a> <a href="#">aliņš</a> <a href="#">Bolderaja</a> <a href="#">bumbuļi</a> <a href="#">aliņš</a> <a href="#">Bolderaja</a> <a href="#">bumbuļi</a> <a href="#">aliņš</a> </p> </div> </div> <div id="main"> <div id="maingalery"><img src="img/koks.jpg"></div> <div id="maingalery"><img src="img/koks.jpg"></div> <div id="maingalery"><img src="img/koks.jpg"></div> <div id="maingalery"><img src="img/koks.jpg"></div> <div id="maingalery"><img src="img/koks.jpg"></div> <div id="maingalery"><img src="img/koks.jpg"></div> <div id="maingalery"><img src="img/koks.jpg"></div> <div id="maingalery"><img src="img/koks.jpg"></div> <div id="maingalery"><img src="img/koks.jpg"></div> <div id="maingalery"><img src="img/koks.jpg"></div> <div id="maingalery"><img src="img/koks.jpg"></div> <div id="maingalery"><img src="img/koks.jpg"></div> <div id="maingalery"><img src="img/koks.jpg"></div> <div id="maingalery"><img src="img/koks.jpg"></div> <div id="maingalery"><img src="img/koks.jpg"></div> <div id="maingalery"><img src="img/koks.jpg"></div> <div id="maingalery"><img src="img/koks.jpg"></div> <div id="maingalery"><img src="img/koks.jpg"></div> <div id="maingalery"><img src="img/koks.jpg"></div> <div id="maingalery"><img src="img/koks.jpg"></div> <div id="maingalery"><img src="img/koks.jpg"></div> <div id="maingalery"><img src="img/koks.jpg"></div> <div id="maingalery"><img src="img/koks.jpg"></div> <div id="maingalery"><img src="img/koks.jpg"></div> <div id="maingalery"><img src="img/koks.jpg"></div> <div id="maingalery"><img src="img/koks.jpg"></div> </div> <div id="footer"> <div id="footerline"> <a href="mailto:valts@garden.lv">© Mandorla@Mandorla.lv</a> </div> </div> </body> </html> @charset "utf-8"; /* CSS Document */ /* Galvene */ #header { width:1000px; background-color:#636469; border:none; margin-top:0px; height:140px; margin-left:auto; margin-right:auto; } #headerimg img { border:none; text-decoration:none; float:left; width:200px; padding-top:34px; padding-left:10px; } #headerlist p { padding-top:18px; width:550px; float:right; } #headerlist a { text-decoration:none; float:left; padding-right:10px; padding-top:1px; color:#4a4a4a; font-size:12px; font-family:Arial, Helvetica, sans-serif; } #headerlist a:hover { color:#ffffff; font-size:12px; font-family:Arial, Helvetica, sans-serif; } /* Kaste */ #main { width:1000px; min-height:650px; height:auto; border:none; background-color:#636469; margin-top:0px; margin-left:auto; margin-right:auto; } #maingalery { float:left; width: 150px; margin-top:4px; margin-left:22px; margin-right:17px; margin-bottom:10px; height: 200px; background-image:-moz-linear-gradient(100% 100% 90deg, #8c8c8e, #525357); background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#525357), to(#8c8c8e)); -moz-border-radius:7px; -webkit-border-radius:7px; padding-top:10px; padding-left:10px; } /* Lejene */ #footer { width:1000px; height:140px; background-color:#636469; margin-bottom:0px; margin-left:auto; margin-right:auto; } #footerline { width:1000px; height:30px; margin-top:0px; margin-left:auto; margin-right:auto; background-color:#000; text-align:left; } #footerline a { text-decoration:none; float:right; color:#666; padding-right:10px; padding-top:7px; font-size:12px; font-family:Arial, Helvetica, sans-serif; } #footerline a:hover { color:#ffffff; font-size:12px; font-family:Arial, Helvetica, sans-serif; } Link to comment Share on other sites More sharing options...
marcis Posted May 5, 2010 Report Share Posted May 5, 2010 http://web.hc.lv/kods/css/raksti/css-float/ + vajadzētu saprast, kad jālieto id un kad class atribūti. Link to comment Share on other sites More sharing options...
Raivis.purins Posted May 5, 2010 Author Report Share Posted May 5, 2010 Kā noprotu, to pielietošanā nav daudz atšķirību, izņemot iedalījums pēc prioritātēm? Es izlasīju tevis doto saiti un tāpat man nekas nekļuva skaidrāks. Link to comment Share on other sites More sharing options...
indoom Posted May 5, 2010 Report Share Posted May 5, 2010 id nevar izmantot visiem div id="maingalery", bet tikai vienam div, piem., kā id="main", id="header", kuri pa vidu dokumentu neatkārtojas. Tādā gadījumā jāizmanto class="maingalery" uz tiem div. Class atribūts var atkārtoties uz vairākiem tagiem. Link to comment Share on other sites More sharing options...
Raivis.purins Posted May 5, 2010 Author Report Share Posted May 5, 2010 Paldies. izlabošu to. Link to comment Share on other sites More sharing options...
daGrevis Posted May 5, 2010 Report Share Posted May 5, 2010 (edited) ...esmu izveidojis trīs blokus, galvene, rumpis un kājas.... Tak neej izvirtībās... =D Edited May 5, 2010 by daGrevis Link to comment Share on other sites More sharing options...
Raivis.purins Posted May 5, 2010 Author Report Share Posted May 5, 2010 nu tā, esmu uztaisījis, ka div class="maingalery", to pašu izdarīšu arī ar headerlist, bet jautājums par to pāri līšanu pagaidām ir iestrēdzis, nespēju sagremot. Link to comment Share on other sites More sharing options...
Raivis.purins Posted May 5, 2010 Author Report Share Posted May 5, 2010 izlaboju, ieliku vienu cleer divu zem visiem tiem maingalery diviem. strādā kā vajag. Link to comment Share on other sites More sharing options...
Recommended Posts