2014-03-01 2 views
0

Я не могу представить свои слова в div, в который он должен войти. Текст Майдир Линн должен пойти в красную коробку. Это, в основном, div, обозначенный aboutus. Я хочу, чтобы текст Maidir Linne находился внутри div с надписью aboutustitle.Слова не останутся внутри Div

Html:

<div id="centercol"> 
       <div id="header"> 
       <img src="Crios Oige Images/Logo.png" id="logo"> 
       <img src="Crios Oige Images/Title.PNG" id="title"> 
       <img src="http://www.youtharts.ie/sites/youtharts.ie/files/NYCI%20Logo%20Full%20JPG_2.jpg" id="youthcouncil"> 
      </div> 
      <div id="toolbar"> 
       <div id="homebutton"> 
        <div id="homebuttonlink"> 
         <b><a href="index.html" id="homebuttonlinkstyle">Abhaile</a></b> 
        </div> 
       </div> 
       <div id="videosbutton"> 
        <div id="videosbuttonlink"> 
         <b><a href="videos.html"; id="videosbuttonlinkstyle">Fiseán</a></b> 
        </div> 
       </div> 
       <div id="imagesbutton"> 
        <div id="imagesbuttonlink"> 
         <b><a href="images.html"; id="imagesbuttonlinkstyle">Pictiúir Greannmhar</a></b> 
        </div> 
       </div> 
       <div id="gamesbutton"> 
        <div id="gamesbuttonlink"> 
         <b><a href="games.html"; id="gamesbuttonlinkstyle">Cluichí</a></b> 
        </div> 
       </div> 
       <div id="sportbutton"> 
        <div id="sportbuttonlink"> 
         <b><a href="sport.html"; id="sportbuttonlinkstyle">Spórt</a></b> 
        </div> 
       </div> 
       <div id="contactusbutton"> 
        <div id="contactusbuttonlink"> 
         <b><a href="contactus.html"; id="contactusbuttonlinkstyle">Déan teagmháil linn</a></b> 
        </div> 
       </div> 
      </div> 
      <div id="aboutus"> 
       <div id="aboutustitle"> 
        <p id="aboutustitlestyle">Maidir Linne</p> 
       </div> 
       <p id="aboutuscontent">***************************************************************************************************************************************************************************************************************************************************************************************************************************</p> 
      </div> 
      </div> 
    </div> 

Соответствующий CSS:

html{ 
background-color: #990033; 
} 
#centercol { 
border:2px solid #a1a1a1; 
padding:0px; 
background-color: brown; 
margin-top: 0; 
margin-right: auto; 
margin-bottom: 0; 
margin-left: auto; 
width: 840px; 
height:relative; 
} 
body { 
text-align: justify; 
background-image: no-repeat; 
} 
a { 
text-decoration: none; 
} 
a:link { 
color:#FF0000; 
} /* unvisited link */ 
a:visited { 
color:#FF0000; 
} /* visited link */ 
a:hover { 
color:#0000FF; 
} /* mouse over link */ 
a:active { 
color:#FF0000; 
} /* selected link */ 
#header { 
height: 100px; 
width: 800px; 
background-color: #006600; 
margin-top: 0px; 
margin-right: auto; 
margin-left: auto; 
} 
#toolbar { 
height: 151px; 
width: 734.5px; 
background-color: #FF0000; 
position: absoloute; 
top: -4px; 
margin-right: auto; 
margin-left: auto; 
} 
#homebutton { 
height: 80px; 
width: 199px; 
background-color: #0000FF; 
position: relative; 
top: -19px; 
margin: 21px; 
float: left; 
border-top-left-radius: 5px; 
border-top-right-radius: 5px; 
} 
#videosbutton { 
height: 80px; 
width: 199px; 
background-color: #0000FF; 
position: relative; 
top: -19px; 
margin: 21px; 
float: left; 
border-top-left-radius: 5px; 
border-top-right-radius: 5px; 
} 
#imagesbutton { 
height: 80px; 
width: 199px; 
background-color: #0000FF; 
position: relative; 
top: -19px; 
margin: 21px; 
float: left; 
border-top-left-radius: 5px; 
border-top-right-radius: 5px; 
} 
#gamesbutton { 
height: 69px; 
width: 199px; 
background-color: #0000FF; 
position: relative; 
top: -61px; 
margin: 21px; 
float: left; 
border-bottom-left-radius: 5px; 
border-bottom-right-radius: 5px; 
} 
#sportbutton { 
height: 69px; 
width: 199px; 
background-color: #0000FF; 
position: relative; 
top: -61px; 
margin: 21px; 
float: left; 
border-bottom-left-radius: 5px; 
border-bottom-right-radius: 5px; 
} 
#contactusbutton { 
height: 69px; 
width: 199px; 
background-color: #0000FF; 
position: relative; 
top: -61px; 
margin: 21px; 
float: left; 
border-bottom-left-radius: 5px; 
border-bottom-right-radius: 5px; 
} 
#homebuttonlink { 
height: 30px; 
width: 150px; 
background-color: #FFFF00; 
position: relative; 
float: left; 
display: inline-block; 
margin-top: 10px; 
margin-bottom: 10px; 
margin-right: 10px; 
margin-left: 14px; 
padding: 10px; 
top: 5px; 
border-radius: 5px; 
overflow: hidden; 
text-overflow: ellipsis; 
} 
#videosbuttonlink { 
height: 30px; 
width: 150px; 
background-color: #FFFF00; 
position: relative; 
float: left; 
display: inline-block; 
margin-top: 10px; 
margin-bottom: 10px; 
margin-right: 10px; 
margin-left: 14px; 
padding: 10px; 
top: 5px; 
border-radius: 5px; 
overflow: hidden; 
text-overflow: ellipsis; 
} 
#imagesbuttonlink { 
height: 30px; 
width: 150px; 
background-color: #FFFF00; 
position: relative; 
float: left; 
display: inline-block; 
margin-top: 10px; 
margin-bottom: 10px; 
margin-right: 10px; 
margin-left: 14px; 
padding: 10px; 
top: 5px; 
border-radius: 5px; 
overflow: hidden; 
text-overflow: ellipsis; 
} 
#gamesbuttonlink { 
height: 30px; 
width: 150px; 
background-color: #FFFF00; 
position: relative; 
float: left; 
display: inline-block; 
margin-top: 10px; 
margin-bottom: 10px; 
margin-right: 10px; 
margin-left: 14px; 
padding: 10px; 
top: -6px; 
border-radius: 5px; 
overflow: hidden; 
text-overflow: ellipsis; 
} 
#sportbuttonlink { 
height: 30px; 
width: 150px; 
background-color: #FFFF00; 
position: relative; 
float: left; 
display: inline-block; 
margin-top: 10px; 
margin-bottom: 10px; 
margin-right: 10px; 
margin-left: 14px; 
padding: 10px; 
top: -6px; 
border-radius: 5px; 
line-height: -10px; 
overflow: hidden; 
text-overflow: ellipsis; 
} 
#contactusbuttonlink { 
height: 30px; 
width: 150px; 
background-color: #FFFF00; 
position: relative; 
float: left; 
display: inline-block; 
margin-top: 10px; 
margin-bottom: 10px; 
margin-right: 10px; 
margin-left: 14px; 
padding: 10px; 
top: -6px; 
border-radius: 5px; 
overflow: hidden; 
text-overflow: ellipsis; 
} 
#contactusbuttonlinkstyle { 
font-size: 17px; 
font-family: Verdana, Geneva, sans-serif; 
line-height: 10px 
} 
#sportbuttonlinkstyle { 
font-size: 30px; 
font-family: Verdana, Geneva, sans-serif; 
} 
#gamesbuttonlinkstyle { 
font-size: 30px; 
font-family: Verdana, Geneva, sans-serif; 
} 
#imagesbuttonlinkstyle { 
font-size: 17px; 
font-family: Verdana, Geneva, sans-serif; 
line-height: 10px; 
} 
#videosbuttonlinkstyle { 
font-size: 30px; 
font-family: Verdana, Geneva, sans-serif; 
} 
#homebuttonlinkstyle { 
font-size: 30px; 
font-family: Verdana, Geneva, sans-serif; 
} 
#aboutus { 
height: 375px; 
width: 400px; 
margin-top: 0px; 
margin-bottom: 0px; 
margin-right: auto; 
margin-left: auto; 
background-color: aqua; 
position: relative; 
border-radius: 10px; 
} 
#aboutustitle { 
height: 40px; 
width: 200px; 
background-color: red; 
position: relative; 
margin-left: 100px; 
top: 10px; 
border-radius: 20px; 
} 
#aboutustitlestyle { 
font-size: 20px; 
color: yellow; 
font-family: Verdana, Geneva, sans-serif; 
margin-left: 40px; 
} 
#aboutuscontent { 
word-wrap: break-word; 
margin-left: 20px; 
margin-right: 20px; 
} 
+0

У вас есть опечатка в стиле для панели инструментов: 'position: absoloute;' должно быть 'position: absolute;' – Pointy

ответ

2

Пожалуйста, обновите ниже класс. Он должен решить вашу проблему.

#aboutustitlestyle { 
    font-size: 20px; 
    color: yellow; 
    font-family: Verdana, Geneva, sans-serif; 
    margin: 5px 0 0 40px; 
    position: absolute; 
} 
Смежные вопросы