html - How to align content on webpage below the header -
i enrolled web course. learning html5 , css. have make 3 webpages; main, me , hobbies. i've created pretty they've asked according specification gave me have 1 problem; content not display supposed be. i've tried position: relative, position: absolute etc , modified the position of using bottom: 500px etc doesn't right. example, on code below, 'about me' page. pictures on side not aligned top of main article. pictures besides main article correct positioned bit below. happens throughout webpages on tables elements..
<!doctype html> <html> <head> <meta charset="utf-8"> <title>about me</title> <link property="stylesheet" rel ="stylesheet" href="cascadingstylesheet.css"/> <!--[if lt ie 9]> <script src="hpp://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> </head> <body> <header> <h1>about me</h1> <nav> <ul> <li><a href="main">main</a></li> <li><a href="about me">about me</a></li> <li><a href="hobbies.html">hobby</a></li> </ul> </nav> </header> <hr> <main> <!-- below have used article tag , section tag. article tag nested inside section tag. because section tags used group related elements , 3 articles related since contain information me. didn't include 1 article tag because articles distinct 1 another. e.g. 1 of article contains types of mototbikes article tells user information me. !--> <section title="border" id="aboutarticle"> <article><p>lorem ipsum dolor sit amet, consectetur adipiscing elit. duis sit amet bibendum ex. phasellus eget placerat nisi. curabitur scelerisque condimentum vulputate. nullam mollis mauris vel porttitor fringilla. cras risus erat, feugiat non aliquet sit amet, molestie nec magna. phasellus eleifend ligula et consectetur. fusce et malesuada sem. donec lacinia tortor urna, eu semper metus volutpat non. phasellus sed sapien commodo ipsum faucibus dictum rhoncus in est. vestibulum porta metus pulvinar, ornare quam a, tristique nisl. nullam euismod neque est, @ tincidunt nunc tincidunt a. aenean ullamcorper tincidunt congue.</p></article> <br> <article><p>lorem ipsum dolor sit amet, consectetur adipiscing elit. duis sit amet bibendum ex. phasellus eget placerat nisi. curabitur scelerisque condimentum vulputate. nullam mollis mauris vel porttitor fringilla. cras risus erat, feugiat non aliquet sit amet, molestie nec magna. phasellus eleifend ligula et consectetur. fusce et malesuada sem. donec lacinia tortor urna, eu semper metus volutpat non. phasellus sed sapien commodo ipsum faucibus dictum rhoncus in est. vestibulum porta metus pulvinar, ornare quam a, tristique nisl. nullam euismod neque est, @ tincidunt nunc tincidunt a. aenean ullamcorper tincidunt congue.</p> </article> <br> <article><p>lorem ipsum dolor sit amet, consectetur adipiscing elit. duis sit amet bibendum ex. phasellus eget placerat nisi. curabitur scelerisque condimentum vulputate. nullam mollis mauris vel porttitor fringilla. cras risus erat, feugiat non aliquet sit amet, molestie nec magna. phasellus eleifend ligula et consectetur. fusce et malesuada sem. donec lacinia tortor urna, eu semper metus volutpat non. phasellus sed sapien commodo ipsum faucibus dictum rhoncus in est. vestibulum porta metus pulvinar, ornare quam a, tristique nisl. nullam euismod neque est, @ tincidunt nunc tincidunt a. aenean ullamcorper tincidunt congue.</p> <p>this blog created on <time datetime="10-10-2015 20:00"> 10th of october 2015.</time></p> <section> <img id="motorbikepic" width="350" alt="harley davidson logo "src="http://media1.santabanta.com/full5/bikes/harley%20davidson/harley- davidson-82a.jpg"></img> </section> </article> </section> <!-- have used aside tag on page. inside tag there images containing favourite types of cars. did not include in article tag above because it's not related since said motobikes , not muscle cars.!--> <aside title="cars"> <h3>my favourite cars:</h3> <img src="http://gas2.org/wp-content/uploads/2014/07/challenger-hellcat.png" width="300" alt="dodge hellcat"> <br> <img src="http://cartype.com/pics/6596/full/ford_mustang_shelby_gt500_f1_10.jpg" width="300" alt="ford shelby gt500"> <br> <img src="http://www.forodefotos.com/attachments/chevrolet/14617d1289420971- camaro-2010-camaro-2010.jpg" alt="chevrolet camero" width="300"> </aside> </main> <!-- footer tag used @ bottom of page since more appropriate use @ bottom since given more options such contacting web developer, in case me. !--> <footer> <hr> <p>to in touch me can click below:</p> <a href="mailto:w1@my.uk">click email me!</a> </footer> </body> </html> this css. css contains rules other pages pasted relevant ones it'll easier guys read. these relevant rules code above there may rules missing post whole of css if guys require it.
css code above:
footer{ position: absolute; right: 0; bottom: -250px; left: 0; padding: 10px; text-decoration:none; } #aboutarticle{ width:75%; } [title^="cars"]{ float:right; margin: 0 1.5%; position:relative; bottom:505px; } [title^="bord"]{ border-style: dotted; border-radius: 10px 30px; } body{ background: -webkit-linear-gradient(left, #4b0082, black , #4b0082); /* safari 5.1 6.0 */ background: linear-gradient(to right, #4b0082 , black, #4b0082); /*standard syntax*/ text-align: center; padding-bottom:60px; font-size:20px; }
just add 1 property , remove property.
add float:left; #aboutarticle , remove bottom:505px; [title^="cars"]
Comments
Post a Comment