Question 43783 in Html Question posted in
Some basic documentation can be found here.

How do I have this text below the heading but on the same line? – Html

I want to have my subheading below the heading but next to the logo like in this pic (wireframe):

enter image description here

But it keeps ending up like this:

enter image description here

Here’s the code:

enter image description here

enter image description here

How can i fix this?

I have tried switching it from p to span and vice versa, using float left but that just throws off the whole thing. I’m a web newbie so any help is much appreciated!

Tags:

2

Answers


  1. 0

    I would wrap the headingtitle and the headingtagline in a separate <div> container. This container is next to the logo. But in the container, the elements are below each other. How you do that is your choice, i made an example with CSS Flexbox.

    Btw it would be a bit easier if you put the code as text in the question, so we can directly use it 😉

    <div class="redheading">
   <img class="headinglogo" src="tyvbubble.png" height=5% width=5%>
   <div id="wrapper">
      <span class="headingtitle">the young voice</span>
      <span class="headingtagline">a magazine for young people, by young people</span>
   </div>
</div>

    CSS:

    #wrapper {
   display: flex;
   flex-direction: column;
}

    Let me know if that worked or not.

    Login or Signup to reply.
  2. 0

    It’s like you mean:

    body {
  background-color: #ffffff;
  color: #38444d;
  font-family: league spartan, sans serif;
  max-width: 84%;
  margin: 0 auto;
  padding: 1em;
  padding-top: 0;
}

.redheading {
    display: flex;
    background-color: #c42218;
  font-family: league spartan, sans serif;
  padding: 1em;
}

.headinglogo{
  align-self: center;
  margin-right: 20px;
}

.headingtitle {
    color: #ffffff;
    font-weight: bold;
    font-size: 50px;
    text-shadow: 1px 1px black;
    vertical-align: top;
}

.headingtagline{
  color: #38444d;
  font-weight: normal;
  font-size: 12px;
  text-shadow: none;
}
    <!DOCTYPE html>
<html>
  <body>
    <div class="redheading">
      <div class="headinglogo">
            <img src="tyvbubble.png" height="50px" width="50px" />
      </div>
      <div>
            <span class="headingtitle">the young voice</span><br/>
        <span class="headingtagline"> a magazine for young people, by young people </span>
      </div>
      </div>
  </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search