website aanpassen van frames naar div

Status
Niet open voor verdere reacties.
R

ringo1

Gebruiker
Lid geworden
12 nov 2011
Berichten
112
beste,

ik heb hier al het één en andere opgestoken waarvoor dank.

nu had ik van csshunter en nog een paar gehoord dat frames niet zo goed zijn en dit heb ik dus ook ondervonden. nu heb heel mijn website aangepast in div voorlopig staat hij nog niet online mits er nog wat foutjes in zitten hopelijk kan er iemand mij daar bij helpen

zo is het nu nog
http://www.vissersparadijs.be/website/snoekvissers.htm


vernieuwd dus in div
http://www.vissersparadijs.be/website1/snoekvissers.htm

nu in het nieuwe zie ik dus onder de link leden dat mijn foto's niet mooi in het midden worden weegegeven.

ook bij op de blijzijdes van de wedstrijduitslagen is er nog iets niet goed.
ik werk dus met een paginaindex script voor dus door te klikken naar de volgende bladzijdes bu dit komt niet mooi in het midden van de tabel te staan hoe kan ik dit oplossen?

ook krijg ik een paar errors in html validation
dit is er 1 van

Code: 
 Line 17, Column 163: end tag for "A" omitted, but its declaration does not permit this 
…easycounter.com/counter.php?ringo1" border="2" alt="Hit Counters"></p></a></li>

hopelijk ben ik wat duidelijk en kan er mij iemand wat helpen

alvast bedankt

grtz ringo
 
Dat met die plaatjes kan je eenvoudig regelen door de tabel de inhoud de laten centreren:
in de Tabel in je css moet je bovenaan je table definiëren, en daar moet je align: center; toevoegen. Als het goed is, zou het dan moeten werken.
En over die foutmelding: het lijkt erop dat je ergens de hyperlink bent vergeten te eindigen met </a>?
 
ik ben mijn pagina's nu allemaal eens aan het controleren op fouten, nu bij één pagina krijg ik de melding
Sorry! This document can not be checked.

hoe komt dit?

dit is de code van de pagina

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>nieuws</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="stylesheet snoekvissers.css" rel="stylesheet" type="text/css">
<style type="text/css"> 
 
h2 {color:#FFDEAD;
}
h3 {color:#FFDEAD;
}
p  {color:#FFDEAD;
}
 
</style>
</head>
<body>
<div id="container"></div>
<div id="header"><img alt="banner" src="banner.jpg" width="100%"></div>
<div id="menu">
<ul>
<li><img src="logo.png" width="170px" height="150" alt="logo"></li>
<li></li>
<li></li>
<li><p style="text-align:center;"><a href="http://www.easycounter.com/"><img src="http://www.easycounter.com/counter.php?ringo1" border="2" alt="Hit Counters"></a></p></li>
<li></li>
<li></li>
<li><a href="snoekvissers.htm">home</a></li>
<li><a href="http://www.vissersparadijs.be/">Forumindex</a></li>
<li><a href="reglement.html">Reglement</a></li>
<li><a href="leden.html">Leden</a></li>
<li><a href="kalender.html">Kalender + uitslagen</a></li>
<li><a href="bestuur.html">Bestuur</a></li>
<li><a href="klassement2012.html">Klassement&nbsp;2012</a></li>
<li><a href="album.html">Album</a></li>
<li><a href="http://snoekvissers.guestbook4you.be"onclick="window.open(this.href); return false;">Gastenboek</a></li>
<li><a href="linken.html">links</a></li>
<li><a href="nieuws.html">nieuws</a></li>
<li><a href="archief.html">Archief</a></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul></div>
<div id="content">
<h2>Souper en prijsuitreiking</h2>
<br>
<p>
Beste vissers,<br>
Het seizoen 2011 is alweer voorbij en naar jaarlijkse gewoonte houden wij eraan u uit te nodigen op ons souper,<br> 
gevolgd door de uitreiking der trofee�n en de andere prijzen. Er is ook een reuze tombola voorzien met zeer mooie prijzen!
<br>
jullie worden verwacht op<br>
</p>
<h3>Zondag 4 december 2011 om 12.30u.</h3>
<p>
in caf�-restaurant "in den Draaiput" in Sint-Laureins</p>
<hr>
<h2>Visuitzetting</h2>
<br>
<p>Er is op dinsdag 15/11/2011 1000kg brasem bijgestoken op de mesure. Dit kan de vangsten alleen maar verbeteren.</p><br><br>
</div>
<div id="footer">Designed by: Van der Brugge Ringo</div>
</body>
</html>

