SlideShare una empresa de Scribd logo
1 de 9
How to create a liquid layout
By Stephanie Redmond & Samantha
Totera
In your new HTML file create 5 divs:
(container header left right main footer)
Create a corresponding style sheet, making sure your
HTML file is linked to it. Then to make your left and
right column 300px use the float property, and
width:300px property
To align text use the text-align:left/right
property in the respected div in your CSS file
To make links to other pages just use the links
code <a href="url">Link text</a> and place it
in the column div you want it to appear in.
To style links refer back to your css style sheet. For example to remove line
under your links use a:link {color:#000000; text-decoration:none;}
a:visited {color:#000000; text-decoration:none;} a:hover {color:#FF0; text-
decoration:none;} a:active {color:#000000; text-decoration:none;}
To make an image in the right column:use the <img class="name"
src="images/picture.jpg> code.. class is the name you will refer to in your
css so you can position it in CSS use the float property again
We used web based tutorials on
http://www.w3schools.com/

Más contenido relacionado

La actualidad más candente

Hour 6
Hour 6Hour 6
Hour 6dpd
 
cte207word2007homework
cte207word2007homeworkcte207word2007homework
cte207word2007homeworkAykut Türe
 
Justmeans power point
Justmeans power pointJustmeans power point
Justmeans power pointjustmeanscsr
 
Creating Visual Effects and Animation
Creating Visual Effects and AnimationCreating Visual Effects and Animation
Creating Visual Effects and AnimationNicole Ryan
 
Formatting text with CSS
Formatting text with CSSFormatting text with CSS
Formatting text with CSSNicole Ryan
 
Laying Out Elements with CSS
Laying Out Elements with CSSLaying Out Elements with CSS
Laying Out Elements with CSSNicole Ryan
 
Javascript programming using the document object model
Javascript programming using the document object modelJavascript programming using the document object model
Javascript programming using the document object modelNicole Ryan
 
Vital Vocabulary-Tagxedo
Vital Vocabulary-TagxedoVital Vocabulary-Tagxedo
Vital Vocabulary-TagxedoC B
 

La actualidad más candente (10)

Hour 6
Hour 6Hour 6
Hour 6
 
cte207word2007homework
cte207word2007homeworkcte207word2007homework
cte207word2007homework
 
Justmeans power point
Justmeans power pointJustmeans power point
Justmeans power point
 
Creating Visual Effects and Animation
Creating Visual Effects and AnimationCreating Visual Effects and Animation
Creating Visual Effects and Animation
 
Formatting text with CSS
Formatting text with CSSFormatting text with CSS
Formatting text with CSS
 
Laying Out Elements with CSS
Laying Out Elements with CSSLaying Out Elements with CSS
Laying Out Elements with CSS
 
Microsoft office
Microsoft officeMicrosoft office
Microsoft office
 
M02 un12 p01
M02 un12 p01M02 un12 p01
M02 un12 p01
 
Javascript programming using the document object model
Javascript programming using the document object modelJavascript programming using the document object model
Javascript programming using the document object model
 
Vital Vocabulary-Tagxedo
Vital Vocabulary-TagxedoVital Vocabulary-Tagxedo
Vital Vocabulary-Tagxedo
 

Destacado

Slideshare
SlideshareSlideshare
Slidesharecluleyr
 
Programa Taller Inducción Realidad Comunitaria
Programa Taller Inducción Realidad ComunitariaPrograma Taller Inducción Realidad Comunitaria
Programa Taller Inducción Realidad ComunitariaIrisysleyer Barrios Rivero
 
Kanser paru paru
Kanser paru paruKanser paru paru
Kanser paru parushahriapong
 
Codificaciones c++
Codificaciones c++Codificaciones c++
Codificaciones c++mario0123
 
Presentatie Joris Toonders SMT taskforce search
Presentatie Joris Toonders SMT taskforce searchPresentatie Joris Toonders SMT taskforce search
Presentatie Joris Toonders SMT taskforce searchIAB Netherlands
 
Accounting terms
Accounting termsAccounting terms
Accounting termsDesa Kafka
 
域名·主机·网站
域名·主机·网站域名·主机·网站
域名·主机·网站yangjunec
 
Paradigm shift of Telecomm in Mexico, IFT
Paradigm shift of Telecomm in Mexico, IFTParadigm shift of Telecomm in Mexico, IFT
Paradigm shift of Telecomm in Mexico, IFTferborjon
 
Codificaciones c++
Codificaciones c++Codificaciones c++
Codificaciones c++mario0123
 
160622 financial inclusionv4 red compartida
160622 financial inclusionv4 red compartida160622 financial inclusionv4 red compartida
160622 financial inclusionv4 red compartidaferborjon
 
Promtel Red Compartida
Promtel Red Compartida Promtel Red Compartida
Promtel Red Compartida ferborjon
 
Alburt, lev & dzindzichashvili & perelshteyn chess openings for white expla...
Alburt, lev & dzindzichashvili & perelshteyn   chess openings for white expla...Alburt, lev & dzindzichashvili & perelshteyn   chess openings for white expla...
Alburt, lev & dzindzichashvili & perelshteyn chess openings for white expla...Adevonzir Cascione
 

Destacado (14)

Slideshare
SlideshareSlideshare
Slideshare
 
Programa Taller Inducción Realidad Comunitaria
Programa Taller Inducción Realidad ComunitariaPrograma Taller Inducción Realidad Comunitaria
Programa Taller Inducción Realidad Comunitaria
 
Kanser paru paru
Kanser paru paruKanser paru paru
Kanser paru paru
 
Codificaciones c++
Codificaciones c++Codificaciones c++
Codificaciones c++
 
Presentatie Joris Toonders SMT taskforce search
Presentatie Joris Toonders SMT taskforce searchPresentatie Joris Toonders SMT taskforce search
Presentatie Joris Toonders SMT taskforce search
 
Seo工具
Seo工具Seo工具
Seo工具
 
Accounting terms
Accounting termsAccounting terms
Accounting terms
 
域名·主机·网站
域名·主机·网站域名·主机·网站
域名·主机·网站
 
Paradigm shift of Telecomm in Mexico, IFT
Paradigm shift of Telecomm in Mexico, IFTParadigm shift of Telecomm in Mexico, IFT
Paradigm shift of Telecomm in Mexico, IFT
 
Strategy 2016
Strategy 2016Strategy 2016
Strategy 2016
 
Codificaciones c++
Codificaciones c++Codificaciones c++
Codificaciones c++
 
160622 financial inclusionv4 red compartida
160622 financial inclusionv4 red compartida160622 financial inclusionv4 red compartida
160622 financial inclusionv4 red compartida
 
Promtel Red Compartida
Promtel Red Compartida Promtel Red Compartida
Promtel Red Compartida
 
Alburt, lev & dzindzichashvili & perelshteyn chess openings for white expla...
Alburt, lev & dzindzichashvili & perelshteyn   chess openings for white expla...Alburt, lev & dzindzichashvili & perelshteyn   chess openings for white expla...
Alburt, lev & dzindzichashvili & perelshteyn chess openings for white expla...
 

Similar a Liquidlayout

Introduction to css by programmerblog.net
Introduction to css by programmerblog.netIntroduction to css by programmerblog.net
Introduction to css by programmerblog.netProgrammer Blog
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheetstutorialsruby
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheetstutorialsruby
 
Basics Of Css And Some Common Mistakes
Basics Of Css And Some Common MistakesBasics Of Css And Some Common Mistakes
Basics Of Css And Some Common Mistakessanjay2211
 
CSS Basic and Common Errors
CSS Basic and Common ErrorsCSS Basic and Common Errors
CSS Basic and Common ErrorsHock Leng PUAH
 
CSS_Day_ONE (W3schools)
CSS_Day_ONE (W3schools)CSS_Day_ONE (W3schools)
CSS_Day_ONE (W3schools)Rafi Haidari
 
HTML to CSS Basics Exer 2.pptx
HTML to CSS Basics Exer 2.pptxHTML to CSS Basics Exer 2.pptx
HTML to CSS Basics Exer 2.pptxJJFajardo1
 
A complete html and css guidelines for beginners
A complete html and css guidelines for beginnersA complete html and css guidelines for beginners
A complete html and css guidelines for beginnersSurendra kumar
 
Introduction to css & its attributes with syntax
Introduction to css & its attributes with syntaxIntroduction to css & its attributes with syntax
Introduction to css & its attributes with syntaxpriyadharshini murugan
 

Similar a Liquidlayout (20)

Sacramento web design
Sacramento web designSacramento web design
Sacramento web design
 
Introduction to css by programmerblog.net
Introduction to css by programmerblog.netIntroduction to css by programmerblog.net
Introduction to css by programmerblog.net
 
Css Introduction
Css IntroductionCss Introduction
Css Introduction
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
 
Basics Of Css And Some Common Mistakes
Basics Of Css And Some Common MistakesBasics Of Css And Some Common Mistakes
Basics Of Css And Some Common Mistakes
 
Css introduction
Css  introductionCss  introduction
Css introduction
 
CSS Basic and Common Errors
CSS Basic and Common ErrorsCSS Basic and Common Errors
CSS Basic and Common Errors
 
TUTORIAL DE CSS 2.0
TUTORIAL DE CSS 2.0TUTORIAL DE CSS 2.0
TUTORIAL DE CSS 2.0
 
CSS_Day_ONE (W3schools)
CSS_Day_ONE (W3schools)CSS_Day_ONE (W3schools)
CSS_Day_ONE (W3schools)
 
css-ppt.pdf
css-ppt.pdfcss-ppt.pdf
css-ppt.pdf
 
HTML to CSS Basics Exer 2.pptx
HTML to CSS Basics Exer 2.pptxHTML to CSS Basics Exer 2.pptx
HTML to CSS Basics Exer 2.pptx
 
A complete html and css guidelines for beginners
A complete html and css guidelines for beginnersA complete html and css guidelines for beginners
A complete html and css guidelines for beginners
 
Css
CssCss
Css
 
PHP HTML CSS Notes
PHP HTML CSS  NotesPHP HTML CSS  Notes
PHP HTML CSS Notes
 
Css 2010
Css 2010Css 2010
Css 2010
 
Css 2010
Css 2010Css 2010
Css 2010
 
Css
CssCss
Css
 
Introduction to css & its attributes with syntax
Introduction to css & its attributes with syntaxIntroduction to css & its attributes with syntax
Introduction to css & its attributes with syntax
 

Último

SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxhariprasad279825
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machinePadma Pradeep
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr LapshynFwdays
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm
 

Último (20)

SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
 

Liquidlayout

  • 1. How to create a liquid layout By Stephanie Redmond & Samantha Totera
  • 2. In your new HTML file create 5 divs: (container header left right main footer)
  • 3. Create a corresponding style sheet, making sure your HTML file is linked to it. Then to make your left and right column 300px use the float property, and width:300px property
  • 4. To align text use the text-align:left/right property in the respected div in your CSS file
  • 5. To make links to other pages just use the links code <a href="url">Link text</a> and place it in the column div you want it to appear in.
  • 6. To style links refer back to your css style sheet. For example to remove line under your links use a:link {color:#000000; text-decoration:none;} a:visited {color:#000000; text-decoration:none;} a:hover {color:#FF0; text- decoration:none;} a:active {color:#000000; text-decoration:none;}
  • 7. To make an image in the right column:use the <img class="name" src="images/picture.jpg> code.. class is the name you will refer to in your css so you can position it in CSS use the float property again
  • 8.
  • 9. We used web based tutorials on http://www.w3schools.com/