SlideShare ist ein Scribd-Unternehmen logo
1 von 8
Liquid Layout ,[object Object],Presentation by Daniel, Iphia & Matt
[object Object],[object Object],So let’s start this.......
What's the secret behind a liquid layout? ,[object Object],[object Object],[object Object],[object Object]
How to achieve a liquid layout: (1) Start by sketching on paper or imaging software a rough layout grid for your web page
What's the secret behind a liquid layout? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],What's the secret behind a liquid layout?
(5) Add a header and footer HTML <body> <div id=&quot;header&quot;></div> <div id=&quot;col1&quot;></div> <div id=&quot;col2&quot;></div> <div id=&quot;col3&quot;></div> <div id=&quot;footer&quot;></div> </body> CSS #header { margin-bottom: 10px; } #col1 { float: left; width: 48%; margin-left: 3%; display: inline; ; } margin-left: 3%; } #col2 { float: left; width: 20%; margin-left: 3%; } #col3 { float: left; width: 20%; margin-left: 3%; } #footer { clear: both; } What's the secret behind a liquid layout?
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],What's the secret behind a liquid layout?

Weitere ähnliche Inhalte

Andere mochten auch

Innovation Ecosystems at EBRF 2010, Nokia, Finland
Innovation Ecosystems at EBRF 2010, Nokia, FinlandInnovation Ecosystems at EBRF 2010, Nokia, Finland
Innovation Ecosystems at EBRF 2010, Nokia, Finland
Jukka Huhtamäki
 
Major research presentation EOI Good
Major research presentation EOI GoodMajor research presentation EOI Good
Major research presentation EOI Good
The City of Toronto
 
Prioritization Survey Results
Prioritization Survey ResultsPrioritization Survey Results
Prioritization Survey Results
Michal Bularz
 
Real world attenuation of foam earplugs- smith
Real world attenuation of foam earplugs- smithReal world attenuation of foam earplugs- smith
Real world attenuation of foam earplugs- smith
Leishman Associates
 
Fluence vs. dose approach waligorski
Fluence vs. dose approach waligorskiFluence vs. dose approach waligorski
Fluence vs. dose approach waligorski
Leishman Associates
 
สุขศึกษา
สุขศึกษาสุขศึกษา
สุขศึกษา
saly12300
 

Andere mochten auch (20)

botox London
botox Londonbotox London
botox London
 
New Zealand Franchising Confidence Index | October 2011
New Zealand Franchising Confidence Index | October 2011New Zealand Franchising Confidence Index | October 2011
New Zealand Franchising Confidence Index | October 2011
 
Innovation Ecosystems at EBRF 2010, Nokia, Finland
Innovation Ecosystems at EBRF 2010, Nokia, FinlandInnovation Ecosystems at EBRF 2010, Nokia, Finland
Innovation Ecosystems at EBRF 2010, Nokia, Finland
 
Ecosystem booklet ho jun
Ecosystem booklet ho junEcosystem booklet ho jun
Ecosystem booklet ho jun
 
Major research presentation EOI Good
Major research presentation EOI GoodMajor research presentation EOI Good
Major research presentation EOI Good
 
如何在Aix上运行prm for oracle database
如何在Aix上运行prm for oracle database如何在Aix上运行prm for oracle database
如何在Aix上运行prm for oracle database
 
Ads
AdsAds
Ads
 
Prioritization Survey Results
Prioritization Survey ResultsPrioritization Survey Results
Prioritization Survey Results
 
Bugie per non offendere
Bugie per non offendereBugie per non offendere
Bugie per non offendere
 
Real world attenuation of foam earplugs- smith
Real world attenuation of foam earplugs- smithReal world attenuation of foam earplugs- smith
Real world attenuation of foam earplugs- smith
 
Fluence vs. dose approach waligorski
Fluence vs. dose approach waligorskiFluence vs. dose approach waligorski
Fluence vs. dose approach waligorski
 
สุขศึกษา
สุขศึกษาสุขศึกษา
สุขศึกษา
 
Der Weg weg von TemplaVoila
Der Weg weg von TemplaVoilaDer Weg weg von TemplaVoila
Der Weg weg von TemplaVoila
 
