Firefox "probleem" met centreren plaatje

Status
Niet open voor verdere reacties.
S

Spellmeista

Gebruiker
Lid geworden
23 feb 2009
Berichten
24
Ik heb het volgende "probleem" met een webpagina. In google crome, internet explorer, safari plaatst hij een plaatje netjes gecentreerd(in het midden, midden) met dit commando:

<BODY STYLE="background:#660066; background-image:url(/pictures/logo.gif); background-repeat:no-repeat; background-position:center center;">

alleen in firefox gaat het plaatje(gif afbeelding) helemaal naar boven toe en dat vind ik dus weer een beetje jammer!

Misschien heeft er iemand een oplossing voor dit probleem?
 
Tsja........
strange?

Maar er is een oplossing,
moest even zoeken.

Probeer deze code:
HTML: 
 <style type="text/css" media="screen">
html {
    height:100%;
    max-height:100%;
    padding:0;
    margin:0;
    border:0;
    overflow: auto;
    /* hide overflow:hidden from IE5/Mac */
    /* \*/
    overflow: hidden;
    /* */
} 

 body
{
height:100%;
max-height:100%;
margin: 0;
padding: 0;
font-family:  verdana, "comic sans ms", arial, hevetica, sans-serif;
color: #000;
background-color: #660066;
    background-image: url('mini-1.jpg');
    background-repeat: no-repeat;
    background-position: center center;
}

</style>

Dit doet de truuk:
html {
height:100%;
max-height:100%;

omdat er iets moet zijn waarvan het centrum gekozen moet worden,
dus height 100 %

:cool:
 
peter vazed zei:
Tsja........
strange?

Maar er is een oplossing,
moest even zoeken.

Probeer deze code:
HTML: 
 <style type="text/css" media="screen">
html {
    height:100%;
    max-height:100%;
    padding:0;
    margin:0;
    border:0;
    overflow: auto;
    /* hide overflow:hidden from IE5/Mac */
    /* \*/
    overflow: hidden;
    /* */
} 

 body
{
height:100%;
max-height:100%;
margin: 0;
padding: 0;
font-family:  verdana, "comic sans ms", arial, hevetica, sans-serif;
color: #000;
background-color: #660066;
    background-image: url('mini-1.jpg');
    background-repeat: no-repeat;
    background-position: center center;
}

</style>

Dit doet de truuk:
html {
height:100%;
max-height:100%;

omdat er iets moet zijn waarvan het centrum gekozen moet worden,
dus height 100 %

:cool:
Klik om te vergroten...

Hoi Peter, waar komt deze code precies te staan? Misschien een stomme vraag, maar komt deze in het html gedeelte te staan en moet ik de oude code weghalen?
 
Spellmeista zei:
Hoi Peter, waar komt deze code precies te staan? Misschien een stomme vraag, maar komt deze in het html gedeelte te staan en moet ik de oude code weghalen?
Klik om te vergroten...

Thx Peter it really did the trick! Gewoon in the body dus! Nogmaals thx
 
Laatst bewerkt:
Nou, niet in de body, maar in de head, in je style.

Voorbeeld:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
<html>
	<head>
	<title>(Type a title for your page here)</title>
<!--Pagina gemaakt op Monday, February 23, 2009 21:02:16 -->
<meta name="GENERATOR" content="Arachnophilia 4.0">
<meta name="FORMATTER" content="Arachnophilia 4.0">
<meta name="description"  content="korte beschrijving van de pagina">
<meta name="keywords"  content="trefwoorden, die, slaan, op, de, pagina">
<meta name="publisher" content="Jan Jansen">
<meta name="Author" content="Peter Vazed">
<meta name="robots" content="index, follow">
<meta name="revisit" content="7 days">
<meta http-equiv=content-type content="text/html; charset=windows-1252">
<meta http-equiv="Content-Style-Type" content="text/css">


		 

 <style type="text/css" media="screen">
html {
    height:100%;
    max-height:100%;
    padding:0;
    margin:0;
    border:0;
    overflow: auto;
    /* hide overflow:hidden from IE5/Mac */
    /* \*/
    overflow: hidden;
    /* */
} 

 body
{
height:100%;
max-height:100%;
margin: 0;
padding: 0;
font-family:  verdana, "comic sans ms", arial, hevetica, sans-serif;
color: #000;
background-color: #660066;
    background-image: url('mini-1.jpg');
    background-repeat: no-repeat;
    background-position: center center;
}

</style>
</head>

<BODY >



</body>

</html>

:cool:
 
In de bodytag zelf kan ook.
Evenwel is het niet de juiste manier.
De bedoeling is, dat je je html code opdeelt.
Dus html op zich is geen probleem, doch de opmaak
vang je als het ware in een style.
Zet je die in de body, ok het werkt.
Zet je die in de head, is het beter, en overzichtelijker.
In feite is het de bedoeling dat je de style UIT je paginacode haalt.
En in een losse csss file zet, en in je head wederom aanroept.
Zodoende hoef je bij opmaak aanpassing slechts EEN css file aan te passen.

Mocht je alsnog voor een bepaalde pagina een afwijkende opmaak wensen, dan kun je alsnog een style in de head van die pagina toevoegen.
Deze overschrijft de losse css file inhoud voor de betreffende code.

Dus zo:

HTML: 
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	<title>(Type a title for your page here)</title>
<!--Pagina gemaakt op Monday, February 23, 2009 22:32:04 -->
<meta name="GENERATOR" content="Arachnophilia 4.0">
<meta name="FORMATTER" content="Arachnophilia 4.0">
<meta name="description"  content="korte beschrijving van de pagina">
<meta name="keywords"  content="trefwoorden, die, slaan, op, de, pagina">

<LINK rel="stylesheet" type="text/css" href="zp.css">

 <style type="text/css" media="screen">
 body
{
background-image: url(start-strps.jpg);
margin: 0;
padding: 0;
font-family:  verdana, "comic sans ms", arial, hevetica, sans-serif;
text-align: left;
color: #000;
background: #ffffcc;
}
</style>
</head>

Waarbij:
<LINK rel="stylesheet" type="text/css" href="zp.css">
naar de losse css linkt,
en daaronder zie je een voor de betreffende afwijkende pagina de style bijgetikt.

:cool:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan