Iets vaags in FF dit keer - Forum

Robert Deiman

10-10-2006 23:12

Kalle schreef op 10.10.2006 23:10

Voor een center:


html, body {
   margin: 0;
   padding: 0;
   text-align:center;
}
/*In je eerste div, ik ga uit van container. De div die om alles heen staat*/

div#container {
   margin: 0 auto;
   padding: 0;
   text-align:left; /*terug zetten*/
}

Die text-align:center;

staat er al, maar in FF doet die dat schijnbaar niet.

Jan Koehoorn

10-10-2006 23:16

Om een div te centreren in alle browsers gebruik ik altijd:


    #container {
        margin: 0px auto;
        width: 800px;
    }

Dan heb je niets te maken met text-align.

A

ArendJan

10-10-2006 23:20

Maar missen er dan 2 complete divs, alleen omdat ik verkeerd centreer????

R

Robert Deiman

10-10-2006 23:25

Neej, er is meer aan de hand, (zie ook een eerdere post van mij in dit topic) je gaat helemaal de mist in met de positioning. Alle divs zijn aanwezig, die 2 die je "mist" zitten verstopt, omdat ze niet goed zijn gepositioneerd.

A

ArendJan

10-10-2006 23:26

Maar het is me nog steeds niet duidelijk wat ik nu verkeerd doe met de positionering...

K

Kalle P

10-10-2006 23:31

* Je sloot je div totaal al op de hleft af,
*je float verkeerd...

ben ff bezig met ordenen.

edit:
*en dat de footer er niet komt is denk omdat je geen <br clear="all" /> doet

Jan Koehoorn

10-10-2006 23:32

Als je in je CSS dit zou doen, dan centreert hij al in FF (net getest):


.totaal {
    margin: 0px auto;
    width: 720px;
    height: 650px;
    text-align:left;
}

Jan Koehoorn

10-10-2006 23:34

Kalle schreef op 10.10.2006 23:31
en dat de footer er niet komt is denk omdat je geen <br clear="all" /> doet

Dat zou <br style="clear: both;" /> moeten zijn.

Nog beter is het, om daar een speciale class voor te maken, dan heb je geen inline styles nodig.

K

Kalle P

10-10-2006 23:41

ja die bedoelde ik :P

K

Kalle P

10-10-2006 23:46

Misschien niet de netste manier:

[edit]
zowel werkend in IE als in FF
[/edit]

CSS


body, html, div {
    margin: 0;
	padding: 0;
	}
body, html {	
	font-family: Tahoma;
	font-size:11px;
	color:#000000;
	text-align:center;
	background:#800000;
	}

a:link, a:visited {
	color: #000000;
	text-decoration:none;
	border-style:none;
	}

.totaal {
	margin: 0 auto;
	width: 720px;
	height:650px;
    padding: 0;
	text-align: left;
}

.header {
	width: 720px;
	height:117px;
	background: url(header.jpg) no-repeat;
}

#floats {
	height: 470px;
	width: 720px;
}
.info {
	width: 216px;
	height: 470px;
	float:left;
	background: url(info.jpg) no-repeat;
}

.tekst {
	width: 504px;
	height: 470px;
	margin-left: 216px;
	margin-top: -470px;
	float:right;
	background: url(tekst.jpg) no-repeat;
}

.bottom {
	width: 720px;
	height:72px;
	margin-top: -10px;
	//margin: 0px;
	background: url(bottom.jpg) no-repeat;
}

.lzvcup {
	width:130px;
	height:170px;
	border: 0px solid #000000;
	padding:0px;
	margin-left:50px;
	margin-top:60px;
}

.topschutters {
	width:130px;
	height:120px;
	border: 0px solid #000000;
	padding:0px;
	margin-left:50px;
	margin-top:100px;
}

.teksten {
	width:400px;
	height:250px;
	border: 0px solid #000000;
	padding:0px;
	margin-left:30px;
	margin-top:25px;
	overflow:auto;
}

.fotos {
	width:420px;
	height:100px;
	border: 0px solid #000000;
	padding:0px;
	margin-left:20px;
	margin-top:50px;
}

.copyright {
	width: 600px;
	height:50px;
	padding:10px;
	border: 0px solid #000000;
	margin-left: 40px;
	margin-top:10px;
}

.menu {
	width: 480px;
	height:35px;
	border:0px solid #000000;
	margin-left: 50px;
	margin-top: 70px;
	border-style:none;
}

.tekstanders {
	font-size:20px;
}

html


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dorst - zaalvoetbalvereniging</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
	<div class="totaal">
		<div class="header">
			<div class="menu">
				<a href="dorst.php?pagina=0"><img src="home.jpg" alt="Home" style="border-style: none;" /></a>
				<a href="dorst.php?pagina=1"><img src="team.jpg" alt="Ons Team" style="border-style: none;" /></a>
				<a href="#"><img src="fotos.jpg" alt="Foto's" style="border-style: none;" /></a>
				<a href="#"><img src="videos.jpg" alt="Video's" style="border-style: none;" /></a>
				<a href="#"><img src="links.jpg" alt="Links" style="border-style: none;" /></a>
				<a href="#"><img src="contact.jpg" alt="Contact" style="border-style: none;" /></a>
			</div>
		</div>
	<div id="floats">
		<div class="info">
			<div class="lzvcup">
			|| <a href="#">Kalender</a><br />
			|| <a href="#">De stand</a><br />
		
			|| <a href="#">LZV - regels</a><br />
			|| <a href="#">Forum</a><p />
			<b>LZV- Cup</b><br />
			De LZV- Cup is een cup die gespeeld word tussen verschillende zaalvoetbalverenigingen en er
			word gespeeld om een krat bier.
			</div>
			<div class="topschutters">
				<b>1</b>) Benne (15)<br />
			<b>2</b>) Kenny (9)<br />
			<b>3</b>) Sonne (8)<br />

			<b>4</b>) Pieje (7)<br />
			<b>5</b>) Nijske (2)<br />
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Bram (2)<br /> 
			<b>6</b>) Douce (1)<br />
			</div>
		</div>	
		<div class="tekst">
			<div class="teksten">
				<b>Welkom op de nieuwe website van zaalvoetbalvereniging D.O.R.S.T.</b><br />
				Lorem ipsum doloret non in templum sed in haborem est.Lorem ipsum doloret non in templum sed in haborem est.
				Lorem ipsum doloret non in templum sed in haborem est. Lorem ipsum doloret non in templum sed in haborem est.
				Lorem ipsum doloret non in templum sed in haborem est. Lorem ipsum doloret non in templum sed in haborem est.
				Lorem ipsum doloret non in templum sed in haborem est. Lorem ipsum doloret non in templum sed in haborem est.
				Lorem ipsum doloret non in templum sed in haborem est. Lorem ipsum doloret non in templum sed in haborem est.
				<br />
				<a href="#"><b>Reageer</b></a> | <a href="#"><b>Reacties (2)</b></a>
				<p />
				<b>D.O.R.S.T. - De Kastaars</b><br />
				Lorem ipsum doloret non in templum sed in haborem est.Lorem ipsum doloret non in templum sed in haborem est.
				Lorem ipsum doloret non in templum sed in haborem est. Lorem ipsum doloret non in templum sed in haborem est.
				Lorem ipsum doloret non in templum sed in haborem est. Lorem ipsum doloret non in templum sed in haborem est.
				Lorem ipsum doloret non in templum sed in haborem est. 
				<br />
				<a href="#"><b>Reageer</b></a> | <a href="#"><b>Reacties (2)</b></a>
			</div>
			<div class="fotos">
				<img src="dorst.jpg" alt="fotootje" />&nbsp;&nbsp;<img src="dorst2.jpg" alt="fotootje" />
			</div>
		</div>
	</div>	
		<div class="bottom">
			<div class="copyright">
				<b>Zaalvoetbalvereniging Dorst</b> 2006©
			</div>
		</div>
	</div>

</body>
</html>