Positie layout Firefox - Chrome - IE

Status
Niet open voor verdere reacties.
M

Maartenv87

Gebruiker
Lid geworden
23 okt 2008
Berichten
72
Ben beginneling op vlak van CSS maar wil een website voor mijn vriendin maken en daarom met wet tutorials aan de slag gegaan.

Probleem is dat mijn website in IE wel goed opent maar in Firefox en Chrome niet.
oasi.jpg

oasi2.jpg


Ook krijg ik mijn tekst van het menu niet op een afstand van mijn achtergrond, voor jullie zijn dit waarschijnlijk maar kleine dingen maar jullie helpen mij een heel stuk vooruit! :thumb:

HTML: 
<link href="css/template.css" rel="stylesheet" type="text/css" />
<body>
<div id="wrapper">
<div id="hoofding"></div>
<div id="menu"> Menu - Behandelingen - enz - enz</div>
<div id="container">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
<div id="footer"></div>
</div>
</body>
Code: 
body {
	margin:0px;
	text-align:center;
	padding:0px;
	background-color:#defcb1;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:10pt;
}

#wrapper {
	width:925px;
	margin:10px auto auto;
	text-align:left;
}

#hoofding {
	width:925px;
	height:160px;
	background-image:url(../images/hoofding.jpg);
	background-repeat:no-repeat;
	background-position:left top;
}
#menu {
	width:925px;
	height:33px;
	background-image:url(../images/menu.jpg);
	background-repeat:no-repeat;
	background-position:top;
	float:none;

	}
#container {
	width:925px;
	text-align: left;
	background-image:url(../images/container.png);
	background-repeat:repeat-y;
	background-position:top;
	float:none;
	margin: 0 auto;
}
#footer {
	width:925px;
	height:9px;
	background-image:url(../images/footer.jpg);
	background-repeat:no-repeat;
	background-position:left top;
	float:none;
	margin: 0 auto;
}
 
Code: 
#menu {
	width:925px;
	height:33px;
	background-image:url(../images/menu.jpg);
	background-repeat:no-repeat;
	background-position:top;
	float:none;
  [B]      margin-left:10px;
        margin-top:4px;[/B]

	}
De margin-left en top de px moet je naar eigen smaak invullen.

Voor de andere zal ik nog even kijken
 
Westsidemg zei:
Code: 
#menu {
	width:925px;
	height:33px;
	background-image:url(../images/menu.jpg);
	background-repeat:no-repeat;
	background-position:top;
	float:none;
  [B]      margin-left:10px;
        margin-top:4px;[/B]

	}
De margin-left en top de px moet je naar eigen smaak invullen.

Voor de andere zal ik nog even kijken
Klik om te vergroten...

Bedankt voor je antwoord, met jouw oplossing verplaatst de achtergrond ook mee. Zou dus enkel de tekst moeten zijn (indien dit mogelijk is?)
oasi3.jpg
 
Maartenv87 zei:
Bedankt voor je antwoord, met jouw oplossing verplaatst de achtergrond ook mee. Zou dus enkel de tekst moeten zijn (indien dit mogelijk is?)
oasi3.jpg
Klik om te vergroten...

Ja hoor dit kan,

Als jij een nieuwe div maakt voor je text.

Code: 
<div id="menu"><div id="linkmenu" Menu - Behandelingen - enz - enz</div></div>

En dan in je css:
Code: 
#linkmenu{

        margin-left:10px;
        margin-top:4px;

}
Je zou hem dus nu de links ook een leuke kleur geven zonder "A" te gebruiken

Zou je misschien een zipje willen maken met je bestanden?
Dus je index.html, en je Css en je plaatjes.
 
Laatst bewerkt:
Je zou hem dus nu de links ook een leuke kleur geven zonder "A" te gebruiken
Klik om te vergroten...

Ja!! Dat ik daar niet aan gedacht heb om een div bij te maken :D. Weet je ook hoe ik het probleem met IE en firefox kan oplossen?
 
Probleem opgelost:

Code: 
#container {
	width:925px;
	text-align: left;
	background-image:url(../images/container.png);
	background-repeat:repeat-y;
	background-position:top;
	min-height: 50px;
	
}

Code: 
<link href="css/template.css" rel="stylesheet" type="text/css" />
<body>
<div id="wrapper">
<div id="hoofding"></div>
<div id="menu">
<div id="tekst">Menu - Behandelingen - enz - enz</div></div>
<div id="container">
</div>
<div id="footer"></div>
</div>
</body>

Het kwam door de <p>
Je kan beter met </ br> gaan werken.

In je css zit min-height: 50px; die kan je aanpassen naar hoe groot altijd zichtbaar moet zijn. -< ik zou hem iets groter maken dan 50px; in ie is hij dan te klein.

Verder succes er mee :thumb:
 
Laatst bewerkt:
Blijkbaar toch iets over het hoofd gezien, nu kan ik geen p class toekennen aan mijn tekst. Is er geen mogelijkheid dat ik toch met <p> Tekst </p> kan werken en de layout wel juist blijft in alle browsers?
 
Laatst bewerkt:
Hoi Maarten,
  • De eerste vereiste voor een goede crossbrowser-prestatie is: het opgeven van een Doctype!
  • En de tweede vereiste is het opgeven van een z.g. "charset".
  • Een <html> tag in de code is ook wel aan te bevelen. ;)
Verder kan alles veel eenvoudiger! :)
Je hoeft helemaal geen #wrapper om alles heen te zetten als je rechtstreeks de <body> centreert.
Ook een extra <div id="tekst"> om de tekst binnen het menu de goede positie te geven is overbodig. De afstanden kunnen met een (links/rechts) padding opgegeven worden, zonder dat het hele menu gaat inspringen.

Randjes en achtergrondkleuren kunnen direct in de css opgegeven worden, dat scheelt het aanmaken van allerlei images (en maakt de pagina ook sneller); is ook makkelijk aan te passen.

Het kwijtraken van achtergrond-images heeft ook als belangrijk voordeel dat de bezoeker straffeloos het letterformaat kan aanpassen, als dat voor hem/haar gewenst is. Dan valt de layout niet uit elkaar!

Verder is het 't handigst om de menu-items als een keurig lijstje in de html te zetten, waarmee ook hier met css de vormgeving op alle punten naar smaak is aan te passen (later ook als je bv. de links meer een knop-uiterlijk wilt geven bij een hover e.d.).

De <body> kan er dan zo uit komen te zien:
HTML: 
<body>

<div id="hoofding"><!-- kan nog iets in --></div>

<ul id="menu">
	<li>Home</li>
	<li>Behandelingen</li>
	<li>enz.</li>
	<li>enz.</li>
</ul>
	
<div id="container">
	<p>piep</p>
	<p>piep</p>
	<p>piep</p>
</div>

<div id="footer"></div>

</body>
</html>
Tip: zet de css bij het aanmaken van een pagina niet in een apart css-bestand, maar tijdelijk in de <head> van de pagina. Dat werkt veel sneller, en je kunt dan ook door het opslaan van een versie van de pagina meteen de bijbehorende css behouden.
Met vriendelijke groet,
CSShunter
 
Bedankt voor je antwoord en je tijd, hier word ik in elk geval wijzer van!! :thumb:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan