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

Question

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.

Answer 1

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 .

Answer 2

 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>

Answer 3

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>

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

Question

3 answers

solution1
1 ACCPTED 2015-06-17 08:19:24

solution2
0 2015-06-17 08:29:40

solution3
0 2015-06-17 08:33:22

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

Question

3 answers

solution1 1 ACCPTED 2015-06-17 08:19:24

solution2 0 2015-06-17 08:29:40

solution3 0 2015-06-17 08:33:22

solution1
1 ACCPTED 2015-06-17 08:19:24

solution2
0 2015-06-17 08:29:40

solution3
0 2015-06-17 08:33:22