Clever Geek Handbook

CSS flag icon in header

I am working on two header icons as shown in this picture:

enter image description here

I believe some of the html is fine, but I can't seem to get them where I want with CSS.

   <header>

        <div class="title">
           <h1>Fony贸di 脕kos <span></span> pszichol贸gus, relax谩ci贸tr茅ner, szimb贸lumterapeuta</h1>
        </div>
        <img src="img/Az_elet_faja.jpg" width="640" height="250" alt="Az 茅let f谩ja">
        <div id="lang">
        <a href="../index.html"><img src="img/HUN.png" alt="Kattintson ide a magyar v谩ltozat茅rt" width="25" height="25"></a>
        <a href="../angol/index.html"><img src="img/GB.png" alt="Please click here for the english version" width="25" height="25"></a>
        </div>

    </header>
+3


source to share


4 answers


Maybe this will help you:



header {
  position: relative;
  display: inline-block;
}
header h1 {
  position: absolute;
  top: 25px;
  padding: 10px;
  left: -10px;
  right: -10px;
  border: 1px solid gold;
  background: black;
  text-align: center;
  font: 12px verdana;
  color: gold;
}
.lang {
  position: absolute;
  top: 40px;
  right: 15px;
}
      

        
        
        
      

    
<header>
  <h1>Fony贸di 脕kos <span></span> pszichol贸gus, relax谩ci贸tr茅ner, szimb贸lumterapeuta</h1>
  <div class="lang">
    <a href="../index.html">
      <img src="http://placehold.it/25x25" alt="Kattintson ide a magyar v谩ltozat茅rt" width="25" height="25" />
    </a>
    <a href="../angol/index.html">
      <img src="http://placehold.it/25x25" alt="Please click here for the english version" width="25" height="25" />
    </a>
  </div>
  <img src="http://placehold.it/640x250" width="640" height="250" alt="Az 茅let f谩ja" />
</header>
Run codeHide result


+1


source


Please review my code and then make changes according to your needs.

<div class="title" style="float:left;background:#F00;">
    <div style="float:left;">
          <h1>Fony贸di 脕kos <span></span> pszichol贸gus, relax谩ci贸tr茅ner, szimb贸lumterapeuta</h1>
     </div>

     <div id="lang" style="float:left;">
        <a href="../index.html" ><img src="img/HUN.png" alt="Kattintson ide a magyar v谩ltozat茅rt" width="25" height="25"></a>
        <a href="../angol/index.html"><img src="img/GB.png" alt="Please click here for the english version" width="25" height="25"></a>
     </div>
<div style="clear:both;"></div>
</div>


you need to use the main image as background and then put h1 and both img pic in 2 divs with float property so they can be on the same line.

Sorry for using color, but you can use a background image. Let me know if you have any problems. Thanks you

0


source


You need to make the two divs float in order to display them side by side.

<div class="title">
<div id="lang">

Otherwise, they will display one below the other, since they div

are a block element.

0


source


You can do this.

#lang a{
    display: inline-block;
    vertical-align: middle;
    width: 25px;
    height: 25px;
}
#lang a.hun{
    background: url(http://placehold.it/25x25) no-repeat;
}
#lang a.gb{
    background: url(http://placehold.it/25x25) no-repeat;
}
      

        
        
        
      

    
  <header>

        <div class="title">
           <h1>Fony贸di 脕kos <span></span> pszichol贸gus, relax谩ci贸tr茅ner, szimb贸lumterapeuta</h1>
        </div>
        <div id="lang">
        <a href="../index.html" class="hun"></a>
        <a href="../angol/index.html" class="gb"></a>
        </div>
    </header>
Run codeHide result


0


source






More articles:


All Articles