3 Replies - 220 Views - Last Post: 11 January 2018 - 04:14 AM

#1 [email protected]   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 94
  • Joined: 24-February 15

html div tag not closed

Posted 09 January 2018 - 03:30 AM

Somewhere in my code a div tag is not closed but I don't where, I used div checker and so all tags are closed.
At the bottom my div code is yellow, in sublime a div supposed to have a red color, so it means my div is not closed right.
Anyone that can do a check and help me.

<?php
		// Require
		require_once 'php/contentSource.php';
?>
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
	
	<link rel="stylesheet" href="./styles/style.css"/>

	<title>Hello, world!</title> </head> <body> 

	<div class="fixed-top">
		<nav class="navbar navbar-expand-md navbar-dark		bg-dark justify-content-between"> <a class="navbar-brand" href="#"><img class="logo" src="./images/difLogoWebsite.png"alt=""></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
		
		<!-- Deze class naam veranderen -->
		<div class=" " id="navbarNavDropdown">
			<ul class="navbar-nav">
				<li class="nav-item">
					<a href="#"><img class="socialpic" src="images/facebook.png"></a>
				</li>
				<li class="nav-item">
					<a href="#"><img class="socialpic" src="images/twitter.png"></a>
				</li>
				<li class="nav-item">
					<a href="#"><img class="socialpic" src="images/instagram.png"></a>
				</li>    
			</ul>
		</div>
		</nav>
	</div>

	<div id=wrapper>
		<!-- Container voor responsive -->
		<div class="container-fluid main">			
			<!-- All sections -->
			<div class="section page1">
				<div class="promo1">
					<div class="promo-item">						
						<h1 class="h1dif"> Dif Report </h1></br>
						<p class="pland"> Quest for innovators<br> with bright ideas. </p><br>
						<a href="" ><img class="badge1" src="images/androidBadge.png" width="150px" height="60x"></a>
						<a href=""><img class="badge2" src="images/appleBadge.png" width="130px" height="40x"></a>
					</div>
					
					<div class="promo-item">			
						<img src="images/mockups.png">
					</div>

					<div class="promo-item">			
						
					</div>
									
				</div>
			</div>
		
			<div class="section page2" style="background-color:#559900;">
				<div id="content-section2" class="content-parent">
					<div class="content1"> 
						<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> 
							<ol class="carousel-indicators">
								<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
								<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
								<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
							</ol>
					
							<div class="carousel-inner">
								<div class="carousel-item active">
								<div class="slider-container">
									<div class="slider-content">								
										<table style="height: 100%;">
											<tbody>
											<tr>										  
											<td class="align-middle">
											<div class="text-main">
												<h3><?php echo getPageContent($conn, 1)['content']; ?></h3>
											</div>
											</div>
											</td>										
											</tr>
											</tbody>
										</table>								
									</div>
								</div>
								</div>
							</div>

							<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
								<span class="carousel-control-prev-icon" aria-hidden="true"></span>
								<span class="sr-only">Previous</span>
							</a>
							<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
								<span class="carousel-control-next-icon" aria-hidden="true"></span>
								<span class="sr-only">Next</span>
							</a>

						</div>
					</div>			
				</div>
			</div>

		<div class="section page3">
			<div id="content-section3" class="content-parent">
					<div class="content1"> 
						<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> 
							<ol class="carousel-indicators">
								<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
								<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
								<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
							</ol>					
									<div class="carousel-inner">
										<div class="carousel-item active">										
											<div class="slider-container">
												<div class="slider-content">				
													 <table style="height: 100%;">
														<tbody>
														<tr>										  
														<td class="align-middle">
														<div class="text-main">
														<h3><?php echo getPageContent($conn, 1)['subcontent']; ?></h3>
														</div>
														</div>
														</td>										
														</tr>
														</tbody>
													</table>
											</div>
										</div>
									</div>																									
														
							<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
								<span class="carousel-control-prev-icon" aria-hidden="true"></span>
								<span class="sr-only">Previous</span>
							</a>
							<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
								<span class="carousel-control-next-icon" aria-hidden="true"></span>
								<span class="sr-only">Next</span>
							</a>

						</div>
					</div>			
				</div>
			</div>
		</div>

		<div class="section page4">
			<div id="content-section4" class="content-parent">
					<div class="content1"> 
						<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> 
							<ol class="carousel-indicators">
								<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
								<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
								<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
							</ol>
					
							<div class="carousel-inner">
								<div class="carousel-item active">								
									<div class="slider-content-mockup">

										
										<div class="slider-container-mockup">
										 <table style="height: 100%;">
											<tbody>
												<tr>										  
												<td class="align-middle">
													<div class="row">
													<div class="col-sm">
														<img class="mockups2" src="images/mockups2.png">
													</div>
													<div class="col-sm">
														<strong><i><h2><?php echo getPageContent($conn, 1)['title']; ?></h2></i></strong>
														<div class="text4"><h3><?php echo getPageContent($conn, 1)['subcontent2']; ?></h3></div>
														<img class="button-section4" src="images/arrow_right.png">
													</div>
													</div>
												</td>										
												</tr>
											</tbody>
										</table>										
									</div>
								</div>
																							
							<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
								<span class="carousel-control-prev-icon" aria-hidden="true"></span>
								<span class="sr-only">Previous</span>
							</a>
							<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
								<span class="carousel-control-next-icon" aria-hidden="true"></span>
								<span class="sr-only">Next</span>
							</a>
								</div>									 							
							</div>
						</div>
					</div>
				</div>			
			</div>
		</div>
						
		<div class="section page5 "  style="background-color:blue;>
			<div class="content-parent">
				<div class="content1"> 
					
				</div>
			</div>
		</div>
		
		<!-- Side dot navigation -->
		<div class="dotnav">	
			<div class="dots">
				<div id="current" class="dot"><div></div></div>
				<div class="dot"><div></div></div>
				<div class="dot"><div></div></div>
				<div class="dot"><div></div></div>
				<div class="dot"><div></div></div>
			</div>	
		</div>
	</div>	
</div>
</div>
	
	

    <!-- Optional Javascript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
  </body>
</html>




Is This A Good Question/Topic? 0
  • +

Replies To: html div tag not closed

#2 andrewsw   User is online

  • Bouncy!
  • member icon

Reputation: 6563
  • View blog
  • Posts: 26,619
  • Joined: 12-December 12

Re: html div tag not closed

Posted 09 January 2018 - 03:37 AM

The HTML validator shows lots of issues including for div tags.

You should, though, check the resultant HTML without the PHP code.
Was This Post Helpful? 0
  • +
  • -

#3 nensi.panjwani   User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 8
  • Joined: 10-January 18

Re: html div tag not closed

Posted 11 January 2018 - 03:55 AM

Hi,

You can use below code for proper formate

<?php
		// Require
		require_once 'php/contentSource.php';
?>
<!Doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
	<link rel="stylesheet" href="./styles/style.css"/>
	<title>Hello, world!</title> 
</head>
<body> 

	<div class="fixed-top">
		<nav class="navbar navbar-expand-md navbar-dark		bg-dark justify-content-between"> <a class="navbar-brand" href="#"><img class="logo" src="./images/difLogoWebsite.png"alt=""></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
			<!-- Deze class naam veranderen -->
			<div class=" " id="navbarNavDropdown">
				<ul class="navbar-nav">
					<li class="nav-item">
						<a href="#"><img class="socialpic" src="images/facebook.png"></a>
					</li>
					<li class="nav-item">
						<a href="#"><img class="socialpic" src="images/twitter.png"></a>
					</li>
					<li class="nav-item">
						<a href="#"><img class="socialpic" src="images/instagram.png"></a>
					</li>    
				</ul>
			</div>
		</nav>
	</div>

	<div id=wrapper>
		<!-- Container voor responsive -->
		<div class="container-fluid main">			
			<!-- All sections -->
			<div class="section page1">
				<div class="promo1">
					<div class="promo-item">						
						<h1 class="h1dif"> Dif Report </h1></br>
						<p class="pland"> Quest for innovators<br> with bright ideas. </p><br>
						<a href="" ><img class="badge1" src="images/androidBadge.png" width="150px" height="60x"></a>
						<a href=""><img class="badge2" src="images/appleBadge.png" width="130px" height="40x"></a>
					</div>
					
					<div class="promo-item">			
						<img src="images/mockups.png">
					</div>

					<div class="promo-item">			
						
					</div>
									
				</div>
			</div>
			<div class="section page2" style="background-color:#559900;">
				<div id="content-section2" class="content-parent">
					<div class="content1"> 
						<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> 
							<ol class="carousel-indicators">
								<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
								<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
								<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
							</ol>
					
							<div class="carousel-inner">
								<div class="carousel-item active">
								<div class="slider-container">
									<div class="slider-content">								
										<table style="height: 100%;">
											<tbody>
											<tr>										  
											<td class="align-middle">
											<div class="text-main">
												<h3><?php echo getPageContent($conn, 1)['content']; ?></h3>
											</div>
											</td>										
											</tr>
											</tbody>
										</table>	
									</div>
																		
								</div>
								</div>
							</div>
						</div>

						<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
							<span class="carousel-control-prev-icon" aria-hidden="true"></span>
							<span class="sr-only">Previous</span>
						</a>
						<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
							<span class="carousel-control-next-icon" aria-hidden="true"></span>
							<span class="sr-only">Next</span>
						</a>

					</div>
				</div>			
			</div>
			<div class="section page3">
			<div id="content-section3" class="content-parent">
				<div class="content1"> 
					<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> 
						<ol class="carousel-indicators">
							<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
							<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
							<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
						</ol>					
								<div class="carousel-inner">
									<div class="carousel-item active">										
										<div class="slider-container">
											<div class="slider-content">				
												 <table style="height: 100%;">
													<tbody>
													<tr>										  
													<td class="align-middle">
													<div class="text-main">
													<h3><?php echo getPageContent($conn, 1)['subcontent']; ?></h3>
													</div>
													</div>
													</td>										
													</tr>
													</tbody>
												</table>
										</div>
									</div>
								</div>																									
													
						<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
							<span class="carousel-control-prev-icon" aria-hidden="true"></span>
							<span class="sr-only">Previous</span>
						</a>
						<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
							<span class="carousel-control-next-icon" aria-hidden="true"></span>
							<span class="sr-only">Next</span>
						</a>

					</div>
				</div>			
			</div>
			</div>
			<div class="section page4">
				<div id="content-section4" class="content-parent">
					<div class="content1"> 
						<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> 
							<ol class="carousel-indicators">
								<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
								<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
								<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
							</ol>
					
							<div class="carousel-inner">
								<div class="carousel-item active">								
									<div class="slider-content-mockup">

										
										<div class="slider-container-mockup">
										 <table style="height: 100%;">
											<tbody>
												<tr>										  
												<td class="align-middle">
													<div class="row">
													<div class="col-sm">
														<img class="mockups2" src="images/mockups2.png">
													</div>
													<div class="col-sm">
														<strong><i><h2><?php echo getPageContent($conn, 1)['title']; ?></h2></i></strong>
														<div class="text4"><h3><?php echo getPageContent($conn, 1)['subcontent2']; ?></h3></div>
														<img class="button-section4" src="images/arrow_right.png">
													</div>
													</div>
												</td>										
												</tr>
											</tbody>
										</table>										
									</div>
								</div>
																							
							<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
								<span class="carousel-control-prev-icon" aria-hidden="true"></span>
								<span class="sr-only">Previous</span>
							</a>
							<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
								<span class="carousel-control-next-icon" aria-hidden="true"></span>
								<span class="sr-only">Next</span>
							</a>
								</div>									 							
							</div>
						</div>
					</div>
				</div>			
			</div>
			<div class="section page5 "  style="background-color:blue;">
				<div class="content-parent">
					<div class="content1"></div>
				</div>
			</div>
		</div>
		<!-- Side dot navigation -->
		<div class="dotnav">	
			<div class="dots">
				<div id="current" class="dot"><div></div></div>
				<div class="dot"><div></div></div>
				<div class="dot"><div></div></div>
				<div class="dot"><div></div></div>
				<div class="dot"><div></div></div>
			</div>	
		</div>
	</div>	

	<!-- Optional Javascript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</body>
</html>

Thanks.


Was This Post Helpful? 0
  • +
  • -

#4 andrewsw   User is online

  • Bouncy!
  • member icon

Reputation: 6563
  • View blog
  • Posts: 26,619
  • Joined: 12-December 12

Re: html div tag not closed

Posted 11 January 2018 - 04:14 AM

nensi.panjwani describe what you have done there. We do not encourage just posting an uncommented block of code.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1