[HTML/CSS] Centreren wil niet. - Softwareontwikkeling

zaterdag 4 december 2004 22:16

Acties:

Topicstarter

Ik heb een pagina gemaakt waarin een divje in een divje staat.
Daarin moet de data netjes gecentreerd worden, maar dat wordt het enkel in IE, niet in FF

Ik heb overlegd met de andere admins van PHPhulp.nl maar ook samen kwamen we er niet uit,
het is een heel raar probleem ...
Daarom ben ik naar hier gekomen om hier hopelijk een oplossing te vinden

Zowel de HTML als CSS pagina zijn door de validator gegaan en valid bevonden, dus ook dat is het niet.

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Titeltje</title>
<link rel="stylesheet" href="std.css" media="screen">
</head>

<body>
<div id="center">

<!-- Headerimage -->
[img]"header.png"[/img]

<!-- Marquee shoutbox -->
<div id="shoutbox">Blaat</div>

</div>
</body>

</html>

code:

body {
background-color:#F0F0F0;
/*text-align:center;*/ }

#center {
text-align:center; }

#shoutbox {
background-image:url(marquee.png);
background-repeat:no-repeat;
width:750px; }

Wat is er nu mis mee?
Je kan de pagina hier bekijken.

Edit: Zoals je kunt zien heb ik ookal 'text-align:center;' in de body geprobeerd, maar dat gaf hetzelfde resultaat

[ Voor 16% gewijzigd door SH4D3H op 04-12-2004 22:17 ]

zaterdag 4 december 2004 22:29

Acties:

Reveller

Hopla!

Ik begrijp je probleem niet - dit is een screenshot van FF 1.0 en Blaat staat bij mij gewoon gecentreerd...

Afbeeldingslocatie: http://www.odisys.net/images/center.gif

Afbeeldingslocatie: http://www.odisys.net/images/center.gif

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

zondag 5 december 2004 10:48

Acties:

MarkvE

Dit had je ook al gewoon via de search kunnen vinden, deze vraag is al zo vaak voorbij gekomen...

Vormkracht10

zondag 5 december 2004 11:03

Acties:

SH4D3H

Topicstarter

Ik heb het iig niet gevonden

Mja, je kan niet alles hebben

zondag 5 december 2004 11:17

Acties:

Grijze Vos

Ontzettend basic dit.

Overigens, valideren heeft echt geen ene reet te maken met rendering.

Op zoek naar een nieuwe collega, .NET webdev, voornamelijk productontwikkeling. DM voor meer info

zondag 5 december 2004 11:48

Acties:

SH4D3H

Topicstarter

Nee, ik dacht dat daar de fout zat, aangezien het in IE wel werkte en in FF niet.
Mss had ik een IE only code gebruikt dacht ik

Maar dat was dus niet het geval

Verticaal centreren wil ook niet, ik heb een pagina erover gevonden hier.
Maar dat werkt niet, dan ben ik gelijk m'n horizontale centrering kwijt, iemand een idee?

Ik heb dus die <div id="shoutbox">
En deze css code erbij :

code:

#shoutbox {
background-image:url(marquee.png);
background-repeat:no-repeat;
width:750px;
margin:auto;
height:75px;
display:table-cell; vertical-align: middle; position: static; }

offtopic:
En nee, ik ben zeker geen noob

Ik werkte hiervoor altijd me tabellen totdat een mede admin van PHPhulp.nl me hierop wees.
Lees en huiver

[ Voor 4% gewijzigd door SH4D3H op 05-12-2004 11:49 ]

zondag 5 december 2004 11:56

Acties:

Luxx

Hijs nu het zeil gezwind...

Firefox en opera hanteren teskt-align (zoals het hoort) alleen op tekst, er stond dus nergens dat die header gecentreerd hoort te staan. Als je de margins op auto zet, wordt de overgebleven ruimte evenredig verdeelt..

HYEHEHEHEEHHEEHee, hier had iets zinnigs kunnen staan, maar dat is niet.

zondag 5 december 2004 12:38

Acties:

SH4D3H

Topicstarter

Jup, daar kwam ik dus ook achter.
Maar ook vertica-align werkt niet

Vervelend eigenlijk ...

zondag 5 december 2004 13:04

Acties:

hlz

SH4D3H schreef op zondag 05 december 2004 @ 12:38:
Jup, daar kwam ik dus ook achter.
Maar ook vertica-align werkt niet

Vervelend eigenlijk ...

Vertical-align is daar ook niet voor bedoeld...

"The vertical-align property does not vertically align elements inside a box element. It is not the CSS equivalent for the HTML attribute valign="middle".

Vertical-align aligns the content inline. This means it is vertically aligned in comparison to the elements right before and after, and not in reference to parent/child."

zondag 5 december 2004 13:21

Acties:

MarkvE

Als je een element verticaal wilt laten centreren, moet je dit met margin doen...

Vormkracht10

zondag 5 december 2004 15:16

Acties:

SH4D3H

Topicstarter

Margin gebruik ik al maar dat wil niet echt ...

zondag 5 december 2004 15:23

Acties:

Clay

cookie erbij?

margin:auto centreert idd niet verticaal. Dat kan je het makkelijkst doen met:

code:

#blabla {
   position:absolute;
   top:50%;
   margin-top:-200px;
}

waar margin top de negatieve helft van de hoogte van het te centreren ding is. Op zich zou dat ook nog moeten kunnen met position:relative; ipv absolute, en margin auto voor horizontaal centreren erbij, maar dat werkt niet overal even goed. Als je dit dus gebruikt kan je horizontaal ook beter meteen met left:50%; en margin-left:-helftBreedtepx; doen.

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

zondag 5 december 2004 15:31

Acties:

SH4D3H

Topicstarter

