caw chtel jsem se zeptat, kdyz mam skoro celej web sestavenej z <div> je to blby????? diky
Fórum › HTML / XHTML
Layout

Co máš sestavený? Web? Vypadlo ti jedno slovíčko :smile5:
Ale pokud myslíš web, tak to ideální není - ale co dneska je :smile1:
Pomoci CSS - co to ale ma spolecneho s DIVem?
Rekneme ze mas stranky:
<body>
<div class="body"> <!-- tenhle div bude drzet ostatni vycentrovane -->
<div class="header"> <!-- hlavicka se stylovym obrazkem -->
<img src="header.jpg" class="header" />
</div>
<div class="page"> <!-- tady budou clanky, texty, obrazky - zkratka vsechno, co se na slusnej web slusi a patri -->
<h1>Ahojky</h1>
<p>Vitam te na me bozske strance</p>
<h2>Tak tohle jsem ja:</h2>
<img src="foto.jpg" />
</div>
<div class="footer"> <!-- a paticka s nejruznejsimi osobnimi udaji a copyrighty ..-->
Copyright © 2007 Ja - ja@ja.cz
</div>
</div>
</body>
Jsou tam pouzity 3 DIVy na takove "zakladni" prvky + 1 DIV na vycentrovani celeho webu...
body{
text-align: center; /* vycentrovani v IE6 */
padding/margin: 0px; /* nikdy si nejsem jisty :-) */
}
div.body{
text-align: right; /* zarovnani textu doleva */
margin: 0px auto; /* vycentrovani v "normalnich" prohlizecich */
width: 770px; /* sirka webu */
border: 1px solid #000000; /* okraj */
}
img{ /* obrazek */
margin: 20px 0px 30px 50px; /* 20 px volno nahore, 30 dole, 50px odsunuti od leveho okraje */
}
To Zelenáč :
* {
padding: -1px;
margin: -1px;
text-align: center
}
body {
font: 75% Arial;
/*background-color: #CCcccc;
width: 1000px;
height: 2600px;
}
#pravy {
float: right;
margin: -2px;
padding: 0px;
}
#menu {
float: top;
}
#t_anketa {
position: relative;
float: right;
right: -160px;
top: 20px;
}
#time {
position: relative;
float: right;
right: -270px;
top: 220px;
}
#anketa {
position: relative;
float: right;
right: -425px;
top: 60px;
}
#t_time {
position: relative;
float: right;
right: -550px;
top: 190px;
}
}
a html treba...
<div id="zahlavi">
<div>
</div>
<img src="zahlavi.jpg" alt="Vítejte na http://elif.wz.cz/">
</div>
<div id="menu">
<div>
</div>
<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="1006" height="24">
<param name="movie" value="menu_flash.swf">
<param name="quality" value="High">
<embed src="menu_flash.swf" type="application/x-shockwave-flash" name="obj1" width="1006" height="24"></object>
</div>
<div id="pravy">
<div>
</div>
<img src="pravy.jpg">
</div>
<div id="t_anketa">
<div>
</div>
<h2><font color="yellow">.:ANKETA:.</font></h2>
</div>
<div id="time">
<div>
</div>
<embed src="http://www.site-clocks.com/flash/clocks/digital.swf?hex=52b741" width="130" height="65" wmode="transparent" type="application/x-shockwave-flash">
</div>
<div id="anketa">
<div>
</div>
<!-- BlueBoard.cz Anketa -->
<iframe width="170" height="116" frameborder="0" scrolling="no" src="http://blueboard.cz/anketa_0.php?id=535903">
<a href="http://blueboard.cz/anketa_0.php?id=535903">Anketa</a> od <a href="http://blueboard.cz/">BlueBoard.cz</a>
</iframe>
<!-- BlueBoard.cz Anketa KONEC -->
</div>
<div id="t_time">
<div>
</div>
<h2><font color="yellow">.:TIME:.</font></h2>
</div>
Khamos napsal:
Dneska se weby jedině dělají v DIVech... oproti dříve používaným tabulkách je tento layout vytvořený pomocí DIVů a CSS pozicování mnohem rychlejší, a i zdroják je hezčí ;-)
Fakt jsou divy rychlejší než tabulky? :) Někdy mi přijde, že je to stejný :)
To Janina : Ono je to stejný..Jenom se tabulky zobrazí až po načtení veškerého obsahu tabulky ;)...divy a jejich obsah se zobrazují postupně s načítáním.
To darkerboy : Blokovej element DIV bys měl použít pouze pro základní rozložení stránek (globální obal, header, main, leftbar, footer,..). Pro ostatní využij dalších možností HTML a CSS. Tedy SPAN, Headers (h1,..) a hlavně P (odstavců). Taky jukni na kaskádování, protože né kvůli každé blbosti musíš vytvářet nový styl ;)
Pouze header+menu+stranka+footer = 4 divy - ani o jeden vic :-)
Na portálu Programujte.com je divů plno a nikomu to nevadí. Jen jeden článek je složený minimálně ze 4 divů a to nemluvím o zbytku stránky...
tom*p napsal:
Pouze header+menu+stranka+footer = 4 divy - ani o jeden vic :-)
Na portálu Programujte.com je divů plno a nikomu to nevadí. Jen jeden článek je složený minimálně ze 4 divů a to nemluvím o zbytku stránky...
Jak jsem psal:
Blokovej element DIV bys měl použít pouze pro základní rozložení stránek (globální obal, header, main, leftbar, footer,..).

Přidej příspěvek
Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku
×Vložení zdrojáku
×Vložení obrázku
×Vložení videa
































Uživatelé prohlížející si toto vlákno
Moderátoři diskuze