Jump to content
php.lv forumi

Ūbersamudrīta DIV režģa izveide


Mr.SergE

Recommended Posts

Ir sekojošs izklājuma plānojums:

3387806879_b.jpg

100% platums.

 

Vai kāds var sniegt padomu, kādā veidā pareizāk būtu būvēt CSS priekš tāda izklājuma? T.i. - nu es saprotu, footeris ir vienkārši clear:both;, bet kā ir ar to labo fiksēta platuma sleju - vai to ievietot vienā divā ar pārējiem bokšiem vai arī atsevišķi nopozicionēt, un vispār, cik man tur divi viens iekš otra ir jālīmē kopā, lai viss sanāktu ok un uz dažādiem pārlūkiem man tur tās detaļas neaizpeldētu katra uz savu pusi?

Link to comment
Share on other sites

  • Replies 32
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

v3rb0, fui par tādu domāšanu. Ja ir iespējams CSS izkārtojums, tad kāpēc no tā atteikties par labu table izkārtojumam, tikai tāpēc, ka ar table tas būs ātrāk ? Jā, es zinu, ka laiks ir nauda. Bet nu bez-teiblju dizains atmaksājas arī vēlāk kad saits ir jāupgreido.

Link to comment
Share on other sites

it kā izmantojot apakšā tabli par gridu nevarētu lietot css. tables variantā te būs ne vairāk par 7 cellēm ar colspan/rowspan, bet nebūs ne vienu reizi float, position un daudzie margin/paddingi. css būs īsāks un tīrāks, nekā tad ja izmantos "pareizo" pieeju.

 

par labošanu, ļoti atkarājas kas jāmaina, ja tables htmls ir noidentēts pareizi un nav aizbraukts auzās ar table iekš tables, tad labot nevajadzētu būt grūti. un nebūs jaņemas ar marginus/paddingu pārrēķināšanu visiem elementiem, mainīt floatus, elementu secību utt.

Edited by v3rb0
Link to comment
Share on other sites

Cik maksāsi, ja uztaisīš' ?

 

Kas attiecas uz tables VS layers , tad tas nebūt nav klasiskais ticvības karš (amd/intel , linux/windows , pc/mac .. utt).

Šoreiz ir daudz neapgāžamu argumentu, un tie, kas saka, ka ar tabulu ir vienkāršāk, laikam nekad nav mēģinājuši salīdzinat kā atšķiras layer un table layouts, tad kad tajā stūķē iekšā php (vai kādu citu valodu).

Link to comment
Share on other sites

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>-</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="main_layout.css" />
</head>
<body>
<div id="outer"> 
 <div id="left"> 
	left<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 </div>
 <div id="right"> 
<div id="rightfl">
	<div id="rightflc">
	right1<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	</div>
</div>
<div id="rightfr">
right2<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
 </div>
 <div id="clearheader"></div>  <!-- to clear header -->
  <div id="centrecontent"><!--centre content goes here -->
 <div id="centers">

CENTER
  </div>
 </div>
<div id="clearfooter"></div>  <!-- to clear footer -->
</div><!-- end outer div -->
<div id="footer">
  <div id="footers">
 footer
  </div>
</div>
<div id="header">
<div id="headerp">
	<div id="headertop">
	header1
	</div>
	<div id="headerbottom">
	header2
	</div>
</div>
</div>
</body>
</html>

 

main_layout.css

 

*
{
  padding: 0px;
  margin: 0px;
  color: #000000;
  border: 0px;
  font-family: arial;
  font-size: 12px;
  line-height: 17px;
  word-spacing: 2px;
}
a:hover
{
text-decoration: none;
}
a:active, a:focus
{
 outline: none;
}
html, body 
{
  height: 100%;
}
ul
{
list-style: none;
}
.cl
{
clear: both;
height: 0px;
line-height: 0px;
font-size: 0px;
}
#outer
{
  height:100%;
  min-height:100%;
  margin-left:180px;
  margin-right:360px;
  margin-bottom:-50px;
  background-color: #f7ffd6;
}
html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
#header
{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:72px;
  overflow:hidden;
}
#headerp
{
padding-right: 180px;
}
#headertop
{
height: 36px;
background-color: #effaac;
}
#headerbottom
{
height: 36px;
background-color: #97a16c;
}
#left 
{
  position:relative;/*ie needs this to show float */
  width:180px;
  float:left;
  margin-left:-179px;/*must be 1px less than width otherwise won't push footer down */
  padding-top:72px;/*needed to make room for header*/
  background-color: #e8edad;
}
#right 
{
  position:relative;/*ie needs this to show float */
  width:360px;
  float:right;
  margin-right:-359px;/*must be 1px less than width otherwise won't push footer down */
  padding-top:0px;/*needed to make room for header*/
}
#rightfr 
{
  float:right;
  width:180px;
  background-color: #c1a78c;
}
#rightfl 
{
  float:left;
  width:180px;
  padding-top: 72px;
}
#rightflc
{
background-color: #e8edad;
}

