Some reference for later
el
and el2
just denote any two element tagnames
Selector | Use |
---|---|
* | selects all |
#name | selects by id |
.name | selects by class |
el el2 | juxtapositon of two elements selects all decendents of that type |
el + el2 | addition selects the first el2 following the el |
el > el2 | el greater than el2 selects the immediate children of type el2 but not grandchilren |
el ~ el2 | just selects all of the el2 tags following an el |
el:active | if currently held down |
el:hover | if hovering |
el:clicked | if clicked |
el:not(el2) | select all except el2 |
el:nth-child(num) | selects the child element of el that is some num levels down. num can also be even or odd |
<div id="listContainer">
<ul id="myList">
<li>
Quisque eget nunc euismod, sollicitudin lacus et, varius diam.
</li>
<li>
Aenean a arcu posuere, lobortis turpis et, ultrices odio.
</li>
<li>
Ut rutrum enim facilisis dui sagittis tempus.
</li>
<li>
Praesent adipiscing elit vel magna iaculis lobortis.
</li>
<li>
Fusce feugiat est ac lectus rhoncus vehicula.
Donec volutpat orci ut congue cursus.
</li>
</ul>
</div>
Directions:
div
containing the list a padding
and a gray background
color. Use the margin
to center it left and right.background
colorcolor on each
li` from white to a dark grayCOPY THIS HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page Layout with HTML DIVs</title>
<!-- external CSS link -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>HTML & CSS</h1>
</div><!-- #header -->
<div id="main">
<h2>DIVs</h2>
<p>Simply put, the DIV is used to divide our page into sections.</p>
<h3>Additional Definitions</h3>
<blockquote>"The Document Division HTML element is generic container for flow content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang."<br> - <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/div" target="_blank">MDN</a></blockquote>
<blockquote>"A DIV is a block level container that you can use to group sections of block level content together. You should only use these elements when there isn't a more appropriate, semantic element to use for marking up content. Marking up paragraphs and headings all with DIVs is a terrible thing to do, as although it might look ok, the page will be inaccessible to those using screen readers"<br> - <a href="http://www.w3.org/community/webed/wiki/HTML_structural_elements#Structuring_a_page_with_HTML_4" target="_blank">W3C</a></blockquote>
</div><!-- #main -->
<div id="footer">
© 2012 - GA
</div><!-- #footer -->
</div><!-- #container -->
</body>
</html>
Style the header
, footer
, body
, container
, main
, and all other tags in the html. Should look presentable and show a clear sense of a basiclayout
.
Create a nav bar that's either on the top, left, or right of the page. Choose your positioning, but at the least it should contain a link to the following:
'/home'
'/about'
'/contact'
'/posts'
You should add javascript to put an 'active'
class to the most recently clicked nav element. Fill free to integrate this into your layout from exercise 2.
<form method="post" action="#">
<label>Name</label>
<input name="name" placeholder="Type Here">
<label>Email</label>
<input name="email" type="email" placeholder="Type Here">
<label>Message</label>
<textarea name="message" placeholder="Type Here"></textarea>
<label>*What is 2+2? (Anti-spam)</label>
<input name="human" placeholder="Type Here">
<input id="submit" name="submit" type="submit" value="Submit">
</form>
Style the above form:
Put the form in a div
container with class modal
. Create a button called Feedback
so that when the button is clicked the modal
is viewable, but is hidden otherwise. Include the a button in your modal
div to make it hidden again.
Notes:
modal
should fit the width and height of the pagemodal
should blur out the background, so attempt to give it an opacity.visibility
hidden and visible.