Table-taitosta div-taittoon

w3schools.com divi taitosta:





body
{
margin-top: 20px;
}
div.container
{
width:100%;
margin:0px;
border:1px solid gray;
}
div.header,div.footer
{
padding:0.5em;
color:white;
background-color:#68a32b;
clear:left;
}
h1.header
{
padding:0;
margin:0;
}
div.left
{
float:left;
width:150px;
margin:0;
padding-left: 0.5em;
font:12px georgia;
background-image: url('side_bg.png')
}
h4
{
background-color: #ffffae;
}
div.content
{
margin-left:180px;
padding:1em;
border-left:1px solid gray;
}





W3Schools.com
"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)
Toinen para alkaa tästä näin. Kokeillaan muutakin sekaan.
Tummaa tekstiä
ja sitten on rivin vaihto ja muuta tekstiä..


Free Web Building Tutorials
At W3Schools you will find all the Web-building tutorials you need,
from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.
W3Schools - The Largest Web Developers Site On The Net!
Free Web Building Tutorials
At W3Schools you will find all the Web-building tutorials you need,
from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.
W3Schools - The Largest Web Developers Site On The Net!
Free Web Building Tutorials
At W3Schools you will find all the Web-building tutorials you need,
from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.

W3Schools - The Largest Web Developers Site On The Net!

Copyright 1999-2005 by Refsnes Data.






Saa helposti eroteltua omaan tiedostoon tuon css tyylin...

:)

http://www.stormdance.net

Saat kokeilla ilmaiseksi pari viikkoa, ja siinä ajassa ehdit varmasti thedä sen verran monta sivupohjaa DIVeillä, että on mistä oppia ja opetella.

TYYLITIEDOSTO (tyyli.css)

.ctr {position:relative; margin-left:auto; margin-right:auto; width:760px; text-align:left}

.global {
background-color:#FFFFFF; font-family:Arial, Helvetica, sans-serif; color:#000000;
font-size:12px; text-align:left;
}
a:link {} a:visited {} a:hover {text-decoration:underline} a:active {text-decoration:underline}
body,div,ul,li,p,img,object,iframe,h1,h2,h3,h4,h5,h6,h7 {margin:0; padding:0; box-sizing:border-box; -moz-box-sizing:border-box}
ul {padding:0 0 0 20px; list-style-type: disc} img {border-width: 0} .default-menu {overflow:hidden; cursor:hand; cursor:pointer; background-color:#43B7E6; border-style:groove; border-width:2px; border-color:#EBEBEB; text-align:center}
.default-menu {line-height:1.5em} .default-menu a {display:block; cursor:hand; cursor:pointer; width:100%; padding:0 2px 0 1px; margin:0}
.default-menu a:link {color:#000000; text-decoration:none} .default-menu a:visited {color:#000000; text-decoration:none}
.default-menu a:hover {color:#FFFFFF; text-decoration:none; background-color:#000080}
.default-menu a:active {color:#FFFFFF; text-decoration:none; background-color:#0000CC}

.default-style {
overflow:hidden;
}
.default-style a:hover {} .default-style a:active {}

.plain-text {
overflow:auto;
}
.plain-text a:hover {} .plain-text a:active {}

.heading {
padding:2px; border-width:1px; border-style:solid; border-color:#D8D8D8;
font-weight:bold; font-size:16px; text-align:center; overflow:hidden;
}
.heading a:hover {} .heading a:active {}

.subheading {
font-weight:bold; text-align:left; overflow:hidden;
}
.subheading a:hover {} .subheading a:active {}


JAVASCRIPT-HÄKKYRÄ (scripti.js)

var iAaCTA=false;

function autoactivate0(){
iAaCTA=testBrowser();
if(iAaCTA){document.write('

... nyt sentään alkaa selviään mistä kiikastaa.






body {margin:70px 30px 30px 30px; }
div { border:1px solid #ccc; text-align:left; }










solu
solu
solu

solu
solu
solu

solu
solu
solu











Esimerkki-html toimii IE:ssä kuten olen ajatellutkin. Mozillassa tulee muutamia ongelmia: käsittelee padding ja margin -määritteet eri tavalla. Myös tekstin asemoinnissa eroja.

Löytyykö muita css-määritteitä, joilla tuon taulukon saa näkymään ja asemoitumaan molemmilla selaimilla samanlla tavalla vai onko tuossa joku muu pielessä?

Entä sitten sivun sisällön vaakatasaus. Löytyykö css-määritettä (esim. ulommaiseen diviin), jolla sivun sisällön saa asemoitua sivun keskelle? Nyt käytin html:ää >> .

------------------

Kiitos ed. vastauksista!

Tuo antenna ei ole ihan sellainen editori mitä haen. Pikaisesti yritin etsiä toimintoa, millä saa aikaan sisäkkäisiä div-rakenteita, enkä sitä löytänyt. Tiedän tuon z-indexin jota se ja vs. editorit käyttää. Sitä en nyt hae.

Tuolla W3C-mallilla/"sivupohjalla" sain aikaan suht kelvollisen sivun niin, että eri elementit asettu kutakuinkin samoin IE:llä ja Mozilalla. Se juju miten nuo sudenkuopat kierretään ei kuitenkaan aivan auennut kuten tuosta esimerkkisivusta (koodi ylempänä) huomaa.