in de andere pagina's zijn de fouten bijna allemaal weg

grtz ringo
 
Heb je HTMLKit? Open daar anders die html pagina en druk dan op F9, hij scant dan ook alle fouten.
 
ik heb mijn pagina's allemaal kunnen controleren en ze zijn bijna allemaal vrij van fouten

nu heb ik wel nog een paar vraagjes

vraag 1

als ik een é plaats zie ik i.p.v een é een vierkantje hoe los ik dit op?

vraag 2
zoals ge hier op de afbeelding ziet staan de pagina nr's wel in het midden van mijn blad, maar mits ik met een menu zit links komen de nr's niet mooi onder de tabel alsook in de footer staat de tekst niet mooi in het midden. hoe los ik dit op?
nummers.jpg


grtz ringo
 
Staan er misschien spaties voor "Designed"? Ik weet niet hoe je de tekst erin gezet hebt, maar als je gewoon een div neemt, met een definitie in een stylesheet, dan moet je na <div-id="...."> een <p align="center"> neerzetten daaronder je tekst en aan het einde van je tekst een </p>
Succes!
 
hey ik heb dit zo gedaan

dit staat in mijn html code

Code: 
<div id="footer">Designed by: Van der Brugge Ringo</div>

en dit in mijn css

Code: 
#footer {
clear: both;
background-color: #ccc;
color:#433B38;
padding-bottom: 1em;
border-top: 1px solid #333;
text-align:center
}

de tekst staat wel in het midden van mijn pagina maar mits ik een menu staan heb links komt het niet mooi onder de tabel
 
Ondanks je duidelijke uitleg, snap ik nog nét niet helemaal wat je bedoelt. Gaat het nu om de Copyright tekst, of om de paginanummering? Of beide? Want de Copyright staat netjes gecentreerd, dacht ik zo.
 
Maar die Copyright balk is toch goed gecentreerd? Anders regel je die knopjes gewoon hetzelfde als een menu met balken?
 
hier ben ik nog eens

ik heb dus mijn site volledig in div gezet, maar nu heb ik toch een vraagje, mijn site staat op 700px maar ik krijg het niet in het midden
kan iemand eens kijken wat ik moet doen, zoals jullie zien staat mijn container op 700px maar hoe zit ik dit dus in het midden?

dit is mijn css
Code: 
/*stylesheet snoekvissers*/
body{
background-color:#433B38;}
#container {
width:700px;
}


#header{
width:700px; 
}

#menu{
width:190px;
float:left;
background-color:#696969;}
#menu ul {
list-style:none;
margin:5px;
padding:0px;
font-family:Georgia;
padding-top:10px 0px 0px 0px;
}
#menu ul a{
color :#ffffff ;
text-decoration :none ;
display:block;
height:25px;
border:1px solid #515A5A;
padding-top:3px;
padding-left:15px;
}

#menu ul a:hover{
background-color : #7DB3B3;}

#content {
    margin-left: 220px;
    }
	
#welkom h1{
width:500px;
margin-right:10px;
padding-left:10px;
padding-top:10px;
text-align:center;
font-family:monotype corsiva;
color:#FFDEAD;
}
p  {font-family:arial;
    font-size:16;
		color:#FFDEAD;
		}
#footer {
clear: both;
background-color: #ccc;
color:#433B38;
padding-bottom: 1em;
border-top: 1px solid #333;
text-align:center
}

en dit is één van de pagina's
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>kalender</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link href="stylesheet snoekvissers.css" rel="stylesheet" type="text/css">
<style type="text/css"> 
td   {text-align:center;
      color:#FFDEAD;
      }