WorldSTE2013: Accessibility Challenges to Science Education in Cambodia - An ...
WorldSTE2013: Accessibility Challenges to Science Education in Cambodia - An ...WorldSTE2013: Accessibility Challenges to Science Education in Cambodia - An ...
WorldSTE2013: Accessibility Challenges to Science Education in Cambodia - An ...
 
New Zealand Franchising Confidence Index | October 2013
New Zealand Franchising Confidence Index | October 2013New Zealand Franchising Confidence Index | October 2013
New Zealand Franchising Confidence Index | October 2013
 
Content Marketing World 2014 talk - Jay Acunzo
Content Marketing World 2014 talk - Jay AcunzoContent Marketing World 2014 talk - Jay Acunzo
Content Marketing World 2014 talk - Jay Acunzo
 
Varamobaden Vision 2025
Varamobaden Vision 2025 Varamobaden Vision 2025
Varamobaden Vision 2025
 
New Zealand Franchising Confidence Index | January 2013
New Zealand Franchising Confidence Index | January 2013New Zealand Franchising Confidence Index | January 2013
New Zealand Franchising Confidence Index | January 2013
 
Oe3 ac1
Oe3 ac1Oe3 ac1
Oe3 ac1
 
Teorema de tales
Teorema de talesTeorema de tales
Teorema de tales
 

Kürzlich hochgeladen

Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
amitlee9823
 
Peaches App development presentation deck
Peaches App development presentation deckPeaches App development presentation deck
Peaches App development presentation deck
tbatkhuu1
 
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
home
 
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
amitlee9823
 
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
eeanqy
 
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
amitlee9823
 
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
nirzagarg
 
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
dollysharma2066
 
Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...
Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...
Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...
amitlee9823
 
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
amitlee9823
 
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
kumaririma588
 
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
amitlee9823
 
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
wpkuukw
 

Kürzlich hochgeladen (20)

Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
 
Peaches App development presentation deck
Peaches App development presentation deckPeaches App development presentation deck
Peaches App development presentation deck
 
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
 
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
 
Sector 104, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 104, Noida Call girls :8448380779 Model Escorts | 100% verifiedSector 104, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 104, Noida Call girls :8448380779 Model Escorts | 100% verified
 
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
 
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
 
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
 
WhatsApp Chat: 📞 8617697112 Call Girl Baran is experienced
WhatsApp Chat: 📞 8617697112 Call Girl Baran is experiencedWhatsApp Chat: 📞 8617697112 Call Girl Baran is experienced
WhatsApp Chat: 📞 8617697112 Call Girl Baran is experienced
 
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
 
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
 
Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...
Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...
Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...
 
Hire 💕 8617697112 Meerut Call Girls Service Call Girls Agency
Hire 💕 8617697112 Meerut Call Girls Service Call Girls AgencyHire 💕 8617697112 Meerut Call Girls Service Call Girls Agency
Hire 💕 8617697112 Meerut Call Girls Service Call Girls Agency
 
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
 
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
 
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
 
Top Rated Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
Top Rated  Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...Top Rated  Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
Top Rated Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
 
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
 
❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.
❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.
❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.
 
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
 

Liquid layout (mpm17) group 9 presentation By: Iphiah, Daniel, and Matt!(1)good

  • 1.
  • 2.
  • 3.
  • 4. How to achieve a liquid layout: (1) Start by sketching on paper or imaging software a rough layout grid for your web page
  • 5.
  • 6.
  • 7. (5) Add a header and footer HTML <body> <div id=&quot;header&quot;></div> <div id=&quot;col1&quot;></div> <div id=&quot;col2&quot;></div> <div id=&quot;col3&quot;></div> <div id=&quot;footer&quot;></div> </body> CSS #header { margin-bottom: 10px; } #col1 { float: left; width: 48%; margin-left: 3%; display: inline; ; } margin-left: 3%; } #col2 { float: left; width: 20%; margin-left: 3%; } #col3 { float: left; width: 20%; margin-left: 3%; } #footer { clear: both; } What's the secret behind a liquid layout?
  • 8.