Toon posts:

centreren van meerdere divs

Pagina: 1
Acties:

donderdag 24 augustus 2006 22:44

Acties:

Verwijderd

Topicstarter
Ik zit zowat de hele dag al te klooien met een div (container) te centreren en de rest moet binnen deze container op een bepaalde positie links daarvan staan. Gegoogled en al, van alles geprobeerd, maar nog niet gelukt. Misschien heeft hier iemand een oplossing voor me ?

De code:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

body {
  background        : url(/templates/pa/images/background.png) 50% 50%;
  background-repeat: repeat-y;
  margin            : 0;
  background-color  : white;
  font-family       : verdana, arial, sans-serif;
  font-size         : 12px;
  color             : white;

}

img {
  border: 0;
}

div.pa {
  margin: 0 auto 0 auto;
  width: 700px;
}

div.hoofd {
  position: fixed;
  text-align: center;
}

div.inhoud {
  position: fixed;
  text-align: left;
  margin: 0;
  top: 255px;
  left: 160x;
  width: 550px;
}

div.menu {
  position: fixed;
  text-align: left;
  margin: 0;
  top: 255px;
  left: 5px;
  width: 150px;
}

div.copyright {
  position: absolute;
  width: 500px;
}


en:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<body>

<DIV class="pa" align="center">

<div class="hoofd">
<img src="/templates/pa/images/pa.png">
</div>

<div class="inhoud">
<?php include ('mainbody.php'); ?>
    <!--<div class="copyright"> -->
        <br><br><br>
        <center><?php include('includes/footer.php'); ?></center>
    <!--</div> -->
</div>

<div align="middle" class="menu">
<?php mosLoadModules ( 'left' ); ?>
<?php mosLoadModules ( 'right' ); ?>
</div>

</DIV>

</body>

vrijdag 25 augustus 2006 00:17

Acties:
  • LionOne
  • Registratie: April 2002
  • Laatst online: 22-12-2025

LionOne

There can be only one

Dan neem ik aan dat de <div align="center"> niet werkt?

Als je het volgende probeert?
Cascading Stylesheet:
1
2
3
4
5
6

div.pa {
  margin: 0 auto 0 auto;
  left:50%;
  width: 700px;
  margin-left:-350px;
}


(en het align attribuut weg haalt)

"The answer to the Great Question Of Life the Universe and Everything... is Forty-two."

vrijdag 25 augustus 2006 00:51

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 01:00

crisp

Devver

Pixelated

Ik heb maar even [code]-tags toegepast; door de highlighting kan je in ieder geval al zien dat align deprecated is en dat "middle" geen bestaande waarde is voor dit attribuut ;)

Intentionally left blank

vrijdag 25 augustus 2006 09:35

Acties:
  • tec
  • Registratie: Juni 2001
  • Laatst online: 17-12-2024

tec

TEC

LionOne schreef op vrijdag 25 augustus 2006 @ 00:17:
Dan neem ik aan dat de <div align="center"> niet werkt?

Als je het volgende probeert?
Cascading Stylesheet:
1
2
3
4
5
6

div.pa {
  margin: 0 auto 0 auto;
  left:50%;
  width: 700px;
  margin-left:-350px;
}


(en het align attribuut weg haalt)
Volgens mij is
Cascading Stylesheet:
1
2
3
4

div.pa {
  margin: 0 auto;
  width: 700px;
}

voldoende.

vrijdag 25 augustus 2006 10:06

Acties:

Verwijderd

Topicstarter
Geen van de twee voorbeelden werkt :? |:(
Dit had ik overigens ook al uitgeprobeerd, ik snap werkelijk niet waar de fout nu zit...

vrijdag 25 augustus 2006 10:09

Acties:
  • tec
  • Registratie: Juni 2001
  • Laatst online: 17-12-2024

tec

TEC

Heb je je doctype goedstaan:

code:
1
2
3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

vrijdag 25 augustus 2006 10:11

Acties:
  • KappuhH
  • Registratie: Augustus 2004
  • Niet online

KappuhH

Als je nu eens rondom al huidige (losse) div's een div heen zet, die geef je align="center" mee en dan zou het probleem volgens mij opgelost zijn.

edit:
* KappuhH moet beter lezen 8)7

[ Voor 13% gewijzigd door KappuhH op 25-08-2006 10:12 ]

vrijdag 25 augustus 2006 10:17

Acties:
  • Compusmurf
  • Registratie: Oktober 2003
  • Laatst online: 16-08-2024

Compusmurf

Gewoon ff in je container div css

left:auto;
right: auto;

De div's in de container zorgen dat deze op position: inherit staan en het werkt.

http://Compusmurf.xs4all.nl

vrijdag 25 augustus 2006 10:18

Acties:

Verwijderd

Topicstarter
tec schreef op vrijdag 25 augustus 2006 @ 10:09:
Heb je je doctype goedstaan:

code:
1
2
3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
Het DOCTYPE staat goed, daar zit het probleem ook niet. Daar had ik overigens al aan gedacht :P

vrijdag 25 augustus 2006 10:20

Acties:
  • _fool
  • Registratie: Augustus 2003
  • Laatst online: 13-02 19:46

_fool

Helemaal zo gek nog niet

Mijn oplossing zou zijn:

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

[...]

div.hoofd {
  margin:0px auto;
  text-align: center;
}

div.inhoud {
  float:left;
  clear:right;
  text-align: left;
  margin: 0;
  padding:255px 0px 0px 160px;
  width: 550px;
}

div.menu {
  float:left;
  clear:right;
  text-align: left;
  margin: 0;
  padding:255px 0px 0px 160px;
  width: 150px;
}

[...]


Zo krijg je een gecentreerde hoofddiv, met daarin onder elkaar 2 divs die links uitgelijnd zijn op 160px van de linkerborder van de hoofd, en 255px in hoogte van elkaar. Of begrijp ik je verkeerd en wil je iets complexers?

[ Voor 7% gewijzigd door _fool op 25-08-2006 10:21 ]

specs

vrijdag 25 augustus 2006 10:22

Acties:

Verwijderd

Topicstarter
Compusmurf schreef op vrijdag 25 augustus 2006 @ 10:17:
Gewoon ff in je container div css

left:auto;
right: auto;

De div's in de container zorgen dat deze op position: inherit staan en het werkt.
Ook dat werkt helaas bij mij niet :?

vrijdag 25 augustus 2006 10:26

Acties:

Verwijderd

Je moet bij je body de text-align op center zetten zo centreeer je die container.

vrijdag 25 augustus 2006 10:32

Acties:
  • tec
  • Registratie: Juni 2001
  • Laatst online: 17-12-2024

tec

TEC

Copy past onderstaande maar. Dat geeft hier een horizontaal gecentreerde rode box zowel in firefox als in internet explorer 6.

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>tmp</title></head>
<style>
div#container {
  margin:0 auto;
  width:600px;
  background-color:red;
  overflow:hidden;
}

div#menu {
  width:150px;
  float:left;
  background-color:blue;
}

div#content {
  width:450px;
  float:left;
  clear:right;
  background-color:yellow;
}

</style>
<body>
<div id="container">

    <div id="menu">
        lorem ipsum
    </div>

    <div id="content">
        lorem ipsum
    </div>

</div>
</body>
</html>

[ Voor 20% gewijzigd door tec op 25-08-2006 10:43 . Reden: code geupdate ]

vrijdag 25 augustus 2006 10:32

Acties:

Verwijderd

Topicstarter
_fool schreef op vrijdag 25 augustus 2006 @ 10:20:
Mijn oplossing zou zijn:

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

[...]

div.hoofd {
  margin:0px auto;
  text-align: center;
}

div.inhoud {
  float:left;
  clear:right;
  text-align: left;
  margin: 0;
  padding:255px 0px 0px 160px;
  width: 550px;
}

