Scribd
Upload
59 views6 pages

2column Fixed With Cssmenu

The document provides the code for a fixed width two column website layout with CSS rules. It includes code for header, footer, navigation menu, and styles various HTML elements like lists, text formatting, headings and more. CSS rules are defined for positioning, colors and formatting of different page elements.

Uploaded by

rendermanuser
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
59 views6 pages

2column Fixed With Cssmenu

The document provides the code for a fixed width two column website layout with CSS rules. It includes code for header, footer, navigation menu, and styles various HTML elements like lists, text formatting, headings and more. CSS rules are defined for positioning, colors and formatting of different page elements.

Uploaded by

rendermanuser
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

FIXED WIDTH 2 COLUMN with Header, Footer and CSS Vertical Men Create Di!

"tr ct re
<body> <div id="wrapper"> <div id="header"> <div id="navwrapper"> <div id="navMenu"> </div> <!-- end of nav> -->: <!-- end of wrapper --> </div> </div> <div id="leftmenu"></div> <div id="maincontent"> </div> <div class="footer" id="footer"> </div> </div> </body>

Create C

rules

@charset "utf-8"; #wrapper { background-color: #FFF; margin-right: auto; margin-left: auto; width: 1 !"p#; $ #wrapper #header { background-color: #!%!%!%; height: 1& p#; width: auto; padding-top: & p#; $ #wrapper #leftmenu { background-color: #'''; height: 1(& p#; width: 1( p#; float: left; padding: ! p#; $ #wrapper #maincontent { background-color: #))); height: 1(& p#; width: %8"p#; padding: ! p#; float: right; $ #wrapper #footer { background-color: #!%!%!%; height: & p#; width: auto; clear: both; $ *footer { font-famil+: ,erdana- .ene/a- sans-serif; font-si0e: 'p#; te#t-align: left;

$ bod+ {

/ertical-align: middle; width: & p#; padding-top: & p#; padding-right: & p#; padding-bottom: & p#; padding-left: !& p#; color: #FFF;

$ ul { $

margin-top: p#; margin-left: p#; background-color: #111; font-famil+: 2rial- 3el/etica- sans-serif; font-si0e: 1"p#;

#na/4enu { margin: ; padding: ; $ #wrapper #header #na/wrapper { margin: p#; padding-left: ! p#; $ h1 { font-famil+: 2rial- 3el/etica- sans-serif; font-si0e: !"p#; $ h! { font-famil+: 2rial- 3el/etica- sans-serif; font-si0e: 18p#; $ h1 { font-famil+: 2rial- 3el/etica- sans-serif; font-si0e: 1(p#; $ p{ $

font-famil+: 2rial- 3el/etica- sans-serif; font-si0e: 1"p#;

#na/4enu ul { margin: ; padding: ; line-height:1 p#; $ #na/4enu li { margin: ; padding: ; list-st+le:none; float:left; position:relati/e; background-color: #(((; $

#na/4enu ul li a { te#t-align:center; font-famil+: 2rial- 3el/etica- sans-serif; te#t-decoration:none; height:1 p#; width:1& p#; displa+:block; color:#FFF; border: 1p# solid #FFF; $ #na/4enu ul ul { position: absolute; /isibilit+:hidden; top:1!p#; $ #na/4enu ul li:ho/er ul { /isibilit+:/isible; $ #na/4enu li:ho/er { background-color: #'''; $ #na/4enu ul li:ho/er ul li a:ho/er { background:#))); color:# ; $ #na/4enu a:ho/er { color:# $ *welcome { font-famil+: 2rial- 3el/etica- sans-serif; font-si0e: &!p#; padding-left: ! p#; padding-top: & p#; color: #FFF; $ <body> <div id="wrapper"> <div id="header"><span class="welcome">!elcome to my !eb <div id="navwrapper"> <div id="navMenu"> <ul> <li><a href=""">#$M%</a> <ul> <li><a href=""">&nderstandin' #$M%</a></li> <li><a href=""">(nline ) *loc+ ,lements</a></li> <li><a href=""">(tem -</a></li> </ul> <!-- end of inner %i--> </li> <!-- end of main %i--> </ul> <!-- end of main &% --> <ul> <li><a <ul> <li><a <li><a <li><a href=""">C </a>

ite</span>

href=""">C. /</a></li> href=""">C. 0</a></li> href=""">(tem 1</a></li>

</ul> <!-- end of inner %i--> </li> <!-- end of main %i--> </ul> <!-- end of main &% --> <ul> <li><a <ul> <li><a <li><a <li><a href=""">!,* $234254 </a>

href=""">!C-C .alidation</a></li> href=""">(tem 6</a></li> href=""">(tem 7</a></li>

</ul> <!-- end of inner %i--> </li> <!-- end of main %i--> </ul> <!-- end of main &% --> <ul> <li><a <ul> <li><a <li><a <li><a <li><a <li><a

href=""">4, (83</a> href=""">C Menu 4esi'ns</a></li> href=""">0 Column 9i:ed !idth</a></li> href=""">- Column 9i:ed !idth</a></li> href=""">9orms</a></li> href=""">;rint 9riendly</a></li>

</ul> <!-- end of inner %i--> </li> <!-- end of main %i--> </ul> <!-- end of main &% --> </div> <!-- end of nav> -->: <!-- end of wrapper --> </div> </div> <div id="leftmenu"></div> <div id="maincontent"><h/>Modifyin' $e:t on !ebsite</h/> <p>(t is possible to use the 'eneric #$M% ta's< !e can 'o one step further by creatin' C rules for each of the ta's< $hese $a' selector rules will effect all instances of that #$M% ta'</p> <im' src="ima'es/$a'=C <>p'" width="?-/" hei'ht="@07" /> <h0>%ist of #$M% ,lements - *etween <> and <code></></code> </h0> <h->4ocument #ead</h-> <ul> <li><stron'>base - 4ocuments base &5%</stron'></li> <li><stron'>head - information about head</stron'></li> <li><stron'>lin+ - %in+ to a related resource</stron'></li> <li><stron'>meta - 4ocument metadata</stron'></li> <li><stron'>style - 2n embedded style sheet</stron'></li> <li><stron'>title - the documentAs title</stron'></li> </ul> <hr /> <h->%ists</h-> <ul> <li><stron'>dl - defintion list</stron'></li> <li><stron'>ol - ordered list</stron'> <li><stron'>ul - unordered list</stron'> <li><stron'>dt - 2 definition list term</stron'> <li><stron'>li - 2 list item</stron'> </ul> <hr /> <h->$e:t</h-> <ul> <li><stron'>a - 2n anchor</stron'> <li><stron'>abbr - 2n abbreviation</stron'></li>

<li><stron'>acronym - 2n 2cronym</stron'></li> <li><stron'>bold - *old $e:t Bdont useC use stron'D</stron'></li> <li><stron'>h/Ch0Ch-Ch@Ch?Ch1</stron'></li> <li><stron'>hr - a horiEontal line</stron'><code><abbr></abbr></code></li> <li><stron'>b - bold te:t</stron'><code><abbr></abbr></code></li> <li><stron'>bdo - *idrectional te:t override</stron'><code><abbr></abbr></code></li> <li><stron'>bloc+Fuote - 2 lon' Fuotation</stron'><code><abbr></abbr></code></li> <li><stron'>br - 2 line brea+</stron'><code><abbr></abbr></code></li> <li><stron'>cite - 2 reference to a source</stron'><code><abbr></abbr></code></li> <li><stron'>code - 2 code fra'ment</stron'><code><abbr></abbr></code></li> <li><stron'>del - 4eleted content</stron'><code><abbr></abbr></code></li> <li><stron'>em - emphasiEe te:t</stron'><code><abbr></abbr></code></li> <li><stron'>ins -inserted content</stron'><code><abbr></abbr></code></li> <li><stron'>i - italiciEed te:t</stron'><code><abbr></abbr></code></li> <li><stron'>+bd - te:t for user to enter</stron'><code><abbr></abbr></code></li> <li><stron'>p - 2 para'raph</stron'><code><abbr></abbr></code></li> <li><stron'>pre - preformatted te:t</stron'><code><abbr></abbr></code></li> <li><stron'>F - a short Fuotation</stron'><code><abbr></abbr></code></li> <li><stron'>sample - sample output te:t</stron'><code><abbr></abbr></code></li> <li><stron'>small - smaller te:t</stron'><code><abbr></abbr></code></li> <li><stron'>stron' - stron'er te:t emphasis</stron'><code><abbr></abbr></code></li> <li><stron'>sub - 2 subscript</stron'><code><abbr></abbr></code></li> <li><stron'>sup - 2 superscript</stron'></li> <li><stron'>tt - $eletype or monospace te:t</stron'></li> <li><stron'>var - 2 variable</stron'></li> </ul> <hr /> <h->,mbedded Content B(ma'es and Gb>ectsD</h-> <ul> <li><stron'>area - area element</stron'></li> <li><stron'>im' - an embedded ima'e</stron'></li> <li><stron'>map - ima'e map container</stron'></li> <li><stron'>ob>ect - 2 'eneric embedded ob>ect</stron'></li> <li><stron'>param - Gb>ect resource parameter</stron'></li> </ul> <hr /> <h->9orms</h-> <ul> <li><stron'>button</stron'></li> <li><stron'>fieldset</stron'></li> <li><stron'>form</stron'></li> <li><stron'>input</stron'></li> <li><stron'>label - 2 form control label</stron'></li> <li><stron'>le'end - 2 fieldset caption</stron'></li> <li><stron'>opt'roup - 2 'roup of select choices</stron'></li> <li><stron'>option - 2 select element choice</stron'></li> <li><stron'>select - 2 menu of choices</stron'></li> <li><stron'>te:tarea - 2 multiline field for te:t</stron'></li> </ul> <hr /> <h->h/-h1 elements</h-> <p>$he h/-h1 elements represent content headin's of varyin' de'rees of importance< $he <code>h/</code> is the most importantC and the <code>h1</code> is the least< ,ach headin' describes the content aor functionality that followsC whether its an articleC a si'n-up formC a module with a 'roup of lin+sC the title above an embedded video and so on< <br /> </br>Hour <code>h/-h1</code> headin's are amon' the most important elements in any #$M% documentC because they are inte'ral to definin' your pa'eAs outline< ;lan them without re'ard for how you want them to loo+I focus on what headin' hierachy is appropriate for your content< $his benefits both ,G and accessibility<</p><p> earch en'ines wei'h your headin's heavilyC particularly the li+es of <code>h/</code>< creen reader users often navi'ate a pa'e by headin'sC tooC because it allows them to Fuic+ly assess a pa'eAs content without havin' to listen throu'h every piece of content<</p><p>*y defaultC headin's typically render at a siEe comparable to its importance and in bold< #oweverC as previously notedC donAt use a particular headin' level >ust because you want it to loo+ a certain way< Hou can control all of that with C <</p>

</div> <div class="footer" id="footer">5eally small te:t 'oes here in the footer< 9usce at dolor tortorC vitae accumsan odio< Morbi euismod aliFuet semper< uspendisse eu urna id dolor ultrices tempus< (n tempusC orci eu elementum cursusC leo dolor adipiscin' turpisC id frin'illa turpis orci aliFuet massa< (n ac dolor dui< Mauris eu nunc eu metus rutrum mollis e'et a leo< ,tiam condimentum lectus< .estibulum Fuis eros risusC vel bibendum erat< ed tincidunt tellus dictum ante suscipit accumsan< </div> </div> </body>

You might also like