Author
Geplaatst op woensdag 11 januari 2006 17:23
Hallo iedereen,

Veel mensen raadde me DIV's aan in plaats van Tables en na wat expirimiteren heb ik het aardig onder de knie. Maar als ik een achtergrond met DIV's maak hoe moet ik die dan centeren?

Hier een voorbeeldje:

Klik!

Alvast bedankt, :D
14coen wijzigde dit bericht op 11-01-2006 17:36 (18%)
Gratis een eigen startpagina - U wilt een eigen website?

 
Geplaatst op woensdag 11 januari 2006 17:25
Ik snap echt niet wat je nou bedoelt. Wees eens wat specifieker, laat een relevant stukje HTML en CSS zien en liefst een linkje naar een pagina waar je dat hebt staan. Dan kunnen we je misschien ook echt helpen.
Twitter - Last.FM
Geplaatst op woensdag 11 januari 2006 17:34
Hier een voorbeeld:

Klik!

Is er geen mogelijkheid om de lijnen te centeren en dan een waarde geven hoeveel pxl er tussen moet zitten?
14coen wijzigde dit bericht op 11-01-2006 17:46 (78%)
Gratis een eigen startpagina - U wilt een eigen website?
Geplaatst op woensdag 11 januari 2006 17:43
Dit is je css zo te zien:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

#rand_links
{
position: absolute;
left: 100px;
top: 0px;
width: 4px;
height: 800px;
background-image:url(images/rand.png);
}
#rand_rechts
{
position: absolute;
left: 900px;
top: 0px;
width: 4px;
height: 800px;
background-image:url(images/rand.png);
}



Als je ruimte ertussen wilt gebruik je margin-left , margin-right ed of gewoon margin

Dan is t mooier om deze ipv met px in % te doen, dan heb je op ong elke res hetzelfde

Wil je btw je text tussen de divs in hebben?
Zoja dan moet je zo doen:
<div id=""></div>
text
<div id=""></div>

Dus niet de 2 divs eerst en dan text
speedydre wijzigde dit bericht op 11-01-2006 17:44 (13%)
Newtech.nl => Xtreme CMS / Webshop / Forum / WebLog systemen
Geplaatst op woensdag 11 januari 2006 17:48
@ Speedydre: Bedankt voor de snelle en goede reactie \:)

Maar maak het uit in welke volgorde je de <div id="naam"></div> tags zet? Zoja, in welke volgorde?
14coen wijzigde dit bericht op 11-01-2006 17:49 (48%)
Gratis een eigen startpagina - U wilt een eigen website?
Geplaatst op woensdag 11 januari 2006 17:50
Zo kan het:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<html>
<head>
<title>Titel</title>
<style type="text/css">
body {
   margin: 0; /* we willen geen margin */
   padding: 0; /* we willen geen padding */
   text-align: center; /* centreert de boel */

div#layout {
   width: ###px; /* de gewenste breedte tussen de 2 lijnen (in mijn voorbeeld borders)*/
   margin: 0 auto; /* blijft hij lief in het midden */
   text-align: left; /* zorgt dat de elementen ná div#layout niet meer centreren */
   border: solid grey; /* kleur + border stijl */
   border-width: 0px 1px; /* border breedte (boven en onder 0px, recht en links 1px) */
   }
</style>
<body>
<div id="layout">
..je website..
</div>
</body>

Divisions zijn geen vervangend iets voor tabellen. Tabellen zijn alleen niet voor de opmaak van een website (zie: layout) bedoeld. Hier zijn onder andere divisions voor gemaakt. Niet alléén divisions dus. Het stylen van deze layout doe je met Cascading Style Sheets, CSS.

Veel succes.

//Het voorbeeld wat speedydre geeft is dus niet de bedoeling.
-Ten eerste omdat je onnodig een division om een img element heen zet.
-Ten tweede dat je, wil je tóch een afbeelding als border (helemaal niets mis mee), velen malen beter een background-image kunt gebruiken. Jij (speedydre) hebt het idee dat je gewoon alles (absolute) moet positioneren vanaf een punt? Dát is dus juist de kracht van goed gebruik van HTML en CSS, de bijna eindeloze mogelijkheden tot layout opmaak.
-En ten derde dat jou layout dus niet gecentreerd blijft in grotere resoluties, enkel even breed met elke keer een zelfde aantal pixels vanaf de linker zijde.
Treador wijzigde dit bericht op 11-01-2006 18:06 (53%)
 
Geplaatst op woensdag 11 januari 2006 18:02
waarom gebruik je 2 afbeeldingen én 2 divs op een plek waar dat niet nodig is?
om borders te maken is het simpele css attribuut 'border' uitgevonden ;)

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

body {
  text-align: center; //om de div te centreren, werkt in elke browser
  margin: 0px;
  padding: 0px;
}
div#wrapper {
  text-align: left; //om de doorwerkende 'text-align: center;' niet te hebben
  border-left: 1px solid black;
  border-right: 1px solid black;
  width: 700px;
  margin: 0px auto 0px auto; //volgorde: top, right, bottom, left
}

#html:
<div id="wrapper">lalalalala</div>

joolee wijzigde dit bericht op 11-01-2006 18:03 (19%)
Computer Technology Services Redhead | Deel je mening over van alles
Geplaatst op woensdag 11 januari 2006 18:59
Ik heb even snel een voorbeeld gemaakt.Werkt in firefox en internet explorer op twee resolutie getest(800*600,1024*768)
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

css:

body                 {
   text-align        : center; //om de div te centreren, werkt in elke    browser
   margin            : 0px;
   padding           : 0px;
}
.maincadre           {
  width              : 708px;
  height             : 1015px;
  padding            : 0;
  margin             : auto auto auto auto;
  position           : relative; 
  border-left        : 1px solid black;
  border-right       : 1px solid black;  
}
  
  


html:
<div class="maincadre">hello</div>

:D
 
Geplaatst op woensdag 11 januari 2006 19:03
Helemaal geweldig, maar waarom geef je als margin "auto auto auto auto" op, als het toch allemaal hetzelfde is, is één keer "auto" meer dan genoeg.

Daarbij is het in de regel "margin: 0 auto;" wat je wil gebruiken, of ipv 0 het gewenste aantal pixels ten opzichte van de bovenkant van het venster (en tevens ook de onderzijde!).

Daarbij wil ik aanvullen dat het hele text-align gebeuren zuiver en alleen voor IE versies lager dan 6 is toegevoegd. Voor browsers als Opera en firefox die wel luisteren naar standaarden is het niet nodig, en ook IE 6 kan zonder de text-align regels.

En bij waardes die 0 zijn hoef je geen eenheid op te geven. 0 appels, 0 peren, 0 pixels of 0% het is allemaal niets en dus gewoon 0.
Portfolio | Rediscover the Web | Reclaim your inbox
Geplaatst op woensdag 11 januari 2006 20:14

quote:

Civil schreef op 11 januari 2006 @ 19:03:
Daarbij is het in de regel "margin: 0 auto;" wat je wil gebruiken, of ipv 0 het gewenste aantal pixels ten opzichte van de bovenkant van het venster (en tevens ook de onderzijde!).
dat wist ik nog niet :) txh ^^

quote:

Daarbij wil ik aanvullen dat het hele text-align gebeuren zuiver en alleen voor IE versies lager dan 6 is toegevoegd. Voor browsers als Opera en firefox die wel luisteren naar standaarden is het niet nodig, en ook IE 6 kan zonder de text-align regels.
er zijn mensen die IE5< gebruiken, ik ken er zelf al 2 |:(

quote:

En bij waardes die 0 zijn hoef je geen eenheid op te geven. 0 appels, 0 peren, 0 pixels of 0% het is allemaal niets en dus gewoon 0.
ik vind een eenheid netter staan maar het is niet nodig :)
Computer Technology Services Redhead | Deel je mening over van alles
Geplaatst op woensdag 11 januari 2006 20:19

quote:

Civil schreef op 11 januari 2006 @ 19:03:
Helemaal geweldig, maar waarom geef je als margin "auto auto auto auto" op, als het toch allemaal hetzelfde is, is één keer "auto" meer dan genoeg.
Ah ik was vergeten hoe je dat moest doen dus deed ik voor de zekerheid maar vier keer auto, maar bedankt :D
 
Geplaatst op woensdag 11 januari 2006 22:43

quote:

14coen schreef op 11 januari 2006 @ 17:23:
Hallo iedereen,

Veel mensen raadde me DIV's aan in plaats van Tables
Die mensen geven dan raad die ze blijkbaar niet kunnen geven, want alleen divs gebruiken is onzin. Zie http://www.rikkertkoppes.com/thoughts/smurf-language

Geplaatst op donderdag 12 januari 2006 16:37

quote:

Die mensen geven dan raad die ze blijkbaar niet kunnen geven, want alleen divs gebruiken is onzin. Zie http://www.rikkertkoppes.com/thoughts/smurf-language
Divs gebruiken is beter dan tables omdat dat gewoonweg veel gemakkelijker is en vele site's gebruiken divs :D
 
Geplaatst op donderdag 12 januari 2006 16:53

quote:

pcdocter schreef op 12 januari 2006 @ 16:37:
[...]


Divs gebruiken is beter dan tables omdat dat gewoonweg veel gemakkelijker is en vele site's gebruiken divs :D

Onzin |:(
Het gebruik van divs kan net zo smerig zijn als een tabelletje. Lees voor de grap het linkje dat Locutus hierboven gaf. Als je dat eens doorleest dan besef je hopelijk dat wat jij hierboven zegt absoluut niet waar is.
Twitter - Last.FM
Techzine > Graphics & Webdesign > DIV's backgrounds centeren

© 2002 - 2010 Techzine ® | Algemene Voorwaarden | Disclaimer | Adverteren RSS

Nieuws artikelen

Actieve Reacties