[CSS] Positioning-methode correct?

woensdag 14 juli 2010 17:07

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Hey,

Mijn layout is nu als volgt:

*knip* Maak hier even een jpeg of png van

Dit is net wat ik wou, maar ik vroeg me af of ik het op een correcte manier heb geïmplementeerd? De CSS validator zegt van wel, maar wat vinden jullie ervan? Slordige CSS code of is dit OK?

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<title>Untitled Document</title>
</head>

<body>
<div id="container">
<div id="logo">
<img src="ankylo_logo.gif" alt="logo ankylo" />
</div>
<div id="languages">
Nederlands | Engels
</div>
<div id="home-block">test</div>
<div id="info-block">test</div>
<div id="prices-block">test</div>
<div id="contact-block">test</div>
<div id="footer">ankylo | info@ankylo.be | +32495842704</div>
</div>

</body>
</html>

Cascading Stylesheet:

#container {
    width: 880px;
    margin: auto;
    position: relative;
}

#logo {
    position: absolute;
    width: 600px;
    height: 130px;
}

#languages {
    position: absolute;
    left: 600px;
    width: 290px;
    height: 130px;
    text-align: right;
}

#home-block {
    position: absolute;
    top: 130px;
    width: 440px;
    height: 140px;
    background: #e7e8d9;
}

#info-block {
    position: absolute;
    top: 130px;
    left: 450px;
    width: 440px;
    height: 140px;
    background: #e7e8d9;
}

#prices-block {
    position: absolute;
    top: 280px;
    width: 440px;
    height: 150px;
    background: #e7e8d9;
}

#contact-block {
    position: absolute;
    top: 280px;
    left: 450px;
    width: 440px;
    height: 150px;
    background: #e7e8d9;
}

#footer {
    position: absolute;
    top: 450px;
    width: 900px;
    text-align: center;
}

Merci!

naf10

[ Voor 1% gewijzigd door BtM909 op 15-07-2010 17:23 ]

woensdag 14 juli 2010 17:11

Acties:

0 Henk 'm!

418O2

Ik zou beginnen met al die blokken een class te geven, of ze iig bijelkaar te zetten als ze dezelfde eigenschappen hebben.

En waarom heeft de container een position relative?

woensdag 14 juli 2010 17:14

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

418O2 schreef op woensdag 14 juli 2010 @ 17:11:
Ik zou beginnen met al die blokken een class te geven, of ze iig bijelkaar te zetten als ze dezelfde eigenschappen hebben.

En waarom heeft de container een position relative?

Blokken hebben niet dezelfde eigenschappen. Kan er geen class van maken, want de twee rechtste blokken moeten al 440px naar rechts gaan. De onderste moeten weer lager staan. Container met position relative zorgt ervoor dat alles relatief gepositioneerd wordt ten opzichte van de container. Hierdoor kan ik absoluut positioneren t.o.v. de container.

[ Voor 11% gewijzigd door Verwijderd op 14-07-2010 17:28 ]

woensdag 14 juli 2010 17:15

Acties:

0 Henk 'm!

Sebazzz

3dp

418O2 schreef op woensdag 14 juli 2010 @ 17:11:
En waarom heeft de container een position relative?

Absoluut gepositioneerde elementen worden gepositioneerd tegenover het eerste element dat geen position: static heeft.

[Te koop: 3D printers] [Website] Agile tools: [Return: retrospectives] [Pokertime: planning poker]

woensdag 14 juli 2010 17:16

Acties:

0 Henk 'm!

Matis

Rubber Rocket

Ik probeer CSS id en/of class altijd zonder score te schrijven, maar in lowerCamelCase. Verder zou ik het absoluut positioneren van divjes vermijden en footers een clear: both geven.

If money talks then I'm a mime
If time is money then I'm out of time

woensdag 14 juli 2010 17:17

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Sebazzz schreef op woensdag 14 juli 2010 @ 17:15:
[...]

Absoluut gepositioneerde elementen worden gepositioneerd tegenover het eerste element dat geen position: static heeft.

Idd, was toch geen fout. Man die positioning kan verwarrend zijn

woensdag 14 juli 2010 17:18

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Matis schreef op woensdag 14 juli 2010 @ 17:16:
Ik probeer CSS id en/of class altijd zonder score te schrijven, maar in lowerCamelCase. Verder zou ik het absoluut positioneren van divjes vermijden en footers een clear: both geven.

Relative positioning dan gebruiken? Of eerder overal floats?

woensdag 14 juli 2010 17:30

Acties:

0 Henk 'm!

ReseTTim

Chocolate addicted

Verwijderd schreef op woensdag 14 juli 2010 @ 17:18:
Relative positioning dan gebruiken? Of eerder overal floats?

position is standaard 'relative', dit hoef je dus niet in te stellen. mijn voorkeur gaat uit naar float left en right te gebruiken en clear:both onderaan te gebruiken.

voorbeeld css

Cascading Stylesheet:

 
#home-block, #info-block, #prices-block, #contact-block {
    float: left;
    top: 130px;
    width: 440px;
    height: 140px;
    background: #e7e8d9;
}

ik denk dat hiermee al je blocks gefixed zijn

Mijn profiel - Te koop: Overzicht van spullen..

woensdag 14 juli 2010 17:33

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

ReseTTim schreef op woensdag 14 juli 2010 @ 17:30:
[...]

position is standaard 'relative', dit hoef je dus niet in te stellen. mijn voorkeur gaat uit naar float left en right te gebruiken en clear:both onderaan te gebruiken.

voorbeeld css
Cascading Stylesheet:
1
2
3
4
5
6
7
8
 
#home-block, #info-block, #prices-block, #contact-block {
    float: left;
    top: 130px;
    width: 440px;
    height: 140px;
    background: #e7e8d9;
}
ik denk dat hiermee al je blocks gefixed zijn

Is position niet standaard 'static' ? Zal het eens uitproberen.

woensdag 14 juli 2010 17:35

Acties:

0 Henk 'm!

ReseTTim

Chocolate addicted

Verwijderd schreef op woensdag 14 juli 2010 @ 17:33:
Is position niet standaard 'static' ? Zal het eens uitproberen.

position takes four values: static, relative, absolute, and fixed. static is the default value; for any other value you have to apply a CSS declaration.

true

, afijn ik voer het nooit in, alleen als ik echt position absolute nodig heb..

http://www.barelyfitz.com...training/css/positioning/
kom deze net tegen.. misschien heb je hier wat aan..

[ Voor 12% gewijzigd door ReseTTim op 14-07-2010 17:39 ]

Mijn profiel - Te koop: Overzicht van spullen..

woensdag 14 juli 2010 17:39

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

ReseTTim schreef op woensdag 14 juli 2010 @ 17:35:
[...]

[...]

true , afijn ik voer het nooit in, alleen als ik echt position absolute nodig heb..

http://www.barelyfitz.com...training/css/positioning/
kom deze net tegen.. misschien heb je hier wat aan..

Was ik net aan het doornemen

. Toch bedankt!

woensdag 14 juli 2010 17:47

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

ReseTTim schreef op woensdag 14 juli 2010 @ 17:30:
[...]

position is standaard 'relative', dit hoef je dus niet in te stellen. mijn voorkeur gaat uit naar float left en right te gebruiken en clear:both onderaan te gebruiken.

voorbeeld css
Cascading Stylesheet:
1
2
3
4
5
6
7
8
 
#home-block, #info-block, #prices-block, #contact-block {
    float: left;
    top: 130px;
    width: 440px;
    height: 140px;
    background: #e7e8d9;
}
ik denk dat hiermee al je blocks gefixed zijn

Worked! Mercikes. Veel duidelijkere code nu. I thank you!

Pagina: 1

Reageer

Onderwerpen