Layout met table naar div omzetten - Softwareontwikkeling

vrijdag 21 januari 2005 13:55

Acties:

Verwijderd

Topicstarter

Misschien wat rare titel, maar daar komt het wel op neer.

Daar je overal leest dat table's out zijn en dat je opmaak met CSS en div's moet doen ben ik me sinds kort aan het verdiepen hierin.

Nu ben ik begonnen met een redelijke cliche table situatie om die om te bouwen met div's.

De traditionele table layout :

code:

*** A ***
***   ***
*B*   *C*
***   ***
*** D ***

Standaard header, 2 variabele kolommen en een footer.

De header en de 2 kolommen met variabele hoogte zijn geen probleem om te plaatsen met een div, dat lukt netjes.

Maar nu zoek ik al enkele dagen hoe ik die footer netjes onder de langste kolom kan plaatsen en hoe ik eventueel die 2 kolommen even hoog kan maken ondanks dat ze een op voorhand onbepaalde hoogte kunnen hebben.

Het gaat dus in mijn tst geval om 4 div's waarvan ik niet goed weet hoe ik het moet aanpakken voor die footer.

Misschien een very basic vraag, maar ik kon in de search geen oplossing vinden, en google'n hielp me ook niet vooruit...

vrijdag 21 januari 2005 13:58

Acties:

BtM909

Watch out Guys...

Laat eens zien wat je al hebt? crisp heeft ooit een mooi voorbeeld gemaakt wat je eventueel kan gebruiken.

Daarnaast is het zo, dat je kolommen eigenlijk niet even lang wilt maken. Wil je het wel visueel hebben, dan moet je denken aan technieken ala Faux Columns

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

vrijdag 21 januari 2005 14:17

Acties:

Verwijderd

Topicstarter

Het is heel basic hoor en het oogt niet professioneel I know... gewoon test doeleinden om wat te wennen aan het gedrag van div's met CSS

Dit geeft gewoon een header met 2 kolommen en ik zoek dus de juiste manier om daar een footer (zoals de header) onder te zetten, aansluitend aan die kolommen.

code:

<?

$header_width = 750;
$header_height = 220;

$pane_left_width = 140;

$pane_right_width = $header_width - $pane_left_width;

echo"

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\">

<html>
<head>
    <title>HNZ test :)</title>
</head>

<STYLE TYPE='text/css'>
<!--

body    {
        background: #FFFFFF;

        text-decoration: none;
        color: navy;
        font-family: 'arial';
        font-size: 10pt;
        }

div     {
        border: solid 1px;
        border-color: #FF0000;
        
        color: #000000;
        }

div.header  {
            background: url(gfx/hnz_background.jpg) no-repeat;

            position: absolute;
            top: 0px;
            left: 0px;
            width: ".$header_width."px;
            height: ".$header_height."px;

            overflow:hidden
            }

div.paneleft    {
                background: url(gfx/leftcolumnbackground.gif);

                position: absolute;
                top: ".$header_height."px;
                left: 0px;
                width: ".$pane_left_width."px;
                height: auto;

                overflow:hidden
                }

div.paneright   {
                position: absolute;
                top: ".$header_height."px;
                left: ".$pane_left_width."px;
                width: ".$pane_right_width."px;
                height: auto;

                overflow:hidden
                }

-->
</STYLE>


<body topmargin='0' leftmargin='0' marginwidth='0' marginheight='0'>


<div class='header'>

Den bovenkant<br><br><br><br><br><br><br><br><br><br>Onderkant

</div>


<div class='paneleft'>

De linkse kant<br><br><br><br><br><br><br><br><br><br><br><br><br>Onderkant

</div>


<div class='paneright'>

blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla<br>
blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla<br>
blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla<br>
blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla<br>
blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla<br>

</div>


</body>
</html>

";
?>

vrijdag 21 januari 2005 14:20

Acties:

Clay

cookie erbij?

Een table design ombouwen naar css is niet een kwestie van de td's renamen naar div en die met css in dezelfde positie brengen. De verschillende soorten content van je pagina bepalen hoe je html eruit zou moeten zien. Daarna pas je daar met css een design op. Stel je hebt een menu en wat content, dan zal je html er ongeveer zo uit moeten zien:

