A Href geen kleur

Status
Niet open voor verdere reacties.
Pff volgens mij zit de fout in mijn layout...

kunnen jullie hier naar kijken??

HTML: 
<html>
<head>
<title>Index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- Save for Web Styles (Y Music2-sliced.psd) -->

<!-- End Save for Web Styles -->
<link href="style/style.css" rel="stylesheet" type="text/css">
</head>
<body style="background-color:#313131; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<!-- Save for Web Slices (Y Music2-sliced.psd) -->
<div id="wrapper">

  <div align="center" class="Table_01">
<div class="Banner"></div>
<div class="Menu-0">
<img src="images/Menu_0.gif" width="82" height="50" alt="" />
</div>
<div class="id03">
<img src="images/03.gif" width="3" height="48" alt="" />
</div>
<div class="Menu-Home">
<a href="index.html">
<img src="images/Menu_Home.gif" width="118" height="50" border="0" alt="" /></a>
</div>
<div class="Menu-Our-Music">
<img src="images/Menu_Our_Music.gif" width="119" height="50" alt="" />
</div>
<div class="Menu-Events">
<img src="images/Menu_Events.gif" width="120" height="50" alt="" />
</div>
<div class="Music-Programs">
<img src="images/Music_Programs.gif" width="120" height="50" alt="" />
</div>
<div class="Menu-Downloads">
<img src="images/Menu_Downloads.gif" width="120" height="50" alt="" />
</div>
<div class="Menu-Contact-us">
<img src="images/Menu_Contact_us.gif" width="118" height="50" alt="" />
</div>
<div class="Menu-0-1">
<img src="images/Menu_0_1.gif" width="100" height="50" alt="" />
</div>
<div class="id11">
<img src="images/11.gif" width="3" height="296" alt="" />
</div>
<div class="id12">
<img src="images/12.gif" width="82" height="773" alt="" />
</div>
<div class="id13">
<img src="images/13.gif" width="815" height="39" alt="" />
</div>
<div class="Y-Music2-14">Textbox_1
</div>
<div class="id15">
<img src="images/15.gif" width="12" height="222" alt="" />
</div>
<div class="Y-Music2-16">Textbox_2
</div>
<div class="id17">
<img src="images/17.gif" width="112" height="255" alt="" />
</div>
<div class="id18">
<img src="images/18.gif" width="703" height="33" alt="" />
</div>
<div class="id19">
<img src="images/19.gif" width="352" height="44" alt="" />
</div>
<div class="id20">
<img src="images/20.gif" width="20" height="44" alt="" />
</div>
<div class="id21">
<img src="images/21.gif" width="346" height="44" alt="" />
</div>
<div class="id22">
<img src="images/22.gif" width="100" height="479" alt="" />
</div>
<div class="id23">
<img src="images/23.gif" width="3" height="189" alt="" />
</div>
<div class="tekstvak-3">Textvak_3
</div>
<div class="id25">
<img src="images/25.gif" width="20" height="189" alt="" />
</div>
<div class="Tekstvak-4">Textvak_4
</div>
<div class="id27">
<img src="images/27.gif" width="718" height="45" alt="" />
</div>
<div class="id28">
<img src="images/28.gif" width="3" height="201" alt="" />
</div>
<div class="tekstvak-5">Textbox_5
</div>
<div class="id30">
<img src="images/30.gif" width="12" height="201" alt="" />
</div>
<div class="id31">
<img src="images/31.gif" width="703" height="41" alt="" />
</div>
<div class="id32">
<img src="images/32.gif" width="109" height="24" alt="" />
</div>
<div class="Yx20Music2-sliced-33">
<a href="index.html">
<img src="images/Y-Music2-sliced_33.gif" width="75" height="24" border="0" alt="" /></a>
</div>
<div class="id34">
<img src="images/34.gif" width="46" height="24" alt="" />
</div>
<div class="id35">
<img src="images/35.gif" width="64" height="24" alt="" />
</div>
<div class="id36">
<img src="images/36.gif" width="65" height="24" alt="" />
</div>
<div class="id37">
<img src="images/37.gif" width="50" height="24" alt="" />
</div>
<div class="id38">
<img src="images/38.gif" width="58" height="24" alt="" />
</div>
<div class="id39">
<img src="images/39.gif" width="72" height="24" alt="" />
</div>
<div class="id40">
<img src="images/40.gif" width="43" height="24" alt="" />
</div>
<div class="id41">
<img src="images/41.gif" width="79" height="24" alt="" />
</div>
<div class="id42">
<img src="images/42.gif" width="41" height="24" alt="" />
</div>
<div class="id43">
<img src="images/43.gif" width="86" height="24" alt="" />
</div>
<div class="id44">
<img src="images/44.gif" width="112" height="24" alt="" />
</div>
<div class="id45">
<img src="images/45.gif" width="900" height="115" alt="" />
</div>
<span class="Banner"><img src="images/Banner.gif" width="900" height="356" alt="" /></span> </div>
</div>
</div>

</div>

</body>
</html>




En de css:

(style/style.css)

Code: 
div.Table_01 {
	margin: 0px auto;
	position:absolute;
	left:71px;
	top:0px;
	width:900px;
	height:1318px;
}
.container {
	margin: auto;
}


container {
margin: 0px auto;
height:1318px;
width:900px
}

div.Banner {
	position:absolute;
	left:0px;
	top:0px;
	width:900px;
	height:356px;
}

div.Menu-0 {
position:absolute;
left:0px;
top:356px;
width:82px;
height:50px;
}

div.id03 {
position:absolute;
left:82px;
top:356px;
width:3px;
height:48px;
}

div.Menu-Home {
position:absolute;
left:85px;
top:356px;
width:118px;
height:50px;
}

div.Menu-Our-Music {
position:absolute;
left:203px;
top:356px;
width:119px;
height:50px;
}

div.Menu-Events {
position:absolute;
left:322px;
top:356px;
width:120px;
height:50px;
}

div.Music-Programs {
position:absolute;
left:442px;
top:356px;
width:120px;
height:50px;
}

div.Menu-Downloads {
position:absolute;
left:562px;
top:356px;
width:120px;
height:50px;
}

div.Menu-Contact-us {
position:absolute;
left:682px;
top:356px;
width:118px;
height:50px;
}

div.Menu-0-1 {
position:absolute;
left:800px;
top:356px;
width:100px;
height:50px;
}

div.id11 {
position:absolute;
left:82px;
top:404px;
width:3px;
height:296px;
}

div.id12 {
position:absolute;
left:0px;
top:406px;
width:82px;
height:773px;
}

div.id13 {
position:absolute;
left:85px;
top:406px;
width:815px;
height:39px;
}

div.Y-Music2-14 {
position:absolute;
left:85px;
top:445px;
width:357px;
height:222px;
}

div.id15 {
position:absolute;
left:442px;
top:445px;
width:12px;
height:222px;
}

div.Y-Music2-16 {
position:absolute;
left:454px;
top:445px;
width:334px;
height:222px;
}

div.id17 {
position:absolute;
left:788px;
top:445px;
width:112px;
height:255px;
}

div.id18 {
position:absolute;
left:85px;
top:667px;
width:703px;
height:33px;
}

div.id19 {
position:absolute;
left:82px;
top:700px;
width:352px;
height:44px;
}

div.id20 {
position:absolute;
left:434px;
top:700px;
width:20px;
height:44px;
}

div.id21 {
position:absolute;
left:454px;
top:700px;
width:346px;
height:44px;
}

div.id22 {
position:absolute;
left:800px;
top:700px;
width:100px;
height:479px;
}

div.id23 {
position:absolute;
left:82px;
top:744px;
width:3px;
height:189px;
}

div.tekstvak-3 {
position:absolute;
left:85px;
top:744px;
width:349px;
height:189px;
}

div.id25 {
position:absolute;
left:434px;
top:744px;
width:20px;
height:189px;
}

div.Tekstvak-4 {
position:absolute;
left:454px;
top:744px;
width:346px;
height:189px;
}

div.id27 {
position:absolute;
left:82px;
top:933px;
width:718px;
height:45px;
}

div.id28 {
position:absolute;
left:82px;
top:978px;
width:3px;
height:201px;
}

div.tekstvak-5 {
position:absolute;
left:85px;
top:978px;
width:703px;
height:160px;
}

div.id30 {
position:absolute;
left:788px;
top:978px;
width:12px;
height:201px;
}

div.id31 {
position:absolute;
left:85px;
top:1138px;
width:703px;
height:41px;
}

div.id32 {
position:absolute;
left:0px;
top:1179px;
width:109px;
height:24px;
}

div.Yx20Music2-sliced-33 {
position:absolute;
left:109px;
top:1179px;
width:75px;
height:24px;
}

div.id34 {
position:absolute;
left:184px;
top:1179px;
width:46px;
height:24px;
}

div.id35 {
position:absolute;
left:230px;
top:1179px;
width:64px;
height:24px;
}

div.id36 {
position:absolute;
left:294px;
top:1179px;
width:65px;
height:24px;
}

div.id37 {
position:absolute;
left:359px;
top:1179px;
width:50px;
height:24px;
}

div.id38 {
position:absolute;
left:409px;
top:1179px;
width:58px;
height:24px;
}

div.id39 {
position:absolute;
left:467px;
top:1179px;
width:72px;
height:24px;
}

div.id40 {
position:absolute;
left:539px;
top:1179px;
width:43px;
height:24px;
}

div.id41 {
position:absolute;
left:582px;
top:1179px;
width:79px;
height:24px;
}

div.id42 {
position:absolute;
left:661px;
top:1179px;
width:41px;
height:24px;
}

div.id43 {
position:absolute;
left:702px;
top:1179px;
width:86px;
height:24px;
}

div.id44 {
position:absolute;
left:788px;
top:1179px;
width:112px;
height:24px;
}

div.id45 {
position:absolute;
left:0px;
top:1203px;
width:900px;
height:115px;
}

.wrapper {
	position: relative;
	width: 970px; 
	margin: 0 auto;
}


Zoals je kunt zien heb ik al meerdere dingen geprobeerd in de css.. niks werkt gewoon :S
Ligt het aan mijn lay-out?
 
Ik denk dat je je met deze lay-out heel veel problemen op de hals gaat halen. Hij is prima te centreren, daar niet van, maar hij is echt waanzinnig ingewikkeld. Je hebt eigenlijk met behulp van divs (de tegenwoordige manier) 'n soort table-lay-out gemaakt (zoals 't tot zo'n jaar of tien geleden moest).
Veel en veel te veel divs, dat gaat echt enorme problemen opleveren als je 't gaat invullen met tekst, knoppen, enz.
Zo'n menu bijvoorbeeld wordt normaal genomen in 'n <ul> gestopt, waarbij dan elke knop in 'n <li> wordt gezet. Dat scheelt al gelijk acht divs.

Ik zou opnieuw beginnen en dan veel minder divs gebruiken. En als je programma dat niet kan, dan wordt het tijd om naar 'n beter programma te kijken, of het gewoon met de hand te doen.
(Even iets positiefs: je code is wel heel netjes neergezet, heel overzichtelijk. Dat maakt het 'n stuk makkelijker fouten te vinden.)

Je vraag.
* Er mist 'n doctype aan het begin van je code. Ik heb voor 'n strict gekozen vanwege hoe je code eruit ziet.
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="nl" lang="nl">
Dit moet je helemaal bovenaan je code zetten, in plaats van het <html> wat er nu staat. Er mag zelfs geen spatie of lege regel boven staan.
Dit vertelt de browser wat voor html en zo het is. Zonder doctype zal elke browser het op z'n eigen manier gaan weergeven. De twee keer lang="nl" geeft aan dat het 'n Nederlandstalige pagina is. Kun je ook vervangen door "en" of zo als het Engelstalig is.

* <link href="style.css enz. moet eindigen op "text/css" />, dus op spatie + / + >

* Dit soort fouten kun je vinden door je code te valideren. De validator wijst je dan op heel veel fouten. Die moeten er allemaal uit, want dat soort fouten kan de grootste problemen veroorzaken. Zoeken naar verkeerde weergave en zo heeft in de regel geen zin als er nog fouten in zitten.
html valideren: http://validator.w3.org/
css valideren: http://jigsaw.w3.org/css-validator/
Valideren moet je echt heel vaak doen, eigenlijk na elke wijziging. Dan weet je gelijk of die wijziging geen fout bevat.

* Regel 14 (nummering zoals die hier op het forum staat) in je html: align="center" moet weg. align wordt al zo'n tien jaar afgeraden, is verouderd.
Voor tekst, afbeeldingen e.d. (inline-elementen) gebruik je in de css: text-align: center;

* Regel 24 en regel 107: border="0" moet weg, wordt ook al zo'n tien jaar afgeraden. Je mag het nog wel gebruiken, net als align, met 'n ander doctype, maar daarmee blokkeer je de weg naar html5, wat op dit moment wordt ingevoerd. Kan veel beter met css. Ik neem aan dat je de lelijke blauwe rand rondom de plaatjes die in 'n link staan weg wilt hebben. (wie die kleur ooit heeft uitgekozen, brrrr).
Code: 
a img {border: 0;}
a img: alle images die binnen 'n link liggen. En dan de rand weghalen.

* De twee </div>'s helemaal onderaan moeten weg. Dit soort fouten kan de wildste problemen geven, vooral in Internet Explorer 6 en 7. Ook daar let de validator op.

Nou hoor ik je denken: ik zal nog 'ns 'n vraag stellen. Krijg ik 'n enorm verhaal maar antwoord, pffff. Tja, ik heb in de politiek gezeten en dan blijft je kletsen :D
Goed, je eigenlijke vraag: het centreren.
Bij problemen moet je hoe dan ook beginnen de fouten eruit te halen, vandaar het hele verhaal. Zeker dingen als het doctype en die </div>'s kunnen invloed op het centreren hebben, maar eigenlijk alle fouten.

* In je css staat .wrapper
Dat moet zijn: #wrapper
. is voor 'n class, # voor 'n id. En in je html staat <div id="wrapper">
Dan heeft .wrapper geen enkele invloed, je had net zo goed .sinterklaas kunnen schrijven. 'n class mag je vaker gebruiken op dezelfde pagina, 'n id maar één keer.

Nog twee algemene dingen:
* In je class- en id-namen gebruik je hoofd- en kleine letters. Je kunt beter alleen kleine letters, cijfers en het teken - gebruiken. Er zijn geen regels voor hoofd- en kleine letters in css, en dat leidt tot het verschillend uitleggen door verschillende browsers. Voor de ene browser is Huis hetzelfde als huis, voor de ander niet.

* Je gebruikt namen als 'Menu-Home'. Dat is 'n duidelijke naam (alleen de hoofletters weg dus), want over 10 jaar weet je nog wat je bedoelt.
Maar id11 t/tm id45: iets zegt mij dat je over tien jaar niet meer weet waar dit voor stond. Als 'n ander naar je code moet kijken, zijn dat ook veel te onduidelijke namen. ik zou namen kiezen die beschrijven waar ze voor staan, zoals dat 'menu-home'.

En vooral dus: veel en veel minder divs, dan heb je ook veel minder id's nodig.
 
Laatst bewerkt:
Oke, maar ik moet die hele lay-out dus op nieuw gaan maken..
Ik heb eigenlijk niet zo veel verstand van html, daarom gebruik ik dat programma.

Dus hoe moet ik verder..?
 
Is de hele html ook door dat programma gemaakt? Of heb je die zelf gemaakt?
Edit: en welk programma is dat?
 
Ik heb niks zelf gedaan, alleen bewerkt
Ik heb hem in photoshop gemaakt en dan ook in photoshop als html gemaakt (cs4)
 
Aha, dat verklaart al die namen en zo. Ik dacht al zoiets.
Eerst nog 'n vraag. Klopt mijn idee dat je 'n vrij grote afbeelding hebt gebruikt en die in allemaal stukjes hebt gehakt? Zoals voor elk deel van 't menu 'n stukje?
 
Ja, 't wordt ook wel slicen genoemd :D
Ik ben daar in 't algemeen helemaal niet zo'n voorstander van. Bijvoorbeeld omdat jouw lay-out al zo'n 50 oproepen naar de server nodig heeft alleen al om alle afbeeldingen binnen te halen. Daardoor kan 'n pagina echt heel traag worden met openen.
Bij de lay-out die je nu hebt is nog 'n bijkomend probleem, dat alle afbeeldingen als <img> en niet als achtergrond-afbeelding worden weergegeven. Dat betekent dat je enorm moet gaan lopen priegelen om tekst e.d. op de goede plaats te krijgen.

In theorie is 't mogelijk om bijvoorbeeld alle stukjes van dat menu precies op de goed plaats te krijgen. Maar zodra er wordt gezoomd, of als de lettergrootte wordt veranderd, valt je hele lay-out uit elkaar. (Bij zoomen kán 't goed gaan, maar met zoveel stukjes is die kans niet zo groot.)

