Нежелательное белое пространство

Я хотел добавить 3 горизонтальных абзаца рядом друг с другом. Единственный способ понять это - использовать свойство position, но я получил это как результат.Нежелательное белое пространство

http://postimg.org/image/ti454xgz7/

Я пытаюсь сделать его как можно более чистым, но всегда появляется этот путь, и это мой код:

<!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 &copy 2015 All Rights Reserved - Tyre Plus - Central Trading Company </footer> 
    <p class="footer2"> For more info please contact us 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 and 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 and 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 a { 
    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 a { 
    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; 
}

Как как изображения здесь, моя проблема выравнивается, я не знаю, как это сделать правильно, горизонтальное выравнивание.

http://postimg.org/image/jqjr7bv3n/

Спасибо.

источник

2015-05-29 Ghanim

Это старая техника, но вы можете использовать таблицы, которые помогут вам отформатировать ваш сайт и абзацы. Если все сделано правильно, это может выглядеть очень красиво.

http://www.w3schools.com/html/html_tables.asp

источник

2015-05-29 18:42:42 Bytesized

Ого, что это очень полезно, Что если я хочу сделать то же самое с изображениями, это тоже возможно? – Ghanim

Вы должны уметь что-либо вставлять в столбики или строки таблицы. – Bytesized

Большое спасибо RAGING – Ghanim

Нежелательное белое пространство

ответ

Смежные вопросы