Reputation: 83

Logo won't move left or right inside header tag

I'm trying to put my logo in the center or my page (center of header & above menu nav) It moves away from the menu but doesn't move laterally left or right just stays in the same position no matter what.

I've tried everything searching google and no results show up.Tried making header relative and tried making menu relative. Here's my code.

body {
width: 800px;
margin: 100px auto 0 auto;
background: darkgrey;
font-family: arial;
display: block;
}

#header {
width: 800;
height: auto;
margin: 0;
background: transparent;
}

#h1.logo {
position: absolute;
right: 50px;
}

#tabs{
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#content
{
    background: #fff;
    padding: 2em;
    height: 520px;
    position: relative;
    z-index: 2;
    border-radius: 0 5px 5px 5px;
    box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}

#tab2 {
  position: relative;
}

#icons img {
  padding-right:5px;
  0% { /* space between content and footer*/
    position: absolute;
    top: 20;
    right: 50px;
  }

}
footer {
  display: inline-block;
        width:800px;
        text-align: left;
        margin-top: 250px;

}

footer ul {list-style-type: none;
text-align: center;
float: left;
}

footer li {display:inline;
}

footer a:link{
  text-decoration: none;
}

footer p {
 float:right;
}

table {border: solid darkgrey thin;
position: relative; 
left: -100px;
z-index: 2;

<body>

<header>
<h1 class="logo">
<img src="images/Logodraft.png" alt="Kieron's Logo" title="Kieron's Logo" />
</h1>
</header>

<!--navigation starts here-->

<!--An unordered list that holds the tab navigation items-->
<ul id="tabs">
<li><a href="index.html" title="tab1">Home</a></li>
<li><a href="about.html" title="tab2">About</a></li>
<li><a href="portfolio.html" title="tab3">Portfolio</a></li>
<li><a href="blog.html" title="tab4">Blog</a></li>
</ul>

<!--A wrapper for each tab content-->

<div id="content">
</div>
<!--end  content div-->

<footer> <!--footer starts here-->

  <div id="tab3">

 <table border="0" width=1024px height=0px>
  <tr>
    <td><a href="index.html"><img src="images/logoicon.png"/></a></td>
    <td><a href="index.html">Home | </a> <a href="about.html">About | </a> <a href="portfolio.html">Portfolio | </a> <a href="blog.html">Blog</a></td>
    <td align="right"><small>&copy;copyright 2016 Kieron Roberts</small></td>
  </tr>
</table>

  </div>    


</footer> <!--end of footer-->

</body>

Upvotes: 0

Answers (4)

Baezid Mostafa

Reputation: 2728

you css is not correct. We use # for ID which is an unique identifier for only one element and we use . for class . So you need to remove # before header and h1 tag. also you don't close the table css properly LiveOnFiddle

header {
width: 800;
height: auto;
margin: 0;
background: transparent;
}

h1.logo {
position: absolute;
right: 50px;
}

   body {

  margin: 0 ;
  background: darkgrey;
  font-family: arial;
}

header {
  width: 100%;
  height: 50px;

  background: transparent;
}

h1.logo {
text-align:center;
}
.img-responsive{
  display:block;
  margin:0 auto;
  width:100%;
  height:auto;
}
#tabs {
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#content {
  background: #fff;
  padding: 2em;
  height: 520px;
  position: relative;
  z-index: 2;
  border-radius: 0 5px 5px 5px;
  box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}

#tab2 {
  position: relative;
}


footer {
  display: inline-block;

  text-align: left;

}

footer ul {
  list-style-type: none;
  text-align: center;
  float: left;
}

footer li {
  display: inline;
}

footer a:link {
  text-decoration: none;
}

footer p {
  float: right;
}

table {
  border: solid darkgrey thin;
  position: relative;

  z-index: 2;
}

<header>
  <h1 class="logo">

<img class="img-responsive" src="images/Logodraft.png" alt="Kieron's Logo" title="Kieron's Logo" />
</h1>
</header>

<!--navigation starts here-->

<!--An unordered list that holds the tab navigation items-->
<ul id="tabs">
  <li><a href="index.html" title="tab1">Home</a></li>
  <li><a href="about.html" title="tab2">About</a></li>
  <li><a href="portfolio.html" title="tab3">Portfolio</a></li>
  <li><a href="blog.html" title="tab4">Blog</a></li>
</ul>

<!--A wrapper for each tab content-->

<div id="content">
</div>
<!--end  content div-->

<footer>
  <!--footer starts here-->

  <div id="tab3">

    <table border="0" width:100height=0px>
      <tr>
        <td>
          <a href="index.html"><img src="images/logoicon.png" /></a>
        </td>
        <td><a href="index.html">Home | </a> <a href="about.html">About | </a> <a href="portfolio.html">Portfolio | </a> <a href="blog.html">Blog</a></td>
        <td align="right"><small>&copy;copyright 2016 Kieron Roberts</small></td>
      </tr>
    </table>

  </div>


</footer>
<!--end of footer-->

Upvotes: 0

Cata John

Reputation: 1401

Just use text-align: center; on your h1, so that everything inside it will be centered.

Also your CSS has some erros, for example you have

#h1.logo {
  position: absolute;
  right: 50px;
}

but inside your HTML you have <h1 class="logo">, so if you want to target the img inside the h1 you should use:

.logo img {
  position: absolute;
  right: 50px;
}

What you are targeting in your CSS would be a element with a id name of "h1" and a class name of "logo".

