html - Unwanted White Space -
i wanted add 3 horizontal paragraphs next eachother. way figure out using position property got result.
http://postimg.org/image/ti454xgz7/
i'm trying make clean possible appears way , code:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>promotions </title> <link href="project.css" rel="stylesheet" type="text/css"> </head> <body class="body"> <ul id="menu"> <li><a href="tyre plus.html">home</a></li> <li><a href="promotions.html">promotions</a></li> <li><a href="#">services</a></li> <li><a href="#">customers</a></li> <li><a href="#"> contact us</a></li> <li><a href="#">order now</a></li> <li><a href="branches.html">branches</a></li> <li><a href="#">references</a></li> </ul> <header><img class="banner" src="images/banner.jpg" width="1000" height="120" alt=" tyre plus banner"/></header> <br> <br> <nav></nav> <br><br> <br><br><br> <section> <img class="img2" src="c:\users\ghanim\downloads\tyre plus\tyre plus\loyalty.jpg" alt="loyalty cards" ></img> <br><br><br> <br><br><br> <h2> 15% blue loyalty card </h2> <p> 15% off on following services: <ul> <li> disk skimming </li> <li> tyre balancing </li> <li> tyre fitting </li> <li> oil change </li> <li> alignment </li> <li class="li"> <b><em> free rotation </b></em> </li> <li class="li"> <b><em> free 50 checkpoint check-up </b></em> </li> </ul> </p> <h2 class="center" align="center"> 20% silver loyalty card </h2> <p class="center"align="center"> 20% off on following services: </p> <p class="center"align="center"> disk skimming </p> <p class="center"align="center"> tyre balancing </p> <p class="center"align="center"> tyre fitting </p> <p class="center"align="center"> oil change </p> <p class="center"align="center"> alignment </p> <p class="center"align="center" > <b><em> <span style="color:red"> free rotation </span> </b></em> <p> <p class="center" align="center"> <b><em> <span style="color:red"> free 50 checkpoint check-up </span> </b></em> <p> <h2 class="right" align="right"> 30% gold loyalty card </h2> <p class="right" align="right"> 30% off on following services: </p> <p class="right"align="right"> disk skimming </p> <p class="right"align="right"> tyre balancing </p> <p class="right"align="right"> tyre fitting </p> <p class="right"align="right"> oil change </p> <p class="right"align="right"> alignment </p> <p class="right"align="right" > <b><em> <span style="color:red"> free rotation </span> </b></em> <p> <p class="right" align="right"> <b><em> <span style="color:red"> free 50 checkpoint check-up </span> </b></em> <p> <p class="right"align="right" > <b><em> <span style="color:red"> free alignment check-up </span> </b></em> <p> <p class="right"align="right" > <b><em> <span style="color:red"> free oil to-up </span> </b></em> <p> </section> <hr> <footer class="footer">copyright © 2015 rights reserved - tyre plus - central trading company </footer> <p class="footer2"> more info please contact on <a href="mailto:tyreplus.ae"> tyre plus </a> </body> </html> css:
.banner { position:relative; text-align: center; right:-100px; margin-top:50px; } .body { background-color: #a9e2f3; border: 40px solid; border-color: #0b173b; padding: 30px; } .para { margin:auto; text-align: center; width:800px; font-family: calibri; font-size: 18px; margin-bottom:30px; font-style: oblique; } .para2 { font-family: calibri; right:-50px; position:relative; font-size: 14px; } .para3 { font-family: calibri; right:-90px; position:relative; } .alshami { position:relative; right: -550px; top:-500px; } .h1 { font-size: 34px; color:black; font-family:arial; text-align: center; } .img { display:block; margin-left: auto; margin-right:auto; } .img2 { display:block; margin-left: auto; margin-right:auto; } .footer { margin-top:30px; position:relative; right:-310px; margin-bottom: 30px; font-size: 18px; font-family: arial; } .footer2 { position:relative; right:-400px; margin-bottom: 10px; font-size: 18px; font-family: arial; } #menu { list-style:none; width:910px; margin:30px auto 0px auto; height:43px; padding:0px 20px 0px 20px; /* rounded corners */ -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* background color , gradients */ background: #014464; background: -moz-linear-gradient(top, #0272a7, #013953); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953)); /* borders */ border: 1px solid #002232; -moz-box-shadow:inset 0px 0px 1px #edf9ff; -webkit-box-shadow:inset 0px 0px 1px #edf9ff; box-shadow:inset 0px 0px 1px #edf9ff; } #menu li { float:left; display:block; text-align:center; position:relative; padding: 4px 10px 4px 10px; margin-right:30px; margin-top:7px; border:none; } #menu li:hover { border: 1px solid #777777; padding: 4px 9px 4px 9px; /* background color , gradients */ background: #f4f4f4; background: -moz-linear-gradient(top, #f4f4f4, #eeeeee); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f4f4f4), to(#eeeeee)); /* rounded corners */ -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; } #menu li { font-family:arial, helvetica, sans-serif; font-size:14px; color: #eeeeee; display:block; outline:0; text-decoration:none; text-shadow: 1px 1px 1px #000; } #menu li:hover { color:#161616; text-shadow: 1px 1px 1px #ffffff; } #menu li .drop { padding-right:21px; background:url("img/drop.png") no-repeat right 8px; } #menu li:hover .drop { background:url("img/drop.png") no-repeat right 7px; } .loyalty { position:relative; right:-500px; top:-230px; } .li { font-style: italic; color: red; } .loyalty2 { font-size:27px; position:relative; right:-500px; top:-250px; } .center { position:relative; top:-230px; } .right { position:relative; top:-550px; } as images here, problem aligning don't know how properly, horizontal alignment.
http://postimg.org/image/jqjr7bv3n/
thank you.
it old technique, use tables format site , paragraphs. if done correctly can nice.
Comments
Post a Comment