website anders in andere browsers

Status
Niet open voor verdere reacties.
R

ringo1

Gebruiker
Lid geworden
12 nov 2011
Berichten
112
beste,

ik ben dus mijn website volledig aan het aanpassen, mijn website was eerst in frame, maar door aanraden van een paar leden hier heb ik dit veranderd in div

nu merk ik wel dat mijn site in firefox,safari en chrome niet zo goed wordt weergegeven zoals in IE

hier een voor beeld van IE, daar zie dat alles mooi staat

IE.jpg


dit is een voorbeeld van firefox maar dit heb ik ook met chrome en safari
daar zie je dat b.v.b mijn logo onder mijn header komt te staan en mijn titel in mijn header

mozila.jpg


dit is dus wel niet de bedoeling, hoe kan ik dit aanpassen dat het in alle browsers goed word weergegeven?

alvast bedankt

grtz ringo
 
Om een antwoord te krijgen zou je beter je html en zeker de css code hier posten. N.a.v. de foto's kunnen we alleen maar beamen dat er iets in de positioning fout gaat, maar wat er fout gaat is niet aan te wijzen zonder code...
 
Dat er verschil in zit, is niet zo raar .. Verschillende browsers, die er allemaal met een verschillende manier er mee omgaan ;)

Je zult dus per browser een stukje css moeten opnemen om het te laten werken zoals jij wilt :)

Suc6! :thumb:
 
hey hier de html code van de afbeelding van hierboven

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


<html>
<head>
<title>snoekvissers index</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="stylesheet snoekvissers.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container"></div>
<div id="header"><img alt="banner" src="banner.jpg" width="100%"></div>
<div id="menu">
<ul>
<li><img src="logo.png" width="170px" height="150" alt="logo"></li>
<li></li>
<li></li>
<li><p style="text-align:center;"><a href="http://www.easycounter.com/"><img src="http://www.easycounter.com/counter.php?ringo1" border="2" alt="Hit Counters"></a></p></li>
<li></li>
<li></li>
<li><a href="snoekvissers.htm">home</a></li>
<li><a href="http://www.vissersparadijs.be/">Forumindex</a></li>
<li><a href="reglement.html">Reglement</a></li>
<li><a href="leden.html">Leden</a></li>
<li><a href="kalender.html">Kalender + uitslagen</a></li>
<li><a href="bestuur.html">Bestuur</a></li>
<li><a href="klassement2012.html">Klassement&nbsp;2012</a></li>
<li><a href="album.html">Album</a></li>
<li><a href="http://snoekvissers.guestbook4you.be"onclick="window.open(this.href); return false;">Gastenboek</a></li>
<li><a href="linken.html">links</a></li>
<li><a href="nieuws.html">nieuws</a></li>
<li><a href="archief.html">Archief</a></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul></div>
<div id="content">
<div id="welkom" align="center"><h1>Welkom sportvissers</h1>
<hr>
<p>Graag heet ik jullie hartelijk welkom op de website van de Snoekvissers.<br>
Deze site is in 1ste plaats gemaakt om de leden op de hoogte te houden van<br><a href="http://www.vissersparadijs.be/website/kalender.html"><font color="#FFFF00;">wedstrijddata</font></a> , <a href="http://www.vissersparadijs.be/website/klassement2012.html"><font color="#FFFF00">uitslagen</font></a> ,activiteiten  en andere.<br>
Daarnaast vindt je hier nog heel wat informatie over alles wat te maken heeft met de club en het vissen<br>
waaronder ook veel foto's die je kan terug vinden in de album.<br>
Een website is nooit helemaal afgewerkt en daarom wil ik jullie ook uitnodigen om actief deel te nemen<br> aan de uitbouw van onze site</p>
<img src="kampioen/nr123.jpg"  width="550" height="410" alt="de kampioenen van 2011">
</div>
<br>
<br>
</div>
<div id="footer">Designed by: Van der Brugge Ringo</div>
</body>
</html>

en dit is de css
Code: 
/*stylesheet snoekvissers*/
body{
background-color:#433B38;}
#container {
width:100%;}
#header{
width:100%;
height:150px; }
#menu{
width:180px;
float:left;
background-color:#696969;}
#menu ul {
list-style:none;
margin:5px;
padding:0px;
font-family:Georgia;
padding-top:10px 0px 0px 0px;
}
#menu ul a{
color :#ffffff ;
text-decoration :none ;
display:block;
height:25px;
border:1px solid #515A5A;
padding-top:3px;
padding-left:15px;
}

#menu ul a:hover{
background-color : #7DB3B3;}


#welkom h1{
width:500px;
margin-right:10px;
padding-left:10px;
padding-top:10px;
text-align:center;
font-family:monotype corsiva;
color:#FFDEAD;
}
p  {font-family:arial;
    font-size:16;
		color:#FFDEAD;
		}
#footer {
clear: both;
background-color: #ccc;
color:#433B38;
padding-bottom: 1em;
border-top: 1px solid #333;
text-align:center
}


hoe of wat moet ik aanpassen om het in chrome en safari hetzelfde te zien als in IE

alvast bedankt

grtz ringo
 
Je zult dus per browser een stukje css moeten opnemen om het te laten werken zoals jij wilt
Klik om te vergroten...
Noh, nee, daarvoor zijn er standaarden uitgevonden waar webbrowsers zich aan te houden hebben!
  • Zelfs Internet Explorer begint dat steeds beter te leren, alleen in dit geval nog niet.
De url van de site zit prettig leesbaar in het screenshot. ;)
Wat er hier aan de hand is, is dat de schermbreedte de hoogte van de header-afbeelding beïnvloedt:
  • Je hebt de #header een hoogte van 150px gegeven, en voor het img erbinnen alleen een breedte van 100% staan.
  • Dan wordt de hoogte van de afbeelding door de browser vastgesteld op grond van de werkelijke verhouding [breedte : hoogte] van de geüploade foto (dat is: 865px × 147px).
  • Op deze manier wordt de hoogte van de foto afhankelijk van de breedte van het scherm van de bezoeker!
  • En wat niet in de #header past, komt er gewoon overheen lopen. Ook over het bovenstukje van het menu en de content!
  • Maar als er een smal scherm is, komt er loze ruimte tussen de afbeelding en de rest.
  • Dit kan je duidelijk zien als je in Firefox of Chrome de windowbreedte van de browser kleiner maakt. De foto vliegt dan steeds meer de lucht in.
  • Hier doen Firefox, Chrome e.a browsers het goed. IE doet het fout, die laat de header-afbeelding de rest naar beneden drukken. Dat komt hier goed uit, maar het is niet volgens de voorschriften.
Het kan opgelost worden door de vaste hoogte (die 150px) uit de header-styles te schrappen.
Dan wordt de header net zo hoog als wet er in zit, en dat is precies wat de bedoeling is. Ook IE begrijpt dat.
  • Alternatief is: het img zelf ook een vaste hoogte van 150px geven. Dan zijn de verhoudingen van de foto niet meer zoals in het echt, maar voor deze foto lijkt me dat niet zo erg.
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
hey csshunter, alvast bedankt voor uw uitleg :thumb: het probleem met de haeder is dus opgelost.

nu heb ik nog een probleempje, dat in IE wel goed is maar in chrome en firefox niet


op deze afbeelding zie je dat de nr's in mijn menu staan, dit mag dus niet, ik zou er wat plaats tussen willen hoe doe ik dit?
nummers-1.jpg


dit is de html van de pagina
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>vissersparadijs/Reglement</title>
<link href="stylesheet snoekvissers.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
h1   {text-align:center;
      font-size:35;
			color:#FFDEAD;
			}
			
li   {color:#FFDEAD;
}			
-->
</style>
</head>
<body>
<div id="container"></div>
<div id="header"><img alt="banner" src="banner.jpg" width="100%"></div>
<div id="menu">
<ul>
<li><img src="logo.png" width="170px" height="150" alt="logo"></li>
<li></li>
<li></li>
<li><p style="text-align:center;"><a href="http://www.easycounter.com/"><img src="http://www.easycounter.com/counter.php?ringo1" border="2" alt="Hit Counters"></a></p></li>
<li></li>
<li></li>
<li><a href="snoekvissers.htm">home</a></li>
<li><a href="http://www.vissersparadijs.be/">Forumindex</a></li>
<li><a href="reglement.html">Reglement</a></li>
<li><a href="leden.html">Leden</a></li>
<li><a href="kalender.html">Kalender + uitslagen</a></li>
<li><a href="bestuur.html">Bestuur</a></li>
<li><a href="klassement2012.html">Klassement&nbsp;2012</a></li>
<li><a href="album.html">Album</a></li>
<li><a href="http://snoekvissers.guestbook4you.be"onclick="window.open(this.href); return false;">Gastenboek</a></li>
<li><a href="linken.html">links</a></li>
<li><a href="nieuws.html">nieuws</a></li>
<li><a href="archief.html">Archief</a></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul></div>
<div id="content">
<h1>Wedstrijdreglement De snoekvissers</h1>
<ol>
<li>Het jaarlijkse lidgeld bedraagt 30 euro.</li>
<li>De inleg per wedstrijd is 5 euro.</li>
<li>Het is toegestaan te vissen op de blokkreek<b>( eerste deel )</b> en op de <b>volledige mesurekreek.</b></li>
<li>Het algemeen klassement wordt berekend op alle wedstrijden.</li>
<li>Er wordt gevist naar gewicht.</li>
<li>vaste hengel mag maximum 11m zijn.</li>
<li>Maximum 2kg droog voeder.</li>
<li>Amorce en gekleurde maden zijn <u>VERBODEN.</u></li>
<li>Voederen 15 min voor aanvang wedstrijd.</li>
<li>We vissen van 12h45 tot 16h45</li>
<li>Bijschieten van witte maden,casters,pellets, en lichtjes bijsnuiven is toegelaten.</li>
<li>Plaatsloting van 10h45 tot 11h15 in ons lokaal "IN DE DRAAIPUT".</li>
<li>Na het voedersignaal worden geen vissers meer toegelaten aan het water.</li>
<li>Leefnet minimum 2m lang, voorzie eventueel een 2e leefnet.</li>
<li>Alle vis telt.</li>
</ol>
</div>
<div id="footer">Designed by: Van der Brugge Ringo</div>
</body>
</html>

de css is het zelfde als in het vorige bericht

grtz ringo
 
Hoi Ringo,
Het komt omdat op de testpagina reglement.html het menu een {float:left} heeft, de #content er aansluitend tegen aan staat, en nummertjes van een geordende lijst bij de ene browser op een andere positie staan dan bij de andere browser.

Je schept meer ruimte door de #content op een afstand vanaf de linkerkant te zetten die wat groter is dan de menu-breedte (die is nu 190px):
Code: 
#content {
    margin-left: 220px;
    }
Met vriendelijke groet,
CSShunter
 
hey csshunter, dit is idd veel beter zo :thumb: zeer wel bedankt voor de hulp

grtz ringo
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan