intenz fyrir 20 árum, 3 mánuðum Fjöldi lestra: 303

doctype

Jæja drengir, ég er búinn að gera síðu sem er með eftirfarandi doctype…

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

Ok, eftir að ég setti þetta doctype, þá er öll síðan í fokki; allt dis-located.

Sko, ég er búinn að gera allt rétt og ég fæ ”This Page Is Valid XHTML 1.0 Transitional!“ en núna er allt í rugli.

Getiði sagt mér eitthvað um þetta?

Hérna eru myndir af þessu:

<a href=”http://www.piparinn.is/gaui/doctype/fyrir.jpg“>Fyrir</a>
<a href=”http://www.piparinn.is/gaui/doctype/eftir.jpg“>Eftir</a> 
Guðjón intenz Jónsson of WannaB
”Farðu ekki á mis, þetta er Gaui.is"</i

Gaui

cre fyrir 20 árum, 3 mánuðum

prófaðu þetta:
body
{
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

Fyrra álit

sigurdsson fyrir 20 árum, 3 mánuðum

Ég hef alltaf gert svona :

body
{
margin: 0;
padding: 0;
}

Hérna er góð grein sem kennir manni að skrifa léttara CSS :

http://www.communitymx.com/content/article.cfm?cid=A43B828960590F55 
Kv. <a href="http://www.sigurdss0n.com">Andri Sig.</a></font

Fyrra álit

spaceball fyrir 20 árum, 3 mánuðum

sko, þetta hefur með box modelið að gera.

IE og aðrir vafrar rendera síður á tvennan hátt, quirks mode og svo standard mode, þegar þú definar doctype þá skiptir hann um render vél og les síðuna öðruvísi (á réttan hátt :)

á réttan hátt þá virkar box modoleið þannig…

ert með t.d. [div id="leftmenu"] sem á að vera 200 px á breidd.
og segir

#leftmenu {
margin-left: 10px;
padding: 5px;
border: 1px solid #999;
width: 200px;
}

það sem að gerist þá er að stærðin verður
200 +
10 (margin) +
10 (padding left og right 5px x 2) +
2 (border 1px x 2)
= 222px

því verður þú að skilgreina width sem 178px til að ná ákkúrat 200px.

þetta er rétt box model og virka svona í IE 6.0, mozilla, opera, safari ie 5 mac og öðrum browserum,

ie 5.x og niðiur skilur þetta rangt, þeir nota gamla mátann þó að þú sért með doctype því verður að notast við box model hackið til að laga það

þá segir þú í css
width: 200px;
voice-family: “”}“”;
voice-family:inherit;
width: 178px;

það sem að gerist hérna er að þú segir width: 200 “lokar” svo skilgreiningunni (allavega heldur i.e 5.x > það) og svo segiru réttu töluna sem er 178px;

p.s. sumir vilja bæta við fixi fyrir operu 6 sem er

body>#leftmenu {
width: 200px;
}

 kv,
spaceball

kv,

Fyrra álit

cre fyrir 20 árum, 3 mánuðum

þú ert alveg fullur af þekkingu og kærleika, spaceball:)

Fyrra álit

sigurdsson fyrir 20 árum, 3 mánuðum

Spaceball, það er hægt að komast framhjá þessu boxmodel veseni með því að forðast að nota padding og bordar á layout svæðin. Það er stundum betra en að nota skítug hack. Ég gerði t.d Radioreykjavik.is svona og það reyndist mér betur en hin leiðin sem þú lýstir fyrir ofan. Ég er ekki að segja að það sé alltaf betra en þess virði að taka það til greina. 
Kv. <a href="http://www.sigurdss0n.com">Andri Sig.</a></font

Fyrra álit

spaceball fyrir 20 árum, 3 mánuðum

Já það er valid pæling en…
mér finnst þetta browser hack ekki það skítugt, en þetta hefur oft áhrif annarstaðar en bara í layoutinu. kv,
spaceball

kv,

Fyrra álit

Cazper fyrir 20 árum, 3 mánuðum

Sleppa nota padding, margin og borders, nei hættu nú alveg :)

Þetta er náttúrulega bara hack fyrir browsera sem gera þetta ekki nógu vel.

Málið er náttúrulega það að þegar þú notar voice family hackið (fyrir IE) að þá skilur opera það og fer þá inní það hack, og þar sem að opera túlkar box model betur en IE þarf að hafa annað hack fyrir opera þannig að hún skili síðunni rétt út…er það ekki rétt hjá mér annars?