div.menu {
  float:left;
  clear:right;
  text-align: left;
  margin: 0;
  padding:255px 0px 0px 160px;
  width: 150px;
}

[...]


Zo krijg je een gecentreerde hoofddiv, met daarin onder elkaar 2 divs die links uitgelijnd zijn op 160px van de linkerborder van de hoofd, en 255px in hoogte van elkaar. Of begrijp ik je verkeerd en wil je iets complexers?
Zie http://www.postadministratie.nl/index.php, maar het is nog niet gelukt :?
Ik wil ze niet onder elkaar, maar het menu en de inhoud naast elkaar.
Dus zegmaar menu op 5px van links en 255px van boven en 150 px breed.
Inhoud op 155px van links, 255px van boven en ongeveer 540 px breed.

[ Voor 11% gewijzigd door Verwijderd op 25-08-2006 10:42 ]

vrijdag 25 augustus 2006 10:43

Acties:
  • _fool
  • Registratie: Augustus 2003
  • Laatst online: 13-02 19:46

_fool

Helemaal zo gek nog niet

Misschien snap ik niet wat de bedoeling is, ik maak ff een voorbeeldje in code, heel onhandig :)

Bedoel je dit:
code:
1
2
3
4
5
6
7
8

 __hoofd___
|  ______  |
| |   a  | |
| |______| |
|  ______  |
| |   b  | |
| |______| |
|__________|

of
code:
1
2
3
4
5

 _____hoofd__________
|  _______  _______   |
| |   a   ||  b    |  |
| |_______||_______|  |
|____________________ |


Ah, je edit maakte het duidelijk, je gaat voor optie B, right?

[ Voor 246% gewijzigd door _fool op 25-08-2006 11:00 ]

specs

vrijdag 25 augustus 2006 10:52

Acties:
  • tec
  • Registratie: Juni 2001
  • Laatst online: 17-12-2024

tec

TEC

Verwijderd schreef op vrijdag 25 augustus 2006 @ 10:32:
[...]


Zie http://www.postadministratie.nl/index.php, maar het is nog niet gelukt :?
Ik wil ze niet onder elkaar, maar het menu en de inhoud naast elkaar.
Dus zegmaar menu op 5px van links en 255px van boven en 150 px breed.
Inhoud op 155px van links, 255px van boven en ongeveer 540 px breed.
Zie mijn post.

vrijdag 25 augustus 2006 10:55

Acties:

Verwijderd

Topicstarter
_fool schreef op vrijdag 25 augustus 2006 @ 10:43:
Misschien snap ik niet wat de bedoeling is, ik maak ff een voorbeeldje in code, heel onhandig :)

Bedoel je dit:
code:
1
2
3
4
5
6
7
8

 __hoofd___
|  ______  |
| |   a  | |
| |______| |
|  ______  |
| |   b  | |
| |______| |
|__________|

of
code:
1
2
3
4
5

 _____hoofd__________
|  _______  _______   |
| |   a   ||  b    |  |
| |_______||_______|  |
|____________________ |


Ah, je edit maakte het duidelijk, je gaat voor optie B, toch?
Optie B ja. :Y

vrijdag 25 augustus 2006 11:05

Acties:
  • _fool
  • Registratie: Augustus 2003
  • Laatst online: 13-02 19:46

_fool

Helemaal zo gek nog niet

Dan moet dit werken (overigens zelfde idee als Tec hierboven, qua centreren)

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

[...]

div.hoofd {
  margin:0px auto;
  text-align: center;
}


div.menu {
  float:left;
  text-align: left;
  margin: 0;
  padding:255px 0px 0px 5px; /* 255px mag kleiner? */
  width: 150px;
}

div.inhoud {
  float:left;
  clear:right;
  text-align: left;
  margin: 0;
  padding:255px 0px 0px 5px; /* 255px mag kleiner? */
  width: 540px;
}


[...]


Dus 1 hoofddiv, die gevuld wordt met twee divs die naar links floaten (eerst menu, dan inhoud). Achter die tweede div mag geen element meer voorkomen (de clear:right) en beide divs hebben een padding van 255px tot het eerste element erboven en 5px tot het element links ervan.

