A walkthrough showing you how to take a webpage template and create the HTML and CSS for it. We go through each of the parts of the page individually and explain how to create them all
HTML and CSS can be a little daunting at first. This workshop covers the basics, breaks down the barrier to entry and shows you how you can start using HTML and CSS now.
You've been tasked with developing a new front end feature. HTML, CSS, and JavaScript are nothing new to you, in fact you even know a few tricks to get this feature out the door. It doesn't take you long and the code works like a charm, yet you have a looming suspicion that some of the code might not be up to par. You're likely right, and you're definitely better than that.
We often write code without paying attention to the bigger picture, or overall code base. Upon stepping back we notice areas of duplicate code, ripe for refactoring. It's time to build more modular front ends, focusing on the reusability of HTML, CSS, and JavaScript, and to take maintainability to heart.
A walkthrough showing you how to take a webpage template and create the HTML and CSS for it. We go through each of the parts of the page individually and explain how to create them all
HTML and CSS can be a little daunting at first. This workshop covers the basics, breaks down the barrier to entry and shows you how you can start using HTML and CSS now.
You've been tasked with developing a new front end feature. HTML, CSS, and JavaScript are nothing new to you, in fact you even know a few tricks to get this feature out the door. It doesn't take you long and the code works like a charm, yet you have a looming suspicion that some of the code might not be up to par. You're likely right, and you're definitely better than that.
We often write code without paying attention to the bigger picture, or overall code base. Upon stepping back we notice areas of duplicate code, ripe for refactoring. It's time to build more modular front ends, focusing on the reusability of HTML, CSS, and JavaScript, and to take maintainability to heart.
Haml, Sass and Compass for Sane Web Developmentjeremyw
HTML and CSS are ubiquitous on the web, but they were mostly created
in a vacuum. Haml, Sass, and Compass provide helpful abstractions and
utilities to remove some of the repetition and noise in your code for
more rapid development and easier maintenance.
This talk was given at the Boston Ruby Group on September 14, 2010.
Extended slides from a recent Sydney Port80 presentation. The slides cover three overall topics: 1) a quick timeline of CSS-related events, 2) key events that changed CSS and 3) a discussion on writing better CSS.
This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
Box model adalah konsep yang paling utama dari CSS Layouting, jika kalian paham mengenai ini maka akan mudah untuk kalian dalam melakukan pengaturan tata letak elemen pada website kalian.
ada 4 komponen dalam box model :
1. margin
2. padding
3. border
4. konten
Haml, Sass and Compass for Sane Web Developmentjeremyw
HTML and CSS are ubiquitous on the web, but they were mostly created
in a vacuum. Haml, Sass, and Compass provide helpful abstractions and
utilities to remove some of the repetition and noise in your code for
more rapid development and easier maintenance.
This talk was given at the Boston Ruby Group on September 14, 2010.
Extended slides from a recent Sydney Port80 presentation. The slides cover three overall topics: 1) a quick timeline of CSS-related events, 2) key events that changed CSS and 3) a discussion on writing better CSS.
This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
Box model adalah konsep yang paling utama dari CSS Layouting, jika kalian paham mengenai ini maka akan mudah untuk kalian dalam melakukan pengaturan tata letak elemen pada website kalian.
ada 4 komponen dalam box model :
1. margin
2. padding
3. border
4. konten
This is the presentation I use during my training on web design and development. It discusses current practices of web page layout development with the help of CSS. It also describes the distinction between confusing and often overlapping terms such as adaptive & responsive layout, fluid/relative/liquid/elastic layouts.
The presentation given at MSBTE sponsored content updating program on 'PC Maintenance and Troubleshooting' for Diploma Engineering teachers of Maharashtra.
Venue: Government Polytechnic, Nashik
Date: 17/01/2011
Session-1: Introduction to Computers.
Good CSS troubleshooting skills are important to decrease your workload and help you work better with others. Tips for clean code and targeting, as well as solutions to modern browser bugs are covered.
Good CSS troubleshooting skills are important to decrease your workload and help you work better with others. Tips for clean code and targetting, as well as solutions to modern browser bugs are covered. Presented at Rich Web Experience 2011, Ft. Lauderdale, FL.
In this class we go deeper into the corking of CSS and look and the novelties in HTML 5, more specifically concerning the integration of media files, creation of forms, and optimisation for responsive design
CSS Grid Changes Everything About Web Layouts: WordCamp Europe 2017Morten Rand-Hendriksen
Slides from the WordCamp Europe presentation by the same name. From the conference website:
CSS Grid is now live in all major browsers, and with it everything we know about web layouts changes! Imagine drawing a grid in the browser and placing content in one or any number of cells without having to change the HTML or source order. And imagine changing that grid on the fly using media queries or JavaScript while keeping the HTML markup clean and accessible. That’s what CSS Grid does, and that’s why you should be using it today.
The CSS Grid Layout Module introduces a native CSS grid system, provided at the viewport level, that achieves what CSS frameworks and popular grid systems could only dream about: Responsive, flexible, pure CSS grid layouts, independent of document source order, that allow us to treat the browser as a true design and layout surface.
In this talk you’ll get an intro to CSS Grid and learn how it changes pretty much everything when it comes to layouts on the web. Through examples, code snippets, and practical demos you’ll learn how to use CSS Grid in a theme for modern responsive layouts, and you’ll also learn how to handle older browsers without Grid support in a clean and straight-forward way.
CSS Grid is here, and you can start using it today. This talk shows you how to do it right.
CSS workshop created for internal delivery @ OutSystems.
“For most people CSS is like a mystical art that nobody truly understands... Sometimes it works and sometimes it doesn’t (unexplainably) “.
Not solely introductory, but also covering more advanced topics, embark in this fantastic adventure that is CSS.
There you have it, all you must know about CSS in a NutShell.
See the videos of the workshop @ http://goo.gl/NJ3n6J
Workshop created by Marco Costa, Miguel Ventura and Rúben Gonçalves
Hard to Reach Users in Easy to Reach PlacesMike Crabb
Presentation given at UX Scotland 2019 by Michael Crabb and Rachel Menzies. Work based on the User Centre that is based in the Department of Computing at the University of Dundee
How do we design accessible services for everyone while also caring about the UX? This presentation looks at a model of accessibility that can be used for all users and we show how this works for making accessible UX-friendly tools for television, board gamers, and developers. Presented at UX Scotland 2018
Peer review process of academic publications is introduced and a sample given for how this is carried out within an academic teaching module. Guidance given on best ways to carry out a peer review.
Presentation on designing for different types of accessibility challenges. Permanent, situational, and temporary aspects of accessibility are discussed.
Using Cloud in an Enterprise EnvironmentMike Crabb
Introduction to the different cloud models that exist and how they can be used in an enterprise level environment. Short discussion on UK DPA and its relevance to cloud computing
GraphSummit Paris - The art of the possible with Graph TechnologyNeo4j
Sudhir Hasbe, Chief Product Officer, Neo4j
Join us as we explore breakthrough innovations enabled by interconnected data and AI. Discover firsthand how organizations use relationships in data to uncover contextual insights and solve our most pressing challenges – from optimizing supply chains, detecting fraud, and improving customer experiences to accelerating drug discoveries.
We describe the deployment and use of Globus Compute for remote computation. This content is aimed at researchers who wish to compute on remote resources using a unified programming interface, as well as system administrators who will deploy and operate Globus Compute services on their research computing infrastructure.
Quarkus Hidden and Forbidden ExtensionsMax Andersen
Quarkus has a vast extension ecosystem and is known for its subsonic and subatomic feature set. Some of these features are not as well known, and some extensions are less talked about, but that does not make them less interesting - quite the opposite.
Come join this talk to see some tips and tricks for using Quarkus and some of the lesser known features, extensions and development techniques.
Large Language Models and the End of ProgrammingMatt Welsh
Talk by Matt Welsh at Craft Conference 2024 on the impact that Large Language Models will have on the future of software development. In this talk, I discuss the ways in which LLMs will impact the software industry, from replacing human software developers with AI, to replacing conventional software with models that perform reasoning, computation, and problem-solving.
OpenMetadata Community Meeting - 5th June 2024OpenMetadata
The OpenMetadata Community Meeting was held on June 5th, 2024. In this meeting, we discussed about the data quality capabilities that are integrated with the Incident Manager, providing a complete solution to handle your data observability needs. Watch the end-to-end demo of the data quality features.
* How to run your own data quality framework
* What is the performance impact of running data quality frameworks
* How to run the test cases in your own ETL pipelines
* How the Incident Manager is integrated
* Get notified with alerts when test cases fail
Watch the meeting recording here - https://www.youtube.com/watch?v=UbNOje0kf6E
Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...Globus
Large Language Models (LLMs) are currently the center of attention in the tech world, particularly for their potential to advance research. In this presentation, we'll explore a straightforward and effective method for quickly initiating inference runs on supercomputers using the vLLM tool with Globus Compute, specifically on the Polaris system at ALCF. We'll begin by briefly discussing the popularity and applications of LLMs in various fields. Following this, we will introduce the vLLM tool, and explain how it integrates with Globus Compute to efficiently manage LLM operations on Polaris. Attendees will learn the practical aspects of setting up and remotely triggering LLMs from local machines, focusing on ease of use and efficiency. This talk is ideal for researchers and practitioners looking to leverage the power of LLMs in their work, offering a clear guide to harnessing supercomputing resources for quick and effective LLM inference.
Enhancing Research Orchestration Capabilities at ORNL.pdfGlobus
Cross-facility research orchestration comes with ever-changing constraints regarding the availability and suitability of various compute and data resources. In short, a flexible data and processing fabric is needed to enable the dynamic redirection of data and compute tasks throughout the lifecycle of an experiment. In this talk, we illustrate how we easily leveraged Globus services to instrument the ACE research testbed at the Oak Ridge Leadership Computing Facility with flexible data and task orchestration capabilities.
Providing Globus Services to Users of JASMIN for Environmental Data AnalysisGlobus
JASMIN is the UK’s high-performance data analysis platform for environmental science, operated by STFC on behalf of the UK Natural Environment Research Council (NERC). In addition to its role in hosting the CEDA Archive (NERC’s long-term repository for climate, atmospheric science & Earth observation data in the UK), JASMIN provides a collaborative platform to a community of around 2,000 scientists in the UK and beyond, providing nearly 400 environmental science projects with working space, compute resources and tools to facilitate their work. High-performance data transfer into and out of JASMIN has always been a key feature, with many scientists bringing model outputs from supercomputers elsewhere in the UK, to analyse against observational or other model data in the CEDA Archive. A growing number of JASMIN users are now realising the benefits of using the Globus service to provide reliable and efficient data movement and other tasks in this and other contexts. Further use cases involve long-distance (intercontinental) transfers to and from JASMIN, and collecting results from a mobile atmospheric radar system, pushing data to JASMIN via a lightweight Globus deployment. We provide details of how Globus fits into our current infrastructure, our experience of the recent migration to GCSv5.4, and of our interest in developing use of the wider ecosystem of Globus services for the benefit of our user community.
Unleash Unlimited Potential with One-Time Purchase
BoxLang is more than just a language; it's a community. By choosing a Visionary License, you're not just investing in your success, you're actively contributing to the ongoing development and support of BoxLang.
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...Juraj Vysvader
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I didn't get rich from it but it did have 63K downloads (powered possible tens of thousands of websites).
Introducing Crescat - Event Management Software for Venues, Festivals and Eve...Crescat
Crescat is industry-trusted event management software, built by event professionals for event professionals. Founded in 2017, we have three key products tailored for the live event industry.
Crescat Event for concert promoters and event agencies. Crescat Venue for music venues, conference centers, wedding venues, concert halls and more. And Crescat Festival for festivals, conferences and complex events.
With a wide range of popular features such as event scheduling, shift management, volunteer and crew coordination, artist booking and much more, Crescat is designed for customisation and ease-of-use.
Over 125,000 events have been planned in Crescat and with hundreds of customers of all shapes and sizes, from boutique event agencies through to international concert promoters, Crescat is rigged for success. What's more, we highly value feedback from our users and we are constantly improving our software with updates, new features and improvements.
If you plan events, run a venue or produce festivals and you're looking for ways to make your life easier, then we have a solution for you. Try our software for free or schedule a no-obligation demo with one of our product specialists today at crescat.io
Top 7 Unique WhatsApp API Benefits | Saudi ArabiaYara Milbes
Discover the transformative power of the WhatsApp API in our latest SlideShare presentation, "Top 7 Unique WhatsApp API Benefits." In today's fast-paced digital era, effective communication is crucial for both personal and professional success. Whether you're a small business looking to enhance customer interactions or an individual seeking seamless communication with loved ones, the WhatsApp API offers robust capabilities that can significantly elevate your experience.
In this presentation, we delve into the top 7 distinctive benefits of the WhatsApp API, provided by the leading WhatsApp API service provider in Saudi Arabia. Learn how to streamline customer support, automate notifications, leverage rich media messaging, run scalable marketing campaigns, integrate secure payments, synchronize with CRM systems, and ensure enhanced security and privacy.
Code reviews are vital for ensuring good code quality. They serve as one of our last lines of defense against bugs and subpar code reaching production.
Yet, they often turn into annoying tasks riddled with frustration, hostility, unclear feedback and lack of standards. How can we improve this crucial process?
In this session we will cover:
- The Art of Effective Code Reviews
- Streamlining the Review Process
- Elevating Reviews with Automated Tools
By the end of this presentation, you'll have the knowledge on how to organize and improve your code review proces
Globus Compute wth IRI Workflows - GlobusWorld 2024Globus
As part of the DOE Integrated Research Infrastructure (IRI) program, NERSC at Lawrence Berkeley National Lab and ALCF at Argonne National Lab are working closely with General Atomics on accelerating the computing requirements of the DIII-D experiment. As part of the work the team is investigating ways to speedup the time to solution for many different parts of the DIII-D workflow including how they run jobs on HPC systems. One of these routes is looking at Globus Compute as a way to replace the current method for managing tasks and we describe a brief proof of concept showing how Globus Compute could help to schedule jobs and be a tool to connect compute at different facilities.
Top Features to Include in Your Winzo Clone App for Business Growth (4).pptxrickgrimesss22
Discover the essential features to incorporate in your Winzo clone app to boost business growth, enhance user engagement, and drive revenue. Learn how to create a compelling gaming experience that stands out in the competitive market.
Navigating the Metaverse: A Journey into Virtual Evolution"Donna Lenk
Join us for an exploration of the Metaverse's evolution, where innovation meets imagination. Discover new dimensions of virtual events, engage with thought-provoking discussions, and witness the transformative power of digital realms."
Prosigns: Transforming Business with Tailored Technology SolutionsProsigns
Unlocking Business Potential: Tailored Technology Solutions by Prosigns
Discover how Prosigns, a leading technology solutions provider, partners with businesses to drive innovation and success. Our presentation showcases our comprehensive range of services, including custom software development, web and mobile app development, AI & ML solutions, blockchain integration, DevOps services, and Microsoft Dynamics 365 support.
Custom Software Development: Prosigns specializes in creating bespoke software solutions that cater to your unique business needs. Our team of experts works closely with you to understand your requirements and deliver tailor-made software that enhances efficiency and drives growth.
Web and Mobile App Development: From responsive websites to intuitive mobile applications, Prosigns develops cutting-edge solutions that engage users and deliver seamless experiences across devices.
AI & ML Solutions: Harnessing the power of Artificial Intelligence and Machine Learning, Prosigns provides smart solutions that automate processes, provide valuable insights, and drive informed decision-making.
Blockchain Integration: Prosigns offers comprehensive blockchain solutions, including development, integration, and consulting services, enabling businesses to leverage blockchain technology for enhanced security, transparency, and efficiency.
DevOps Services: Prosigns' DevOps services streamline development and operations processes, ensuring faster and more reliable software delivery through automation and continuous integration.
Microsoft Dynamics 365 Support: Prosigns provides comprehensive support and maintenance services for Microsoft Dynamics 365, ensuring your system is always up-to-date, secure, and running smoothly.
Learn how our collaborative approach and dedication to excellence help businesses achieve their goals and stay ahead in today's digital landscape. From concept to deployment, Prosigns is your trusted partner for transforming ideas into reality and unlocking the full potential of your business.
Join us on a journey of innovation and growth. Let's partner for success with Prosigns.
AI Fusion Buddy Review: Brand New, Groundbreaking Gemini-Powered AI AppGoogle
AI Fusion Buddy Review: Brand New, Groundbreaking Gemini-Powered AI App
👉👉 Click Here To Get More Info 👇👇
https://sumonreview.com/ai-fusion-buddy-review
AI Fusion Buddy Review: Key Features
✅Create Stunning AI App Suite Fully Powered By Google's Latest AI technology, Gemini
✅Use Gemini to Build high-converting Converting Sales Video Scripts, ad copies, Trending Articles, blogs, etc.100% unique!
✅Create Ultra-HD graphics with a single keyword or phrase that commands 10x eyeballs!
✅Fully automated AI articles bulk generation!
✅Auto-post or schedule stunning AI content across all your accounts at once—WordPress, Facebook, LinkedIn, Blogger, and more.
✅With one keyword or URL, generate complete websites, landing pages, and more…
✅Automatically create & sell AI content, graphics, websites, landing pages, & all that gets you paid non-stop 24*7.
✅Pre-built High-Converting 100+ website Templates and 2000+ graphic templates logos, banners, and thumbnail images in Trending Niches.
✅Say goodbye to wasting time logging into multiple Chat GPT & AI Apps once & for all!
✅Save over $5000 per year and kick out dependency on third parties completely!
✅Brand New App: Not available anywhere else!
✅ Beginner-friendly!
✅ZERO upfront cost or any extra expenses
✅Risk-Free: 30-Day Money-Back Guarantee!
✅Commercial License included!
See My Other Reviews Article:
(1) AI Genie Review: https://sumonreview.com/ai-genie-review
(2) SocioWave Review: https://sumonreview.com/sociowave-review
(3) AI Partner & Profit Review: https://sumonreview.com/ai-partner-profit-review
(4) AI Ebook Suite Review: https://sumonreview.com/ai-ebook-suite-review
#AIFusionBuddyReview,
#AIFusionBuddyFeatures,
#AIFusionBuddyPricing,
#AIFusionBuddyProsandCons,
#AIFusionBuddyTutorial,
#AIFusionBuddyUserExperience
#AIFusionBuddyforBeginners,
#AIFusionBuddyBenefits,
#AIFusionBuddyComparison,
#AIFusionBuddyInstallation,
#AIFusionBuddyRefundPolicy,
#AIFusionBuddyDemo,
#AIFusionBuddyMaintenanceFees,
#AIFusionBuddyNewbieFriendly,
#WhatIsAIFusionBuddy?,
#HowDoesAIFusionBuddyWorks
4. • LAYOUT OF MAJOR ELEMENTS OF A PAGE IS
CONTROLLED USING CSS
• HEADER, NAVIGATION BARS, SIDEBARS,
CONTENT AND FOOTERS
page layout
5. • LAYOUT OF MAJOR ELEMENTS OF A PAGE IS
CONTROLLED USING CSS
• HEADER, NAVIGATION BARS, SIDEBARS,
CONTENT AND FOOTERS
page layout
6. • LAYOUT OF MAJOR ELEMENTS OF A PAGE IS
CONTROLLED USING CSS
• HEADER, NAVIGATION BARS, SIDEBARS,
CONTENT AND FOOTERS
• <TABLE> WAS PREVIOUSLY USED FOR LAYOUT
• PAINFUL FOR COMPLEX LAYOUT
• TABLES ARE MEANT FOR CONTENT, NOT
LAYOUT
page layout
7. • LAYOUT OF MAJOR ELEMENTS OF A PAGE IS
CONTROLLED USING CSS
• HEADER, NAVIGATION BARS, SIDEBARS,
CONTENT AND FOOTERS
• <TABLE> WAS PREVIOUSLY USED FOR LAYOUT
• PAINFUL FOR COMPLEX LAYOUT
• TABLES ARE MEANT FOR CONTENT, NOT
LAYOUT
page layout
8. • LAYOUT OF MAJOR ELEMENTS OF A PAGE IS
CONTROLLED USING CSS
• HEADER, NAVIGATION BARS, SIDEBARS,
CONTENT AND FOOTERS
• <TABLE> WAS PREVIOUSLY USED FOR LAYOUT
• PAINFUL FOR COMPLEX LAYOUT
• TABLES ARE MEANT FOR CONTENT, NOT
LAYOUT
• THE PREFERRED SOLUTION IS TO DIVIDE A PAGE
INTO A COLLECTION OF <DIV> OR <SECTION>
ELEMENTS
• <DIV ID=“HEADER”> … </DIV>
• <HEADER> … </HEADER>
page layout
10. • CSS USES WHAT IS CALLED A BOX MODEL FOR
SURROUNDING CONTENT.
• MADE UP OF 3 PARTS
• (CONTENT) THIS ISN’T REALLY A PART OF THE MODEL
• PADDING
• BORDER
• MARGIN
the box model
content
padding
border
margin
16. <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home Page</title>
<link type="text/css" rel="stylesheet" href="assets/css/style.css"/>
</head>
<body>
<header>
<h1>My First Website</h1>
<nav>
<ul>
<li><a href="index.html">Home Page</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="signup.html">Signup</a></li>
</ul>
</nav>
</header>
<main>
<h2>Home Page</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.</p>
</main>
<footer>
<p>webDev@RGU</p>
</footer>
</body>
</html>
Box model
in practice
we are going to style this part
27. • 4 DIFFERENT WAYS THAT WE CAN POSITION AN ELEMENT
• STATIC POSITIONING
• RELATIVE POSITIONING
• FIXED POSITIONING
• ABSOLUTE POSITIONING
Positioning elements
margin
28. 2 paragraphs on the page
<p id=“hasMaxWidth”>Lorem….</p>
<p id=“noMaxWidth”>Lorem….</p>
#noMaxWidth{
width: 1000px;
background-color: burlywood;
}
#hasMaxWidth {
max-width: 1000px;
background-color: burlywood;
}
Max Width
29. 2 paragraphs on the page
<p id=“standardText”>Lorem….</p>
<p id=“positionedText”>Lorem….</p>
#standardText{
background-color: aqua;
}
#positionedText {
background-color: yellowgreen;
}
Positioning
30. 2 paragraphs on the page
<p id=“standardText”>Lorem….</p>
<p id=“positionedText”>Lorem….</p>
#standardText{
background-color: aqua;
}
#positionedText {
background-color: yellowgreen;
position: static;
}
static positioning
POSITIONED STATIC BY DEFAULT
NOT SHOWN IN ANY SPECIAL WAY
31. 2 paragraphs on the page
<p id=“standardText”>Lorem….</p>
<p id=“positionedText”>Lorem….</p>
#standardText{
background-color: aqua;
}
#positionedText {
background-color: yellowgreen;
position: relative;
left: 50px;
}
relative positioning
POSITIONED RELATIVE TO ITS NORMAL POSITIONING
SETTING LEFT RIGHT TOP AND BOTTOM CHANGES ITS POSITION
32. 2 paragraphs on the page
<p id=“standardText”>Lorem….</p>
<p id=“positionedText”>Lorem….</p>
#standardText{
background-color: aqua;
}
#positionedText {
background-color: yellowgreen;
position: fixed;
top: 100px;
left: 50px;
}
fixed positioning
FIXED POSITION IN THE WINDOW
CAN BE GOOD FOR HAVING A MENU AT THE TOP ALL THE TIME
33. 2 paragraphs on the page
<p id=“standardText”>Lorem….</p>
<p id=“positionedText”>Lorem….</p>
#standardText{
background-color: aqua;
}
#positionedText {
background-color: yellowgreen;
position: absolute;
top: 100px;
left: 50px;
}
absolute positioning
FIXED IN THE CONTAINER THAT IT IS CURRENTLY IN
38. • SOMETIMES YOU WILL WANT YOUR CONTENT TO FLOAT
AROUND THE PAGE
• GETTING TEXT TO APPEAR BESIDE AN IMAGE PROPERLY.
• HORIZONTAL MENUS!!!
HERE IS WHERE FLOAT COMES INT
floating elements
margin
39. 2 paragraphs on the page
1 image contained div in-between them
<div id=imageContainer></div>
#imageContainer {
width: 100px;
height: 100px;
background-color: gold;
}
40. 2 paragraphs on the page
1 image contained div in-between them
<div id=imageContainer></div>
#imageContainer {
width: 200px;
height: 200px;
background-color: gold;
float: right;
}
41. What about the
navigation bar!?
<nav>
<ul>
<li><a href="index.html">Home Page</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="signup.html">Signup</a></li>
</ul>
</nav>
43. What about the
navigation bar!?
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
}
44. What about the
navigation bar!?
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
}
li a {
display: inline-block;
text-align: center;
padding: 0 10px 10px 10px;
text-decoration: none;
}