[DHTML/CSS]Hoe pagina in 3 opsplitsen zonder frames? - Softwareontwikkeling

donderdag 10 juni 2004 16:32

Acties:

Verwijderd

Topicstarter

Ik ben dus een beginnende website bouwer en ik wou graag mijn webspace in 3 gedeelte opsplitsen, namelijk: leeg, tekst, leeg. Waardoor je links en rechts van de pagina alleen de achtergrond ziet en in het midden de tekst en dergelijke. Nu wil ik dat NIET doen doormiddel van frames omdat ik dat maar irritante dingen vind waar ik niet goed mee om kan gaan. Nu wou ik dit graag met DHTML, CSS of misschien gewoon HMTL doen. Maar hoe kan ik dit het beste doen?
Hieronder een voorbeeld plaatje:

Afbeeldingslocatie: http://members.home.nl/lheijnen/voorbeeld.jpg

Afbeeldingslocatie: http://members.home.nl/lheijnen/voorbeeld.jpg

Alvast bedankt!

donderdag 10 juni 2004 16:35

Acties:

Cruz

code:

<HTML>
<BODY>
<CENTER>
<TABLE WIDTH="33%">
<TR>
<TD>
inhoud
</TD>
</TR>
</TABLE
</CENTER>
</BODY>
</HTML>

donderdag 10 juni 2004 16:36

Acties:

LauPro

Prof Mierenneuke®

http://www.w3.org/2002/03/csslayout-howto

Inkoopacties - HENK terug! - Megabit
It is a war here, so be a general!

donderdag 10 juni 2004 16:37

Acties:

Verwijderd

Topicstarter

Dat is inderdaad wel een goede oplossing, alleen dan is de hele pagina 1 grote tabel is dat niet wat lastig? Zijn er geen betere (en moeilijkere) manieren?

donderdag 10 juni 2004 16:39

Acties:

Verwijderd

Topicstarter

LauPro schreef op 10 juni 2004 @ 16:36:
http://www.w3.org/2002/03/csslayout-howto

Bedankt, dat is wat ik ongeveer zocht

donderdag 10 juni 2004 16:42

Acties:

Amras

Even snel geklopt:

HTML:

<html>
  <head>
    <style type="text/css">
        #content {
            position: absolute;
            left: 50%;
            width: 750px;
            height: 100px;
            margin-left: -375px;
            background-color: #efefef;
        }
    </style>
  </head>

  <body>
    <div id="content">
      Ik sta in het midden!
    </div>
  </body>
</html>

[ Voor 14% gewijzigd door Amras op 10-06-2004 16:42 ]

donderdag 10 juni 2004 16:59

Acties:

Verwijderd

Topicstarter

Amras schreef op 10 juni 2004 @ 16:42:
Even snel geklopt:

HTML:

<html>
  <head>
    <style type="text/css">
        #content {
            position: absolute;
            left: 50%;
            width: 750px;
            height: 100px;
            margin-left: -375px;
            background-color: #efefef;
        }
    </style>
  </head>

  <body>
    <div id="content">
      Ik sta in het midden!
    </div>
  </body>
</html>

Ok bedankt, maar ik heb hier 2 vraagjes over.

1. Wat defineer je met

code:

1	left: 50%;

2. Wat bereik je met

code:

1	margin-left: -375px;

donderdag 10 juni 2004 17:00

Acties:

PommeFritz

...geen friet

CSS layout techniques, zie rechtsboven.

FireFox - neem het web in eigen hand

donderdag 10 juni 2004 17:11

Acties:

Amras

Verwijderd schreef op 10 juni 2004 @ 16:59:
[...]

Ok bedankt, maar ik heb hier 2 vraagjes over.

1. Wat defineer je met
code:
1
left: 50%;
2. Wat bereik je met
code:
1
margin-left: -375px;

1. Dit zet de linkerkant van de div op 50% van de breedte van de pagina, precies in het midden dus.
2. Omdat je niet de linkerkant van de div in het midden wilt, maar het midden van de div moet je hem nog de helft van de breedte van de div naar links verschuiven.

Klinkt misschien een beetje vaag, maar denk er eens over na.

donderdag 10 juni 2004 17:20

Acties:

CH4OS

It's a kind of magic

http://www.bluerobot.com/web/css/center1.html

Cascading Stylesheet:

body {
    margin:50px 0px; padding:0px;
    text-align:center;
    }
    
#Content {
    width:500px;
    margin:0px auto;
    text-align:left;
    padding:15px;
    border:1px dashed #333;
    background-color:#eee;
    }

En zo doe ik het ook altijd

donderdag 10 juni 2004 17:33

Acties:

Verwijderd

Topicstarter

GJ-tje schreef op 10 juni 2004 @ 17:20:
http://www.bluerobot.com/web/css/center1.html

Cascading Stylesheet:

body {
    margin:50px 0px; padding:0px;
    text-align:center;
    }
    
#Content {
    width:500px;
    margin:0px auto;
    text-align:left;
    padding:15px;
    border:1px dashed #333;
    background-color:#eee;
    }

En zo doe ik het ook altijd

Oke, maar stel nou dat ik links en rechts nog links of banners wil zetten, zou het dan niet handiger zijn om 3 'div' te gebruiken? Welke code kan ik dan het beste toepassen?

donderdag 10 juni 2004 17:34

Acties:

Verwijderd

Topicstarter

PommeFritz schreef op 10 juni 2004 @ 17:00:
CSS layout techniques, zie rechtsboven.

Ik ben bezig met deze aan het ontcijferen, vind de source code erg onoverzichtelijk en snap meestal niet wat ze bedoelen

donderdag 10 juni 2004 17:39

Acties:

CH4OS

It's a kind of magic

Verwijderd schreef op 10 juni 2004 @ 17:33:
[...]

Oke, maar stel nou dat ik links en rechts nog links of banners wil zetten, zou het dan niet handiger zijn om 3 'div' te gebruiken? Welke code kan ik dan het beste toepassen?

Dan maak je toch 3 divs, met een width van 33% en een top-margin van 0?

donderdag 10 juni 2004 17:40

Acties:

Verwijderd

Dan lees je het nog een keer.

En: http://css.maxdesign.com.au/

Pagina: 1

Reageer