CODEWITHSUNDEEP
htmlcss
yukashima huksay
yukashima huksay

Reputation: 6238

Logo and text alignment in navigation bar

I want to have a navigation bar with a logo inside it but as I add the logo the line doesn't look fine!

The problem is when I add the pic its like the picture and the text doesnt stay in the same line! not that the line breaks but the text slides down a little while it shouldn't.

body {
  background-color: #C8F1BA;
  margin: 0px;
}
div#gnb_bg {
  margin: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  border-right: 10px solid black;
}
a.gnb {
  background-color: #99FF33;
  text-decoration: none;
  font-size: 26px;
  border-right: 1px solid #448811;
  padding-right: 2.5%;
  padding-left: 2.5%;
  padding-top: 14px;
  padding-bottom: 14px;
  margin: 0px;
}
img#gnb_logo {
  height: 30px;
  margin: 10px;
}
nav#gnb {
  text-align: center;
  background-color: #99FF33;
  height: 50px;
}
<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <nav id="gnb" role="navigation" aria-label="Global Navigation">
    <div id="gnb_bg">
      <a class="gnb" href="../feedbacks/feedbacks.html">feedbacks</a>
      <img id="gnb_logo" src="../images/logo.gif" />
    </div>
  </nav>
</body>

Upvotes: 7

Views: 5368

Answers (5)

user5221746
user5221746

Reputation: 1

<!DOCTYPE html>
<html>

<head>
<style>
body {
  background-color: #C8F1BA;
  margin: 0px;
}

a.gnb {
  text-decoration: none;
  font-size: 26px;
  border-right: 1px solid black;
  vertical-align: middle;
  padding-right: 1%;
  padding-left: .2%;
  padding-top: 5px;
  padding-bottom: 5px;
}
img#gnb_logo {
  height: 30px;
vertical-align: middle;
margin:5px 0px;

}
nav#gnb {
  text-align: center;
  background-color: #99FF33;
  height: 40px;
}
</style>
</head>

<body>
  <nav id="gnb" role="navigation" aria-label="Global Navigation">
    <div id="gnb_bg">
      <img id="gnb_logo" src="http://placehold.it/100x50" />
      <a class="gnb" href="../feedbacks/feedbacks.html">Website</a>
    </div>
  </nav>
</body>

Upvotes: 0

user4563161
user4563161

Reputation:

For starters we need to sort out your html.

Then look at your css your <a> if you're using padding etc you need to make it a block level element.

remove the height 50px from your nav that's not something you want to be giving height to. Instead use your padding of <a> to get the desired height it helps with responsive.

But because we want it to sit beside your image use inline-block

also do not use CSS to define an tag's height and width you should use the tags attributes so that rendering happens smoothly.

Also you need to use alt on images.

your image also needs the following css rule's:

img#gnb_logo {
vertical-align:middle;
margin:0 10px;
}

So that it sits the way you want it beside your link.

Also if that is your site's logo it should not be inside <nav>

If it's an icon relative to the link then instead of using <img> use background-image

body {
  background-color: #C8F1BA;
  margin: 0px;
}
ul,
li {
  list-style: none;
}
div#gnb_bg {
  margin: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  border-right: 10px solid black;
}
a.gnb {
  background-color: #99FF33;
  text-decoration: none;
  font-size: 26px;
  border-right: 1px solid #448811;
  padding-right: 2.5%;
  padding-left: 2.5%;
  padding-top: 14px;
  padding-bottom: 14px;
  margin: 0px;
  display: inline-block;
}
img#gnb_logo {
  vertical-align:middle;
  margin:0 10px;
}
nav#gnb {
  text-align: center;
  background-color: #99FF33;
}
<header>
  <nav id="gnb" role="navigation" aria-label="Global Navigation">
    <ul id="gnb_bg">
      <li>
        <a class="gnb" href="../feedbacks/feedbacks.html">feedbacks</a>
        <img id="gnb_logo" src="../images/logo.gif" height="30" alt="GNB Logo" />
      </li>
    </ul>
  </nav>
</header>

Upvotes: 3

Jerome Poslednik
Jerome Poslednik

Reputation: 520

First your a.gnb class should have a display-block if you want to render padding on an inline tag like a "a" tag. And your line-height must be of 22px if you want to make it fit in a 50px height container (14px + 14px padding top and bottom + 22px line-height equal 50px) Second, to make your image alignment just add vertical-align: middle to the img#gnb_logo rule:

body {
    background-color: #C8F1BA;
    margin: 0px;
    padding: 0px;
}
div#gnb_bg{
    margin:0px;
    padding-top:0px;
    padding-bottom:0px;
    border-right:10px solid black;
}
a.gnb{
    background-color: #99FF33;
    text-decoration: none;
    font-size:26px; 
    border-right:1px solid #448811;
    padding-right:2.5%;
    padding-left:2.5%;
    padding-top:14px;
    padding-bottom:14px;
    margin:0px;
    line-height: 22px;
    display: inline-block;
}
img#gnb_logo{
    height:30px;
    margin:10px;
    vertical-align: middle;
}
nav#gnb{
    text-align:center;
    background-color: #99FF33;
    height: 50px;
}

Upvotes: 1

Kadeem L
Kadeem L

Reputation: 863

You need to remove the margin.

img#gnb_logo{
height:30px;
margin:0px;
}

Check out the live demo.

body {
background-color: #C8F1BA;
margin: 0px;
}

#gnb{
    padding:10px;
}
div#gnb_bg{
margin:0px;
padding-top:0px;
padding-bottom:0px;
border-right:10px solid black;
}
a.gnb{
background-color: #99FF33;
text-decoration: none;
font-size:26px; 
border-right:1px solid #448811;
padding-right:2.5%;
padding-left:2.5%;
padding-top:14px;
padding-bottom:14px;
margin:0px;
}
img#gnb_logo{
height:30px;
}
nav#gnb{
text-align:center;
background-color: #99FF33;
height: 50px;
}
<nav id="gnb" role="navigation" aria-label="Global Navigation">
    <div id="gnb_bg">
    <a class="gnb" href="../feedbacks/feedbacks.html">feedbacks</a>
    <img id="gnb_logo" src="http://placehold.it/100x50"/>
    </div>
</nav>

Upvotes: 0

Marc Audet
Marc Audet

Reputation: 46785

If you add vertical-align: middle to both the a.gnb and img#gnb_logo, that will probably fix your problem.

Pay attention to the top/bottom padding on your link so that it does overflow the 50px height that you assigned to the parent container.

body {
  background-color: #C8F1BA;
  margin: 0px;
}
div#gnb_bg {
  margin: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  border-right: 10px solid black;
}
a.gnb {
  background-color: #99FF33;
  text-decoration: none;
  font-size: 26px;
  border-right: 1px solid #448811;
  padding-right: 2.5%;
  padding-left: 2.5%;
  padding-top: 10px;
  padding-bottom: 10px;
  margin: 0px;
  vertical-align: middle;
}
img#gnb_logo {
  height: 30px;
  margin: 10px;
  vertical-align: middle;
}
nav#gnb {
  text-align: center;
  background-color: #99FF33;
  height: 50px;
}
<nav id="gnb" role="navigation" aria-label="Global Navigation">
  <div id="gnb_bg">
    <a class="gnb" href="../feedbacks/feedbacks.html">feedbacks</a>
    <img id="gnb_logo" src="http://placehold.it/100x50" />
  </div>
</nav>

Upvotes: 3

Related Questions