basis html structuur opzetten moederproject

Status
Niet open voor verdere reacties.
pum

pum

Gebruiker
Lid geworden
18 dec 2009
Berichten
193
ik ben bezig een soort moeder project te maken voor al mijn html projecten. De bedoeling is dat ik zometeen dit project kan kopieeren en een basis heb om op verder te bouwen.

Graag zou ik hier feedback van jullie op willen hebben er zijn vast en zeker nog genoeg puntjes :D

de index pagina
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="nl" xml:lang="nl">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link type="text/css" rel="stylesheet" href="assets/css/reset.css"/>
		<link type="text/css" rel="stylesheet" href="assets/css/screen.css"/> 
		<link type="text/css" rel="stylesheet" href="assets/css/forms.css"/>
		<link type="text/css" rel="stylesheet" href="assets/css/buttons.css"/>
		<title>Basis Html</title>
	</head>
   
   <body>
      <div id="page">
         <div id="header">
            <ul>
               <li><a href="#" title="">Lorem Ipsum</a></li>
               <li><a href="#" title="">Lorem Ipsum</a></li>
               <li><a href="#" title="">Lorem Ipsum</a></li>
               <li><a href="#" title="">Lorem Ipsum</a></li>
               <li><a href="#" title="">Lorem Ipsum</a></li>
            </ul>
         </div>
         
		<!-- Headings -->
         <h1>Lorem Ipsum h1</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae augue ut leo aliquet pulvinar ac nec mauris. Fusce mattis justo semper libero euismod in aliquam felis vestibulum. Curabitur in ipsum quis enim tincidunt dignissim. Duis non pharetra enim.</p>

          <ul>
            <li>Lorem Ipsum is simply dummy text</li>
            <li>Lorem Ipsum is simply dummy text</li>
            <li>Lorem Ipsum is simply dummy text</li>
         </ul>
         
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae augue ut leo aliquet pulvinar ac nec mauris. Fusce mattis justo semper libero euismod in aliquam felis vestibulum. Curabitur in ipsum quis enim tincidunt dignissim. Duis non pharetra enim.</p>
         
         <h2>Lorem Ipsum h2</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae augue ut leo aliquet pulvinar ac nec mauris. Fusce mattis justo semper libero euismod in aliquam felis vestibulum. Curabitur in ipsum quis enim tincidunt dignissim. Duis non pharetra enim. </p>
         
         <h3>Lorem Ipsum h3</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae augue ut leo aliquet pulvinar ac nec mauris. Fusce mattis justo semper libero euismod in aliquam felis vestibulum. Curabitur in ipsum quis enim tincidunt dignissim. Duis non pharetra enim. </p>
         
         <h4>Lorem Ipsum h4</h4>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae augue ut leo aliquet pulvinar ac nec mauris. Fusce mattis justo semper libero euismod in aliquam felis vestibulum. Curabitur in ipsum quis enim tincidunt dignissim. Duis non pharetra enim. </p>
         
         <h5>Lorem Ipsum h5</h5>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae augue ut leo aliquet pulvinar ac nec mauris. Fusce mattis justo semper libero euismod in aliquam felis vestibulum. Curabitur in ipsum quis enim tincidunt dignissim. Duis non pharetra enim. </p>
         
         <h6>Lorem Ipsum h6</h6>
         <p><a href="#" title="">linkje</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae augue ut leo aliquet pulvinar ac nec mauris. Fusce mattis justo semper libero euismod in aliquam felis vestibulum. Curabitur in ipsum quis enim tincidunt dignissim. Duis non pharetra enim. </p>
 
        <!-- Textopmaak -->
		<pre>PRE: Lorem Ipsum is simply dummy text</pre>
		<b>BoldLorem Ipsum is simply dummy text</b><br/>
		<i>Italics Lorem Ipsum is simply dummy text</i>	<br/>
		<u>Underline Lorem Ipsum is simply dummy text</u><br/>
		<s>Strike out text Lorem Ipsum is simply dummy text</s><br/>
		<tt>Teletype Lorem Ipsum is simply dummy text </tt><br/>
		<sup>Superscript Lorem Ipsum is simply dummy text </sup><br/>
		<sub>Subscript (H20)Lorem Ipsum is simply dummy text </sub><br/>
		<em>Emphasized text</em><br/>
		<strong>Strong text</strong><br/>
		<dfn>Definition term</dfn><br/>
		<code>Computer code text</code><br/>
		<samp>Sample computer code text</samp><br/>
		<kbd>Keyboard text</kbd><br/>
		<var>Variable</var><br/>
		<cite>Citation</cite> 		
		<tt>typewriter-style textLorem Ipsum is simply dummy text </tt><br/>
		<font size="3">Font size =3 Lorem Ipsum is simply dummy text </font><br/>
		<blockquote>blockquote Lorem Ipsum is simply dummy text</blockquote> 
		
		
		<!-- Alineas -->
		<p>alinea Lorem Ipsum is simply dummy text </p> 
		<p align="left"> alinea left.Lorem Ipsum is simply dummy text</p>
		<p align="center">alinea center.Lorem Ipsum is simply dummy text</p>
		<p align="right"> alinea right.Lorem Ipsum is simply dummy text</p>
		
		<!-- Afbeeldingen -->
		<img src="assets/images/image.jpg" width="100" height="100" alt="image" />
		<img src="assets/images/image.jpg" width="100" height="100" alt="image" border="1"/> 		
		
		<!-- Anchors -->
		<a href="#">hyperlinkLorem Ipsum is simply dummy text </a> <br/>
		<a href="mailto:EMAIL">mailto linkLorem Ipsum is simply dummy text </a> <br/>
		<a href="#"><img src="assets/images/image.jpg" width="100" height="100" alt="image"/></a>
		
		<h3>Button Class</h3>
		<a href="#" title="" class="button"><span>de button</span></a> 
         
         <!-- Unorderd list -->
         <ul>
            <li>Lorem Ipsum is simply dummy text</li>
            <li>Lorem Ipsum is simply dummy text</li>
            <li>Lorem Ipsum is simply dummy text</li>
         </ul>
         
         <!-- Orderd list -->
         <ol>
            <li>Lorem Ipsum is simply dummy text</li>
            <li>Lorem Ipsum is simply dummy text</li>
            <li>Lorem Ipsum is simply dummy text</li>
         </ol>
         
         <!-- Defenition list -->
         <dl>
            <dt>Lorem Ipsum is simply dummy text</dt>
               <dd>Lorem Ipsum is simply dummy text</dd>
            <dt>Lorem Ipsum is simply dummy text</dt>
               <dd>Lorem Ipsum is simply dummy text</dd>
            <dt>Lorem Ipsum is simply dummy text</dt>
               <dd>Lorem Ipsum is simply dummy text</dd>                                            
         </dl> 
         
         <!-- Table -->
         <table width="100%" border="1">
         	<tr>
         		<td>Lorem Ipsum</td>
         		<td>Lorem Ipsum</td>
         		<td>Lorem Ipsum</td>
         		<td>Lorem Ipsum</td>
         	</tr>
         	<tr>
         		<td>Lorem Ipsum</td>
         		<td>Lorem Ipsum</td>
         		<td>Lorem Ipsum</td>
         		<td>Lorem Ipsum</td>
         	</tr>        	         	         	
         </table>
         
        <!-- Formulier -->
        <h3>Contactformulier</h3>
		<form id="contact-form" action="" method="post">
			<div class="row">
				<label for="naam">Naam</label>
				<input type="text" name="naam" value="naam" class="text" id="naam"/>
				<span class="error">u heeft geen naam ingevuld</span>
			</div>
			<div class="row">
				<label for="email">Email</label>
				<input type="text" name="email" value="email" class="text" id="email"/>
				<span class="error">u heeft geen geldig mail adres ingevuld</span>
			</div>			
			<div class="row">
				<label for="tel">Telefoon</label>
				<input type="text" name="tel" value="tel" class="text" id="tel"/>
				<span class="error">Telefoonnummer is leeg</span>
			</div>
			<div class="row">
				<label for="message">Bericht</label>
				<textarea name="message" class="textarea" id="message" rows="2" cols="2">Lorem Ipsum is simply dummy text</textarea>
			</div>	
			<div class="submit-row">
				<a href="#" title="" id="submit" class="button submit"><span>Verstuur bericht</span></a>
			</div>
		</form>        
       <br/>
       <br/>
      </div>
   </body>
</html>

reset.css

Code: 
/*	
	html, body: browser window
	div: generic block-level container
	center: centered block
	applet: om javascript te embedden
	noscript: als javascript niet geinstalleerd is ziet de gebruiker de noscript tag als deze is opgemaakt
	h1 tm h6: headings
	img: image
	p: paragraph
	pre: preformatted text
	object: objecten insluiten zoals QuickTime filmpjes, Shockwave Flash animaties, Java applets, ActiveX controls, HTML-documenten en documenten met platte tekst
	iframe: inline frame
	embed: element wordt gebruikt om multimedia objecten in te sluiten met de extensie wav, au en mid, maar bijvoorbeeld ook om QuickTime filmpjes (mov), Shockwave Flash animaties (swf) en video clip(avi)
	fieldset: Form control group  
	form: Interactive form
	label: tag defines a label for an input element.
	legend: tag defines a caption for the fieldset element.
	table: Table
	caption: sets a caption for the table.
	tbody: Het TBODY element kan gebruikt worden om aan te geven welke rijen deel uitmaken van de rijgroep die de body van de tabel vormt. 
	tfoot: The <tfoot> tag is used to group the footer content in an HTML table.
	thead: The <thead> tag is used to group the header content in an HTML table.
	th: table head
	tr: table row
	td: table data
	
	article, aside, canvas, details, 
	figure, figcaption, footer, header, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video
*/


