[css + html] Waarom verschijnt het geschreven css niet? - Softwareontwikkeling

zaterdag 20 december 2003 04:47

Acties:

Verwijderd

Topicstarter

Beste mensen,

Ik heb een probleem met het weergeven van css

. Het probleem is dat op internet de plaatjes en opmaak niet word weergegeven van de css file.:

Cascading Stylesheet:

/* CSS Document */

#1{ background-image: url(images/kadera.gif);}

#2{ background-image: url(images/kaderb.gif);}

#3{ background-image: url(images/korrel_pl2a.jpg);} 

#4{ background-image: url(images/korrel_pl2b.jpg);}

font.pos1{
position:relative;
left:10; } 

p.pos2{
position:relative;
left:20; }

en de code van de site is:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="layout.css" type="text/css">
<title>Schietvereniging "De Korrel"</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body bgcolor="#0099FF" onLoad="MM_preloadImages('Images/Beginpaginab.gif','Images/Informatieb.gif','Images/Openingstijdenb.gif','Images/Nieuwsb.gif','Images/Foto%20Archiefb.gif','Images/Evenementenb.gif','Images/Schietbanenb.gif','Images/Wegwijzerb.gif','Images/Lidmaatschapb.gif','Images/Linksb.gif','Images/Gegevensb.gif')">
<center>
<table border="0" height="800" width="798" cellspacing="0">
<tr>
      <td ID="1" width="616" height="800" align="left" valign="top"> <font size="2" face="Verdana" class="pos1"> 
        <p><br>
        <center>
          <table width="584" border="0" cellspacing="0">
            <tr> 
              <td width="292" height="241" ID="3">&nbsp;</td>
              <td width="294" height="241" ID="4">&nbsp;</td>
            </tr>
          </table>
        </center>
        <p>Hallo sportvriend(in), 
        <p>Namens het bestuur heet ik u van harte welkom op onze digitale thuisbasis.<br>
          Hier kunt u informatie vinden betreffende onze schiet- sportvereniging.<br>
          Door middel van het menu aan de rechterzijde kunt u diverse informatie 
          oproepen.</p>
        <p>Kijkt u gerust rond op deze website. Mocht u nadien nadere informatie 
          nodig hebben, dan kunt u ons altijd bellen, een e-mail sturen,of u kunt 
          ons tijdens de openingstijden van de vereniging met een bezoek vereren. 
        </p>
        <p> </p>
        <br><p></p>
        <table width="600" border="0" cellspacing="1">
          <tr>
            <td width="300" valign="top"><p><font size="2" face="Verdana">met 
                schuttersgroeten,</font></p>
              <p> </p>
              <p><font size="2" face="Verdana">Henk van der Donk<br>
                <em>voorzitter</em></font></td>
            <td width="293">[img]"Images/Schiet_01.jpg"[/img]</td>
          </tr>
        </table>
        </font>
        <font size="2" face="Verdana" class="pos1">&nbsp; </font></td>
      <td ID="2" width="178" height="800" align="left" valign="top"><br><center>
        [img]"Images/logo.gif">[/img]<br>
        <p class="pos2"> <a href="home.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Beginpagina','','Images/Beginpaginab.gif',1)">[img]"Images/Beginpagina.gif"[/img]</a>[img]"Images/tussen.gif"[/img]<a href="Informatie.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Informatie','','Images/Informatieb.gif',1)">[img]"Images/Informatie.gif"[/img]</a>[img]"Images/tussen.gif"[/img]<a href="Open.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Openingstijden','','Images/Openingstijdenb.gif',1)">[img]"Images/Openingstijden.gif"[/img]</a>[img]"Images/tussen.gif"[/img]<a href="Nieuws.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Nieuws','','Images/Nieuwsb.gif',1)">[img]"Images/Nieuws.gif"[/img]</a>[img]"Images/tussen.gif"[/img]<a href="Foto%20Archief.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Foto Archief','','Images/Foto%20Archiefb.gif',1)">[img]"Images/Foto%20Archief.gif"[/img]</a>[img]"Images/tussen.gif"[/img]<a href="Evenementen.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Evenementen','','Images/Evenementenb.gif',1)">[img]"Images/Evenementen.gif"[/img]</a>[img]"Images/tussen.gif"[/img]<a href="Schietbanen.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Schietbanen','','Images/Schietbanenb.gif',1)">[img]"Images/Schietbanen.gif"[/img]</a>[img]"Images/tussen.gif"[/img]<a href="Wegwijzer.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Wegwijzer','','Images/Wegwijzerb.gif',1)">[img]"Images/Wegwijzer.gif"[/img]</a>[img]"Images/tussen.gif"[/img]<a href="Lidmaatschap.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Lidmaatschap','','Images/Lidmaatschapb.gif',1)">[img]"Images/Lidmaatschap.gif"[/img]</a>[img]"Images/tussen.gif"[/img]<a href="Links.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Links','','Images/Linksb.gif',1)">[img]"Images/Links.gif"[/img]</a>[img]"Images/tussen.gif"[/img]<a href="Gegevens.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Gegevens','','Images/Gegevensb.gif',1)">[img]"Images/Gegevens.gif"[/img]</a></p>
      </td>
</tr>
</table>

</center>
</body>
</html>

De site ziet er zo uit: http://www.dekorrel.nl
maar de site moet er zo uitzien: http://www.xs4all.nl/~hvaltena/originee.gif

Ik zit hier zo erg mee in de maag en ik krijg het maar niet opgelost

. In dreamweaver, waar het mee is gemaakt, laat het wel goed zien alleen als ik het eenmaal op internet zet en ik open die site dan lijkt het net of er geen css aan is toegevoegd. Ook zie ik in windows bij explorer offline die site normaal tot dat ie online is....

Willen jullie me alsjeblieft helpen,

Ik heb overal al gezocht en aan al mijn vrienden gevraagd(die verstand er van hebben

)

alvast bedankt.

zaterdag 20 december 2003 05:29

Acties:

Verwijderd

De benaming #1 wordt gebruikt door anchors, ik denk niet dat je die zondermeer mag gebruiken voor classes. Daarnaast moet het plaatje wel bestaan: http://www.dekorrel.nl/images/kadera.gif en kun je wellicht beter absoluut pathverwijzing gebruiken in externe CSS of gebruik maken van de <base href="http://www.dekorrel.nl/"> tag.

Gebruik in plaats daarvan:

Cascading Stylesheet:

td.main1 { 
     background-image: url(http://www.dekorrel.nl/images/kadera.gif);
     width: 616px; height: 800px;
 }

HTML:

1	<td class="main1" width=616 height=800 align="left" valign="top">

Overigens begrijp ik niet helemaal het nut van werken met een externe stylesheet als je alle overige opmaakt nog steeds hardcoded in HTML staat. Zo zou je ook die background image in hardcoded HTML kunnen doen:

HTML:

1 2	<td width=616 height=800 align="left" valign="top" background="http://www.dekorrel.nl/images/kadera.gif">

of met een style code aangeroepen binnen de HTML:

HTML:

1 2	<td width=616 height=800 align="left" valign="top" STYLE="background-image:url('http://www.dekorrel.nl/images/kadera.gif');">

Algemene tip: als je layout steunt op achtergronden in tables/cells, zorg dan dat ze tevens een achtergrond kleur hebben zodat de tekst die erop komt ook leesbaar is als de plaatjes wegvallen.

Verder: Haal je HTML eens door een validator. Want op dit moment staan er een hoop tags die niet afgesloten worden (zoals /font) of die verbetering kunnen gebruiken (zoals plaatjes een grootte/alt-tekst geven en a.hrefs een title-tekst). Op die manier leer je gelijk stapsgewijs een beetje meer HTML zonder dat je hoeft te vertrouwen op de coding van een semi WYSIWYG programma.

Tip: gebruik voor die menuknoppen transparante gifjes ipv met witte achtergrond. Dat ziet er dan een stuk gelikter uit.
Afbeeldingslocatie: http://www.theforumisdown.com/uploadfiles/1203/Evenementenb.gif

Afbeeldingslocatie: http://www.theforumisdown.com/uploadfiles/1203/Evenementenb.gif

ipv:

Afbeeldingslocatie: http://www.dekorrel.nl/Images/Evenementenb.gif

Ik zou in ieder geval eerst maar eens beginnen met het uploaden van je plaatjes.
http://www.dekorrel.nl/images/kadera.gif
http://www.dekorrel.nl/images/kaderb.gif
http://www.dekorrel.nl/images/korrel_pl2a.jpg
http://www.dekorrel.nl/images/korrel_pl2b.jpg

[ Voor 30% gewijzigd door Verwijderd op 20-12-2003 20:08 ]

zaterdag 20 december 2003 07:51

Acties:

Verwijderd

http://www.w3.org/TR/CSS21/selector.html#id-selectors en http://www.w3.org/TR/html401/struct/global.html#h-7.5.2 (mag niet met cijfer beginnen)
http://www.w3.org/TR/CSS21/syndata.html#length-units (een lengte moet een eenheid bevatten)

[ Voor 6% gewijzigd door Verwijderd op 20-12-2003 07:52 ]

zaterdag 20 december 2003 13:31

Acties:

Verwijderd

Topicstarter

ik vind het ech heel erg aardig dat jullie mij helpen _/-o_

Ik heb het geprobeerd van de plaatjes alleen dat lost nog niets op omdat die twee posities:

Cascading Stylesheet:

font.pos1{
position:relative;
left:10; } 

p.pos2{
position:relative;
left:20; }

het ook niet doen

Ik heb die posities om de tekst iets op te schuiven
In windows accepteerd ie de css wel en doet ie het perfect alleen als ie eenmaal online staat doet alleen de css het niet.

en over die plaatjes: Ik weet niet hoe dat komt dat je ze niet afzonderlijk kan openen maar ik weet wel dat ze het doen.

Ik heb trouwens ook geprobeerd om de script intern te plaatsen maar toen deed ie het nog niet. :

HTML:

<style type="text/css">
#1{ background-image: url(images/kadera.gif);}

#2{ background-image: url(images/kaderb.gif);}

#3{ background-image: url(images/korrel_pl2a.jpg);} 

#4{ background-image: url(images/korrel_pl2b.jpg);}

font.pos1{
position:relative;
left:10; } 

p.pos2{
position:relative;
left:20; }
</style>

Zouden jullie me willen blijven helpen? Ik ben jullie daar erg dankbaar voor

[ Voor 26% gewijzigd door Verwijderd op 20-12-2003 13:45 ]

zaterdag 20 december 2003 13:47

Acties:

crisp

Devver

Pixelated

Font is een deprecated tag, daarbij is het ook nog eens een inline element en mag je er dus geen blocklevel elementen in opnemen.
Als het je enkel om het inspringen gaat zou ik als ik jou was eens gaan kijken naar margins

Intentionally left blank

zaterdag 20 december 2003 13:55

Acties:

Verwijderd

@Supa Default, wellicht helpt het als je _alle_ comments leest, dus ook die korte van mij. Daarnaast is het altijd handig om _voordat_ je begint met het bouwen van sites e.d. eerst wat geoefend te zijn met CSS+HTML.

zaterdag 20 december 2003 14:16

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op 20 december 2003 @ 13:55:
@Supa Default, wellicht helpt het als je _alle_ comments leest, dus ook die korte van mij. Daarnaast is het altijd handig om _voordat_ je begint met het bouwen van sites e.d. eerst wat geoefend te zijn met CSS+HTML.

Ik heb jou message gelezen en ik zou hier niets plaatsen als ik niets van html afwist

. Ik heb het gewoon met dreamweaver gedaan omdat ik dat makkelijker vind. Ik heb daarom ook alleen html gebruikt en css omdat ik daar wel veel van af weet. Ik kan onderhand html wel dromen

Maar als ik vraag om een oplossing en ik krijg verwijzing waar ik het niet uit kan halen, post dan aub de oplossing. En zeg niet dat ik er niet naar gekeken heb

Toch bedankt

[ Voor 4% gewijzigd door Verwijderd op 20-12-2003 14:18 ]

zaterdag 20 december 2003 14:28

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op 20 december 2003 @ 14:16:
[...]

Ik heb jou message gelezen en ik zou hier niets plaatsen als ik niets van html afwist . Ik heb het gewoon met dreamweaver gedaan omdat ik dat makkelijker vind. Ik heb daarom ook alleen html gebruikt en css omdat ik daar wel veel van af weet. Ik kan onderhand html wel dromen

Maar als ik vraag om een oplossing en ik krijg verwijzing waar ik het niet uit kan halen, post dan aub de oplossing. En zeg niet dat ik er niet naar gekeken heb

Toch bedankt

dan vraag je toch om iets meer uitleg? je zegt wel veel van HTML en CSS te weten, maar annevankesteren wijst je gewoon op een grote fout die je maakt, namelijk dat een id niet met een cijfer mag beginnen

Verder maak je geen goed gebruik van CSS omdat je nog veel te veel style-elementen hardcoded in je HTML opneemt, en maak je nesting-fouten...

een complete oplossing posten is wel makkelijk voor jou, maar daar leer je uiteindelijk niets van...

[ Voor 6% gewijzigd door crisp op 20-12-2003 14:29 ]

Intentionally left blank

zaterdag 20 december 2003 18:20

Acties:

Verwijderd

Topicstarter

crisp schreef op 20 december 2003 @ 14:28:
[...]

dan vraag je toch om iets meer uitleg? je zegt wel veel van HTML en CSS te weten, maar annevankesteren wijst je gewoon op een grote fout die je maakt, namelijk dat een id niet met een cijfer mag beginnen

Verder maak je geen goed gebruik van CSS omdat je nog veel te veel style-elementen hardcoded in je HTML opneemt, en maak je nesting-fouten...

een complete oplossing posten is wel makkelijk voor jou, maar daar leer je uiteindelijk niets van...

Heb je gelijk in.

Maar denken jullie dan dat het aan de cijfers ligt van dat ie helemaal niets toepast van het css?

en dat wat ik heb gedaan met die pos1 en pos2 om de tekst te verschuiven, kan dat ook met html dan?

zaterdag 20 december 2003 18:29

Acties:

Verwijderd

Maar denken jullie dan dat het aan de cijfers ligt van dat ie helemaal niets toepast van het css?

Maakt dat uit? Het is gewoon fout en dat verbeter je dan. Dan kijk je even of het beter werkt.

en dat wat ik heb gedaan met die pos1 en pos2 om de tekst te verschuiven, kan dat ook met html dan?

WAT?! Positioneren e.d. doe je met CSS (gehele layout regel je daarmee), maar daar zat dus ook een fout in. Zie punt 2 uit m'n eerste reply op dit topic.