Hulp nodig bij maken website

[Gast ĐiŝaŝteɍƵaƞƴ]

Hallo allemaal,

Ik moet voor school een moeie website bouwen alleen het probleem is dat ik er niet zo goed in ben. Ik ken wel een beetje die basis codes enzo maar ik heb een hekel aan posities en dat soort dingen dus zou iemand mij kunnen helpen met het maken van de layout?

Zo zou ik het een beetje willen hebben:

Een titelbar met alleen rechts een logo

daaronder navigatiebalk

Dan gaan we naar het gedeelte waar de tekst moet komen gewoon een groot stuk en dan rechts nog een soort van navigatiebalk of eigenlijk meer popup balk of hoe je het ook wilt noemen en helemaal onderin nog een klein balkje met copyright en dergelijke.

Zou iemand een klein CSS scriptje voor me kunenn schrijven?

Mvg

DisasterZany

[Duken]

Heb je een voorbeeld van een website (HTML) welke je zou willen? Die kan je met diversen tools gewoon downloaden zodat je hem lokaal hebt en kan aanpassen.

[Freddytje]

Inderdaad, of je download een template en past die aan. Google: Free website template en je krijgt een hele waslijst met prachtige templates.

[Gast ĐiŝaŝteɍƵaƞƴ]

Ik heb er even naar gekeken Freddy maar hoe kan ik die templates dan in css of html code krijgen?

[Freddytje]

Die zijn al in HTML of CSS, openen met kladblok en je hebt de code

[Wous]

Ligt eraan welke. Stuur eens een linkje van een template die je hebt gevonden?

[Gast ĐiŝaŝteɍƵaƞƴ]

https://sites.google.com/site/overste14w/

De naam slaat nergens op maar zo ongeveer wil ik de template hebben met die horizontale navigatie enzo.

[Freddytje]

Dat is iig geen template. Maar een normale website.

Kijk hier anders is: http://www.templatesbox.com/

[Gast ĐiŝaŝteɍƵaƞƴ]

Die templates zijn allemaal met tabellen, is er geen mogelijkheid om het alleen met css te doen?

[Freddytje]

Geen idee, dat wordt: minder kieskeurig zijn, website bouwer huren óf minder kieskeurig zijn.

[Wous]

Die zijn er genoeg, die werken met div's. Als je in Google naar 'Free templates tablefree' zoekt, weet je zeker dat je ze vindt

[Gast ĐiŝaŝteɍƵaƞƴ]

Op school werken we met Bluefish maar daar kon je werkelijkwaar helemaal niks mee dus heb ff Dreamweaver portable op mijn stikje gezet en daarmee een simpele template gemaakt die gewoon werkt

Bedankt voor de reacties maar ik moet nu nog even kijken wat ik verder ga doen met mijn website dan stel ik wel nieuwe vragen

[Gast ĐiŝaŝteɍƵaƞƴ]

Oke ik heb de template klaar (gemaakt met div) nu wil ik de navigatie balk maken (horizontale) ik heb alleen een vraagje hoe moet ik de stukken van elkaar scheiden want nu kan ik er geen regel tussen doen zoals bij de verticale navigatiebar?

[Wous]

Ik snap niet volledig wat je bedoelt. Maar ik kan er een gok op wagen; je kunt in je css, of in ieder geval in je style van de div het volgende zetten:

Padding:10px

Of

Margin:10px

Hiermee houdt de div 10px afstand van alle andere elementen op de website. Je kunt dit ook richten door bijvoorbeeld het volgende in te vullen:

Margin-left:10px

Hiermee houdt hij alleen ruimte tussen het element links van heb, en ga zo maar door. Je zou eens op w3schools kunnen kijken voor meer hulp

[Gast ĐiŝaŝteɍƵaƞƴ]

Nee dat is niet wat ik bedoel Wous met margin en padding maak ik een lege ruimte om mijn div vak heen maar ik wil binnenin mijn div afstand houden tussen de links. Hier is de code ff simpel gehouden die ik nu heb:

<div id="bar"><a href="">Link 1</a> <a href="">Link2</a> <a href="">Link 3</a> <a href="">Link 4</a> </div>

Mijn vraag is hoe kan ik Link 1, Link 2, Link 3, Link 4 in een appart vakje doen waarbij ik niet alleen op de tekst hoef te klikken maar gewoon op het vlakje waar de tekst in staat. Het valt me net pas op dat het hier op Duken eigenlijk bijna precies zo is als ik het wil in dat navigatie scherm van Forum Members Chat etc. Mijn vraag is dus hoe doe ik dat op een niet al te moeilijke manier?

[Wous]

Style de <a> tags met een div.

In de css style je deze dmv het volgende:

display:block

Daarna kun je daarna met width en height, de grootte van het blokje aanpassen

Tip: gebruik een list (<li>) om zo'n balk te maken, veel makkelijker

[Gast ĐiŝaŝteɍƵaƞƴ]

Oke bedankt het is gedeeltelijk geluk ik heb nu alle links in blokken naast elkaar staan en dat staat goed het enige probleem is dat ze niet in de navigatiebar staan maar gedeeltelijk daaronder :S Iemand een oplossing of verklaring hiervoor?

[Wous]

Laat eens een screenshot zien? Ik weet niet precies wat je bedoelt

[Gast ĐiŝaŝteɍƵaƞƴ]

Zoals je kunt zien vormen de linkjes nu een speciale bar want die donkere bar daarboven was de plaats waar ze eigenlijk hadden moeten staan. Ook is er ineens een linker stuk open naast het tekstvlak wat eerst nog niet was want die was rechts. (let niet op de tekst en de rest van de layout ik wil eerst zorgen dat de divs goed werken en dan mag een vriend van mij er verder aan werken

[Gast ĐiŝaŝteɍƵaƞƴ]

Oke ik weet de oorzaak als ik <ul> en <li> gebruik start hij lager dan wanneer ik geen <ul> of <li> gebruik net als hier:

Normaal

volgende regel

• Deze hoort vlak onder de volgende regel te staan maar dat doet ie niet hoe kan ik dit uitzetten?
  

[Wous]

Je moet margin en padding op 0 zetten. HTML vindt het leuk om al vanaf het begin hier waardes aan te geven

[Wous]

Eigenlijk zou je het altijd moeten doen wanneer je een css maakt, eerst even alle tags resetten, zodat je zelf alles vanaf het begin kunt aanpassen. Ik gebruik hiervoor de volgende code:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Dit kun je gewoon bovenaan je css plaatsen

[Gast ĐiŝaŝteɍƵaƞƴ]

Oke bedankt het heeft gewerkt

[Gast ĐiŝaŝteɍƵaƞƴ]

Mag ik vragen waarom hij hem wel gewoon in IE opent maar hij raar doet in Chrome en Firefox?

[Wous]

En wat bedoel je met raar doen?

Heb je trouwens wel een doctype ingevoerd?

[Piraatje]

Vergeten jullie alsjeblieft de VPN verbinding niet? Je internet provider zoals Ziggo of KPN kan door gebruik van de VPN niet zien wat er gebeurd op je internet verbinding en ben je volledig anoniem voor iedereen. Een vereiste tegenwoordig.... We een uitgebreide handleiding geschreven met informatie. 

Deze vindt je hier:   https://www.duken.nl/forums/handleidingen/downloaden/vpn-verbinding-en-anoniem-downloaden-r35/