CODEWITHSUNDEEP
htmlcss
user3600107
user3600107

Reputation: 346

Why does my Image push my text below my header?

Why does my Image push my text bellow my header I can't figure out why, but my text(that will later become menu drop downs) will not align with the image that is in the header with it. I tried making my header longer, which made it so the text was in the header but the text still wont align. How can I align the text with the image in the header and why was there a problem in the first place?

body {
  margin: 0px;
  padding: 0px;
}
#header {
  width: 100%;
  height: 50px;
  background-color: #6441a5;
}
#menu li {
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
  text-align: right;
  color: red;
}
#header img {
  display: block;
  margin: 0;
  text-align: center;
}
<!DOCTYPE HTML>

<title>Twitch Support</title>
<link rel="shortcut icon" href="http://www.twitch.tv/favicon.ico">
<link type="text/css" rel="stylesheet" href="style.css">

<body>
  <div id='header'>
    <img src="http://gamingshogun.com/wp-content/uploads/2013/05/TwitchTV-logo.png" alt="TwitchTV-logo" width="150.8px" height="50px">
    <div style="margin-left:100px;">
      <ul id='menu'>
        <li>
          <p>Get Help Now</p>
        </li>
        <li>
          <p>Viruses</p>
        </li>
        <li>
          <p>About</p>
        </li>
      </ul>
    </div>

  </div>



</body>

enter image description here

Upvotes: 0

Views: 2605

Answers (3)

Johannes
Johannes

Reputation: 67798

Your image (#header img) and the divthat comes after it are both block elements - by default block elements span the whole width, so they will be displayed below each other. Use display: inline-blockwith a width definition to place divs next to each other.

edit / addition after comments:

  • add #menu { margin: 0; } to get rid of the white space on top

  • take out the <p> tags in your <li> elements.

  • Use margin-top on `#menu li' to fine-tune the distance from the top border.

See also this codepen: http://codepen.io/anon/pen/gPWJYO

Upvotes: 2

tiny sunlight
tiny sunlight

Reputation: 6251

Use float:left to left them in one row.Use margin-right to set space between them.

body {
  margin: 0px;
  padding: 0px;
}
#menu ul{
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
  text-align: right;
  color: red;
  float: left;
}
.block-left{
    display:inline-block;
    float:left;
    height:50px;
}
#header {
  width: 100%;
  height: 50px;
  background-color: #6441a5;
}
#menu li {
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
  text-align: right;
  color: red;
  float: left;
}
#header img {
  display: block;
  margin: 0;
  text-align: center;
  float: left;
  margin-right:100px;
}
<!DOCTYPE HTML>

<title>Twitch Support</title>
<link rel="shortcut icon" href="http://www.twitch.tv/favicon.ico">
<link type="text/css" rel="stylesheet" href="style.css">

<body>
  <div id='header'>
    <img src="http://gamingshogun.com/wp-content/uploads/2013/05/TwitchTV-logo.png" alt="TwitchTV-logo" width="150.8px" height="50px">
    <div id='block-right'  style="">
      <ul id='menu'>
        <li>
          <p>Get Help Now</p>
        </li>
        <li>
          <p>Viruses</p>
        </li>
        <li>
          <p>About</p>
        </li>
      </ul>
    </div>

  </div>



</body>

Upvotes: 0

unilogue
unilogue

Reputation: 73

the text was showing up under the photo because the elements weren't floated.

add float: left to the image and float: right to the menu and they should align next to each other.

you could also use float: left on the menu instead if you don't want the items so far away from the image.

body {
  margin: 0px;
  padding: 0px;
}
#header {
  width: 100%;
  height: 50px;
  background-color: #6441a5;
}
#menu li {
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
  text-align: right;
  color: red;
  float: right;
}
#header img {
  display: block;
  margin: 0;
  text-align: center;
  float: left;
}
<!DOCTYPE HTML>

<title>Twitch Support</title>
<link rel="shortcut icon" href="http://www.twitch.tv/favicon.ico">
<link type="text/css" rel="stylesheet" href="style.css">

<body>
  <div id='header'>
    <img src="http://gamingshogun.com/wp-content/uploads/2013/05/TwitchTV-logo.png" alt="TwitchTV-logo" width="150.8px" height="50px">
    <div style="margin-left:100px;">
      <ul id='menu'>
        <li>
          <p>Get Help Now</p>
        </li>
        <li>
          <p>Viruses</p>
        </li>
        <li>
          <p>About</p>
        </li>
      </ul>
    </div>

  </div>



</body>

Upvotes: 1

Related Questions