Nieuws:

Welkom, Gast. Alsjeblieft inloggen of registreren.
Heb je de activerings-mail niet ontvangen?

Auteur Topic: html & css filetje maken?  (gelezen 4375 keer)

Offline johande

  • Lid
html & css filetje maken?
« Gepost op: 2009/05/16, 09:41:34 »
zou iemand voor mij een eenvoudig css filetje kunnen maken waarbij mijn website in 2 wordt gedeelt. een bovenste menubalk met 10 items en onderaan plaats voor bijbehorende html files.

als dit niet zoveel werk is, kan ik daarmee verder beginnen knutselen.

er moet geen speciale opmaak bijhoren, enkel het principe.


Offline johande

  • Lid
Re: html & css filetje maken?
« Reactie #2 Gepost op: 2009/05/16, 10:08:31 »
http://www.google.nl/search?hl=nl&rlz=1G1GGLQ_NLNL296&q=website+templates&btnG=Zoeken&meta=

ja maar die zitten meestal zo professioneel in mekaar dat zelf aanpassen moeilijk word.
ik wil beginnen met een heeeeel simpel...

Offline idefix

  • Lid
Re: html & css filetje maken?
« Reactie #3 Gepost op: 2009/05/16, 10:53:05 »
Hallo Johan,

je kan met <div> werken, dit staat voor division of "onderdeel". je hebt twee <div> nodig: één voor het menu en één voor het veld waar de tekst zelf (inhoud) komt.  Dit kun je zo doen:

styles.css:
div.menu {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 800px;
        height: 40px;
        background-color: green;
        border: thin solid blue;
}
div.inhoud {
        position: absolute;
        left: 0px;
        top: 44px;
        width: 800px;
        height: 400px;
        color: red;
        border: thin solid black;
}

In je html-code kan je verwijzen naar deze <div>'s door het woordje class te gebruiken. Dus de opmaak-definitie in div.menu, (uit de css-file) zal in de html-file toegepast worden onder <div class="menu">:

<html>
<head>
        <title>Test van Johan</title>
        <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
        <div class="menu">
        </div>
        <div class="inhoud">
        Dit is de inhoud van de webpagina.
        </div>
</body>
</html>

De html is niet volledig (geen doctype enz.), maar voor de bondigheid doe ik het nu zo.
Als je deze code opslaat onder styles.css en home.html, kun je het resultaat in je browser zien.

position: absolute   dit wil zeggen dat de positie die zal gegeven worden (left, top, width, height) absoluut zijn. Je hebt nog andere mogelijkheden: relative, static,...
Ik heb voor de minst flexibele oplossing gekozen, want je pagina zal steeds 800 pixels breed zijn. Bij kleine schermen is dat teveel, bij grote schermen is dat te weinig. je kan dat oplossen door niet met px als eenheid te werken, maar de hoogte en breedte uit te drukken in %. 

Het mooie is nu dat je in de div class="menu" nog andere <div>'s kunt plaatsen, naast elkaar: de menu-items. Dus je kan <div>'s nesten.
<div class="menu">
  <div class="menu_item"
  Home
  </div>
  <div class="menu_item"
  Help
  </div>
  <div class="menu_item"
  Shop
  </div>
</div>
Als je in de css-file nu een div.menu_item definieert, kun je daarvan de opmaak instellen (breedte, tekst-formaat,...).

Ik hoop dat dit je een beetje op weg zet. Probeer, sukkel , val en sta op... dat is de weg die iedere web-ontwikkleaar aflegt.  XD
Support bacteria. They're the only culture some people have.

Offline johande

  • Lid
Re: html & css filetje maken?
« Reactie #4 Gepost op: 2009/05/16, 11:04:19 »
bedankt, dit lijkt te lukken.

nu zou ik 1 menu.html willen maken (dat tlkens bovenaan blijft staan) en in de inhoud telkens de andere item-html-paginas. maw 2 html files in 1 webpagina laten zien.

vroeger deed je dat met frames, maar dat is nu niet meer zo las ik ergens.

kan je daar nog een vb voor posten?
« Laatst bewerkt op: 2009/05/16, 11:13:08 door johan »

Offline idefix

  • Lid
Re: html & css filetje maken?
« Reactie #5 Gepost op: 2009/05/16, 11:34:59 »
Volgens mij moet je in elke html-file die je hebt dat menu opnemen. Je kunt geen html-file maken van dat menu alleen.
Dus eigenlijk zien alle html-files er hetzelfde uit, behalve de titel en de inhoud.
Support bacteria. They're the only culture some people have.

Offline johande

  • Lid
Re: html & css filetje maken?
« Reactie #6 Gepost op: 2009/05/16, 11:38:24 »
met frames kon je dat vroeger toch? neen?

Re: html & css filetje maken?
« Reactie #7 Gepost op: 2009/05/16, 11:58:08 »
Frames zijn oud.

Offline idefix

  • Lid