Als ik het aan de style van de <div> meegeef wordt die div gek.
Ik zal het eens met een <span> in de div gebruiken

Edit : Geen resultaat.
margin-left:-blabla; & margin-top:-blablabla; zijn ook geen valid CSS ...

[ Voor 41% gewijzigd door SH4D3H op 05-12-2004 15:37 ]

zondag 5 december 2004 15:39

Acties:

Thijsmans

⭐⭐⭐⭐⭐ (5/5)

SH4D3H schreef op zondag 05 december 2004 @ 11:48:
En nee, ik ben zeker geen noob Ik werkte hiervoor altijd met tabellen

Contradictie

totdat een mede admin van PHPhulp.nl me op hierop wees. Lees en huiver

Yeah, dat soort topics hebben we hier niet genoeg

Privacy-adepten vinden op AVGtekst.nl de Nederlandse AVG-tekst voorzien van uitspraken en besluiten.

zondag 5 december 2004 15:42

Acties:

SH4D3H

Topicstarter

Prammenhanger schreef op zondag 05 december 2004 @ 15:39:
Contradictie

LOL!
De meeste sites worden nog altijd in tabellen opgebouwd

En waarom eigenlijk moeilijk doen als het makkelijk kan

Mja, PHP is meer mijn ding

zondag 5 december 2004 15:49

Acties:

Clay

cookie erbij?

SH4D3H schreef op zondag 05 december 2004 @ 15:31:
Als ik het aan de style van de <div> meegeef wordt die div gek.
Ik zal het eens met een <span> in de div gebruiken

Edit : Geen resultaat.
margin-left:-blabla; & margin-top:-blablabla; zijn ook geen valid CSS ...

Je moet ook een hoogte en breedte opgeven, en negatieve margins zijn prima valid CSS. Experimenteer er een beetje mee en het moet lukken, of zoek er ff naar met google.

De meeste sites worden nog altijd in tabellen opgebouwd

Dat zegt niets over of dat goed is of niet. Het zegt veel meer over de mensen die het maken

En waarom eigenlijk moeilijk doen als het makkelijk kan

Iets is eigenlijk alleen moeilijk als je het niet vaak genoeg gedaan hebt.

[ Voor 26% gewijzigd door Clay op 05-12-2004 15:53 ]

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

zondag 5 december 2004 16:07

Acties:

SH4D3H

Topicstarter

Het werkt niet

En de validator zegt:

URI : file://localhost/std.css

* Line: 18 Context : #marqtxt

Invalid number : margin-toponly 0 can be a length. You must put an unit after your number : -37
* Line: 19 Context : #marqtxt

Invalid number : margin-leftonly 0 can be a length. You must put an unit after your number : -375

Nja, ik op die linkjes klikken, naar deze pagina.
Maar daar kom ik geen wijs uit, ik gebruik nu:
#marqtxt {
font-family:Tahoma, Verdana;
font-size:12px;
color:#FF0000;
top:50%; margin-top:-37;
left:50%; margin-left:-375; }

zondag 5 december 2004 16:21

Acties:

PeetR

SH4D3H schreef op zondag 05 december 2004 @ 16:07:
Het werkt niet
En de validator zegt:

[...]

Nja, ik op die linkjes klikken, naar deze pagina.
Maar daar kom ik geen wijs uit, ik gebruik nu:
#marqtxt {
font-family:Tahoma, Verdana;
font-size:12px;
color:#FF0000;
top:50%; margin-top:-37;
left:50%; margin-left:-375; }

Dat betekent niet dat negatieve margins niet accepteerd, maar je moet er wel een eenheid aan meegeven. -37 wat? pixels? picca's? procent? millimeter? inches? Dat moet je er natuurlijk wel bij vertellen.

Your time as a student is the best time of your life

zondag 5 december 2004 16:26

Acties:

SH4D3H

Topicstarter

Jup, beetje dom

Maar het werkt gewo0n niet

<div id="style1"><span id="style2">Blaat!</span></div>

code:

#style1 {
background-image:url(marquee.png);
background-repeat:no-repeat;
width:750px;
margin:auto;
height:75px; }

#style2 {
font-family:Tahoma, Verdana;
font-size:12px;
color:#FF0000;
top:50%; margin-top:10px; }

Maf

Gecentreerd issie wel, horizontaal gezien dan.
En ookal verander ik die 10 in de helft van het totaal (75px) of meer/minder er gebeurt nix

offtopic:
Woei!!! 1000ste post ^^

[ Voor 11% gewijzigd door SH4D3H op 05-12-2004 16:34 ]

zondag 5 december 2004 20:00

Acties:

SH4D3H

Topicstarter

Kheb het nog eens met magins geprobeerd in 'style2', maar het werkt nog altijd niet

Nu snap ik waarom iedereen met tabellen werkt

maandag 6 december 2004 01:53

Acties:

chemmie

Badger!

code:

1
2
3

width: 750px;         //breedte
left: -375px;         //left -(0.5 * width)
margin-left: 50%;     //centreren tov. verschoven left

Of ik moet je verkeerd begrijpen, maar dit centreert een div horizontaal.

And so at last the beast fell and the unbelievers rejoiced. But all was not lost, for from the ash rose a great bird. The bird gazed down upon the unbelievers and cast fire and thunder upon them.

maandag 6 december 2004 02:15

Acties:

curry684

left part of the evil twins

SH4D3H schreef op zondag 05 december 2004 @ 15:42:
[...]

De meeste sites worden nog altijd in tabellen opgebouwd
En waarom eigenlijk moeilijk doen als het makkelijk kan

Omdat de printouts onbruikbaar zijn en het niet fatsoenlijk rendert op browsers met afwijkende formaten zoals PDA's en smartphones

Professionele website nodig?