Download presentation
Presentation is loading. Please wait.
2
On a somewhat dreary day in October, Professor Dumbledore assigned young Harry Potter a new project.
3
“Harry, I need you to create the perfect Goblet of Liquid Layout
“Harry, I need you to create the perfect Goblet of Liquid Layout. I seem to have misplaced mine, and I have some errands to run this afternoon which prevent me from concocting it myself.” “You can count on me, Professor! After all, I am pretty much the greatest wizard ever – I’m sure I can figure it out!”
4
But the Goblet did not appear.
He began by casting the “#container” Charm: #container { width: 90%; margin: 20px auto; background-color: #fff; opacity: 0.5; color: #333; border: 1px solid #333; line-height: 130%; } But the Goblet did not appear.
5
Harry waited eagerly… But nothing happened. #header { padding: 0px;
He asked his friend Ron for help. “Why don’t you try the “#header” and “#header h1” charms?” #header { padding: 0px; background-color: #CCC; opacity: 0.7; border-bottom: 1px solid gray; } #header h1 { padding: 25px; margin: 0; font-family: Arial, Helvetica, sans-serif; } Harry waited eagerly… But nothing happened.
6
Harry began to get frustrated. “We’ll never figure this out in time!”
Just then, Ron’s sister Ginny walked by. “I hear you need the “#leftnav” spell for the others to work correctly,” she said. #leftnav { float: left; width: 300px; margin: 0; padding: 1em; background-color: #CCC; opacity: 0.8; height: 450px; border-left: 1px solid gray; } Harry began to get frustrated. “We’ll never figure this out in time!”
7
Unfortunately, it didn’t.
“My father tried to conjure the Goblet of Liquid Layouts once,” said Luna, passing by on her way to the Potions Dungeon. “I think he mentioned something about the “#rightnav” spell…maybe it will help!” #rightnav { float: right; width: 300px; margin: 0; padding: 1em; background-color: #CCC; opacity: 0.8; height: 450px; border-left: 1px solid gray; } Unfortunately, it didn’t.
8
“#content” charm over her shoulder as she ran by.
As Harry and his friends continued to ponder, Hermione hurried down the corridor towards them. “Excellent!” Harry cried. “Hermione will know what to do!” #content { margin-left: 332px; margin-right: 232px; padding: 47px20px20px20px; max-width: 36em; } With barely a backwards glance, Hermione cast the “#content” charm over her shoulder as she ran by.
9
“I know we’re close, guys. We can do it!
What’s the last piece?”
10
All six young wizards waited with bated breath…
“I REMEMBER!” Neville exclaimed loudly as he pulled out his wand. “ ‘#footer’ ”! #footer { clear: both; margin: 0; padding: 8px; color: #333; background-color: #333; border-top: 1px solid gray; } All six young wizards waited with bated breath…
11
The ghostly image of a Goblet appeared…
12
At that moment, Dumbledore entered the Great Hall, a wide smile spread across his face.
“Excellent! You did it Harry! Only one step remains: the ‘HTML’ Charm!” <html> <body> <div id="container"> <div id=“header"> <h1>This is the Header</h1> </div> <div id="leftside"> <p>This is left column text!</p> <div id="rightside"> <p>This is right column text!</p> </div><div id="content"> <h2>This is a Subheading!</h2> <p>This is where your content goes! <p>This is a new paragraph of content! <p>Another new paragraph! <p>LAST PARAGRAPH. <div id="footer"> This is the Footer </body> </html>
13
TA DA
14
And so, Harry Potter and his friends completed Dumbledore’s random task, proving once more that Harry’s friends do more than half the work but he gets all the credit.
15
ATTENTION CSS WIZARDS:
Although the spells that Harry and his friends cast were correct, senior Wizards may wish to cast more advanced charms. Since Harry is arrogant, he thinks he can do everything – so we shall now humour him as he and his little friends explain several more charms to you.
16
BODY BACKGROUND “Gran always says it’s nice to have something nice to look at in the background…” body { background-image: url (city.jpg); background-repeat: repeat-x; } “You might want to cast this charm first, seeing as it sets the stage for the whole Goblet. And by labelling it as “repeat-x”, it ensures that the charm can only be cast from left to right. It’s very handy when inexperienced wizards are trying to cast this charm around me – I’m tall, you know? And sometimes they misfire.”
17
NAVIGATION BAR “Sometimes you might want to see all of the spells you’ve cast laid out in front of you. In that case, a navigation bar is super convenient.” #navigation { float: left; width: 100%; background: #333; opacity: 0.8; } “I think I’m probably forgetting something…”
18
“Honestly Ronald, you forget EVERYTHING
“Honestly Ronald, you forget EVERYTHING! You need to dictate what KIND of charm navigation you’re going to be using. In my case, it will be unordered.” 1 #navigation ul { margin: 0; padding: 0; } #navigation ul li { list-style-type: none; display: inline; } 2 A non-verbal spell indicating that a link is involved is crucial “Is it coming back to you NOW, Ronald?”
19
#navigation li a:hover { background: #69F; }
ARE THEY HOLDING HANDS?! OHMYLIFE! <333 #navigation ul a { display: block; float: left; padding: 5px10px; color: #FFF; text-decoration: none; border-right: 1px solid #FFF; } #navigation li a:hover { background: #69F; } “Yeah, it is, Ms. I-Know-Everything-and-Love-Ronald-Bilius-Weasley. The only thing left to do are stylize the links themselves, which, as you can see, we are excellent at. (P.S. I LOVE YOU) What?”
20
FLOATING IMAGE #image1 { float:left; }
“While Ron and Hermione sort out their awkward sexual tensions, I am going to teach you all how to insert an image into your charms that shall float magically to one side or the other. I am aware that it is one of the easiest charms involved in conjuring the Goblet, however I am lazy and actually have no incredible magical talents, so this is all I am capable of.” FLOATING IMAGE “See? Piece of cake. Now when you cast your charm with the nonverbal spell “#image1” it will float mysteriously in the air to the left of every other random spell hanging around up there.” #image1 { float:left; } “All this spell does is align your text to the right within your larger charm of “#rightside”. (I am aware you figured that out on your own. I just like to hear myself talk.)” #rightside p { text-align:right }
21
“Now all that’s left is a little bit of formatting, to make your charms more concise and easy-to-understand!” MARGINS #leftnav p, #rightnav p { margin: 0 0 1em 0; } #content h2 { margin: em 0; } “Now everything will flow nicely, as a goblet of liquid layout should.”
22
<html> <head>
<html> <head> <title>Goblet of Liquid Layout</title> <link rel="stylesheet" type="text/css" href=“STYLESHEET.css"> </head> <body> <div id="container"> <div id="header"> <h1> CSS 3 COLUMN LAYOUT </h1> </div> <div id="navigation"> <ul> <li> <a href=“LINK1.html"> THIS IS LINK 1 </a> </li> <li> <a href=“LINK2.html"> THIS IS LINK 2 </a> </li> </ul> </div> <div id="side1"> <p id="text1"> Hoggy Hoggy Hogwarts! Teach us something please! </p> </div> <div id="content"> <h2> Fixed Layout</h2> </div> <div id="side2"> <img id="image1" src=“YOUR_IMAGE.jpg" height="90px" width="100" /> <p id="text2"> THIS IS YOUR IMAGE TEXT. </p> </div> <div id="footer"> </div> </div> </div> </div> </body> </html> FINAL HTML DOCUMENT
23
“NOW GO FORTH, AND FILL THE WORLD WITH BEAUTIFUL GOBLETS!”
DON’T STOP BELIEVING.
Similar presentations
