Beste,

Ik heb een HTML code bug, zelf kan ik er niet uitkomen en ook heeft een ander er naar gekeken.

Het probleem is dat, wanneer ik één stuk tekst wijzig, mijn hele menu flipt.

Ik hoop dat jullie er wat fouten in zien, waardoor ik hem kan debuggen.

<!DOCTYPE html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="description" content=":D" />
	<meta name="keywords" content="tijdelijk weggehaald" />
	<meta name="robots" content="index, nofollow">
	<title>Home - HTML</title>
	<link href="css/style2.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div id="container">
            
		<div id="header">
			<div id="head_logo"><a href="index.html">WebDesign</a></div>
			<div id="slogan">Wees welkom op <font color="orange">WebDesign</font>.</div>
		</div><!-- end header div -->
		
                <div id="content">
			<div id="content_tekst"><h1>Welkom op mijn portfolio.</h1>< 
			<div id="avatar"><a href="#aboutme"><img src="images/no_avatar.jpg" alt="lala" title="lala" /></a></div>
			
                <div id="navBar"> 
                        <ul>
                            <a href="index.html"><li>Home</li></a>
                            <a href="#portfolio" onclick="alert('Momenteel niet aanwezig')"><li>Portfolio</li></a>
                            <a href="#Factuur" onclick="alert('Momenteel niet aanwezig')"><li>Factuur aanvragen</li></a>
                            <a href="Contact.php"><li>Contact</li></a>
                        </ul>
                </div>
                        
		<div id="p_cont">
                                
                <p id='tekst1'>

                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
                </p>
                <br/>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
                </p>
		</div>
                        
                <p id="tekst3">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>

                    <a href="Contact.php" style="text-decoration: underline;">Vraag uw site hier aan</a>.
                </p>
                        
                <p id="projecten">Laatste projecten:</p>
                    <div id="projecten_af">
                        <img src="images/thumbs/portfolio.jpg" alt="portfolio" /> 
                        <img src="images/thumbs/name.jpg" alt="name" />
                        <img src="images/thumbs/name2.jpg" alt="name2" /> 
                    </div>
		</div>
            </div><!-- end content_tekst div -->
        </div><!-- end content div -->

    <div id="footer">Copyright &copy; 2012 | <a href="index.php">Mijnaam</a></div>
    
</body>
</html>
Als beginner is w3schools erg duidelijk en makkelijk te gebruiken.

Als je dit gebruikt, kijk dan ook op w3fools ... er staan namelijk ook een aantal dingetjes op die niet (of niet helemaal) waar zijn, maar over het algemeen is het een stuk gebruiksvriendelijker / makkelijker te vinden dan de html documentatie op w3.
Better is het te leren van een goede tutorialreeks, helaas heb ik er niet een gevonden die nieuw is, in HTML5, en goed.

Het beste vind ik tot nu toe door de tutorial op http://sceneone.nl/ door te lezen (de site is 1 grote tutorialreeks) en dan te gaan lezen over HTML5, betekenissen van tags, enz.
Even algemeen: Ik gebruik totaal geen HTML 5, gewoon 4.1. Waar vinden jullie enige HTML 5 code? Zou ik graag willen weten, dan pas ik dat aan.
Ehh... 1e regel? <!DOCTYPE html>
Oke, dan pas ik dat even aan..
Uhm... Je maakt gebruik van 4.0, want <font> is deprecated.
The <font> element is deprecated in HTML 4.01.

Chris NVT op 25/05/2012 08:23:07

Uhm... Je maakt gebruik van 4.0, want <font> is deprecated.
The <font> element is deprecated in HTML 4.01.


Ik heb geprobeerd dit in een div te zetten, maar wanneer ik dat toepas, krijg ik een fout Dan komt zeg maar het gene dat orange moet, in het zwart, op een nieuwe regel. Die moet natuurlijk op dezelfde regel staan.

Toevoeging:

Ben de hele code opnieuw aan het typen. Zonder inhoud, eerst de divs, daarna inhoud toevoegen. Het is de bedoeling de font tag weg te laten.

@Cailin,

Zet het zo neer, dat werkt net zo goed en je doet het dan zonder het <font> element.

<li class="oranje">Webdesign</li>

Dan kun je in je css de class oranje stylen, wel even list-style: none; erbij zetten
@Gehard, nee dat doctype is gewoon een algemeen doctype. Dit is het enige wat een browser leest van een doctype en daarom zou dit overal voor werken.
Die verschillende doctypes zijn alleen belangrijk voor de validator van W3C omdat hij zo in een bepaalde mode gezet kan worden, voor een browser maakt het niks uit.
Chris NVT op 25/05/2012 08:37:08

@Cailin,

Zet het zo neer, dat werkt net zo goed en je doet het dan zonder het <font> element.

<li class="oranje">Webdesign</li>

Dan kun je in je css de class oranje stylen, wel even list-style: none; erbij zetten


Thanks, ik ga het proberen.



[size=xsmall]Toevoeging op 25/05/2012 08:57:28:[/size]

<div id="slogan">Wees welkom op <li class="orange">WebDesign</li></div> <!-- End Slogan Div -->

Foutmelding NetBeans: Element li not allowed as child of element 'div' in this context

Reageren