[CSS & Div ] naast elkaar. - Softwareontwikkeling

woensdag 27 juli 2005 12:27

Acties:

Topicstarter

ik heb een klein probleempje.
waarschijnlijk wel weer heel gemakkelijk op te lossen maar kom er even niet uit.

Wat ik dus wil is een header maken met 3 Divs.
elk stuk krijgt dan een width van 33
alleen nu vraag ik me af of hoe je divs naast elkaar krijgt.
hij zet ze bij mij automatisch onder elkaar.

Even snel een voorbeeld gemaakt wat ik doet met de code

code:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#header {
    width:33%;
    height:20%;
    border-bottom:1px solid #cccccc;
    }
    
#mid {
    width:33%;
    height:20%;
    border-bottom:1px solid #cccccc;
    }
    
#righ {
    width:33%;
    height:20%;
    border-bottom:1px solid #cccccc;
    }
</style>
<body background="bk225.gif">

<div id="header"> Gewoon wat texts </div>
<div id="mid"> en weer wat andere text. </div>
<div id="righ"> En weer iets anderrs dan... </div>

</body>

ff wat overbodigen dingen eruit geflikkerd
bijvoorbeeld: HTML tag

woensdag 27 juli 2005 12:29

Acties:

Haan

dotnetter

Position:"absolute" misschien?

edit:
Float dus

[ Voor 74% gewijzigd door Haan op 27-07-2005 12:38 ]

Kater? Eerst water, de rest komt later

woensdag 27 juli 2005 12:31

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

O.a. Float kan dit "oplossen":

Cascading Stylesheet:

1
2
3

float : left;
/* of anders */
float : right;

Denk er wel aan dat je het eerstvolgende element er onder misschien een "clear:both" moet geven ofzo.

Of je display (die voor een Div standaard "Block" is) instellen op "Inline":

Cascading Stylesheet:

1	display : inline

En anders een Span in plaats van een DIV gebruiken.

[ Voor 138% gewijzigd door RobIII op 27-07-2005 12:34 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 27 juli 2005 12:31

Acties:

Verwijderd

float

woensdag 27 juli 2005 12:33

Acties:

crisp

Devver

Pixelated

display:inline betekent effectief dat je geen dimensies meer op kan geven, en support voor inline-block laat nog erg te wensen over. De enige goede optie hier is gebruik maken van de float-property

Intentionally left blank

woensdag 27 juli 2005 12:34

Acties:

Vecodo

Topicstarter

Haan schreef op woensdag 27 juli 2005 @ 12:29:
Position:"absolute" misschien?

ja zo is dit inderdaad mogelijk

is er overigens geen andere manier ? dat hij ze automatisch naast elkaar zet.
( als je alleen position:absolute; zet dan zet hij ze allemaal automatisch over elkaar )

woensdag 27 juli 2005 12:35

Acties:

ZeilDude

Voor meer uitleg over de float: http://www.handleidinghtm...nten/css-elementen06.html .

woensdag 27 juli 2005 12:35

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

roy2001 schreef op woensdag 27 juli 2005 @ 12:34:
[...]
ja zo is dit inderdaad mogelijk

is er overigens geen andere manier ? dat hij ze automatisch naast elkaar zet.
( als je alleen position:absolute; zet dan zet hij ze allemaal automatisch over elkaar )

Je had zeker onze replies nog niet gezien?

crisp schreef op woensdag 27 juli 2005 @ 12:33:
display:inline betekent effectief dat je geen dimensies meer op kan geven, en support voor inline-block laat nog erg te wensen over. De enige goede optie hier is gebruik maken van de float-property

True true

* RobIII is nog niet zo lang wakker

[ Voor 33% gewijzigd door RobIII op 27-07-2005 12:35 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 27 juli 2005 12:46

Acties:

Vecodo

Topicstarter

RobIII schreef op woensdag 27 juli 2005 @ 12:35:
[...]

Je had zeker onze replies nog niet gezien?

[...]

True true
* RobIII is nog niet zo lang wakker

nee inderdaad nog niet gezien

toen ik dat bericht schreef.
hardstikke bedankt , ik ga dus wat research doen voor het element Float.

woensdag 27 juli 2005 12:59

Acties:

ZeilDude

Als je consequent met stylesheets wilt werken, moet je deze regel ook aanpassen:

code:

1	<body background="bk225.gif">

Verder zou ik de 3 divs nog binnen een andere div zetten.

Al met al krijg je dan zo iets:

code:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    body {
        padding: 0;
        margin: 0;
        border: 0;
        background: url(bk225.gif) silver no-repeat center;
    }

    p {
        padding: 0;
        margin: 0;
        border: 0;
    }

    #header {
        width:33%;
        height:100%;
        padding: 0;
        margin: 0;
        border-bottom:1px solid #cccccc;
        background-color: green;
        float:left;
    }
        
    #mid {
        width:33%;
        height:100%;
        padding: 0;
        margin: 0;
        border-bottom:1px solid #cccccc;
        background-color: red;
        float:left;
    }
        
    #righ {
        width:33%;
        height:100%;
        padding: 0;
        margin: 0;
        border-bottom:1px solid #cccccc;
        background-color: yellow;
        float:left;
    }

    #main {
        width: 100%;
        height:20%;
        padding: 0;
        margin: 0;
        border: 0;
    }
    </style>
</head>
<body>
    <div id="main">
        <div id="header"> Gewoon wat texts </div>
        <div id="mid"> en weer wat andere text. </div>
        <div id="righ"> En weer iets anders dan... </div>
    </div>
    <p>Hierachteraan kan weer een normale paragraaf komen</p>
</body>

Je ziet nu overigens wel aan de witruimte rechts dat 3 x 100% + 6 x 1px nog geen 100% maakt!

[ Voor 44% gewijzigd door ZeilDude op 27-07-2005 13:07 . Reden: typo's ]

woensdag 27 juli 2005 13:08

Acties:

Vecodo

Topicstarter

ZeilDude schreef op woensdag 27 juli 2005 @ 12:59:
Als je consequent met stylesheets wilt werken, moet je deze regel ook aanpassen:
Verder zou ik de 3 divs nog binnen een andere div zetten.
Je ziet nu overigens wel aan de witruimte rechts dat 3 x 100% + 6 x 1px nog geen 100% maakt!

kijk eens aan, Dank je wel

. voorbeelden maken het altijd een stuk makkelijker.
maar dan nog een vraagje , hoe zorg je er dan voor dat 3 divs ( floated ) bij elkaar 100% zijn ?

[ Voor 6% gewijzigd door Vecodo op 27-07-2005 13:14 ]

woensdag 27 juli 2005 13:22

Acties:

ZeilDude

Ik heb hier 2 voorbeelden voor je:
1. http://glish.com/css/2.asp
2. http://www.pmob.co.uk/temp/new3colfluid/3col_3.htm

Voorbeeld 1 werkt goed in FireFox en Opera, maar niet in IE.
Voorbeeld 2 werkt goed in alle 3.

Ik zou zeggen, bestudeer ze, pas je voorbeeldcode aan en plaats deze code hier ter lering voor anderen.

Zoektermen voor Google waren: "css 3 columns 33%".

[ Voor 10% gewijzigd door ZeilDude op 27-07-2005 13:23 ]

dinsdag 16 augustus 2005 19:50

Acties:

Verwijderd

Het is nog niet een heel oud topic, dus ik geef het een klein schopje.
Ik doe namelijk hetzelfde, maar dan anders

Ik heb ook drie columns, maar de middelste is 800 pixels breed, en de buitenste twee moeten de rest opvullen.
Ik krijg ze dus met float niet naast elkaar...

Mijn code:

code:

<body>
<div id="container">
  <div class="leftcolumn" id="leftcolumn">Content for id "leftcolumn" Goes Here</div>
  <div class=centre id="centre">
    <div class=menu id="menu">Content for id "menu" Goes Here</div>
    <div class=content id="content">Content for id "content" Goes Here</div>
    <div class=footer id="footer">Content for id "footer" Goes Here</div>
 </div>
  <div class=rightcolumn id="rightcolumn">Content for id "rightcolumn" Goes Here</div>
</div>
</body>
</html>

En de css:

code:

.leftcolumn {
    background-color: #993300;
    float: left;
    width: auto;
}
.centre {
    width: 800px;
    float: left;
}
    .menu {
        background-color: #993300;
    }
    .content {
        background-color: #FF6600;
    }
    .footer {
        background-color: #993300;
    }
.rightcolumn {
    background-color: #993300;
    float: left;
    width: auto;
}

Een duwtje in de goede richting zou welkom zijn, het is pas mijn derde uur css

edit: btw, het is dreamweaver code

[ Voor 15% gewijzigd door Verwijderd op 16-08-2005 19:51 ]

dinsdag 16 augustus 2005 20:13

Acties:

Verwijderd

Bekijk eens het volgende three column voorbeeld.
Of zoek met Google op: css 3 rows center fixed.

dinsdag 16 augustus 2005 20:32

Acties:

Verwijderd

Hmzz, dat voorbeeld krijg ik wel vrij moeilijk gevisualiseerd.
Denk je dat je me dat in tekst kan uitleggen?

dinsdag 16 augustus 2005 20:58

Acties:

Verwijderd

Verwijderd schreef op dinsdag 16 augustus 2005 @ 20:32:
Denk je dat je me dat in tekst kan uitleggen?

Okee, ik zal een poging wagen!

• Deel het scherm op in 2 vlakken met ieder 50% width: "links" dat links uitlijnt en "rechts" dat rechts uitlijnt.
• Plaats in vlak "links" een vlak "linkerkolom" met een margin-right van 400px (=800px/2) en lijn het links uit.
• Plaats in vlak "rechts" een vlak "rechterkolom" met een margin-left van 400px (=800px/2) en lijn het rechts uit.
• Plaats in vlak "links" een vlak "middenkolom" van 800px width, dat rechts uitlijnt en een margin-right kent van -400px.

dinsdag 16 augustus 2005 21:15

Acties:

Verwijderd

Dus het laatste vlak in links valt over het vlak in rechts heen.
Nu begrijp ik het idee, dat kan ik ook maken

dinsdag 16 augustus 2005 22:09

Acties:

Verwijderd

hmz, ik ben al een eindje verder, alleen gaan ze niet netjes naast elkaar staan.
de huidige code:

code:

<body>
<div class=container id="container">
  <div class="left" id="left">
      <div class="middle" id="middle">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div>
      <div class="leftcolumn" id="leftcolumn">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
  </div>
  <div class="right" id="right"></div>
      <div class="rightcolumn" id="rightcolumn">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
  </div>
</div>
</body>

en de css:

code:

.left {
    float: left;
    width: 50%;
    height: 100%;
}
.right {
    float: right;
    width: 50%;
    height: 100%;
}
.leftcolumn {
    margin-right: 400px;
    float: left;
    background-color: #993300;
    height: 100%;
}
.rightcolumn {
    float: right;
    margin-left: 400px;
    background-color: #993300;
    height: 100%;
}
.middle {
    float: right;
    width: 800px;
    margin-right: -400px;
    background-color: #FF6600;
}
.container {
    height: 100%;
    width: 100%;
}

Het resultaat is nu dat de middenkolom goed is.
De linkerkolom heeft de juiste breedte maar staat 1 tekstregel lager dan de middenkolom (wel goed links uitgelijnd)
De rechterkolom is 400 pixels breed, staat rechts uigelijnd, maar precies 1 regel lager dan de meest linker kolom.
Best nog moeilijk, dat css

woensdag 17 augustus 2005 00:18

Acties:

Verwijderd

class en id's worden wel een beetje dubbelop niet ?

woensdag 17 augustus 2005 01:30

Acties:

ZeilDude

Verwijderd schreef op woensdag 17 augustus 2005 @ 00:18:
class en id's worden wel een beetje dubbelop niet ?

Lijkt me ook. Ik geloof dat het volgende de regels nog wel valid is, maar logisch is het niet. Stel dat je in de class-selector iet heel anders definieert dan in de id-selector, welke waarde pakt ie dan? Juist, de waarde die als laatste in je stijbladen(en) is gedefinieerd. Maar ja, daar lees je in de snelheid tijdens het onderhoud aan je documenten natuurlijk overheen, zeker als je je document pas weer na een paar maanden bewerkt.
Dus... gebruik id's voor uniek voorkomende elementen en classes voor vaker te gebruiken elementen. Zo zie je aan een element ook meteen of dit vaker voorkomt. Het herhaald gebruik van een id met dezelfde naam is natuurlijk niet toegestaan, maar deze haalt een html-validator er mooi voor je uit!

woensdag 17 augustus 2005 23:09

Acties:

Verwijderd

ZeilDude schreef op woensdag 17 augustus 2005 @ 01:30:
[...]

Lijkt me ook. Ik geloof dat het volgende de regels nog wel valid is, maar logisch is het niet. Stel dat je in de class-selector iet heel anders definieert dan in de id-selector, welke waarde pakt ie dan? Juist, de waarde die als laatste in je stijbladen(en) is gedefinieerd. Maar ja, daar lees je in de snelheid tijdens het onderhoud aan je documenten natuurlijk overheen, zeker als je je document pas weer na een paar maanden bewerkt.
Dus... gebruik id's voor uniek voorkomende elementen en classes voor vaker te gebruiken elementen. Zo zie je aan een element ook meteen of dit vaker voorkomt. Het herhaald gebruik van een id met dezelfde naam is natuurlijk niet toegestaan, maar deze haalt een html-validator er mooi voor je uit!

ik zal het even veranderen

Pagina: 1

Reageer