Re: html & css filetje maken?
« Reactie #8 Gepost op: 2009/05/16, 12:03:36 »
Frames zijn oud.
Ik dacht ook dat frames verouderd zijn. Met name kleinere apparaten (zoals gsm's) ondersteunen ze niet en daarom worden ze niet langer algemeen ondersteund. Kan iemand dit bevestigen want ik ben het zelf niet 100 % zeker.
Support bacteria. They're the only culture some people have.

Offline commandoline

  • LoCo-contact
    • marten-de-vries
    • Marten-de-Vries.nl
Re: html & css filetje maken?
« Reactie #9 Gepost op: 2009/05/16, 12:06:17 »
Ja, frames zijn verouderd, maar de techniek is wel te vervangen. Zo kun je als je webserver PHP ondersteund in iedere pagina i.p.v. het menu zelf ook iets zetten als:
<?php include("menu.html"); ?>Let wel: zet in 'menu.html' geen complete html-pagina, maar alleen de menu code.
Ook kun je voor dit soort dingen in principe Ajax gebruiken, maar dat vind ik zelf teveel nadelen hebben. Zo kom je bijv. weer op de beginpagina na een refresh en is de informatie niet op te vragen door bijv. zoekbots.

Je krijgt dan zoiets:

styles.css:
div.menu {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 800px;
        height: 40px;
        background-color: green;
        border: thin solid blue;
}
div.inhoud {
        position: absolute;
        left: 0px;
        top: 44px;
        width: 800px;
        height: 400px;
        color: red;
        border: thin solid black;
}
index.html:
<html>
<head>
        <title>Test van Johan</title>
        <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
        <?php include("menu.html"); ?>
        <div class="inhoud">
        Dit is de inhoud van de webpagina.
        </div>
</body>
</html>
menu.html:
<div class="menu">
  <div class="menu_item"
  Home
  </div>
  <div class="menu_item"
  Help
  </div>
  <div class="menu_item"
  Shop
  </div>
</div>
Code is een aangepaste versie van die van idefix

Marten
« Laatst bewerkt op: 2009/05/16, 12:10:25 door commandoline »

Offline johande

  • Lid
Re: html & css filetje maken?
« Reactie #10 Gepost op: 2009/05/16, 12:12:31 »
indien jullie me nog verder kunnen helpen...

- de menu blijft niet staan als ik scroll, nochthans staat de position op fixed
- de background image van mijn inhoud blijft niet fix staan wanneer ik scroll (bij nieuws), nochthans staan background attachment op fixed
« Laatst bewerkt op: 2009/05/16, 12:23:25 door johan »

Offline idefix

  • Lid
Re: html & css filetje maken?
« Reactie #11 Gepost op: 2009/05/16, 12:52:50 »
Je kan in de div.inhoud zetten:

overflow: auto;

Dan komt er een scrollbar in het inhoudsveld (als de inhoud te groot wordt) en blijft de rest staan.
Ik moet hier afhaken want we zitten met een communiefeest en ik moet helpen.
Support bacteria. They're the only culture some people have.

Offline johande

  • Lid
Re: html & css filetje maken?
« Reactie #12 Gepost op: 2009/05/16, 13:32:21 »
bedankt allemaal (en vooral idefix)
nu ben ik vertrokken

www.sporting-erps-kwerps.be

Offline johande

  • Lid
Re: html & css filetje maken?
« Reactie #13 Gepost op: 2009/05/16, 14:22:17 »
ziet er goed uit , alleen in IE heb ik een witte rand rondom wanneer ik de site open. In Firefox is dat niet...
spijtig dat de meesten nog met IE werken.

Offline commandoline

  • LoCo-contact
    • marten-de-vries
    • Marten-de-Vries.nl
Re: html & css filetje maken?
« Reactie #14 Gepost op: 2009/05/16, 14:55:04 »
ziet er goed uit , alleen in IE heb ik een witte rand rondom wanneer ik de site open. In Firefox is dat niet...
spijtig dat de meesten nog met IE werken.

Ik heb even je css bekeken ( http://www.sporting-erps-kwerps.be/styles.css ), ik zet er meestal nog:
body {
margin:0;
}
bij, ik weet niet of dat in dit geval helpt, maar het valt te proberen.

Marten

Edit: Ik heb 't toch nog ff getest, het werkt. styles.css, kun je gewoon kopieren:
div.menu {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 40px;
color: yellow;
        background-color: yellow;
        border: 5px solid blue;
}
div.inhoud {
        position: fixed;
        left: 0px;
        top: 40px;
        width: 100%;
        height: 100%;
background-attachment: fixed;
background-image: url(spek.jpg);
color: red;
overflow: scroll;
}

body {
margin:0;
}
« Laatst bewerkt op: 2009/05/16, 15:02:04 door commandoline »

Offline johande

  • Lid
Re: html & css filetje maken?
« Reactie #15 Gepost op: 2009/05/16, 15:23:52 »
ok bedankt dat werkt...