html, body, div, center, applet, noscript,
h1, h2, h3, h4, h5, h6, img,
p, pre, object, iframe, embed,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, th, tr, td,
article, aside, canvas, details, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
   margin: 0;
   padding: 0; 
   border: 0;
}

/* HTML5 reset voor oudere browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

:focus { outline: 0; }

a img { 
	border: 0;
	text-decoration: none; 
} 

address { font-style: normal; }

table {
	border-collapse: collapse;
	border-spacing: 0;
}

screen.css

Code: 
/* 
	De Reset.css reset elementen die in elke browser standaard andere waardes mee krijgen.
	verder maakt hij gebruik van de standaard opmaak van de browser en gaat uit van de regel 
	Een list-style is normaal een bullet, afwijkingen worden in stylesheet geplaatst. 
*/
	

/* style = Headings
----------------------------------------------- */


h1 { font-size: 34px; padding-top: 28px; }
h2 { font-size: 28px; padding-top: 22px; }
h3 { font-size: 24px; padding-top: 20px; }

h1, h2, h3, h4, h5, h6 { font-weight: normal; line-height: 1; }
h4, h5, h6 { font-size: 16px; font-weight:bold; padding-top: 10px; }


/* style = Lists
----------------------------------------------- */


ol, dl, ul {
	margin-bottom: 18px;
}


/* style = Paragraphs
----------------------------------------------- */


p { margin-bottom: 18px; }


/* style = Anchors LVAH
----------------------------------------------- */


a:link, a:visited { color:#008AFF; }
a:active, a:hover { color:#F600FF; }


/* style = Template
----------------------------------------------- */


body {
   background-color: #FFF;
   font-family: Arial,Helvetica,Garuda,sans-serif;
   font-size: 13px;
   line-height: 18px;
   color: #000;  
}

#page {
   position: relative;
   width: 960px;
   margin: 0 auto;
}

   #header {
      position: relative;
      width: 960px;
      height: 200px;
      padding-bottom: 30px;
   }
   
   #header ul {
      position: absolute;
      left: 0;
      bottom: 0;
      list-style: none;
      margin: 0;
      padding: 0; 
   }
   
      #header li {
         float: left;
         display: inline;
         height: 30px;
      }
      
         #header a {
            float: left;
            height: 18px;
            padding: 6px;
            color: #FFF;
            text-decoration: none;
            background-color: #000;   
         }
         
         #header a:hover {
            color: #000;
            background-color: #e9e9e9;
         }

button class
Code: 
.button {
	display: inline-block;
	height: 26px;
	padding-right: 14px;
	background: url(../images/button.jpg) right top no-repeat;
	text-decoration: none;
	cursor: pointer;
}

