Wel in IE niet in Firefox

Status
Niet open voor verdere reacties.
C

CleanByte

Gebruiker
Lid geworden
3 sep 2007
Berichten
9
Ik ben bezig met het maken van een site. Als ik het in IE open dan kloppen de divs wel en als ik het in Firefox open dan klopt het niet meer (staan ze inelkaar).


<html>
<head>
<title>
<test pagina>
</title>

<STYLE TYPE="text/css">
.plaatje{
position: absolute;
width: 750px;
height: 100px;
}
.div1 {
top: 150;
position: absolute;
}
.tekst {
top: 150;
left: 150;
position: absolute;
}
</style>

<body>

<img class=plaatje src=test.jpg>

<div class=div1>
<table>
<tr>
Home
</tr>
<tr>
Pagina1
</tr>
<tr>
Pagina2
</tr>
<tr>
Pagina3
</tr>
<tr>
Pagina4
</tr>
<tr>
Pagina5
</tr>
</table>
</div>

<div class=tekst>

Test tekst

</div>

</body>
</html>

Ik zou graag willen dat het bij beiden klopt. Ik hoop dat er iemand mij kan helpen alvast bedankt voor de moeite.
 
volgensmij zit het probleem het in:
HTML: 
position: absolute;

probeer het eens zonder...
 
maakt niks

Het maakt niks uit.

Iemand moet toch weten wat er fout aan is?
 
CleanByte,
Het maakt niks uit.
Iemand moet toch weten wat er fout aan is?
Klik om te vergroten...
Wat is er fout! Alles!!
Geen doctype
Position absolute gebruik je met top, left, bottom, right met x aantal px. Anders weet de browser niet waar het plaatje moet gepositioneerd worden.
In uw table maak je geen gebruik van cellen <td>
Code: 
<table>
<tr>
<td>Home</td>
</tr>
</table>
In plaats van een class te maken van je plaatje maak er een div van (#plaatje) ik denk dat het voor de header is?
Hieronder wat code dat er al beter op gaat trekken! denk ik.
Code: 
<!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=utf-8" />
<title>Test pagina</title>
<STYLE TYPE="text/css">
#plaatje{
position: absolute;
top:10px;
left:200px;
width: 750px;
height: 100px;
}
#tabel{
position:absolute;
top:115px;
left:200px;
}
#teksten{
position: absolute;
top: 115px;
left: 260px;
}
</style>
</head>
<body>
<div id="plaatje">
<img src=test.jpg>
</div>
<div id="tabel">
<table>
<tr>
<td>Home</td>
</tr>
<tr><td>Pagina1</td>
</tr>
<tr>
<td>Pagina2</td>
</tr>
<tr>
<td>Pagina3</td>
</tr>
<tr>
<td>Pagina4</td>
</tr>
<tr>
<td>Pagina5</td>
</tr>
</table>
</div>
<div id="teksten">
Test tekst
</div>
</body>
</html>
groetjes
defietser
 
Laatst bewerkt:
1. in css bestaat er geen verschil tussen het gebruik van class or id. beide zullen hetzelfde resultaat opleveren.

2. Als je gebruik maakt van position absolute, ga je zoiezo problemen krijgen door elementen die elkaar beginnen te overlappen. Het heeft niets te maken met het gebruik van IE or Firefox.


Als goede raad geef ik je:

1. vergeet position absolute. Als je elementel wil uitlijnen en plaatsen werk dan met lege tabelvelden of stel margin & padding in van je elementen.

margin: afstand tussen de buitenste rand van je element en de elementen er rond
padding: afstand tussen de binnenste rand van je elementen en de elementen er in.

2. Als je een layout wil genereren kijk dan welk type je maakt. Als je iets wil dat auto gecentreerd is doe dan het volgende:

#elementnaam { width: xxx px; margin: 0px auto; }

Als je iets neemt dat de hele pagina gaat vullen in de breedte: --> DIVs
Als je iets neemt dat een stuk van de pagina gaat vullen in de breedte: --> Tables

Het verschil? Divs worden "gecollapsed" als ze geen elementen bevatten. Een div in een div zal ervoor zorgen dat de buitenste div NIET mee uitbreid naargelang de inhoud.


Ik hoop dat dit een iets beter beeld schept op je situatie.
 
Even correctie:
PHP: 
1. in css bestaat er geen verschil tussen het gebruik van 
class or id. beide zullen hetzelfde resultaat opleveren.

class mag vaak aangeroepen worden
id mag slechte éénmaal in een pagina aangeroepen worden.

een id is dus uniek,
maar ze doen dus wel hetzelfde.

De overige bemerkingen van Airslash zijn correct.
Maar:
indien je een site maakt,
trek de rechterrand van je browser eens naar binnen,
en zie of het beeld nog naar je wens is.
Dus geen overlappingen en verspringingen.
Voer je deze controle niet uit,
dan kun je later voor grote aanpassingsproblemen komen te staan.


:cool:
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan