2015-08-09 6 views
0

Я создаю веб-сайт, но верхняя часть сайта с именем и на какой странице вы находитесь слишком далеко. ATM это выглядит так:Как разместить текст над другим? (Использование div)

       Website Name 

           Page you're on 

Но я хочу, чтобы не быть пробелов между ними. Я попытался использовать теги div, чтобы разместить его, но все, что я делаю, они не перемещаются.

Мой код

<!DOCTYPE html> 
<html> 
<title>Website name -Home</title> 
<style> 
body { 
background-color: #3399FF; 
} 

h2 { 
text-align: center; 
font-family: 'Arial Narrow', Arial, sans-serif; 
} 

h4 { 
text-align: center; 
font-family: 'Arial Narrow', Arial, sans-serif; 
} 

p{ 
font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-  serif; 
} 

hr { 
width: 100% 
} 

#pageTop { 
position: absolute; 
top: 80px; 
right: 0; 
width: 200px; 
height: 100px; 
border: 3px solid #8AC007; 
} 

#titleDivide{ 
position: relative; 
} 



</style> 
<body> 

<div #id="pageTop"> 
<h2>Website Name</h2> 
<h4>Home</h4> 
</div> 

<div #id="titleDivide"> 
<hr /> 
</div> 

</body> 
</html> 

ответ

2

Удалить запас из h2 и h4:

h2, h4 
{ 
    margin: 0; 
} 

Демо:

body 
 
{ 
 
    background-color: #3399FF; 
 
} 
 
h2, h4 
 
{ 
 
    text-align: center; 
 
    font-family: 'Arial Narrow', Arial, sans-serif; 
 
    margin: 0; 
 
} 
 
p 
 
{ 
 
    font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif; 
 
} 
 
hr 
 
{ 
 
    width: 100% 
 
} 
 
#pageTop 
 
{ 
 
    position: absolute; 
 
    top: 80px; 
 
    right: 0; 
 
    width: 200px; 
 
    height: 100px; 
 
    border: 3px solid #8AC007; 
 
} 
 
#titleDivide 
 
{ 
 
    position: relative; 
 
}
<!DOCTYPE html> 
 
<html> 
 
    <title>Website name -Home</title> 
 
    <body> 
 
     <div #id="pageTop"> 
 
      <h2>Website Name</h2> 
 
      <h4>Home</h4> 
 
     </div> 
 
     <div #id="titleDivide"> 
 
      <hr /> 
 
     </div> 
 
    </body> 
 
</html>

+0

Работал отлично, спасибо! – crabcrabcam

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