.button:hover, .button:hover span {
	color: #FFF;
	background: url(../images/button.jpg);
}

.button:hover {
	background-position: right -26px;
}

	.button span {
		display: block;
		float: left;
		height: 18px;
		line-height: 18px;
		padding: 4px 10px;
		background: url(../images/button.jpg) left top no-repeat;
		color: #fff;
	}

	.button:hover span {
		background-position: left -26px;
	}

form.css
Code: 
/* Formulier */

.row {
	clear: both;
	padding: 5px 0;
	position: relative;
	width: 960px;
	overflow: hidden;
}

	.row label {
	    float: left;
	    padding: 3px 15px 2px 0;
	    width: 80px;
	}

	.row p {
		margin-bottom: 0;
	}

	input.text, select.select, textarea.textarea {
	    border: 1px solid #CCCCCC;
	    border-radius: 5px 5px 5px 5px;
	    float: left;
	    padding: 3px;
	    width: 255px;
	}

	span.error {
		display: block;
	    clear: both;
	    color: #FF0000;
	    padding: 5px 0 0 100px;
	}

.submit-row {
    clear: both;
}

	.submit {
	    margin: 7px 0 0 96px;
	}
 
Laatst bewerkt:
Ha, een pittige vraag! Even schudden aan de boom:

Tip 1
De standaard :focus { outline: 0; } uit de reset.css halen. Voor de reden: zie deze dialoog op het forum. En ook dit voorbeeld: outline-no-outline.htm.

Tip 2
Als je toch bezig bent, zou ik ook een standaard print.css maken, waarin je bv. het menu weglaat, de pagina-breedte op 100% zet, en alle achtergronden op wit + alle tekstkleuren op zwart: dat scheelt de bezoeker een hoop inkt!
En ergernis: als de pagina anders in portret- èn in landscape-formaat niet op een A4'tje blijkt te passen, of veel ruimtevretende elementen bevat waar je op papier toch niet op kunt klikken.

Tip 3
De html-code vast even door de validator.w3.org/#validate_by_input gooien, levert 7 stuks verboden waar voor het Strict Doctype.

Tip 4
Als het doctype standaard XHTML 1.0 Strict is (prima!), dan is het dus geen html5, en kunnen de html5-tags uit de reset.css.

Tip 5
In de huidige opzet is de <div id="page"> overbodig. De styles daarvan kunnen rechtstreeks in de <body>-styles.

Tip 6
De font-sizes staan allemaal in px. :( Niet doen! Gebruik een relatieve maat als em, zoals in ons eerdere draadje met redenen omkleed.
Ik doe altijd dit:
Code: 
body {
    font-size: 100.1%; /* = normaliseren, ook voor oudere browsers*/
    ... enz.
    }
h1 {
    font-size: 1.3em;
    }
h2 {
    font-size: 1em;
    }
p, li {
    font-size: .9em;
    }
En zo verder, voor wat je nodig hebt. Andere getallen kunnen natuurlijk ook, als het maar em's blijven. Naar smaak kan je ook de line-height in em's opgeven, als je die iets ruimer wilt bemeten (meestal wel mooi).
Ook eventuele verticale margins van teksten (in h1, h2, p, enz.) kunnen in em's worden gezet, dan wordt de afstand naar verhouding groter/kleiner als de lettergrootte door de bezoeker anders wordt ingesteld.
Zo blijft alles optimaal toegankelijk en leesbaar! :)

Met vriendelijke groet,
CSShunter
 
ik heb eigenlijk nog niet zo vaak gewerkt met em, misschien een paar keer en ik vond het elke keer onhandig, en ben er mee gestopt omdat ik het te onoverzichtelijk vond en niet lekker vond werken.

wat is nu een goede manier om dit makkelijk voor jezelf te krijgen en aan te leren.
ik zie sommigen die de font-size op 62.5% zetten zodat ze uit kunnen gaan van 10px;
het kan aan mij liggen maar sommige teksten krijg ik dan niet op de gewenste grootte misschien omdat het word geerfd ?

als je de font op 100.1 % zet blijf je toch bezig te rekenen elke keer dat je em op een element toepast ? de browser gaat nl uit van 16 px standaard.

misschien als ik het eenmaal helder heb dit vaker toe ga passen :)
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan