Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Jack Hawkins
Front End Web Development Techdegree Student 5,984 Pointscan someone help with my flex as I cant have a div inside the <legend>
<div class="news">
<legend class="headnews"> Newsletter </legend>
<legend>Select the newsletters you would like to recieve</legend>
<div class="flex">
<fieldset>
<div class="flex">
<input type="checkbox" id="htmlnews">
<label style="" class="checkbox" for="htmlnews">HTML News</label>
</div>
<div class="flex">
<input type="checkbox" id="cssnews">
<label class="checkbox" for="cssnews">CSS News</label>
</div>
<div class="flex">
<input type="checkbox" id="javanews">
<label class="checkbox" for="javanews">Javascript News</label>
</div>
</fieldset>
<legend> Newsletter format</legend>
<fieldset>
<div class="flex">
<input type="radio" name="check" id="html" value="html">
<label class="checkbox" for="html">HTML</label>
</div>
<div class="flex">
<input type="radio" name="check" id="plaintext" value="plaintext">
<label class="checkbox" for="plaintext">Plain text</label>
</div>
</fieldset>
<label class="textarea" for="textarea"> Other topics you'd like to hear about</label>
<textarea id="textarea" name="message"></textarea>
<input class="sign" type="submit" value="Sign Up">
</div>
.flex{
width:60%;
display:flex;
flex-direction: row
}
Chidiebere Ekennia
5,950 PointsHello Jack. Please could you be a bit more specific on what you want the flex to do?
3 Answers
Chidiebere Ekennia
5,950 PointsAlright Jack, glad you got back to me. There's nothing wrong with the "flex" class you've been using. However, the reason for that error is because your HTML is "semantically" wrong. Semantics here refers to it's meaning, what the code means, or should mean. A "legend" element is like a title that defines a block of inputs. Eg: Personal details for inputs like: Name, Age, Sex, etc. A legend should only come after a "fieldset" element is defined, just like tables have captions. To correct your code, simply ensure that all "legend" elements are only ever placed after the opening tag of a "fieldset" element.
Example:
<fieldset>
<legend>Personal Details</legend>
....
</fieldset>
Any legend element that is outside a fieldset element is semantically wrong.
Jack Hawkins
Front End Web Development Techdegree Student 5,984 Pointshi there.
I used flex to make this form however when I run It thought the HTML validator. it comes up with this and i cant find a way round it.
Error: Element legend not allowed as child of element div in this context. (Suppressing further errors from this subtree.)
From line 53, column 4; to line 53, column 28
ews">↩↩ <legend class="headnews"> Newsl
Contexts in which element legend may be used: As the first child of a fieldset element. Content model for element div: If the element is a child of a dl element: one or more dt elements followed by one or more dd elements, optionally intermixed with script-supporting elements. If the element is not a child of a dl element: flow content.
Jack Hawkins
Front End Web Development Techdegree Student 5,984 PointsThank you guys
Rich Donnellan
Treehouse Moderator 27,696 PointsRich Donnellan
Treehouse Moderator 27,696 PointsQuestion updated with code formatting. Check out the Markdown Cheatsheet below the Add an Answer submission for syntax examples.
What are you trying to accomplish?