Archief - CSS: Positionering

U

Undeadhunter

Legacy Member

• 7 mrt 2006

• #1

Ik heb dus een opdracht op school gekregen, en voor layout moeten wij compleet met CSS werken. Maar ik zit met een probleem atm.
De bestaande site werkt met tables en mits we deze niet mogen gebruiken om layout te maken zit ik met het probleem als ik dit wil doen:

Code:

<table>
<tr>
<td> blablabla </td> <td> bla bla bla </td> <td> blerdebla </td>
</tr>
<tr>
<td> blablabla </td> <td> bla bla bla </td> <td> blerdebla </td>
</tr>

dus nu moet mooi met css gealigneerd worden
blablabla moet links komen
bla bla bla moet gecentreerd zijn
en blerdebla zou links moeten komen

als ik met <div class="col1"> werk voor alles komen ze allemaal onder elkaar maar wel juist gealigneerd. Hoe kan ik er dus voor zorgen dat ze op dezelfde lijn komen en ook nog mooi gealigneerd zijn?

Ik hoop dat iemand mij kan helpen hiermee

Dank bij voorbaat ^^

o

orez

Legacy Member

• 7 mrt 2006

• #2

lol .... met uw informatie weten we echt veel... en ik hoop dat die table dient voor tabulaire date... je moet dat trouwens niet in een div steken, maar uw td's verschillend gaan opmaken simpelweg a la

td.col1 {
width: 100px;
text-align:left;
}

...

U

Undeadhunter

Legacy Member

• 7 mrt 2006

• #3

zal het proberen uit te leggen
http://webdesign.rega.khleuven.be/500431/img.jpg
zo moet het eruit zien, maar dit is gemaakt met tables

maar nu mag ik geen tables gebruiken. Hoe kan ik dit dan krijgen zonder dat ik een table gebruik, dus met css?

s

sys4096

Legacy Member

• 7 mrt 2006

• #4

Het probleem lijkt me dat hij DIV's moet gebruiken voor zijn opdracht en geen tables zoals het eerst was uitgewerkt.

Het probleem is dat hij dus nu 3 DIV's heeft
<div id="een">
dkskd
</div>
<div id="twee">
dfzkdsf
</div>
<div id="drie">
balabblaa
</div>

En dat die natuurlijk onder elkaar komen te staan, vermits een DIV een block element is.

Aan de topic starter : Bekijk de FLOAT (left) functie eens, dit zal al een deel van je probleem oplossen.

Je kan het ook met display:inline; oplossen en er zullen er nog wel een paar zijn.

o

orez

Legacy Member

• 7 mrt 2006

• #5

hetgeen jij toont op die afbeelding is zuivere tabulaire data... dus daarvoor geen divs gebruiken maar een table.

Q

Quilombo

Legacy Member

• 7 mrt 2006

• #6

offtopic: welke reeks zit ge?

U

Undeadhunter

Legacy Member

• 7 mrt 2006

• #7

1TI 7b ^^

U

Undeadhunter

Legacy Member

• 7 mrt 2006

• #8

orez zei:

hetgeen jij toont op die afbeelding is zuivere tabulaire data... dus daarvoor geen divs gebruiken maar een table.

Klik om te vergroten...

dus das enkel mogenlijk met tables?
nu ja is vragen aan lector en dan zullen we zien of het mag of niet ^^

t

td2004

Legacy Member

• 7 mrt 2006

• #9

orez zei:

hetgeen jij toont op die afbeelding is zuivere tabulaire data... dus daarvoor geen divs gebruiken maar een table.

Klik om te vergroten...

Juist.


Anyway tgaat altijd zonder maar tis onozel.

Code:

<div class="left">links</h1></div><div class="middle">center</div><div class="right">rechts</div>
<div class="left">links</h1></div><div class="middle">center</div><div class="right">rechts</div>
<div class="left">links</h1></div><div class="middle">center</div><div class="right">rechts</div>

Code:

<style>
div.left{
float:left;
width:33%;
clear:left;
}
div.middle{
float:left;
width:33%;
}
div.right{
float:left;
width:33%;
}
</style>

R

RpR

Legacy Member

• 7 mrt 2006

• #10

Kan met divs.
Er is zelf een speciale div code die een tabel emmuleert maar volgens de richtlijnen moet dit eigelijk in een tabel.

R

Rvl

Legacy Member

• 9 mrt 2006

• #11

als je dan toch met divs werkt zou ik de volgende structuur gebruiken.

Code:

<div class="list">
 <div></div>
 <div></div>
 <div></div>
</div>

Code:

.list {
clear:left;
width: hier hoe breed het geheel moet zijn in px of %
}
.list div {
width: 33%;
float: left;
}

Eigenlijk bijna dezelfde code als td2004 gebruikt maar dan nog met een div er omheen. Lijkt me gewoon wa properder

En als ze u zoiets me css2 positioning late make lijkt het me redelijk dom, want dit is zoals orez zegt zuivere content voor in tables te steken

l

l4mp

Legacy Member

• 11 mrt 2006

• #12

doe het zoals ik het hier heb gedaan:

http://webdesign.rega.khleuven.be/500605/oefeningen_html/kleurenselector/kleuren.css

best easy oefeningen ze