CODEWITHSUNDEEP
htmlcss
Dreams
Dreams

Reputation: 8506

how do i vertical the icon with text and make it linkable?

Here is my .html file

<body>
  <header>
    <a href="#"><img src="header_home.png" alt="logo" width="250"></a>
    <nav>
    <ul>
      <li><img src="header_manual.png" alt="logo" width="20">Manuals</li>
      <li><img src="header_news.png" alt="logo" width="20">News</li>
    </ul>
    </nav>
  </header>
</body>

Here is my css file:

html, body {
   height: 100%;
   margin: 0;
 }


header {
 background-color: black;
 width: 100%;
 height: 100px;
 color:red;
}

header a img {
 position: absolute;
 top: 20px;
 left: 5px;
}

header nav {
 width: 60%;
 height: 100px;
 border: red 1px solid;
 margin: 0 auto;
 text-align:center;
}

header nav ul {
  padding-left: 0;
}
header nav ul li {
 display:inline-block;
 height: 100px;
 width: 150px ;
}

Now, my each icon with text in nav tag are inline. how do i vertical the icon with text and make it linkable? What I want is the icon above on each text and in the middle of each block then make it linkable.

Upvotes: 1

Views: 57

Answers (3)

Dmitriy
Dmitriy

Reputation: 4501

use :before or :after

html, body {
    height: 100%;
    margin: 0;
}
header {
    background-color: black;
    width: 100%;
    height: 100px;
    color:red;
}
header > a > img {
    position: absolute;
    top: 20px;
    left: 5px;
}
header nav {
    width: 60%;
    height: 100px;
    border: red 1px solid;
    margin: 0 auto;
    text-align:center;
}
header nav ul {
    padding-left: 0;
}
header nav ul li {
    display:inline-block;
    vertical-align: top;
    height: 100px;
    width: 150px;
}
header nav ul li a {
    display: block;
    color: #fff;
    text-decoration: none;
    position: relative;
}
header nav ul li a:before {
    content:'';
    display: block;
    width: 16px;
    height: 16px;
    margin: 0 auto 5px auto;
    background: #f00;
}
header nav ul li:nth-child(1) a:before {
    background: #ccc url('header_manual.png') no-repeat 0 0;
}
header nav ul li:nth-child(2) a:before {
    background: #00f url('header_news.png') no-repeat 0 0;
}
header nav ul li a:hover {
    color: #f00;
}
header nav ul li a:hover:before {
    background: #f00;
}
<header> <a href="#"><img src="header_home.png" alt="logo" width="250" /></a>

    <nav>
        <ul>
            <li>
                <a href="#">Manuals</a>
            </li><li> 
                <a href="#">News</a>
            </li>
        </ul>
    </nav>
</header>

Upvotes: 0

Felix A J
Felix A J

Reputation: 6490

html, body {
   height: 100%;
   margin: 0;
 }

header {
 background-color: black;
 width: 100%;
 height: 100px;
 color:red;
}

header > a img {
 position: absolute;
 top: 20px;
 left: 5px;
}

header nav {
 width: 60%;
 height: 100px;
 border: red 1px solid;
 margin: 0 auto;
 text-align:center;
}

header nav ul {
  padding-left: 0;
margin: 0;
}
header nav ul li {
 float: left;
 height: 100px;
list-style: none;
 width: 150px ;
text-align: center;
}
nav li img{
display: block;
margin: 20px auto 0;
}
<header>
<a href="#"><img src="header_home.png" alt="logo" width="250"></a>
<nav>
<ul>
  <li><a href=""><img src="header_manual.png" alt="logo" width="20">Manuals</a></li>
  <li><a href=""><img src="header_news.png" alt="logo" width="20">News</a></li>
</ul>
</nav>
  </header>

Upvotes: 0

RafH
RafH

Reputation: 4544

Wrap icons in anchor tag to make them clickable.

<li><a href="#"><img src="header_manual.png" alt="logo" width="20">Manuals</a></li>

Modifify header a img declaration to header > a > img to exclude img in the nav section (only target the logo).

header > a > img {
 position: absolute;
 top: 20px;
 left: 5px;
}

Then center icons and text

header nav img {
    display:block;
    margin:0 auto;
}

Fiddle here.

Upvotes: 1

Related Questions