Let wel: dit is niet meer absolute, en dus hoeft die top-padding volgens mij helemaal niet zo groot te zijn. Eerder moest je de hoogte vanaf de bovenkant nemen, nu de relatieve hoogte ten opzichte van het element erboven. Ik neem aan dat je een beetje ruimte wil tussen menu/inhoud en de header erboven? Dan is een top-padding van -zeg- 5px genoeg.

En: ik heb de breedte van je inhoud iets kleiner gemaakt, want de hoofd-div was 700px breed, en de inhoud was 5px(margin)+150px+5px(margin)+550px = 710px breed :)

[ Voor 8% gewijzigd door _fool op 25-08-2006 11:12 ]

specs

vrijdag 25 augustus 2006 11:19

Acties:

Verwijderd

Topicstarter
Ik kom al een beetje in de richting... _/-\o_
Maar ik ben er nog niet helemaal... Zie http://www.postadministratie.nl/index.php

[ Voor 50% gewijzigd door Verwijderd op 25-08-2006 11:19 ]

vrijdag 25 augustus 2006 12:38

Acties:

Verwijderd

Topicstarter
Er blijft wel steeds ruimte tussen het hoofd (de header) van de site en de rest + het menu staat aan de verkeerde kant. Wat een zootje... 8)7

vrijdag 25 augustus 2006 12:45

Acties:
  • _fool
  • Registratie: Augustus 2003
  • Laatst online: 13-02 19:46

_fool

Helemaal zo gek nog niet

Ik zou zowel de hoofd-div als de menu & inhoud-div een hoogte meegeven, kan in pixels of in percentage. En de grote ruimte tussen header en menu komt -zoals ook hierboven gemeld- door de grote top-padding. Zet die eens op 5px of 10px? Dat geeft al een veel duidelijker beeld van waar het misgaat. En: de volgorde van menu en inhoud heeft te maken met de volgorde waarin de div's onder elkaar staan in de code. In de code definieer je nu eerst de inhoud-div, en pas daarna de menu-div. En zo komen ze (van links naar rechts) dus ook te staan.

En een tip: ontwikkel (ook) in firefox en installeer daarvoor de WebDeveloper 1.0.2 extension. Die geeft je de mogelijkheid om heel eenvoudig afmetingen, locaties, styles etcetera van elementen te bekijken. Dat geeft makkelijk inzicht in waar/of het misgaat.

[ Voor 17% gewijzigd door _fool op 25-08-2006 12:47 ]

specs

vrijdag 25 augustus 2006 12:52

Acties:

Verwijderd

Verwijderd schreef op vrijdag 25 augustus 2006 @ 12:38:
Er blijft wel steeds ruimte tussen het hoofd (de header) van de site en de rest + het menu staat aan de verkeerde kant. Wat een zootje... 8)7
Wat je dus wilt is een basic 2 column css layout? (evt. met footer) Even wat googlen zou je toch een heel stuk verder moeten brengen naar wel werkende code.

vrijdag 25 augustus 2006 13:02

Acties:

Verwijderd

Topicstarter
Verwijderd schreef op vrijdag 25 augustus 2006 @ 12:52:
[...]


Wat je dus wilt is een basic 2 column css layout? (evt. met footer) Even wat googlen zou je toch een heel stuk verder moeten brengen naar wel werkende code.
Bedankt voor de link !! Het lukt al een beetje >:) _/-\o_ O-) :Y
Pagina: 1
Reageer

Apple iPhone 17 LG OLED evo G5 Google Pixel 10 Samsung Galaxy S25 Star Wars: Outlaws Nintendo Switch 2 Apple AirPods Pro (2e generatie) Sony PlayStation 5 Pro

Tweakers is onderdeel van DPG Media B.V.
Alle rechten voorbehouden - Auteursrecht © 1998 - 2026 • Hosting door TrueFullstaq