Невозможно добавить текст в заголовок веб-сайта

Question

Я не могу добавить текст в правую часть заголовка. Я разместил несколько изображений небольшого размера в правой части заголовка и поместил немного вниз, и я хочу написать текст над ними, но я не могу писать.

Я хочу сделать вот так:

Я хочу сделать вот так проблема с заполнением или полем?

<body>    
<div class="container">
    <div class="header"><b style="font-size:20px; float: right">'RAASHFC' to 56161</b>
    <a href="#Raas"><img src="img/Raas.png" class="logo"></img></a>
    <a href="#insta"><img src="img/insta.png" class="social"></img></a>
    <a href="#tw"><img src="img/twitter.png" class="social"></img></a>
    <a href="#fb"><img src="img/facebook.png" class="social"></img></a>
</div>

.css источник

.social {
 float: right;
 width: 50px;
 height: 25px;
 margin-left: 10px;
 margin-top: 75px;
 text-decoration: none;
}

Пожалуйста, помогите мне.

css html

0

Akash279 4 Сен 2016 в 13:07

Answer 1

 .header > B
 {
    text-align: right;
    font-size: 20px;
 }
 .social {
    position: absolute; 
    right:0;
    top: 0;
    text-align: right;
    }

<div class="container">
        <div class="header">
          <a href="#Raas"><img src="img/Raas.png" class="logo"></img></a>
          <div class="social">
             <b>'RAASHFC' to 56161</b>
             <div>
             <a href="#insta"><img src="img/insta.png"></img></a>
             <a href="#tw"><img src="img/twitter.png"></img></a>
             <a href="#fb"><img src="img/facebook.png"></img></a>
             </div>
           </div>
        </div>
    </div>

Надеюсь, это поможет!

2

Pezhvak 4 Сен 2016 в 11:14

Answer 2

Я прикрепил три вида сниппетов, чтобы проверить, что вам нужно

.social {
width: 50px;
height: 25px;
text-decoration: none;
  }

#icons{
float:right;
 }

 <body>
<div class="container">
    <div class="header">
        <a href="#Raas"><img src="img/Raas.png" class="logo"></a>
       <b style="font-size:20px; float: right">'RAASHFC' to 56161</b>
       </div>
      <div id="icons">
      <a href="#insta"><img src="img/insta.png" class="social"></a>
      <a href="#tw"><img src="img/twitter.png" class="social"></a>
      <a href="#fb"><img src="img/facebook.png" class="social"></a>
        </div>
  </div>

    .social {
    width: 50px;
    height: 50px;
    text-decoration: none;
      }
    #icons{
         float:right;
     }
#insta,#fb,#twit{
display:inline-block;
}
label{
font-weight:bold;
}

     <body>
    <div class="container">
        <div class="header">
            <a href="#Raas"><img src="img/Raas.png" class="logo"style="float: left"></a>
           <b style="font-size:20px; float: right">'RAASHFC' to 56161</b>
           </div>
      <br/>
     
               
      <br/>
      <div id="icons">
          <div id="insta">
               <label>Instagram</label><br/>
                <a href="#insta"><img src="https://5a5a57ff32a328601212-ee0df397c56b146e91fe14be42fa361d.ssl.cf1.rackcdn.com/icon/instagram_logos_glyph/03H5cHNMt-Jni4pe9u+7/glyph-logo_May2016_200.png" class="social"></a>
                    </div>
        <div id="fb">
               <label>Facebook</label><br/>
                <a href="#insta"><img src="https://cdn3.iconfinder.com/data/icons/inside/PNG/256x256/icontexto-inside-facebook.png" class="social"></a>
                    </div>
        <div id="twit">
               <label>Twitter</label><br/>
                <a href="#insta"><img src="http://vignette4.wikia.nocookie.net/simpsons/images/1/11/Twitter_bird_icon.png/revision/latest?cb=20111228065136" class="social"></a>
                    </div>
        </div>
      </div>

.social {
    width: 50px;
    height: 50px;
    text-decoration: none;
      }
    #icons{
         float:right;
      margin-right:30%;
     }
#insta,#fb,#twit{
display:inline-block;
}
label{
font-weight:bold;
}

<body>
    <div class="container">
        <div class="header">
            <a href="#Raas"><img src="img/Raas.png" class="logo"style="float: left"></a>
           <b style="font-size:20px; float: right">'RAASHFC' to 56161</b>
           </div>
      <br/>
     
               
      <br/>
      <div id="icons">
          <div id="insta">
               <label>Instagram</label><br/>
                <a href="#insta"><img src="https://5a5a57ff32a328601212-ee0df397c56b146e91fe14be42fa361d.ssl.cf1.rackcdn.com/icon/instagram_logos_glyph/03H5cHNMt-Jni4pe9u+7/glyph-logo_May2016_200.png" class="social"></a>
                    </div>
        <div id="fb">
               <label>Facebook</label><br/>
                <a href="#insta"><img src="https://cdn3.iconfinder.com/data/icons/inside/PNG/256x256/icontexto-inside-facebook.png" class="social"></a>
                    </div>
        <div id="twit">
               <label>Twitter</label><br/>
                <a href="#insta"><img src="http://vignette4.wikia.nocookie.net/simpsons/images/1/11/Twitter_bird_icon.png/revision/latest?cb=20111228065136" class="social"></a>
                    </div>
        </div>
      </div>

1

Gowtham 4 Сен 2016 в 13:55

Answer 3

Вы устанавливаете свои изображения как float: right, но не содержащий их элемент (тег привязки). Попробуйте вместо этого переместить свой «социальный» класс в теги привязки (или, еще лучше, закрепите содержащий элемент для всех этих привязок и добавьте его к нему).

1

Nimmo 4 Сен 2016 в 10:43

Невозможно добавить текст в заголовок веб-сайта

3 ответа

Похожие вопросы

Новые вопросы

css