Anyway this is the solution :

HTML:

<body>
    <header>
        <h1 class="logo">
            <img src="images/Logodraft.png" alt="Kieron's Logo" title="Kieron's Logo" />
        </h1>
    </header>

    <!--navigation starts here-->

    <!--An unordered list that holds the tab navigation items-->
    <ul id="tabs">
        <li><a href="index.html" title="tab1">Home</a></li>
        <li><a href="about.html" title="tab2">About</a></li>
        <li><a href="portfolio.html" title="tab3">Portfolio</a></li>
        <li><a href="blog.html" title="tab4">Blog</a></li>
    </ul>

    <!--A wrapper for each tab content-->

    <div id="content">
    </div>
    <!--end  content div-->

    <!--footer starts here-->
    <footer>
        <div id="tab3">

        <table border="0" width=1024px height=0px>
            <tr>
                <td>
                    <a href="index.html"><img src="images/logoicon.png" /></a>
                </td>
                <td>
                    <a href="index.html">Home | </a>
                    <a href="about.html">About | </a>
                    <a href="portfolio.html">Portfolio | </a>
                    <a href="blog.html">Blog</a>
                </td>
                <td align="right">
                    <small>&copy;copyright 2016 Kieron Roberts</small>
                </td>
            </tr>
        </table>

        </div>
    </footer>
    <!--end of footer-->

</body>

And CSS:

body {
  width: 800px;
  margin: 100px auto 0 auto;
  background: darkgrey;
  font-family: arial;
}

#header {
  width: 800;
  height: auto;
  margin: 0;
  background: transparent;
}

#tabs {
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#content {
  background: #fff;
  padding: 2em;
  height: 520px;
  position: relative;
  z-index: 2;
  border-radius: 0 5px 5px 5px;
  box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}

.logo{
  text-align: center;
}

#tab2 {
  position: relative;
}

#icons img {
  padding-right: 5px;
  position: absolute;
  top: 20;
  right: 50px;
}

footer {
  display: inline-block;
  width: 800px;
  text-align: left;
  margin-top: 250px;
}

footer ul {
  list-style-type: none;
  text-align: center;
  float: left;
}

footer li {
  display: inline;
}

footer a:link {
  text-decoration: none;
}

footer p {
  float: right;
}

table {
  border: solid darkgrey thin;
  position: relative;
  z-index: 2;
}

Upvotes: 0

Chiller

Reputation: 9738

You can resolve this by adding text-align:center; to the parent of the image( h1 with a class logo )

I noticed that you have a big gab in the right of your page

first : you should not use a width on body you have to create a container and give it a fixed width

second: you should not use position in all your page that will mess it up, you should only use it when needed

<header>
<h1 class="logo">
<img src="images/Logodraft.png" alt="Kieron's Logo" title="Kieron's Logo" />
</h1>
</header>

<!--navigation starts here-->

<!--An unordered list that holds the tab navigation items-->
<ul id="tabs">
<li><a href="index.html" title="tab1">Home</a></li>
<li><a href="about.html" title="tab2">About</a></li>
<li><a href="portfolio.html" title="tab3">Portfolio</a></li>
<li><a href="blog.html" title="tab4">Blog</a></li>
</ul>

<!--A wrapper for each tab content-->

<div id="content">
</div>
<!--end  content div-->

<footer> <!--footer starts here-->

  <div id="tab3">
  <!-- change width to 100% and remove height-->
 <table border="0" width="100%">
  <tr>
    <td><a href="index.html"><img src="images/logoicon.png"/></a></td>
    <td><a href="index.html">Home | </a> <a href="about.html">About | </a> <a href="portfolio.html">Portfolio | </a> <a href="blog.html">Blog</a></td>
    <td align="right"><small>&copy;copyright 2016 Kieron Roberts</small></td>
  </tr>
</table>

  </div>    


</footer> <!--end of footer-->

CSS:

body {
/*width: 800px;*/ /*deleted*/
/*margin: 100px auto 0 auto;*//*deleted*/
background: darkgrey;
font-family: arial;
display: block;
}

#header {
width: 800;
height: auto;
margin: 0;
background: transparent;
}
/*
#h1.logo {
position: absolute;
right: 50px;
}*//*deleted*/

#tabs{
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#content
{
    background: #fff;
    padding: 2em;
    height: 520px;
    position: relative;
    z-index: 2;
    border-radius: 0 5px 5px 5px;
    box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}

#tab2 {
  position: relative;
}

#icons img {
  padding-right:5px;
  0% { /* space between content and footer*/
    position: absolute;
    top: 20;
    right: 50px;
  }

}
footer {
  display: inline-block;
        width:800px;
        text-align: left;
       /* margin-top: 250px;*//*deleted*/

}

footer ul {list-style-type: none;
text-align: center;
float: left;
}

footer li {display:inline;
}

footer a:link{
  text-decoration: none;
}

footer p {
 float:right;
}

table {border: solid darkgrey thin;
position: relative; 
/*left: -100px;*//*deleted*/
z-index: 2;}


/*added*/
.logo{

  text-align: center;
}

This how it should look like

Upvotes: 2

violetthesun

Reputation: 51

make your header position relative, width 100%

make your logo position relative, give it a width smaller than your header, and make it display block, margin: 0 auto, position relative

Upvotes: 0

Logo won&#39;t move left or right inside header tag

Answers (4)

Related Questions

Logo won't move left or right inside header tag