.css probleem

[Divigo]

Ik ben op dit moment bezig met een eigen website en ben hier helemaal nieuw in.
Ik heb al wel regelmatig html paginas omgebouwd en gecopieerd maar ben nog nooit met niks begonnen.
Voor deze website gebruik ik uiteraard een .css file.
Ik test mijn website in 2 verschillende browsers te weten IE en FF.
Voor de template gbruik ik tables voor de indeling.
Mijn afbeeldingen plaats ik hierin in background.
Zover gaat dit goed. Alleen nu is de layout in FF anders als die in IE.
Die van FF komt beter in de richting van wat ik wil bereiken.

Hierbij even 2 screenprints van hoe het eruit ziet.

In IE krijg ik het als volgt:

Hierin zitten heel veel lege ruimtes tussen de afbeeldingen.

In FF krijg ik het volgende:

Dit ziet er beter uit. Wel nog steeds openingen tussen de afbeeldingen (bij de gradient bedoel ik dus) welke ik het liefst zou verwijderen maar ik zou hier nog mee kunnen leven. Ook zie je hier dat de plaatsing van de pagina titel en het logo op andere plaatsen zijn. Ik heb deze geplaatst met het uitlijnen in IE.

Hierbij mijn html:

Code: Selecteer alles

<table class="overall" id="Table_01">
	<tr>
		<td class="toplogo" colspan="3">
			<span><dd class="logo1"> </dd></span>
		</td>
		<td>
			<img src="../images/spacer.gif" width="1" height="114" alt="">
		</td>
	</tr>
	<tr>
		<td class="gradient"colspan="2">
		</td>
		<td rowspan="2">
			<img src="../../images/main_03.gif" width="604" height="12" alt="">
		</td>
		<td>
			<img src="../../images/spacer.gif" width="1" height="9" alt="">
		</td>
	</tr>
	<tr>
		<td class="menu"rowspan="2">
			<ul>
				<a href="../../index.html"><img src="../images/button_home.gif" class="menu" alt="" border="0" align=""></a>
				<a href="../main.html"><img src="../images/button_about_us.gif" class="menu" alt="" border="0" align=""></a>
				<a href="../stallions.html"><img src="../images/button_stallions.gif" class="menu" alt="" border="0" align=""></a>
				<a href="../geldings.html"><img src="../images/button_geldings.gif" class="menu" alt="" border="0" align=""></a>
				<a href="../mares.html"><img src="../images/button_mares.gif" class="menu" alt="" border="0" align=""></a>
				<a href="../foals.html"><img src="../images/button_foals.gif" class="menu" alt="" border="0" align=""></a>
				<a href="../showring.html"><img src="../images/button_showring.gif" class="menu" alt="" border="0" align=""></a>
				<a href="../for_sale.html"><img src="../images/button_for_sale.gif" class="menu" alt="" border="0" align=""></a>
				<a href="../contact.html"><img src="../images/button_contact.gif" class="menu" alt="" border="0" align=""></a>
			</ul>
		</td>
		<td rowspan="3">
			<img src="../../images/centerpiece.gif" width="15" height="477" alt=""></td>
		<td>
			<img src="../../images/spacer.gif" width="1" height="3" alt=""></td>
	</tr>
	<tr>
		<td background=../../images/bg_textfield.jpg>
			<dd class="title">
				<h1>About us</h1>
			</dd>
			<dd>
				<h3>tekstveld</h3>
			</dd>
		</td>
		<td>
			<img src="../../images/spacer.gif" width="1" height="473" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="../../images/main_07.gif" width="181" height="1" alt=""></td>
		<td>
			<img src="../../images/main_08.gif" width="604" height="1" alt=""></td>
		<td>
			<img src="../../images/spacer.gif" width="1" height="1" alt=""></td>
	</tr>
</table>

En dit is de .css die ik gemaakt heb:

Code: Selecteer alles

table.overall{
	width: 800px;
	height: 600px; 
	border: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	margin: 0 auto;
	
	}
	
td.toplogo{
	background-image: url(../images/bg_top.gif); 
	background-repeat: no-repeat;
	background-color: #ffffff;
	background-position: left;
	height: 114px;
	width: 801px;
}

td.gradient{
	background-image: url(../../images/gradient.gif); 
	background-repeat: no-repeat;
	background-color: #ffffff;
	background-position: left;
	height: 9px;
	width: 196px;

}

td.menu{
	background-image: url(../images/bg_menu.gif); 
	background-repeat: no-repeat;
	background-color: #ffffff;
	background-position: left;
	height: 467px;
	width: 181px;
	
}

a.menu{
	background-repeat: no-repeat;
	background-color: #ffffff;
	background-position: left;
	height: 40px;
	width: 139px;
}

dd.logo1{
	background-image:url(../images/logo.gif);
	background-repeat: no-repeat;
	background-color: #ffffff;
	height: 81px;
	width: 190px;
	position: absolute;
	left: 663px;
	top: 35px
}
dd.title{
	background-color: transparent;
	height: 25px;
	width: 25px;
	position: absolute;
	left: 325px;
	top: 180px
}

Iemand enig idee waar ik fout ben gegaan?

Gr Dennis

[Tom V]

Je begaat 1 grote fout: een tabel gebruiken voor de layout structuur.

Als je deze vervangt door divs, gaat het er sowieso al beter uit zien.
ook kun je best altijd je css beginnen met

Code: Selecteer alles

*{
    margin : 0;
    padding : 0;
}
 

Hierdoor gaan alle standaard spaties weg en staan ze gelijk in FF en IE.

Als je dat al hebt gedaan, gaat de rest ook goed komen lijkt me.

// = -> :

[Salomon]

padding = 0? Je bedoelt padding: 0?

[Tom V]

oeps, teveel met java bezig geweest en te lang geleden met css, meestal begin ik toch niet van een leeg css file, maar van een css file met al een paar dingen in.

[Divigo]

Hey mannen

Bedankt voor deze reacties.
Was even puzelen met <div> tags en hoe te positioneren maar het is gelukt.

Gr Dennis

[Divigo]

Ik heb toch nog een vreemde vraag.
Ik ben bezig geweest om in een <div> een indeling te maken.
De enige manier waarop ik dat voor elkaar heb gekregen is met behulp van <table>.
Het word me hier afgeraden om <table> te gebruiken maar dit blijkt dus zover ik nu gevonden heb de enige oplossing.

Hierbij het stukje script waar het over gaat:

Code: Selecteer alles

<div class="pagetitel">
<h1>Stallions</h1>
</div>
<div class="text">
<h4>
<TABLE width=100% bgcolor="transparent">
<tr>
	<td width="50%" class="horse"> <img src="../../album/roady.gif" alt="" border="" align=""></td>
	<td width="50%">
	Divigo Stables Roady
	<br>
	<a href="info_roady.html">More info</a>
	<br>
	<a href="results_roady.html">Results</a>
	<br>
	<a href="album_roady.html">Pictures</a>
	<br>
	</td>
</tr>
</table>
</h4>
<h4>
<TABLE width=100% bgcolor="transparent">
<tr>
	<td width="50%"><div> <img src="../../album/rancho.gif" alt="" border="" align="center"></div></td>
	<td width="50%">
	Divigo Stables Rancho
	<br>
	<a href="info_rancho.html">More info</a>
	<br>
	<a href="results_rancho.html">Results</a>
	<br>
	<a href="album_rancho.html">Pictures</a>
	<br>
	</td>
	
</tr>
</table></h4>
</div>

Kan iemand mij een verklaring of een verbetering geven voor dit stukje script.
Ik ben nu dus echt de kluts kwijt aan het raken.

Gr Dennis

[Tom V]

Zolang je met tables bezig bent, zal het je waarschijnlijk niet lukken hoor.

Met div's krijg je zo goed als alles gedaan, zeker tabel structeren zijn makkelijk te doen met divs en css.

Als je al een paar dingen online zet en laat zien wat je er in divs al hebt van gemaakt, kunnen we je ook makkelijker helpen dan op deze manier.

[Divigo]

Zolang je met tables bezig bent, zal het je waarschijnlijk niet lukken hoor.

Dat is juist het rare dat het wel gelukt is. Ik vraag me hierdoor juist af waarom jullie het afraden.
Met <table> was de enige manier om het op te lossen.

Als je al een paar dingen online zet en laat zien wat je er in divs al hebt van gemaakt, kunnen we je ook makkelijker helpen dan op deze manier.

Ik zal vanavond zorgen dat het online staat zodat je er even naar kan kijken.

Gr Dennis

[ElbertF]

Een tabel hoort alleen informatie met minimaal twee parameters (bijv. "tijd" en "aantal") te bevatten, hier zijn o.a. zoekmachines en browsers voor blinden op afgestemd.

Eenvoudig voorbeeld:

Code: Selecteer alles

<table>
    <tr>
        <td>Linksboven</td><td>Rechtsboven</td>
    </tr>
    <tr>
        <td>Linksonder</td><td>Rechtsonder</td>
    </tr>
</table>

De code levert vrijwel hetzelfde op hetzelfde als dit:

CSS:

Code: Selecteer alles

div {
    width: 50%;
    float: left;
}

HTML:

Code: Selecteer alles

<div>Linksboven</div><div>Rechtsboven</div>
<div>Linksonder</div><div>Rechstonder</div>

[Divigo]

Volgens mij heb ik het ook op die wijze gedaan.
Ik neem aan dat het geen probleem is dat de <tabel> in een <div> staat ?

De pagina waar het trouwens om gaat is de volgende:
http://divigo.dotbashosting.nl/divigost ... dings.html

Ook voor stallions en mares moet ik dezelfde layout gebruiken.
Ik vraag dus liever nu of het zo kan als dat ik naderhand 3 paginas aan moet passen.

Klopt het trouwens dat je in FF de comment lines ziet die je in je html plaatst?
Dit is bij mij dus het geval en ik vraag me af of dit normaal is of dat ik hier een foutje in heb zitten.

Gr Dennis