</style>
</head>
<body>
<div id="container">
<div id="header"><img alt="banner" src="banner.jpg" width="700px"></div>
<div id="menu">
<ul>
<li><img src="logo.png" width="170" height="150" alt="logo"></li>
<li></li>
<li></li>
<li><p style="text-align:center;"><a href="http://www.easycounter.com/"><img src="http://www.easycounter.com/counter.php?ringo1" border="2" alt="Hit Counters"></a></p></li>
<li></li>
<li></li>
<li><a href="snoekvissers.htm">home</a></li>
<li><a href="http://www.vissersparadijs.be/">Forumindex</a></li>
<li><a href="reglement.html">Reglement</a></li>
<li><a href="leden.html">Leden</a></li>
<li><a href="kalender.html">Kalender + uitslagen</a></li>
<li><a href="bestuur.html">Bestuur</a></li>
<li><a href="klassement2012.html">Klassement&nbsp;2012</a></li>
<li><a href="album.html">Album</a></li>
<li><a href="http://snoekvissers.guestbook4you.be"onclick="window.open(this.href); return false;">Gastenboek</a></li>
<li><a href="linken.html">links</a></li>
<li><a href="nieuws.html">nieuws</a></li>
<li><a href="archief.html">Archief</a></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul></div>
<div id="content">
<br>
<br>
<table width="60%" border="1" align="center" >
<tr bgcolor="#CC0000">
<td colspan="5"><font size="6">Kalender 2012</font></td>
</tr>
<tr align="center">
<td>Dag</td>
<td>Datum</td>
<td>Plaats</td>
<td>Uitslag</td>
</tr>
<tr>
<td>Zondag</td>
<td>15/04/12</td>
<td>Mesure</td>
<td><a href="wedstrijd1.html"><font color="FFFFFF">uitslag wedstrijd 1</font></a></td>
</tr>
<tr>
<td>Zondag</td>
<td>29/04/12</td>
<td>Mesure</td>
<td><a href="wedstrijd2.html"><font color="FFFFFF">uitslag wedstrijd 2</font></a></td>
</tr>
<tr>
<td>Zondag</td>
<td>27/05/12</td>
<td>Mesure</td>
<td><a href="wedstrijd3.html"><font color="FFFFFF">uitslag wedstrijd 3</font></a></td>
</tr>
<tr>
<td>Zondag</td>
<td>10/06/12</td>
<td>Mesure</td>
<td><a href="wedstrijd4.html"><font color="FFFFFF">uitslag wedstrijd 4</font></a></td>
</tr>
<tr>
<td>Zondag</td>
<td>08/07/12</td>
<td>Mesure</td>
<td><a href="wedstrijd5.html"><font color="FFFFFF">uitslag wedstrijd 5</font></a></td>
</tr>
<tr>
<td>Zondag</td>
<td>05/08/12</td>
<td>Mesure</td>
<td><a href="wedstrijd6.html"><font color="FFFFFF">uitslag wedstrijd 6</font></a></td>
</tr>
<tr>
<td>Zondag</td>
<td>19/08/12</td>
<td>Mesure</td>
<td><a href="wedstrijd7.html"><font color="FFFFFF">uitslag wedstrijd 7</font></a></td>
</tr>
<tr>
<td>Zondag</td>
<td>16/09/12</td>
<td>Mesure</td>
<td><a href="wedstrijd8.html"><font color="FFFFFF">uitslag wedstrijd 8</font></a></td>
</tr>
</table>
</div>
</div>

<br>
<br>
<br>
<br>
<br>
<div id="footer">Designed by: Van der Brugge Ringo</div>

</body>
</html>
hier een afbeelding hier zie je dus dat mijn site niet in het midden staat
websitediv.jpg


grtz ringo
 
Hoi Ringo,
Code: 
#container {
    width:700px;
    margin: 0 auto; /* toevoegen */
    }
Toelichting:
  • Een element begint standaard altijd vanaf de linkerkant van het scherm. Dat gebeurde hier ook.
  • {margin: 0 auto} betekent: een margin boven en onder van niets, en links en rechts automatisch.
  • Door het auto wordt de overblijvende ruimte naast de 700px dan automatisch half-half verdeeld tussen de linker- en de rechter-margin ... en staat de container mooi in het midden. :)

Alleen vind ik 700px wel heel erg smalletjes voor een site. Ik denk dat bijna niemand nog een beeldscherm van 800x600px heeft. Als je uitgaat van een 1024x768px scherm, kan je een breedte van 990px nemen (vanwege de rechter-scrollbar moet er iets af). *)