Je hebt 'n aantal mogelijkheden (en mogelijk (hopelijk!) gaan anderen hier ook nog reageren met hoe 't ook zou kunnen):
* Doorgaan met wat je hebt. Maar dat wordt dus echt heel moeilijk, zelfs voor 'n ervaren iemand.
* In minder stukken slicen. Dus bijvoorbeeld het menu en die andere horizontale balk lager als één geheel houden.
* Wat ik zou doen: ik ga ervan uit dat het 'n achtergrond-afbeelding is die iets weergeeft, niet twee of drie gekleurde vlakken of zo, maar 'n foto of iets dergelijks.
Houdt die afbeelding gewoon in een geheel. Ga daar de html enz. gewoon overheen zetten. Geef de pagina 'n breedte en centreer hem, dan zie je altijd de hele afbeelding.
Eigenlijk moet je daarvoor html en css leren, want met de hand geschreven code is nog altijd veel en veel beter dan wat het duurste programma kan leveren.
'n Uitstekende gratis Nederlandstalige cursus staat op http://www.web-garden.be/
Anders kun je ook 'n wysiwyg-editor gebruiken (what you see is what you get). Die maakt html en css zelf aan, maar altijd veel minder goed dan met de hand. Bovendien moet je zo'n programma vaak ook corrigeren, dus zelf enige kennis van html en css hebben is echt handig.
'n Gratis editor die code levert die in alle browsers werkt is Kompozer:
http://www.kompozer.net/download.php

Als je door wilt gaan met wat je hebt, dan moet je nu eerst die dingen gaan wijzigen die hierboven staan.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan