2column Fixed With Cssmenu

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> :  </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>  </li>  </ul>  <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>  </li>  </ul>  <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>  </li>  </ul>  <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>  </li>  </ul>  </div> :  </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>

2column Fixed With Cssmenu

Enviado por

Dados do documento

Descrição original:

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

2column Fixed With Cssmenu

Enviado por

Direitos autorais:

Formatos disponíveis

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

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

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

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

Você também pode gostar