#footer 
{
  width:100%;
  clear:both;
  height:50px;
  position:relative;
  background-color: #eef9ab;
}
* html #footer {/*only ie gets this style*/
  \height:52px;/* for ie5 */
  he\ight:50px;/* for ie6 */
}
#clearheader{height:72px;}/*needed to make room for header*/
#clearfooter{clear:both;height:40px;}/*needed to make room for footer*/
* html #centrecontent {height:1%;margin-bottom:12px;}/* combat IE's 3 pixel jog */

 

aiznjeema 25 min.

neesu paaarliecinaats, ka viss straadaa. apskatiijos tikai uz FF2 un IE6

Link to comment
Share on other sites

Esmu par tabulu izmantošanu tabulu attēlošanai. Bet principā jau lietotājam pofig, kas tur ir apakšā, ka tik izskatās smuki. Toties ar tabulu tu, šķiet, fiksi nevari apmainīt kreiso kolonnu ar labo ar iejaukšanos tikai un vienīgi CSS.

Link to comment
Share on other sites

Un tāpēc, ka tas skaitās "krutāk" vajag lietot divus, un ja daudz ērtāk un bez galvassāpēm var izveidot ar tabulām. Man šķiet, ka tas ir bezjēdzīgs strīds. Katrs dara kā ērtāk, un viss.

Link to comment
Share on other sites

Un tāpēc, ka tas skaitās "krutāk" vajag lietot divus, un ja daudz ērtāk un bez galvassāpēm var izveidot ar tabulām. Man šķiet, ka tas ir bezjēdzīgs strīds. Katrs dara kā ērtāk, un viss.

Kad māki, tad daudz ērtāk un bez galvassāpēm ir taisīt layout-u ar div-iem. Es ar div-iem īsti nemāku vēl apieties. Pašam sanāk ātrāk ar tabulām taisīt. Bet, ja nu nāktos par HTML koderi piestrādāt, iemācītos.

Link to comment
Share on other sites

Man šķiet, ka tas ir bezjēdzīgs strīds. Katrs dara kā ērtāk, un viss.

 

Nu taa iisti arii nav. Table based izkaartojumu probleemas:

- table layoutus ir problemaatiskaak apluukot text based browseros (mobilie devaisi utt). Protams, tas stipri ir atkariigs no auditorijas, vai sho faktoru vajag vai nevajag njemt veeraa.

- ja templeishu sisteema tiek buuveeta no html "gabalinjiem", tad neizbeekami sanaak, ka vienaa templeitu gabaalaa sanaaks <table> start tags, bet citaa </table> end tags utt. Tas veido haosu un nepaaredzamiibu. Protams, tas ir stipri atkariigs arii no taa, kaa cilveeks veido markupu. Ja visas lapas ir praktiski ar vienaadu struktuuru, tad shii probleema nav tik izteikta. Bet ja katra lapa saitaa ir ar ljoti atshkjiriigiem izkaartojumiem, tad beigaas tajos visos colspanos un rowspanos tu apmaldiisies.

- table layouts nav tik fleksibls izmainjaam. Veelaak ja kautkur veeleesies ievietot kaadu jaunu bloku (<td>) kaadaa lapaa, tad var gadiities, ka ir jaapieregulee citu bloku rowspani un colspani. (Protams, shis un ieprieksheejais punkts ir stipri atkariigi no html koda un developera iemanjaam.

- table layouti ljoti biezhi ir smagaaki un ar vairaak nevajadziiga markapa nekaa css based analogs layouts.

- table layouts nevar kustomizeet neiejaucoties html struktuuraa.

- table layoutu izvietojums ljoti biezhi ir nesemantisks (table prieksh jau izvietojuma jau vien ir nesemantiski, bet w3c rekomendaacijas saka, ka, ja izstripojot table tagu un ar to saistiitos tagus, lapas saturs raadaas semantiskaa seciibaa, tad table layouts veel ir pieljaujams). Tas atsaucaas arii uz pirmo punktu.

 

Shobriid vairaak iemeslu neatsaucas praataa.

Edited by andrisp
Link to comment
Share on other sites

Vieniigie plusi tabulaam, ko es speeju iedomaaties:

- aatraak var dabuut gatavu izkaartojumu (bet shis ir subjektiivs. augot browseru css atbalstam un izstraadaataaja iemanjaam, css layouti arii aatri buuvejas)

- Viegli implementeet vertikaalo centreeshanu, kur vajag. (Kaut gan prieksh css ir dazhaadi risinaajumi, neviens no tiem nav pilniigs)

- Viegli veidot layoutus, kur ir svariigi (vismaz vizuaali), lai divaam vai vairaakaam blakusesoshaam kolonnaam buutu vienaads augstums, neatkariigi no satura. Bet ieksh css ar dazhaadaam metodeem arii sho nav paaraak gruuti panaakt. Ir tikai jaapguust shiis metodes.

Link to comment
Share on other sites


×
×
  • Create New...