The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Element div not allowed as child of element ul in this context., CSS/li style help
nhavel43
post Mar 20 2016, 02:09 PM
Post #1





Group: Members
Posts: 1
Joined: 20-March 16
Member No.: 24,083
When making a page with pictures used as a list and a link I get this error with my coding: Element div not allowed as child of element ul in this context.
Is there an easy way to fix this without re doing a lot of the work? It's probably something simple just having a bad day.
I know it has to do with the <div> inside the li...just not sure how to fix it.
I have looked at how to fix it but not sure what to do....here is the HTML coding:

<!DOCTYPE html>
<html lang="en">
<head>
<title>College Course Catalog</title>
<link rel="stylesheet" type="text/css" href="course.css">
<meta charset="utf-8">
</head>
<body>
<div id="container">
<h1>Welcome to the College Course Catalog</h1>
<h4>Choose when you would prefer to take your courses:</h4>
<ul>
<div id="morningbox">
<div id="transbox">
<a href="day/morning/index.html"><li>Morning</li></a>
</div>
</div>
<div id="afternoonbox">
<div id="transbox">
<a href="day/afternoon/index.html"><li>Afternoon</li></a>
</div>
</div>
<div id="eveningbox">
<div id="transbox">
<a href="evening/index.html"><li>Evening</li></a>
</div>
</div>
<div id="onlinebox">
<div id="transbox">
<a href="alternate/online/blackboard/index.html"><li>Online</li></a>
</div>
</div>
</ul>
<p>
<small>Copyright &copy; 2016 Nick Havel</small>
</p>
</div>
</body>
</html>

Here is the CSS style Sheet:


body {
color: #00004d;
margin-left: auto;
margin-right: auto;
width: 80%;
padding: 10px 20px 10px;

}

#container {
margin: auto;
background-color: #ffcc00;
background: linear-gradient(#ffcc00, white);
background-repeat: no-repeat;
width: 850px;
padding: 5px 20px 20px;
box-shadow: 7px 7px 7px #a3a375;
border-radius: 15px;
}

h1 {
background: linear-gradient(white, #00004d);
background-repeat: no-repeat;
height: 25px; width: 700px; font-size: 250%;
margin-top: 20px;
padding-left: 5px; padding-top: 5px; padding-bottom: 35px;
border-radius: 10px;
color: white;
text-align: center;
}

h4 {
padding-left: 40px;
}


ul {
list-style-type: none;
}

#morningbox {

background-image: url(images/morning.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
opacity: 0.8;
font-size: 25px;
width: 180px;
height: 120px;
margin-left: 0px;
margin-bottom: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 15px;
border: 1px ridge #eaeae1;
border-radius: 5px;
}

#afternoonbox {

background-image: url(images/afternoon.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
opacity: 0.8;
font-size: 25px;
width: 180px;
height: 120px;
margin-left: 0px;
margin-bottom: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 15px;
border: 1px ridge #eaeae1;
border-radius: 5px;
}

#eveningbox {

background-image: url(images/evening.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
opacity: 0.8;
font-size: 25px;
width: 180px;
height: 120px;
margin-left: 0px;
margin-bottom: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 15px;
border: 1px ridge #eaeae1;
border-radius: 5px;
}

#onlinebox {

background-image: url(images/online.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
opacity: 0.8;
font-size: 25px;
width: 180px;
height: 120px;
margin-left: 0px;
margin-bottom: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 15px;
border: 1px ridge #eaeae1;
border-radius: 5px;
}

#transbox {

margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
border-radius: 5px;
filter: alpha(opacity=60);
}

#transbox li {

text-align: center;
font-weight: bold;
text-decoration: underline;
color: #000000;
}


Can someone please help me out it's late lol. I'm sure it's simple as making another id or class.

This post has been edited by nhavel43: Mar 20 2016, 02:10 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 20 2016, 03:00 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
An UL element can only contain LI elements. But the LI elements can in turn contain DIV elements, like this:

CODE
<ul>
<li><div>...</div></li>
<li><div>...</div></li>
</ul>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 20 2016, 04:18 PM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
So in what context is it allowed? That validator starts to sound stupid.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 24th April 2024 - 03:47 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC