Net begonnen, klopt het? | HTML/CSS

gast37784 · 01-10-2011, 12:30

Hey Sitedealers,

Ben net begonnen met het verdiepen in HTML/CSS en ben meteen begonnen.
Klopt de onderstaande code? Ben met een simpele pagina bezig..

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
@import url("css/css.css");
</style>
</head>

<body>
<!--Header-->
<div id="Header-Wrapper"><div id="Header">

<h2 id="logo"><a href="#" title="">gast37784</a></h2>
<p id="slogan">Altijd de <strong>goedkoopste</strong> en <strong>goedkoopste</strong> producten!</p>
</div>
<!--/Header-->

<!--Body-->
<div id="Body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at pharetra leo. Ut neque nulla, commodo euismod pellentesque vitae, luctus vel nisi. Sed et sapien eros, nec semper eros. Curabitur id elit ac nisl pharetra euismod. Quisque in nisl non magna blandit hendrerit. Aliquam erat volutpat. Nunc bibendum purus in urna commodo vitae dapibus tellus convallis. In semper leo eu ante blandit tristique. Cras risus ligula, convallis id venenatis sit amet, ultrices ut ante. Aliquam pretium urna sed massa gravida non malesuada dui fermentum. Nunc tincidunt lacinia nunc quis elementum. Quisque venenatis dui et nisi interdum vulputate. Pellentesque condimentum aliquet nisl non scelerisque. Pellentesque pulvinar volutpat consequat. Vivamus vel turpis ac felis sodales mattis. Vivamus ac dui non nibh elementum feugiat suscipit in tortor.

Duis interdum fermentum est non consectetur. Suspendisse sit amet tellus sit amet tortor accumsan posuere ut sed elit. Quisque at malesuada magna. Proin adipiscing, elit non condimentum lobortis, nisl magna tincidunt turpis, eget luctus lacus erat et lorem. Cras ut diam ac justo varius ullamcorper. Aenean at quam nisl. Aliquam erat volutpat. Duis pellentesque velit sit amet turpis elementum mattis. Curabitur aliquam rhoncus sapien, interdum tempor libero vehicula sed. Maecenas faucibus diam et nulla convallis feugiat. Aenean vehicula nisi at ligula lobortis blandit. </p>
</div>
<!--/Body-->

<!--Recensies-->
<div id="Recensie1">
<h3 id="Guyon"><a>Guyon</a></h3>
<p>Duis interdum fermentum est non consectetur. Suspendisse sit amet tellus sit amet tortor accumsan posuere ut sed elit. Quisque at malesuada magna. Proin adipiscing, elit non condimentum lobortis, nisl magna tincidunt turpis, eget luctus lacus erat et lorem. Cras ut diam ac justo varius ullamcorper. Aenean at quam nisl. Aliquam erat volutpat. Duis pellentesque velit sit amet turpis elementum mattis. Curabitur aliquam rhoncus sapien,</p>
</div>
</div>

<div id="Recensie2">
<h3 id="Guyondehaas"><a>gast37784</a></h3>
<p>Duis interdum fermentum est non consectetur. Suspendisse sit amet tellus sit amet tortor accumsan posuere ut sed elit. Quisque at malesuada magna. Proin adipiscing, elit non condimentum lobortis, nisl magna tincidunt turpis, eget luctus lacus erat et lorem. Cras ut diam ac justo varius ullamcorper. Aenean at quam nisl. Aliquam erat volutpat. Duis pellentesque velit sit amet turpis elementum mattis. Curabitur aliquam rhoncus sapien,</p>
</div>
</div>
<!--/Recensies-->

<!--Footer-->
<div id="Footer">
<h4>Neem nu contact op!</h4>
<p><strong>E-mail:</strong> info@xpressline.nl<br />
  <strong>Tel.:</strong>    06000000</p>
</div>
</body>
</html>

En hoe moet ik nu beginnen met een CSS? Heb geen idee hoe ik een CSS moet opstellen zodat deze in combinatie met deze pagina werkt.

Hartelijk bedankt!

Groet,
gast37784

**Yoeri Boven** · 01-10-2011, 12:34

Op het aanroepen van het CSS bestand na is hij volgens mij prima. Je kunt de CSS op drie manieren aanbrengen en die je nu hebt gebruikt hoort daar niet bij. Meer info vind je hier: http://www.w3schools.com/css/css_howto.asp

**melvin ten hoeve** · 01-10-2011, 12:59

lees je pm ff ;)

gast10252 · 01-10-2011, 13:03

Validation Output: 1 Error

Line 39, Column 6: end tag for element "div" which is not open

</div>

The Validator found an end tag for the above element, but that element is not currently open. This is often caused by a leftover end tag from an element that was removed during editing, or by an implicitly closed element (if you have an error related to an element being used where it is not allowed, this is almost certainly the case). In the latter case this error will disappear as soon as you fix the original problem.

If this error occurred in a script section of your document, you should probably read this FAQ entry.

Probeer het zelf ook uit met de W3 Validator: http://validator.w3.org/

gast37784 · 01-10-2011, 13:21

Allemaal bedankt!
Wie kan een bijvoorbeeld stukje code sturen?
Ik wil dit stukje:

Vervangen door een logo die ik in PhotoShop heb gemaakt, is het de bedoeling dat ik dit in HTML maak, of in de CSS? En hoe?

Hartelijk bedankt!

**Yoeri Boven** · 01-10-2011, 13:29

Ik begrijp niet helemaal wat je bedoeling is, maar als je gewoon een plaatje wil doen doe je het volgende:

Code:

<img src="#" />

gast37784 · 01-10-2011, 13:45

Bedankt! Heb het aangepast!
Zoals je ziet heb ik nog veel te leren, haha ;) Ik heb in PhotoShop een wit vlak gemaakt waar alles in moet, het vlak heeft ronde hoeken. Kan ik deze gewoon importeren? Zo ja, hoe doe ik dit? En hoe zorg ik dat alles binnen dat vlak blijft?

Bedankt!

Groet,
Guyon

**Nils Westhoff** · 01-10-2011, 13:49

Leuke tutorials zijn van bucky (a.k.a. thenewboston) op youtube! SUPERGOED, en gaat over xHTML en CSS (volgens mij gewoon gebaseerd op w3schools). zoek maar op als je videotutorials makkelijker vind :)

gast37784 · 01-10-2011, 13:52

Nils,
Bedankt voor de tip! Erg duidelijke video's! :)

**Erwin de B** · 01-10-2011, 14:04

Allicht verstandig om je dan gelijk op CSS3 / HTML5 te gaan richten.

gast37784 · 01-10-2011, 14:36

Ik begin even met de basis, daarna zal ik zeker gaan verdiepen in HTML5 etc.

Nog een vraagje, wat is beter:
Tekst opmaken via ID's of via classes?

**Harings Rob** · 01-10-2011, 14:46

Een kleine tip, maak minder gebruik van ID's en meer van Tags voor items die terug kunnen komen zoals h2 tags.

gast37784 · 01-10-2011, 16:09

Heb even wat gespeeld met codes en heb dit tot nu toe gemaakt:
http://tinyurl.com/6kocnrn

Hoe kan ik alles centreren?
Ik wil alles in een (wit) vlak hebben, hoe kan ik deze importeren en zorgen dat deze achter alles valt?
Het menu/logo/menu moeten allemaal in dit vak komen!

**Sebastiaan Hengeveld** · 01-10-2011, 17:23

Ik denk dat het beter is om dat "witte" vlak (ik neem aan dat je een plaatje bedoelt) in een div te zetten met witte achtergrond.

En dan de rest in die div dus...:

Code:

<div id="bg">
   <div id="header">
   <img src="headerimg" alt="" />
   </div>
        <div id="logo">
        <img src="logo" alt="" />
        </div
   <div id="menu">
   <img src="menu-knoppen" alt="" />
   </div>
</div>

En dan aan elke verschillende div id een css id koppelen, dus:

Code:

#bg {.....}
#header {....}
#logo {...}
#menu {...}

(om een div in het midden te krijgen moet je hem een hoogte en wijdte geven en dan {margin: 0 auto} )

Hoop dat je een beetje op weg nu kan ;) Mocht je nog vragen hebben ben ik wel bereid je te helpen, je kan pm sturen of reply.

gast37784 · 01-10-2011, 20:25

Sebastiaan is mij nu aan het helpen, super!
Mocht er iemand nog tips hebben, ik hoor het graag! Bedankt allemaal! :)

Groeten,
gast37784

Net begonnen, klopt het? | HTML/CSS