Centreren HTML site - layers - Softwareontwikkeling

woensdag 18 april 2007 09:34

Acties:

Definitely Maybe

Topicstarter

Goedemorgen Tweakers,

Op 2 april is mijn site www.midden-aarde.nl de lucht in gegaan (gemaakt met Frontpage 2003, lekker simpel). En hoewel ik over het algemeen redelijk tevreden ben zit ik nog met 2 probleempjes.

De eerste is het verschil qua positie in Firefox 2.0 in vergelijking met IE7. In IE7 staat alles mooi recht, maar in FF schieten de layers alle kanten op, kan ik dit oplossen zonder van het layer idee af te moeten stappen?

Het tweede puntje is het centreren van mijn site, het gebruik van de volgende code:
<body style="margin:0% 50% 0% 50%"> centreerd namelijk alleen de background, de rest van de layers blijven op hun plek. Is er een manier om alles te centreren? Als het kan met 1 code, en anders met meerdere codes.

Afbeeldingslocatie: http://img508.imageshack.us/img508/8637/middenaarde1fn9.th.jpg

-

Afbeeldingslocatie: http://img254.imageshack.us/img254/9407/middenaarde11rq0.th.jpg

alvast bedankt,

Jasper aka ormagon

woensdag 18 april 2007 10:00

Acties:

Sappie

De Parasitaire Capaciteit!

Dit is wel echt al 100 keer voorbij gekomen, maar goed ik zal je toch ff helpen. Plaats bijvoorbeeld je hele site in een division (<div></div). Geef deze een id (ofniet want frontpage zal denk ik verder geen divs uitspugen) en pas hierop mbv css het volgende toe:

Cascading Stylesheet:

1	#id { margin: 0 auto; }

offtopic:
HTML uitspugen met Frontpage is echt geen html meer.

Specs | Audioscrobbler

woensdag 18 april 2007 10:08

Acties:

killercow

eth0

Je hhoeft niet van "layers" af te stappen, maar frontpage is wel zo'n beetje de reden waarom alles niet werkt.

Open je code anders een ins nvu of dreamweaver, dan kun je het iig een schoonmaak beurt geven, en evenuteel zelfs netjes maken met w3c tests,

Als je verder eerst voor firefox ontwikkeld, weet je vrij zeker dat het er overal het zelfde uit ziet. als laatste kun je dan bugs in IE op gaan lossen.

openkat.nl al gezien?

woensdag 18 april 2007 10:15

Acties:

ormagon

Definitely Maybe

Topicstarter

Ik weet dat Frontpage een vrij slecht programma is, maar voor iemand die simpel een site overeind wil zetten zoals mij is het wel een uitkomst. Ik ben aan het prutsen geweest met de HTML code's maar krijg het volledig centreren niet voor elkaar, hieronder mij html code van die pagina:

code:

<html>

<head>
<LINK REL="shortcut icon" href="http://www.midden-aarde.nl/icoon.ico">
<meta http-equiv="Content-Language" content="nl">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Midden Aarde - Kaarten</title>
<meta name="keywords" content="Midden aarde, tolkien, in de ban van de ring, silmarillion, kaart">
<meta name="description" content="kaarten van de verschillende era van Midden-aarde">
</head>

<body>

<div style="position: absolute; width: 197px; height: 90px; z-index: 3; left: 27px; top: 40px" id="layer2">
    <p align="center"><b><font color="#800000"><br>
    <a href="index.htm"><font color="#800000">Homepage</font></a></font></b><br>
    <b><font color="#CEB54D"><a href="artikelen.htm"><font color="#CEB54D">
    Artikelen (A-Z)</font></a></font></b><br>
    <b><font color="#800000"><a href="zoeken.htm"><font color="#800000">Zoeken</font></a></font></b><br>
    <b><a href="http://www.midden-aarde.nl/Forum"><font color="#CEB54D">Forum</font></a></b></div>
<div style="position: absolute; width: 186px; height: 171px; z-index: 4; left: 26px; top: 737px" id="layer3">
    <p align="center"><b><a href="balrogsvalaraukar.htm"><font color="#CEB54D">
    Balrogs</font></a></b><br>
    <b><a href="balrogsvalaraukar.htm"><font color="#800000">Valaraukar</font></a></b><br>
    <font color="#800000"><b>
    <span style="font-size: 12.0pt; font-family: Times New Roman">
    <font color="#CEB54D"><a href="IsengardNanCurunir.htm">
    <font color="#CEB54D">Isengard</font></a></font></span></b></font><br>
    <b><font color="#CEB54D">
    <span style="font-size: 12.0pt; font-family: Times New Roman">
    <a href="IsengardNanCurunir.htm"><font color="#800000">Nan Curunír</font></a></span></font></b><br>
    <b><font color="#CEB54D"><a href="valarainur.htm">
    <font color="#CEB54D">Ainur</font></a></font></b><br>
    <b>
    <font color="#800000"><a href="Ents.htm">
    <font color="#800000">Ents</font></a></font></b><br>
    <b><font color="#CEB54D"><a href="IluvatarEru.htm">
    <font color="#CEB54D">Eru</font></a></font></b><br>
    <b><font color="#CEB54D">
    <a href="GandalfMithrandirOlorin.htm"><font color="#800000">
    Gandalf</font></a></font></b><font color="#800000"><br>
    </font>
    <b><font color="#800000"><a href="IluvatarEru.htm">
    <font color="#CEB54D">Ilúvatar</font></a></font></b><font color="#800000"><br>
    </font>
    <b><font color="#CEB54D"><a href="istari.htm"><font color="#800000">Istari</font></a></font></b></div>
<div style="position: absolute; width: 770px; height: 1140px; z-index: 1; left:10px; top:15px" id="layer4">
    <div style="position: absolute; width: 421px; height: 21px; z-index: 7; left: 242px; top: 1021px" id="layer8">
        © Copyright 2007 Midden Aarde. All rights reserved</div>
    <img border="0" src="lay%20out%20-%20plaatsen.jpg" width="770" height="1140"></div>

<div style="position: absolute; width: 544px; height: 144px; z-index: 5; left: 228px; top: 1083px" id="layer5">
    <a href="http://www.tolkienwinkel.nl/?mid=midden-aarde">
    <img border="0" src="twlogoa.jpg" width="545" height="178"></a></div>

<p>&nbsp;</p>
<div style="position: absolute; width: 493px; height: 851px; z-index: 2; left: 251px; top: 182px" id="layer1">
    <p align="center">
    <img border="0" src="Kaarte2.jpg"><br>
&nbsp;</p>
    <p align="left">
    <br>
    De onderstaande map is een weergave van Midden-aarde tegen het einde van de 
    3de Era. Deze kaart is gemaakt voor de <b>In de ban van de ring</b> epos.</p>
    <p align="center">
    (Klik op de kaart voor de grote versie)</p>
    <p align="center">
    <a href="map%20middle-earth.jpg"><img border="0" src="Kaarte4.jpg"></a></p>
    <p align="center">
    &nbsp;</p>
    <p align="center">
    &nbsp;</p>
    <p align="left">
    De onderstaande kaart is degene die u aantreft in <b>De Silmarillion</b> en 
    waar vele grootse dingen plaats vinden tijdens de 1ste en 2de era van 
    Midden-aarde.</p>
    <p align="center">
    (Klik op de kaart voor de grote versie)</p>
    <p align="center">
    <a href="map%20silmarillion.jpg"><img border="0" src="Kaarte5.gif"></a></p>
    </div>

</body>

</html>

[ Voor 96% gewijzigd door ormagon op 18-04-2007 14:46 ]

woensdag 18 april 2007 14:35

Acties:

dB90

zet het anders even tussen de [code] tags want dit is behoorlijk slecht leesbaar....

Webberry Webdevelopment

woensdag 18 april 2007 14:39

Acties:

Cubix

ormagon schreef op woensdag 18 april 2007 @ 10:15:
Ik weet dat Frontpage een vrij slecht programma is, maar voor iemand die simpel een site overeind wil zetten zoals mij is het wel een uitkomst.

En nu loop je vast met dat stuk rommel en ga je het aan anderen vragen. Wat een pulp code maakt Frontpage nog steeds zeg...

woensdag 18 april 2007 14:47

Acties:

ormagon

Definitely Maybe

Topicstarter

De code staat tussen de goede tags. Ik weet dat het rotzooi is, maar over het algemeen is het voldoende voor wat ik doe, en zo bespaar ik heel veel tijd die ik nu gewoon in mijn artikelen kan steken.

Het enige is dus nog dat ik een gecentreerde site altijd fijn vind, alleen dat lukt dus niet zomaar.

woensdag 18 april 2007 14:48

Acties:

crisp

Devver

Pixelated

Tsja, alles absoluut positioneren is gewoonweg *niet* handig.

Intentionally left blank

woensdag 18 april 2007 14:50

Acties:

ormagon

Definitely Maybe

Topicstarter

Dus ik moet de absolute posities eruit halen? En dan relatief positioneren? Of in procenten?

woensdag 18 april 2007 15:07

Acties:

Sappie

De Parasitaire Capaciteit!

Zoals al aangegeven, absolute positionering is niet handig. Je zou beter relatief positioneren (dan werken top en left ook nog tov het vorige block element), static positioneren (en dan met behulp van een marge de zaak positioneren) of (in jou geval waarschijnlijk) je block element willen floaten. Bovendien is het handig om de css op te slaan in een aparte file (dit is in mijn voorbeeld nog niet gedaan) en geen inline zooi te gebruiken. Daarbij is het zaak dat je een logische structuur (mbv Hx's) opbouwt in je html pagina, zoals je dat ook in een document zou doen. Als laatste wil ik je meegeven dat je de elementen moet gebruiken waarvoor ze bedoelt zijn, semantische html dus. Je gebruikt bijv. een p voor een paragraph, enz. Hier is genoeg over te vinden. Ik gebruik ik mijn voorbeeldje een ul voor een menu; daar valt nog over te twisten, maar dat wordt vrij veel gedaan.

Onderstaand jouw code waarmee ik een beginnetje heb gemaakt zodat je alles in semantische html zou kunnen omzetten. Verder biedt de div container de gewenste centreer functie als het goed is. Ik heb het maar zo snel uit mijn mouw geschud dus er kunnen fouten inzitten. ajb:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Midden Aarde - Kaarten</title>
  <link ref="shortcut icon" href="http://www.midden-aarde.nl/icoon.ico">
  <meta http-equiv="Content-Type" content="text/html; charset=windows-125">
  <meta name="keywords" content="Midden aarde, tolkien, in de ban van de ring, silmarillion, kaart">
  <meta name="description" content="kaarten van de verschillende era van Midden-aarde">
  <meta http-equiv="Content-Language" content="nl">
  <style type="text/css">
    #container { margin: 0 auto; }
    
    .invisible { 
      display: none;
      position: relative; /* zodat je absolute positioning tov deze container gebeurt */           
    }

    #menu { 
      margin: 10px 0 0 0; /* dit moet je ff juist instellen, zodat de marge juist is */
      list-style: none;
      width: 197px;
      height: 90px;
      position: absolute;
      z-index: 3;
      left: 27px;
      top: 40px;
    }

    #menu li { margin: 0; padding: 0; } 

    #menu li a {
      font-color: #800000;
      font-weight: bold;
    }

    #menu li.even-item a { font-color: #CEB54D; } 

  </style>
</head>
<body>
  <div id="container">
    <h1 class="invisible">Midden Aarde<h1>
    <h2 class="invisible">Menu<h2>
    <ul id="menu">
      <li><a href="index.htm" title="blabla">Homepage</a></li>
      <li class="even-item"><a href="artikelen.htm" title="blabla">Artikelen (A-Z)</a></li>
      <li><a href="zoeken.htm" title="blabla">Zoeken</a></li>
      <li class="even-item"><a href="Forum">Forum<a></li>
    </ul>   
<div style="position: absolute; width: 186px; height: 171px; z-index: 4; left: 26px; top: 737px" id="layer3">
 [......]
</div>
  </div>
</body>
</html>

Tenslotte wil ik je nog meegeven dat het verstandig is om altijd een DTD toe te voegen aan het eerste element, de html tag. Daarmee zorg je ervoor dat je IE (of FF that is) aan de hand van een bepaalde modus rendert. Op deze manier weet je iig wat er zo ongeveer gaat gebeuren. Verschillende box-models kunnen op deze manier in het geval van IE namelijk getriggered worden.

[ Voor 1% gewijzigd door Sappie op 18-04-2007 15:45 . Reden: Foutje gespot ]

Specs | Audioscrobbler

woensdag 18 april 2007 15:43

Acties:

erikvdv1

Ik denk dat dit wel ongeveer is wat je zoekt.

