23, 30 navigation asset (img 1, img 2, img 3) html html html put the style tag in each (Easy, Got it. Style tag inside the head) HTML5 tags, lists, hr rule, heading tag, css formatting to date: Box model, padding, margins and images will not cover navigation. Open book open note I have to make something. Review on thursday. dont reinvent the wheel ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ taken navBook1.text , added content inside the body. UL LI A. The last one has a class so the border right is none. ~~~~~~~~~~ navBook1 ~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~ Added content ~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~ So the nav is a box. Navigation bar example. border-right: solid 2px white is a white space ~~~~~~~~~~~~~~~~ follow the order a:link - a normal, unvisited link a:visited - a link the user has visited a:hover - a link when the user mouses over it a:active - a link the moment it is clicked link, visited, hover, active. In this order. navbarExample_1_InClass ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ navbarExample is A level navBook1 is B level ~~~~~~~~~~~~~~~~~~~ navbar embedded nav tag inside the header tag ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Contacts span is a utility tag. This text needs to be formatted this way. Im taking that text within all of this other text and making it look this way. It created the border. span{border:2px solid red; padding:5px; background-color:antiquewhite; color:green;} .red { A way to set something specific within a group of items aside. Used a lot with text. Especially in nav bar like what i see here. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ navbarformatted no h3 tag and no unordered list, dont need either on highlight has box shadow and the backround color changes example of an A level Start to think outside the box. "All these examples show solid, only do square, only do X" if i can do padding with images then i can do it here starting to enter reusing things we've been looking at. not continuing to climb certain basic set used over and over again. Near end of that set. This is anchor tag, box shadow, active color:yellow; added to hover, active ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ https://www.w3schools.com/css/css_inline-block.asp new way of doing float Useful for data structures shell sort buckets ~~~~~~~~~~~~~~~~~~~~ navbarhorizontal (not given to us) unordered list on ul li, on hover, have changes take place: bkrnd color, border radius, color, font-weight example of an A ~~~~~~~~~~~~~~~~~~~~~~~~ navbarimagesopacity placing images inside the nav bar i want images that don't have backround. Needs white backround. the nav bar is setup with text align center nav tag: notice three imgs only theyre centered because nav tag allows text align center to work with images } img { margin-left: 5px; opacity:0.4; filter:alpha(opacity=40); } imgs are 5 px apart from the left This is at an A level a:hover img{opacity:.80; filter:alpha(opacity=80); /* For IE8 and earlier */} a{outline:none;} when mouse is hovering the opacity level changes img filter:alpha(opacity=40) is what happens when i dont hover , by default so hover increae opacity from 40 to 80. ah! if I make this nav bar mine, and have images to display such as an image of Text ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Home || Intro to Java || Intermediate Algebra || Database || Object Oriented Java || Android || ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Thursday bring my questions inline style is totally off limits in class https://www.w3schools.com/css/css_dropdowns.asp dropdown in line block: another way of doing float. A box within a box.