Verder zou ik met de correcte (complete) Doctype-declaratie beginnen. Die hoort te zijn:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd" lang="nl">
<html>
<head>
... enz.
Als aanvulling op de w3c-voorschriften staat hier ook de lang(uage) bij; dat is ook een w3c-voorschrift, maar dan voor de webtoegankelijkheid, Met vermelding van de taal gaan voorlees-browsers niet proberen het Nederlands op z'n Engels uit te spreken. Is ook goed voor Google, als mensen "alleen sites in het Nederlands" als optie nemen.

Met vriendelijke groet,
CSShunter
_______
*) De enkelingen met 800x600px moeten dan links-rechts scrollen, maar dat zullen ze wel gewend zijn van andere sites. ;)
 
Laatst bewerkt:
zeer wel bedankt voor uw antwoordje, ik ga dit eens testen en laat u dan wel iets horen,

ik zal mijn site op 950 px maken
 
hey csshunter

ik ben het dus aan het aanpassen zoals je hier schreef, maar ik geraak toch ergens niet uit
als ik alles dus aanpas en laat dan de pagina controleren dan krijg ik deze foutmelding

Code: 
 Line 2, Column 43: "LANG" is not a reserved name 
   "http://www.w3.org/TR/html4/loose.dtd" lang="nl">

anders ziet er alles goed uit maar enkel ook de titel van mijn welkom krijg ik niet in het midden van mijn content
hier de link naar mijn index die ik al aangepast heb

http://www.vissersparadijs.be/website1/snoekvissers.htm
ook op het blad
http://www.vissersparadijs.be/website1/leden.html
krijg ik ook de zelfde foutmeldingen, maar daar staat alles wel in het midden

hoe los ik dit op?

grtz ringo
 
Hoi Ringo,
Oh, stom-stom-stom van me !!! :o
De lang="nl" moet natuurlijk niet in het Doctype, maar uiteraard in de <html>-tag:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="nl">
<head>
... enz.

Welkom in het midden
Het "Welkom" heeft nu een opgegeven breedte van 500px, die het centreren belemmert. Je kan de width:500px uit de #welkom h1 {...} schrappen.

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
zeer wel bedankt csshunter, dit was idd het probleem,

mijn conainter staat nu op een 950px moet ik nu als ik iets in mijn content plaats dit ook ingeven in px
of past hij dit automatich aan, mijn menu is 190px dus moet ik dan in mijn content rekening houden met nog een 760px?


grtz ringo
 
Hoi Ringo,
In het algemeen is het zo, dat een <div> de volle breedte pakt van het element waar het in zit of waar het (bv. wegens een float) naast zit.
Dat is het zogenaamde block-karakter van een <div>.
Een <h1>, <h2>, enz. en een <p> hebben dat ook.

Je hoeft dan niet uit te rekenen wat de breedte precies moet zijn, dat gaat vanzelf.
Alleen als het een afwijkende breedte moet zijn, hoef je die op te geven.


  • Makkelijkste manier om er achter te komen: beginnen met een <div>, <h1>, enz. of een <p> geen breedte te geven. Als er toch een breedte nodig is, zie je dat gauw genoeg, en kan je die toevoegen. :)

  • Hulpmiddel kan zijn om even een tijdelijk background-kleurtje aan de <div> enz. te geven, dan zie je precies tot hoever hij/zij doorloopt.

Met vriendelijke groet,
CSShunter
 
zeer wel bedankt csshunter

ik heb nu al mijn pagina's aangepast, maar bij 2 pagina's zit ik nog met een probleem

http://www.vissersparadijs.be/website1/album.html
http://www.vissersparadijs.be/website1/archief.html

op deze 2 pagina's zie je dus dat de titel Archief en album wel in het midden staat maar de linken eronder niet, hoe los ik dit op? in IE9 staat alles wel goed, maar in chrome-mozilla en IE8 niet raar.


wat ik ook nog zou willen is dat er een kader rond mijn container zit nu zie je b.v.b dat op deze pagina
http://www.vissersparadijs.be/website1/leden.html mijn menu stopt. en dat is wat raar hoe doe ik dit?

grtz ringo
 
Laatst bewerkt:
Nop, want we kunnen de 3 bovenstaande links niet zien: alle drie 404 - Page Not Found. ;)
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan