CSS menu

Status
Niet open voor verdere reacties.
D

DutchDisturbed

Gebruiker
Lid geworden
31 mei 2004
Berichten
317
Eej mensen ik had zelf een menu gemaakt, maar die werkte niet ok. nu kom ik op internet steeds vergelijkbare menu's tegen zoals onderstaande
Code: 
<ul id="navigation">
<li><a href="index.html">WidgetCo Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="fun.html">Widgety Fun!</a></li>
<li><a href="support.html">Support</a></li>
<li><a href="about.html" id="current">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

Code: 
/* traditional navbar */
#navigation {padding: 3px 0; margin: 0;
  border: 1px solid #BBC; background: #DDE;
  font: bold 12px Verdana, sans-serif;}
#navigation li {list-style: none; margin: 0;
  display: inline;}
#navigation li a {padding: 3px 0.5em;
  border-right: 1px solid #BBC;
  text-decoration: none;}
#navigation li a:link {color: #448;}
#navigation li a:visited {color: #667;}
#navigation li a:hover {border-color: #88C; color: #000; background: #AAE;}
nu zijn hier 2 dingen mis mee wat mij betreft
  1. in firefox staan de verschillende vakken niet tegen elkaar aan (in IE wel) maar ik heb geen flauw idee hoe ik dit voor elkaar krijg. ben al op verschillende plekken aan het klooien geweest met margin's en paddings.
  2. en misschien wel het belangrijkste: zodra je over het menu heengaat komt er een of andere zeer storende blauwe lijn tevoorschijn! ik krijg deze niet weg...
in eerste instantie was het laatste niet het geval, maar dit kwam pas nadat ik een doctype in mn pagina gezet had...

hopelijk hebben jullie een oplossing!
thnx
 
Ik heb deze code gewoon gekopieerd naar een html bestand met en zonder doctype, maar ondervind zowel in IE als in FF geen problemen.

Greetz : Jer:cool:en.
 
bizar....
al heb ik in dat menu alles wel al opgelost
maar nu verschijnt er ook in een ander menutje en bij mn gewone tekst een underlining en snap niet wat ik daar aan kan doen. zal m straks effe online zetten iig...
thnx!

--------------------------------
EDIT
Ik heb natuurlijk gewoon de verkeerde doctype gebruikt!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
deze staat er bij mij in en die heb ik uit een andere pagina gekopieerd, waar ik ook het menu gevonden heb...
welke zou ik erin kunnen zetten?
-> verder iemand nog een oplossing voor de marges in Firefox?
thnx
 
Laatst bewerkt:
Vreemd, ik gebruik deze doctype, en heb er nog nooit last van gehad.. ook niet met jouw code..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Om de Marges aan te passen voor Firefox doe je zoiets:
Code: 
margin: 10px !important;
margin: 20px;

FireFox zal de regel met !important toepassen, terwijl IE deze negeert. De importantregel moet wel boven de gewone staan, anders heeft ie geen effect!

--Johan
 
eej thnx voor de reactie
ik krijg met
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
qua plaatsing alles prima, maar dus met die lijnen eronder (gebruik trouwens nog niet de nieuwste versie omdat ik op mijn site voornamelijk oudere versies nog tegenkom)

met een oude die 1st page 2000 er standaard inzet
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
krijg ik geen lijnen maar is de plaatsing in IE weer een rommel
deze versie staat nu online op de eerder gegeven link

en de nieuwe versie 1stpage 2006 geeft standaard
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
bij nieuwe documenten, maar dan krijg ik weer die onderlijning.

het is dus wel op te lossen met de oude doctype, maar is dat verstandig? het liefst gebruik ik de nieuwere en is dat onderlijningsprobleem opgelost. dan hoef ik ook niet aan te gaan *****n met verschillende marges

wat betreft het !important
ik krijg het zowieso niet voor elkaar die marges te verkleinen. als ik die aanpaste dan kreeg ik wel overlap in IE, maar in Firefox bleef alles gewoon staan
(kan wel weer aan de doctype liggen misschien?)
thnx again!

______Edit
die laatste doctype geeft geen onderlijning maar ook verschil in positioning
so what to do?
 
Laatst bewerkt:
ikzlef ben voorstander van het nieuwere doctype (XHTML) omdat die eigenlijk teruggaat naar de oorspronkelijke bedoeling van html.

text-decoration: none; zorgt normaalgezien voor het wegvallen van de onderstreping. Voeg die eigenschap anders ook eens toe aan de :link:active:hover stukken.

--Johan
 
heb het gevonden!
ik heb uit een online tutorial de :hover :link dingen etc gejat, maar omdat ik hier geen a:link van had gemaakt ging de hele tekst zich als link gedragen. nu dus wel gedaan en opgelost.
met deze doctype (xhtml) heb ik ook helemaal geen plaatsingsprobleem....
waar ik wel nog nieuwsgierig naar was is hoe ik 3 div's naast elkaar plaats.
ik heb nu de hoogte moeten specificeren waardoor ik alles precies kon plaatsen. wordt niet zo wijs uit online tutorials. wil dus eigenlijk dat de site door blijft lopen naar onder toe.
dank
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan