ik heb een klein probleem ik wil een div centeren maar de div heeft gewoon een bg kleur gekregen en geen afbeelding hoe doe ik dit het beste?

In css doe je dit zo:

Code:

.naamvandediv {
margin: 0 auto;
}

Code:

.naamvandediv {
position: relative;
margin: 0 auto;
width: 750px; // bijv
background: #kleur url(images/naambg.gif); // evt. positionering en hor/vert. repeat
}

Want je zei ook iets over een afbeelding? Het lijkt mij dat je die als background zo kunt instellen, of gebruik gewoon een image in de div layer.

Het was zonder afbeelding zei hij:

Origineel gepost door Tim De Smedt

de div heeft gewoon een bg kleur gekregen en geen afbeelding

Ja, maar het moet juist wél uit zijn zinsopbouw op te maken. Als de TS zijn probleem iets wil verduidelijken?

ik heb het gevonden, ook dankzij de codes hier gepost allemaal bedankt

Origineel gepost door Bram Lodens

In css doe je dit zo:

Code:

.naamvandediv {
margin: 0 auto;
}

Zorg ervoor dat die div ook een width heeft anders werkt het niet.

Origineel gepost door Sander Boverhof

Code:

.naamvandediv {
position: relative;
margin: 0 auto;
width: 750px; // bijv
background: #kleur url(images/naambg.gif); // evt. positionering en hor/vert. repeat
}

Want je zei ook iets over een afbeelding? Het lijkt mij dat je die als background zo kunt instellen, of gebruik gewoon een image in de div layer.

position: relative vermelden is niet nodig, dit is namelijk standaard het geval. toch even vermelden...

Bram: standaard is position static, niet relative. Even je huiswerk doen voor je mensen verbetert.

Er is nog een tweede optie, maar deze heeft een 2 regels meer nodig:

Code:

.naamvandiv {
width: 700px;
position: absolute;
left: 50%;
margin-left: -350px; // De helft van 700px
}

En deze kan misschien ook wat onhandiger zijn ivm position: absolute;

ik gebruik altijd:

margin-left:auto;
margin-right:auto;

Origineel gepost door Gijs Stegehuis

ik gebruik altijd:

gebruik dan gewoon margin: 0 auto;

1 lijntje minder code --> minder bytes --> minder groot css bestand te downloaden.

relative vermelden is idd niet nodig, ook weer bytes verspilling (optimalisatie mensen!)

en uw div moet verplicht een width bevatten ! anders werkt het niet

position: absolute, zoveel mogelijk vermijden... heeft redelijk wa neveneffecten, is wel handig als je zowel verticaal als horizontaal wilt centreren, anders zeker niet gebruiken.

En Bram jij bent idd verkeerd. Static is de initial waarde:

'position' Value: static | relative | absolute | fixed | inherit
Initial: static
Applies to: all elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: as specified

static: The box is a normal box, laid out according to the normal flow. The 'top', 'right', 'bottom', and 'left' properties do not apply.

relative: The box's position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset. The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

absolute: The box's position (and possibly size) is specified with the 'top', 'right', 'bottom', and 'left' properties. These properties specify offsets with respect to the box's containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins.

fixed: The box's position is calculated according to the 'absolute' model, but in addition, the box is fixed with respect to some reference. As with the 'absolute' model, the box's margins do not collapse with any other margins. In the case of handheld, projection, screen, tty, and tv media types, the box is fixed with respect to the viewport and doesn't move when scrolled. In the case of the print media type, the box is rendered on every page, and is fixed with respect to the page box, even if the page is seen through a viewport (in the case of a print-preview, for example). For other media types, the presentation is undefined. Authors may wish to specify 'fixed' in a media-dependent way. For instance, an author may want a box to remain at the top of the viewport on the screen, but not at the top of each printed page. The two specifications may be separated by using an @media rule, as in: Example(s):

@media screen {
h1#first { position: fixed }
}

@media print {
h1#first { position: static }
}

UAs must not paginate the content of fixed boxes. Note that UAs may print invisible content in other ways. See "Content outside the page box" in chapter 13.