HTML: index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
  <title>Midden Aarde - Kaarten</title> 
  <link ref="shortcut icon" href="http://www.midden-aarde.nl/icoon.ico"> 
  <meta http-equiv="Content-Type" content="text/html; charset=windows-125"> 
  <meta name="keywords" content="Midden aarde, tolkien, in de ban van de ring, silmarillion, kaart"> 
  <meta name="description" content="kaarten van de verschillende era van Midden-aarde"> 
  <meta http-equiv="Content-Language" content="nl"> 
  <style>
  html, body
  {
    text-align: center;
  }
  
  #container
  {
    margin: 0 auto;
    width: 770px;
    height: 1140px;
    text-align: left;
    background: url(http://www.midden-aarde.nl/lay%20out%20-%20plaatsen.jpg);
    background-position: top;
    background-repeat: no-repeat;
  }
  
  #layer2
  {
    position: relative;
    width: 197px;
    height: 90px;
    z-index: 3;
    left: 20px;
    top: 20px;
  }
  
  #layer3
  {
    position: relative;
    width: 186px;
    height: 171px;
    z-index: 4;
    left: 20px;
    top: 615px;
    float: left;
  }
  
  #layer1
  {
    position: relative;
    width: 493px;
    height: 851px;
    z-index: 2;
    left: 60px;
    top: 80px;
    float: left;
  }
  
  #layer8
  {
    position: relative;
    width: 421px;
    height: 21px;
    left: 242px;
    top: 75px;
    clear: both;
  }
  
  #layer5
  {
    position: relative;
    width: 544px;
    height: 144px;
    left: 220px;
    top: 100px;
  }
  
  a
  {
    text-decoration: none;
  }
  </style>
</head>
<body>
<div id="container">
  
  <div id="layer2">
  <p align="center"><b><font color="#800000"><br>
  <a href="index.htm"><font color="#800000">Homepage</font></a></font></b><br>
  <b><font color="#CEB54D"><a href="artikelen.htm"><font color="#CEB54D"> Artikelen (A-Z)</font></a></font></b><br>
  <b><font color="#800000"><a href="zoeken.htm"><font color="#800000">Zoeken</font></a></font></b><br>
  <b><a href="http://www.midden-aarde.nl/Forum"><font color="#CEB54D">Forum</font></a></b>
  </div>
  
  <div id="layer3">
  <p align="center"><b><a href="balrogsvalaraukar.htm"><font color="#CEB54D"> Balrogs</font></a></b><br>
  <b><a href="balrogsvalaraukar.htm"><font color="#800000">Valaraukar</font></a></b><br>
  <font color="#800000"><b> <span style="font-size: 12.0pt; font-family: Times New Roman"> <font color="#CEB54D"><a href="IsengardNanCurunir.htm"> <font color="#CEB54D">Isengard</font></a></font></span></b></font><br>
  <b><font color="#CEB54D"> <span style="font-size: 12.0pt; font-family: Times New Roman"> <a href="IsengardNanCurunir.htm"><font color="#800000">Nan Curunír</font></a></span></font></b><br>
  <b><font color="#CEB54D"><a href="valarainur.htm"> <font color="#CEB54D">Ainur</font></a></font></b><br>
  <b> <font color="#800000"><a href="Ents.htm"> <font color="#800000">Ents</font></a></font></b><br>
  <b><font color="#CEB54D"><a href="IluvatarEru.htm"> <font color="#CEB54D">Eru</font></a></font></b><br>
  <b><font color="#CEB54D"> <a href="GandalfMithrandirOlorin.htm"><font color="#800000"> Gandalf</font></a></font></b><font color="#800000"><br>
  </font> <b><font color="#800000"><a href="IluvatarEru.htm"> <font color="#CEB54D">Ilúvatar</font></a></font></b><font color="#800000"><br>
  </font> <b><font color="#CEB54D"><a href="istari.htm"><font color="#800000">Istari</font></a></font></b>
  </div>
  
  <div id="layer1">
  <p align="center"> <img border="0" src="http://www.midden-aarde.nl/Kaarte2.jpg"><br>
  &nbsp;</p>
  <p align="left"> <br>
  De onderstaande map is een weergave van Midden-aarde tegen het einde van de 
  3de Era. Deze kaart is gemaakt voor de <b>In de ban van de ring</b> epos.</p>
  <p align="center"> (Klik op de kaart voor de grote versie)</p>
  <p align="center"> <a href="map%20middle-earth.jpg"><img border="0" src="http://www.midden-aarde.nl/Kaarte4.jpg"></a></p>
  <p align="center">&nbsp; </p>
  <p align="center">&nbsp; </p>
  <p align="left"> De onderstaande kaart is degene die u aantreft in <b>De Silmarillion</b> en 
  waar vele grootse dingen plaats vinden tijdens de 1ste en 2de era van 
  Midden-aarde.</p>
  <p align="center"> (Klik op de kaart voor de grote versie)</p>
  <p align="center"> <a href="map%20silmarillion.jpg"><img border="0" src="http://www.midden-aarde.nl/Kaarte5.gif"></a></p>
  </div>
  
  <div id="layer8">
  © Copyright 2007 Midden Aarde. All rights reserved
  </div>
  
  <div id="layer5"> <a href="http://www.tolkienwinkel.nl/?mid=midden-aarde"> <img border="0" src="http://www.midden-aarde.nl/twlogoa.jpg" width="545" height="178"></a></div>
  
</div>
</body>
</html>

woensdag 18 april 2007 16:05

Acties:

ormagon

Definitely Maybe

Topicstarter

Hartelijk dank, ik heb hem even online gezet om het te testen en het is gewoon perfect

http://www.midden-aarde.nl/testtest.htm

Ik snap er nog vrij weinig van, maar het is duidelijk dat deze code een stuk minder onnodige zooi bevat en een stuk overzichtelijker is! Ik ga eens proberen of ik hier zelf ook wat mee kan, in ieder geval al hartstikke bedankt. Het probleem is alleen dat mijn kennis van HTML nog al gebrekkig is en dat ik er nog niet over uit ben of ik al die tijd in het leren van HTML wil steken, of dat ik dan maar een niet zo perfecte site moet draaien...

[ Voor 22% gewijzigd door ormagon op 18-04-2007 16:10 ]

woensdag 18 april 2007 16:41

Acties:

lammert

Die tweakers zijn wel verdomd behulpzaam vandaag zeg, een beetje jouw code lopen te schrijven...

Ik ga niet je code herschrijven, maar geef je wel nog ff een tip mee: de helft van je code bestaat nu uit overbodige <font> en <span> tags (typisch frontapge kwaaltje), probeer in plaats hiervan eens <p> en <a> te definiëren in een externe stylesheet (CSS) of tussen je <style> tags.

Dit is echt niet ingewikkeld, bovendien heb je het zo onder de knie en wordt je code een stuk leesbaarder en vooral compacter en je pagina dus sneller.

woensdag 18 april 2007 17:04

Acties:

ormagon

Definitely Maybe

Topicstarter

Ik stond er ook verbaasd van

. Een hele pagina herschreven! Ik ben het druk aan het onderzoeken maar zie al wel dat ik dit niet zelf 123 kan.

woensdag 18 april 2007 22:53

Acties:

erikvdv1

Haha ik ben al een tijdje bezig met websites maken, dit vond ik gewoon weer zo'n uitdaaginkje.

Ik heb de idd <font> tags e.d. laten staan, want dat was niet echt noodzakelijk, maar voorlopig kan je verder

.

donderdag 19 april 2007 07:16

Acties:

ormagon

Definitely Maybe

Topicstarter

Ik ben ondertussen al even met die html code aan het prutsen en zie de logica erachter al een stukje beter, ik ga morgen (na de herkansing

) aan de slag met een andere pagina met deze als uitgangspunt. Ik laat je wel horen hoe het gaat!

donderdag 19 april 2007 08:54

Acties:

killercow

eth0

ormagon schreef op donderdag 19 april 2007 @ 07:16:
Ik ben ondertussen al even met die html code aan het prutsen en zie de logica erachter al een stukje beter, ik ga morgen (na de herkansing ) aan de slag met een andere pagina met deze als uitgangspunt. Ik laat je wel horen hoe het gaat!

Top,

Zoals je kunt zien maken we van elke div een eigen blok, welke we daarna met css op de juiste plek plaatsen.

Hoe minder html tags hoe makkelijker en onderhoudbaarder je site is.
Het enige wat je daarna nog hoeft te doen is met die css, per tag (of tag combinatie) aangeven wat de style moet zijn. (kleur, grote, positite, type etc)

openkat.nl al gezien?