Þetta er ekki hack í mínum augum heldur bara pro vinnubrögð að gera vefinn þannig að hann lýti eins út í sem flestum browserum. /************************/
/* The code must be pure!!! */
/************************/
Haukur Már Böðvarsson
haukur@eskill.is
www.bodvarsson.com

Haukur Már Böðvarsson

Fyrra álit

sigurdsson fyrir 20 árum, 3 mánuðum

Þú ert eitthvað að misskilja mig :)

Þagar þú ættlar að gera layout með CSS eða töflum byrjar maður á þvi að setja upp grunn svæði eða töflur sem ákvarða breidd á content svæði og kannski svæði til hægti fyrir valmynd. Ef þú sleppir að nota padding og border (Mátt nota margin) þá þarftu ekki á þessum CSS hacks að halda. Þú mátt svo nota eins mikið af borders og paddings og þú vilt inní þessum grunn svæðum. Ég hef góða reynslu af þessu.

“Þetta er ekki hack í mínum augum”

Þetta er hack :) Það er verið að nýta sér galla í vöfrunum til að laga aðra galla. Reyndar finnst mér í lagi að nota svona á vafra sem eru ekki lengur í þróun og hætt er að uppfæra. Ég mundi samt ekki nota þessi hacks á nýja vafra því þá gæti maður lent í vandræðum seinna meir. 
Kv. <a href="http://www.sigurdss0n.com">Andri Sig.</a></font

Fyrra álit

Cazper fyrir 20 árum, 3 mánuðum

Bíddu ég skil ekki alveg hvað þú ert að reyna segja, samkvæmt box model þá bætist við vídd á elementi margin, padding og border.

Ert þú að tala um þegar þú hannar vef með töflur og notar padding og border á þeim? /************************/
/* The code must be pure!!! */
/************************/
Haukur Már Böðvarsson
haukur@eskill.is
www.bodvarsson.com

Haukur Már Böðvarsson

Fyrra álit

sigurdsson fyrir 20 árum, 3 mánuðum

Nei ég er ekki að tala um töflur.

http://simon.incutio.com/archive/2003/05/26/theBoxModel
http://css-discuss.incutio.com/?page=ElementWidth 
Kv. <a href="http://www.sigurdss0n.com">Andri Sig.</a></font

Fyrra álit

intenz fyrir 20 árum, 3 mánuðum

Þetta er alveg ekki að lagast hjá mér.

Sáuði myndirnar af þessu?

<a href="http://www.piparinn.is/gaui/doctype/fyrir.jpg">http://www.piparinn.is/gaui/doctype/fyrir.jpg</a>
<a href="http://www.piparinn.is/gaui/doctype/eftir.jpg">http://www.piparinn.is/gaui/doctype/eftir.jpg</a> 
Guðjón intenz Jónsson of WannaB
“Farðu ekki á mis, þetta er Gaui.is”</i

Gaui

Fyrra álit

spaceball fyrir 20 árum, 3 mánuðum

það væri ekki verra að geta séð einhvern source af þessu… en miðað við myndirnar þá sýnist mér þetta vera box model vesin!

t.d. er ekki hægt að lita scrollbarinn í xhtml, allavega hefur mér ekki tekist það sjálfum.

eru fréttirnar í iframe? kv,
spaceball

kv,

Fyrra álit

intenz fyrir 20 árum, 3 mánuðum

Ég hoppa af gleði, þar sem ég er búinn að finna rót vandans.

Rót vandans er DIV layerinn sem ég er með þarna.

Afhverju er hann að koma með vesen? 
Guðjón intenz Jónsson of WannaB
“Farðu ekki á mis, þetta er Gaui.is”</i

Gaui

Fyrra álit

spaceball fyrir 20 árum, 3 mánuðum

kóðinn hjá þér er soldið sérstakur, ert að vefa á gamla mátann en samt reyna að nota nýja aðferðir,

gætir minnkað kóðann mikið og gert þetta þægilegra og betra með því að sleppa þessu óþarfa töflum. og skipuleggja kóðann aðeins betur. kv,
spaceball

kv,

Fyrra álit

intenz fyrir 20 árum, 3 mánuðum

Ég er búinn að setja upp smá sýnishorn <a href="http://www.piparinn.is/gaui/doctype/evil/“>hérna</a>. 
Guðjón intenz Jónsson of WannaB
”Farðu ekki á mis, þetta er Gaui.is"</i

Gaui

Fyrra álit

Vefsíðugerð

Vefsíðugerð

Ofurhugar

Stjórnendur

Hverjir eru inni

Korkar - Almennt

doctype

Dýr

Dægurmál

Fræði

Leikir

Lífið

Lífsstíll

Margmiðlun

Menning

Skjár

Sport

Tónlist

Tækni

Vélar

Hugi