HTML:

<ul>
   <li> menu item </li>
   <li> menu item </li>
</ul>

<h1> titel </h1>
<p>
   Lorem ipsum dolor sit amet
</p>

De rol van css is dat je dit er uit kan laten zien hoe je maar wil. Divs zijn dus niet nodig "omdat je meerdere kolommen in je design hebt". Een div dient enkel om stukken content te groeperen, en bijkomend voordeel is dat dat je ook weer wat meer vrijheid geeft met je css.

Design heeft niets met html te maken als je html en css goed toepast.

edit:

wel een smiley in mn post doen natuurlijk

[ Voor 17% gewijzigd door Clay op 21-01-2005 14:22 ]

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

vrijdag 21 januari 2005 14:24

Acties:

Verwijderd

Topicstarter

Mja ik stel me al langer vragen bij iedereen die loopt te roepen dat het compleet not-done is om nog tables voor layout te gebruiken.

Daarom dat ik nu wat met div's en toestanden bezig ben omdat men nu klaarblijkelijk alles via div's doet.

Ik probeer dus gewoon voor mezelf uit te testen of 'men' gelijk heeft.

Dus zoek ik een manier om div's netjes te alignen

aangezien 'iedereen' beweert dat dit 'perfect' kan...

vrijdag 21 januari 2005 14:28

Acties:

Xander

Anders zet je die 2 divs (links en rechts) in een andere div. Je footer onder die grote div krijgen lijkt me dan niet meer zo'n probleem...

_{of het de meest efficiënte oplossing is zou ik niet weten, maar het kan iig}

PC specs!---Pulse mee voor GoT!
[22:49:37] <@Remy> ik wil een opblaasbare dSLR :+

vrijdag 21 januari 2005 14:36

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

Verwijderd schreef op vrijdag 21 januari 2005 @ 14:24:

Ik probeer dus gewoon voor mezelf uit te testen of 'men' gelijk heeft.

Probeer dan wel kritisch te kijken naar 'wat' 'men' nu precies beweert..
geloof absoluut niet mensen die zegen dat 'Tag X' verkeerd zou zijn, en vervangen moet worden door 'Tag Y', dat is onzin...

Wel heeft het zin om je HTML-code qua concept enigszins gescheiden te houden van hoe je deze visueel wilt presenteren:
Zie bv hierboven Clay's post...:

Het is veel belangrijker om eerst ervoor te zorgen dat de functionaliteiten van de specifieke dingen die je wilt presenteren kloppen, dus stel jezelf vragen wat een stukje content is, is deze onderling gerelateerd in een lijstje (bv een menu met verschillende opties is dat): zet dan dan ook in de HTML in een List..
Is een stuk tekst verdeeld in koppen en alinea's, gebruik P en Hx tags daarvoor..
Is een verzameling cijfers verdeelbaar in rijen en kolommen, dan behoort het in een Tabel geplaatst te worden...

Daarna kun je bepaalde stukken die je samen wilt ordenen indelen in een DIV (een 'div' staat voor 'division' een 'onderverdeling' van je pagina)
Met CSS kun je vervolgens die HTML-content vrijwel precies een layout zoals jij dat wilt, mocht je dan tegen problemen oplopen, is het goed je af te vragen waar dan de fout ligt, moet je css-hacks toepassen, of klopt misschien je visuele layout niet geheel met de conceptuele opzet van je pagina zoals je die in de HTML hebt vastgelegd?

[ Voor 3% gewijzigd door RM-rf op 21-01-2005 14:37 ]

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

vrijdag 21 januari 2005 15:34

Acties:

Verwijderd

Topicstarter

RM-rf schreef op vrijdag 21 januari 2005 @ 14:36:
[...]
of klopt misschien je visuele layout niet geheel met de conceptuele opzet van je pagina zoals je die in de HTML hebt vastgelegd?

Ik loop nu tegen het domme probleem dat ik niet goed inzie hoe ik op voorhand een positie moet bepalen van iets dat onbepaald is.

'k ga eens wat spelen met relatieve plaatsingen enzo...