html - div class help please -
ok creating website assignment university. teacher told me utilize div classes css code reduced here problems. have div class images , supposed next each other in same row. have 3 div class boxes text should below divs images, , have 2 background images 1 of them should on left hand side , other 1 on right creates flag of italy. have tried can thing of still cannot create work can help?
first time here don't know how post code correctly attach file code please forgive me.
this want accomplish roughly
http://jsfiddle.net/p2uwm8ye/
<!doctype html> <!-- standard html code tells browser html page--> <html lang="en-gb"> <!-- tells browser language html using--> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <link href="css/style.css" rel="stylesheet" type="text/css"> <!-- linking style sheet (css)into html page--> <title>main page</title> <!-- code displays title of page--> </head> <body> <header id="pageheader"><!-- header tag used create navigation bar--> <nav id="site"><!-- navigation tag allows link different webpages together--> <ul> <li><a href="index.html">home page</a></li> <li><a href="html/tables.html">tables</a></li> <li><a href="html/forms.html">feedback</a></li> <li><a href="html/text.html">about us</a></li> <li><a href="html/references.html">references</a></li> <li><a href="html/validation.html">validation</a></li> </ul> </nav> </header> <div id="welcome"><!-- div tag used create welcome message on website--> <h1>papa italiano</h1> </div> <div class="images"><!-- div class have used set 3 images using 1 piece of css code reduced code--> <figure> <img src="images/image11.jpg" alt="photo" /> <figcaption>food 1</figcaption> </figure> </div> <div class="images"> <figure> <img src="images/image22.jpg" alt="photo" /> <figcaption>food 2</figcaption> </figure> </div> <div class="images"> <figure> <img src="images/image32.jpg" alt="photo" /> <figcaption>food 3</figcaption> </figure> </div> <div class="text"></div><!-- similar div class images text--> <div class="text"></div> <div class="text"></div> <div class="clearing"></div><!-- div class making sure other div classes not go each other--> </div> <div id="background"> <figure> <img src="images/background1.jpg" alt="background photo" /> </figure> </div> <div id="background2"> <figure> <img src="images/background2.jpg" alt="background photo" /> </figure> </div> </body> </html> and here css
header#pageheader{ position: absolute; top: 0px; left: 0px; width: 1024px; height: 80px; background-color: black; opacity: 0.5; }/* css navigation bar*/ nav#site li{ list-style:none; display:inline-block; zoom:1; width:160px; }/*this used style links*/ nav a{ text-decoration: none; color: #ff0; }/* used style of links*/ .images{ float: left; width: 250px; border-style: solid; border-width: 3px; padding: 10px; margin: 30px; z-index: 1; vertical-align: middle; }/*this telling div class images how need styled*/ #welcome{ position: relative; top: 100px; left: 300px; width: 300px; height: 80px; font: arial; font-size: 23px; color: green; margin-bottom: 75px; }/*this telling browser how style div welcome*/ .text{ position: relative; height: 300px; width: 250px; left: 0px; float: left; border-style: solid; border-width: 3px; margin: 100px; display: inline-block; }/*similar .images piece of codes used text*/ #background{ height: 80px; width: 250px; left: 0px; } #background2{ height: 80px; width: 250px; right: 0px; } .clearing{ clear: both; }
i not sure have understood wanted might help you. improve coding skills should larn more about:
the box model in css: http://css-tricks.com/the-css-box-model/ always seek simplify code much possible , don't utilizeid or class if don't need to. learn differences between position: relative , position: absolute , when utilize them: http://css-tricks.com/almanac/properties/p/position/ make sure understand natural flow of css , html, should start with. study next code , play improve understand how things work together. luck , have fun learning!
solution 1 (inline-block hack <!--)
class="snippet-code-css lang-css prettyprint-override">#pageheader { background-color: grey; /* there nil behind #pageheader, improve take gray color no opacity */ min-height: 80px; } nav { width: 90%; margin: 0 auto; /* code center navigation bar. 90% width give space. */ } nav ul { list-style-type: none; padding: 0; margin: 0; } nav li { display:inline-block; width: 16.6666666%; /* 100% (full-width) / 6 (as have 6 elements in nav bar) */ text-align: center; vertical-align: middle; } nav { text-decoration: none; color: #ff0; } nav a:hover { /* define style links when hovered. suggestion of style. */ border-bottom: 1px solid #ff0; padding-bottom: 3px; } .main { /* italian flag in background. if need back upwards more browser utilize compress image instead. note code not cross-browser, check required code on mozilla developer network */ background-image: -webkit-linear-gradient(to right, greenish 0%, greenish 33%, #fff 33%, #fff 66%, reddish 66%, reddish 100%); background-image: linear-gradient(to right, greenish 0%, greenish 33%, #fff 33%, #fff 66%, reddish 66%, reddish 100%); } .wrapper { /* wrap main elements don't have reproduce style every time */ width: 90%; margin: 0 auto; text-align: center; } h1 { font: arial; font-size: 23px; color: green; padding: 20px 0 75px; margin: 0; } .images { display: inline-block; width: 32%; /* 100% / 3 images per row */ background-color: #e3e3e3; vertical-align: top; } .images figure { margin: 0; } img { width: 100%; height: auto; } figure figcaption, figure p { text-align: left; } class="snippet-code-html lang-html prettyprint-override"><header id="pageheader"> <nav> <ul> <li><a href="index.html">home page</a></li><!-- --><li><a href="html/tables.html">tables</a></li><!-- --><li><a href="html/forms.html">feedback</a></li><!-- --><li><a href="html/text.html">about us</a></li><!-- --><li><a href="html/references.html">references</a></li><!-- --><li><a href="html/validation.html">validation</a></li> </ul> </nav> </header> <section class="main"> <div class="wrapper"> <h1>papa italiano</h1> <div class="images"> <!-- div class have used set 3 images using 1 piece of css code reduced code--> <figure> <img src="http://lorempixel.com/300/250/food" alt="photo" /> <figcaption>food 1</figcaption> <p>lorem ipsum dolor sit down amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </figure> </div> <div class="images"> <figure> <img src="http://lorempixel.com/300/250/food" alt="photo" /> <figcaption>food 2</figcaption> <p>lorem ipsum dolor sit down amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </figure> </div> <div class="images"> <figure> <img src="http://lorempixel.com/300/250/food" alt="photo" /> <figcaption>food 3</figcaption> <p>lorem ipsum dolor sit down amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </figure> </div> </div> </section>
solution 2 (inline-block hack margin-right: -4px;)
class="snippet-code-css lang-css prettyprint-override">#pageheader { background-color: grey; /* there nil behind #pageheader, improve take gray color no opacity */ min-height: 80px; } nav { width: 90%; margin: 0 auto; /* code center navigation bar. 90% width give space. */ } nav ul { list-style-type: none; padding: 0; margin: 0; } nav li { display:inline-block; width: 16.6666666%; /* 100% (full-width) / 6 (as have 6 elements in nav bar) */ text-align: center; vertical-align: middle; margin-right: -4px; /* 2nd trick remove space between inline-blocks) */ } nav { text-decoration: none; color: #ff0; } nav a:hover { /* define style links when hovered. suggestion of style. */ border-bottom: 1px solid #ff0; padding-bottom: 3px; } .main { /* italian flag in background. if need back upwards more browser utilize compress image instead. note code not cross-browser, check required code on mozilla developer network */ background-image: -webkit-linear-gradient(to right, greenish 0%, greenish 33%, #fff 33%, #fff 66%, reddish 66%, reddish 100%); background-image: linear-gradient(to right, greenish 0%, greenish 33%, #fff 33%, #fff 66%, reddish 66%, reddish 100%); } .wrapper { /* wrap main elements don't have reproduce style every time */ width: 90%; margin: 0 auto; text-align: center; } h1 { font: arial; font-size: 23px; color: green; padding: 20px 0 75px; margin: 0; } .images { display: inline-block; width: 32%; /* 100% / 3 images per row */ background-color: #e3e3e3; vertical-align: top; } .images figure { margin: 0; } img { width: 100%; height: auto; } figure figcaption, figure p { text-align: left; } class="snippet-code-html lang-html prettyprint-override"><header id="pageheader"> <nav> <ul> <li><a href="index.html">home page</a></li> <li><a href="html/tables.html">tables</a></li> <li><a href="html/forms.html">feedback</a></li> <li><a href="html/text.html">about us</a></li> <li><a href="html/references.html">references</a></li> <li><a href="html/validation.html">validation</a></li> </ul> </nav> </header> <section class="main"> <div class="wrapper"> <h1>papa italiano</h1> <div class="images"> <!-- div class have used set 3 images using 1 piece of css code reduced code--> <figure> <img src="http://lorempixel.com/300/250/food" alt="photo" /> <figcaption>food 1</figcaption> <p>lorem ipsum dolor sit down amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </figure> </div> <div class="images"> <figure> <img src="http://lorempixel.com/300/250/food" alt="photo" /> <figcaption>food 2</figcaption> <p>lorem ipsum dolor sit down amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </figure> </div> <div class="images"> <figure> <img src="http://lorempixel.com/300/250/food" alt="photo" /> <figcaption>food 3</figcaption> <p>lorem ipsum dolor sit down amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </figure> </div> </div> </section>
solution 3 (just utilize floated block elements)
class="snippet-code-css lang-css prettyprint-override">#pageheader { background-color: grey; /* there nil behind #pageheader, improve take gray color no opacity */ min-height: 80px; } nav { width: 90%; margin: 0 auto; /* code center navigation bar. 90% width give space. */ } nav:after { /* clear elements after nav. utilize floated li have clear after) */ content: ""; display: table; clear: both; } nav ul { list-style-type: none; padding: 0; margin: 0; } nav li { float: left; /* 3rd way align li elements */ width: 16.6666666%; /* 100% (full-width) / 6 (as have 6 elements in nav bar) */ text-align: center; } nav { text-decoration: none; color: #ff0; } nav a:hover { /* define style links when hovered. suggestion of style. */ border-bottom: 1px solid #ff0; padding-bottom: 3px; } .main { /* italian flag in background. if need back upwards more browser utilize compress image instead. note code not cross-browser, check required code on mozilla developer network */ background-image: -webkit-linear-gradient(to right, greenish 0%, greenish 33%, #fff 33%, #fff 66%, reddish 66%, reddish 100%); background-image: linear-gradient(to right, greenish 0%, greenish 33%, #fff 33%, #fff 66%, reddish 66%, reddish 100%); } .wrapper { /* wrap main elements don't have reproduce style every time */ width: 90%; margin: 0 auto; text-align: center; } h1 { font: arial; font-size: 23px; color: green; padding: 20px 0 75px; margin: 0; } .images { display: inline-block; width: 32%; /* 100% / 3 images per row */ background-color: #e3e3e3; vertical-align: top; } .images figure { margin: 0; } img { width: 100%; height: auto; } figure figcaption, figure p { text-align: left; } class="snippet-code-html lang-html prettyprint-override"><header id="pageheader"> <nav> <ul> <li><a href="index.html">home page</a></li> <li><a href="html/tables.html">tables</a></li> <li><a href="html/forms.html">feedback</a></li> <li><a href="html/text.html">about us</a></li> <li><a href="html/references.html">references</a></li> <li><a href="html/validation.html">validation</a></li> </ul> </nav> </header> <section class="main"> <div class="wrapper"> <h1>papa italiano</h1> <div class="images"> <!-- div class have used set 3 images using 1 piece of css code reduced code--> <figure> <img src="http://lorempixel.com/300/250/food" alt="photo" /> <figcaption>food 1</figcaption> <p>lorem ipsum dolor sit down amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </figure> </div> <div class="images"> <figure> <img src="http://lorempixel.com/300/250/food" alt="photo" /> <figcaption>food 2</figcaption> <p>lorem ipsum dolor sit down amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </figure> </div> <div class="images"> <figure> <img src="http://lorempixel.com/300/250/food" alt="photo" /> <figcaption>food 3</figcaption> <p>lorem ipsum dolor sit down amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </figure> </div> </div> </section>
html css html5 css3
No comments:
Post a Comment