Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Probleem met css in verschillende browsers.

9 antwoorden
  • Hallo mensen. Ik heb een probleempje met het positioneren met css. Als ik het neer zet op de manier die ik nu gebruik gaat in IE alles helemaal prima. Maar in Opera en Firefox gaat het helemaal mis, en ziet het er gewoon niet uit. Dit is de gebruikte html code: [code:1:804ebdea4f] <html> <head> <title>Tim Kolvenbags Portfolio Site</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <p class="Titel">Portfolio site van Tim Kolvenbag</p> <span class="keuzevak">Home | Wie ben ik | Wat doe ik | Portfolio</span> </body> </html> [/code:1:804ebdea4f] En de css code: [code:1:804ebdea4f] .Titel { font-size: 35px; position: absolute; left: 150px; width: 600px; height: 60px; clip: rect(auto,auto,auto,auto); padding-top: 12px; padding-right: 7px; padding-bottom: 7px; padding-left: 50px; color: #FFFFFF; background-image: url(header.jpg); background-repeat: no-repeat; top: 10px; } .keuzevak { border: medium inset #bc0101; left: 150px; position: absolute; top: 70px; width: 600px; padding: 4px; } [/code:1:804ebdea4f] En zoals het er uit moet zien (internet explorer): [img:804ebdea4f]http://img157.imageshack.us/img157/3018/ievp6.jpg[/img:804ebdea4f] Wat Firefox er van maakt: [img:804ebdea4f]http://img157.imageshack.us/img157/4264/firefoxrb6.jpg[/img:804ebdea4f] En wat opera er van maakt: [img:804ebdea4f]http://img157.imageshack.us/img157/3314/operanj1.jpg[/img:804ebdea4f] Het probleem dat het menu niet recht onder de header komt is opgelost, nu zit ik alleen met het probleem dat hij het plaatje op de een of andere manier niet 600 pixels breed wil maken terwijl hij dat toch echt wel is... Hierdoor is de menu balk breder dan de header (geld weer alleen voor opera en Firefox)
  • Ik denk dat het eerder aan je code ligt dan aan de foute weergave van Firefox of Opera. Er zijn een aantal dingen die ik zou willen opmerken: [list:6e64328a5a] [*:6e64328a5a] Gebruik een doctype. Liefst strict. Dit zet de browser in de juiste modus. Als je dat niet gebruikt zal Internet Explorer bijvoorbeeld zijn eigen box model gebruiken en zal het anders uitzien dan in Firefox. [*:6e64328a5a] Zowel de titel als het keuzevak zijn blokken. Waarom gebruik je een p, en een span tag? Ik zou in dit geval 2 divs gebruiken. [*:6e64328a5a] Die absolute positionering is niet nodig. Gebruik margin en padding om je elementen te positioneren. [*:6e64328a5a] Waarom gebruik je clip bij de header? Hiermee kun je stukken van een element verbergen. Volgens mij gebruik je het om het element te centreren. Gebruik "margin: 0 auto 0 auto" om te centreren. [/list:u:6e64328a5a] Zo werkt het wel (hoop ik :D): [code:1:6e64328a5a]<!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="nl" lang="nl"> <head> <title>Tim Kolvenbags Portfolio Site</title> <link href="style.css" rel="stylesheet" type="text/css"/> </head> <body> <div class="titel">Portfolio site van Tim Kolvenbag</div> <div class="keuzevak">Home | Wie ben ik | Wat doe ik | Portfolio</div> </body> </html>[/code:1:6e64328a5a] [code:1:6e64328a5a]body { margin:15px; } .titel { color: #FFF; background-color: #C00; width: 600px; height: 60px; margin: 0 auto 0 auto; padding: 12px 50px 7px 50px; font-size: 35px; } .keuzevak { margin: 0 auto 0 auto; border: 1px inset #bc0101; width: 688px; padding: 0 5px 0 5px; }[/code:1:6e64328a5a] Die breedte van het keuzevak (688px) heb ik zo uitgerekend: echte breedte titel = breedte titel (600px) + titel padding links (50px) + titel padding rechts (50px) breedte keuzevak = echte breedte titel - (keuzevak padding links (5px) + keuzevak padding rechts (5px) + breedte border links (1px) + breedte border rechts (1px))
  • Hey bedankt, zo werkt hij inderdaad :D Alleen hoe krijg ik het nu voor elkaar dat als ik een link maak in de menu balk de knoppen rood blijven en niet blauw worden met een streep er onder?
  • In de stylesheet: [code:1:72dca70e9a] a.menu { color: #B32400; text-decoration: none; } [/code:1:72dca70e9a] In de webpagina: [code:1:72dca70e9a] <a class="menu" href="index.htm" target="_self">Home</a> [/code:1:72dca70e9a]
  • [quote:6ef086ea7f="SHARK"]Ik denk dat het eerder aan je code ligt dan aan de foute weergave van Firefox of Opera. Er zijn een aantal dingen die ik zou willen opmerken: [list:6ef086ea7f] [*:6ef086ea7f] Zowel de titel als het keuzevak zijn blokken. Waarom gebruik je een p, en een span tag? Ik zou in dit geval 2 divs gebruiken. [/list:u:6ef086ea7f] [/quote:6ef086ea7f] Ik niet ;) Ik zou van het keuzevak een ul maken aangezien het eruit ziet als een navigatiemenu. Dus gewoon een ul met inline li elementen, net zo makkelijk. De | zou je met een border kunnen doen.
  • Opzich loopt het nu al best aardig met de site. Hij werkt nu in alle browsers, alleen in IE is hetn tekst vak net 2 pixels te breed, maar daar kan ik wel mee leven :) Ik heb hem nu ook [url=http://145.37.208.96/220031/index.html]hier[/url] online staan. En ik heb nog 1 laatste probleempje, op de pagina "wie ben ik?" wil ik naast de foto eigenlijk ook nog kunnen typen, ik heb al wat met css geprobeerd met het absolute plaatsen van de foto zodat die niet in het tekst stuk zou komen, maar dan werkt hij niet op alle resoluties goed...[/url]
  • Misschien is dit iets? [code:1:c0a9087e5b] <img src="foto.jpg" align="right" hspace="10"> <h1>Titel artikel</h1> <p>De inhoud van het artikel</p> [/code:1:c0a9087e5b] Met align kun je de foto uiteraard ook aan de linkerkant plaatsen.
  • Op mijn site heb ik een tekst wrap gemaakt aan de hand van[url=http://www.bigbaer.com/css_tutorials/css.image.text.wrap.tutorial.htm] dit voorbeeld[/url] wimb
  • [quote:4ae14ee20f="computer_nerdo"]op de pagina "wie ben ik?" wil ik naast de foto eigenlijk ook nog kunnen typen, ik heb al wat met css geprobeerd met het absolute plaatsen van de foto zodat die niet in het tekst stuk zou komen, maar dan werkt hij niet op alle resoluties goed...[/quote:4ae14ee20f]Zoals SHARK al zei, vergeet die absolute positionering. Zwart-wit gesteld, negen van de tien keer als er positioneringsvragen opduiken op dit forum zijn het beginners op het gebied van CSS die absolute positionering toepassen. Hoewel het zowat in elke CSS-beginnerscursus aan bod komt, is dat voor CSS echt compleet de verkeerde werkwijze. Nogmaals, vergeet dat je absoluut en relatief kunt positioneren en zet dingen voortaan vooral op z'n plaats door te spelen met afmetingen, margins, paddings.. [i:4ae14ee20f]En floats[/i:4ae14ee20f]. CSS-beginners gebruiken bijna nooit float, terwijl dat één van de meest gebruikte manieren is om te positioneren. Float maakt het bijvoorbeeld mogelijk om tekst naast je plaatje te krijgen. Op W3Schools vind je float niet onder positioneren, maar bij [url=http://www.w3schools.com/css/css_classification.asp]classificatie[/url]. Daar vind je ook voorbeelden van hoe je float gebruikt, ook eentje met [url=http://www.w3schools.com/css/tryit.asp?filename=trycss_float]tekst naast een plaatje[/url]. Positioneren doe je dus d.m.v. margins, paddings en floats, met idd als voorwaarde dat je een correct doctype gebruikt. [size=9:4ae14ee20f]Het voorbeeld van WimB vind ik mooi vanwege Sophie Marceau :wink: , maar minder mooi vind ik het gebruik van een hele hoop niksbetekenende divs. (Op [url=http://www.alistapart.com/articles/sandbags]ALA[/url] is ook een techniek daarvoor, heb alleen nog niet gekeken of het wat is.)[/size:4ae14ee20f]

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.