- 1

please help for a better code

can any body help me please to improve this code. The css is #gallery{ background-color: #fa6900; margin:0 auto; } #Lorem1{ text-align: center; padding-top: 65px; color: white; font-size: 23px; line-height: 40px; } .imgA1 { position:absolute; top: 25px; left: 25px; z-index: 2; } .imgB1 { position:absolute; top: 75px; left: 75px; z-index: 3; } .imgC1 { position:absolute; top: 75px; left: 75px; z-index: 3; } .imgD1 { position:absolute; top: 75px; left: 75px; z-index: 1; } .imgE1 { position:absolute; top: 75px; left: 75px; z-index: 1; } and the html is <div id="gallery"> <div class="container"> <div id="Lorem1"> <p> Lorem ipsum dolor sit amet consectetur adipisc Lorem ipsum dolor sit amet consectetur adipisc <br> Lorem ipsum dolor sit Lorem ipsum dolor sit amet consectetur</p> </div> <div style="position: relative; left: 0; top: 0;"> <img class="imgA1" src="images/Browser - Copy.png" style="position: relative; top:20px; left:240px;"/> <img class="imgB1" src="images/Forma-2.png" style="position: absolute; top: 170px; left:350px;"/> <img class="imgC1" src="images/Forma-1.png" style="position: absolute; top: 170px; left: 620px;"/> <img class="imgD1" src="images/firstbrowser.png" style="position: absolute; top: 20px; left: 475px;"/> <img class="imgE1" src="images/firstbrowser.png" style="position: absolute; top: 20px; left:10px;"/> </div> </div> </div> </div>

html css and discussions on

15th Sep 2016, 5:15 PM

Ahmed Kamal

1 Answer

+ 2

<!DOCTYPE html> <html> <head> <title>Better Code</title> <meta charset="utf-8"> </head> <body> <div id="gallery"> <div class="container"> <div id="Lorem1"> <p> Lorem ipsum dolor sit amet consectetur adipisc Lorem ipsum dolor sit amet consectetur adipisc <br> Lorem ipsum dolor sit Lorem ipsum dolor sit amet consectetur</p> </div> <div style="position: relative; left: 0; top: 0;"> <img class="imgA1" src="images/Browser - Copy.png" style="position: relative; top:20px; left:240px;"/> <img class="imgB1" src="images/Forma-2.png" style="position: absolute; top: 170px; left:350px;"/> <img class="imgC1" src="images/Forma-1.png" style="position: absolute; top: 170px; left: 620px;"/> <img class="imgD1" src="images/firstbrowser.png" style="position: absolute; top: 20px; left: 475px;"/> <img class="imgE1" src="images/firstbrowser.png" style="position: absolute; top: 20px; left:10px;"/> </div> </div> </div> </body> </html> and css: #gallery{ background-color: #fa6900; margin:0 auto; } #Lorem1{ text-align: center; padding-top: 65px; color: white; font-size: 23px; line-height: 40px; } .imgA1 { position:absolute; top: 25px; left: 25px; z-index: 2; } .imgB1 { position:absolute; top: 75px; left: 75px; z-index: 3; } .imgC1 { position:absolute; top: 75px; left: 75px; z-index: 3; } .imgD1 { position:absolute; top: 75px; left: 75px; z-index: 1; } .imgE1 { position:absolute; top: 75px; left: 75px; z-index: 1; }

27th Oct 2016, 1:56 PM

Fronz-Tec