CODEWITHSUNDEEP
htmlcss
JarFile
JarFile

Reputation: 318

HTML/CSS Css box messing up margin top

So I have this CSS box:

.navigation-div
{
    text-align:right;
    margin-top:14px;
    box-shadow:0px 0px 10px rgba(0,0,0,0.47);
    padding: 0;
    color:#E3E3E3;
    background-color: #333;
}

With an image and a piece of text inside of it

#mailtext
{
    margin-top:-10px;
    display:inline-block;
    font-size:20px;
    color:white;
    font-style:italic;
}
#mailpicture
{
    display:inline-block;
    margin-top:16px;
}

This is the HTML I have for it:

<div class="navigation-div">
    <nav class="navigation">
        <h1 id="mailtext">Mail Us</h1>
        <a href="mailto:[email protected]"><img id="mailpicture" src="images/gmail.png"></a>
    </nav>
</div>

Currently there is no styling for the class navigation. The Mail picture is in the correct position, but the text I want to go upwards. As you can see from the #mailtext styling I have margin-top:-10px; This does not move the text upwards.

How would I move this text upwards with or without using margin-top.

This question is like my previous question in a way, but now the text will not go to where I want it to (upwards). Using margin-left is bad, but when I did that I could move the margin top also. Since the navigation-div has a text align of right, this might be messing it up.

How would I keep the text in the same position with moving the margin top without using margin left. I would like to keep the text on the same line with the image, not above. The picture is in the right place, all i want to move is the text higher. I want the text to be parallel to the center of the image on the same line.

The previous question I have posted was about keeping all the elements on the same line, this one is about moving the margin-top.

Upvotes: 1

Views: 1026

Answers (4)

Marc Audet
Marc Audet

Reputation: 46785

I don't know how big your logo will be, but here is an approach that is relatively clean.

For the two inline-block elements, #mailtext and #mailpicture, set vertical-align: middle.

For #mailtext, zero-out the default margins from the h1 tag.

For #mailpicture, adjust the left and right margins as need to get horizontal white space suitable with your design. and then set the top and bottom margin accordingly.

The vertical-align property will keep the two elements centered with respect to each other.

However, if your image is such that the visual center of the image is not at the mid-height of the image, you can add position: relative to #mailtext and adjust the top or bottom offset (use one or the other).

If your image height is actually less than the height of the text, apply the position-relative adjustment to the image instead of the text.

.navigation-div {
  text-align: right;
  margin-top: 14px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.47);
  padding: 0;
  color: #E3E3E3;
  background-color: #333;
}
#mailtext {
  display: inline-block;
  vertical-align: middle;
  margin: 0; /* zero out h1 margins */
  font-size: 20px;
  color: white;
  font-style: italic;
}
#mailpicture {
  display: inline-block;
  margin: 10px; /*adjust as needed */
  vertical-align: middle;
}
.ex2 #mailtext {
  font-size: 2.5em;
  margin: 10px 0;
}
.tweak #mailpicture {
  position: relative;
  bottom: 5px; /* use top if you want to move the image downward */
}
<div class="navigation-div">
  <nav class="navigation">
    <h1 id="mailtext">Large Logo - Mail Us</h1>
    <a href="mailto:[email protected]">
      <img id="mailpicture" src="http://placehold.it/100x50">
    </a>
  </nav>
</div>

<div class="navigation-div ex2">
  <nav class="navigation">
    <h1 id="mailtext">Small Logo - Mail Us</h1>
    <a href="mailto:[email protected]">
      <img id="mailpicture" src="http://placehold.it/100x10">
    </a>
  </nav>
</div>

<div class="navigation-div ex2 tweak">
  <nav class="navigation">
    <h1 id="mailtext">Position Tweak - Mail Us</h1>
    <a href="mailto:[email protected]">
      <img id="mailpicture" src="http://placehold.it/100x10">
    </a>
  </nav>
</div>

Upvotes: 0

designarti
designarti

Reputation: 629

There are issues with inline-block elements, especially when one is a block element and the other is an inline element. What I'd do is set parent font-size to 0 and come back to the H1 element to set the desired font-size. Then, I'd set vertical alignment to middle.

Mention: setting an id to the image element doesn't work, IMHO, without working with the link that contains it. They're both inline elements and one has to include the other, acting like a block, right?

Check the code, its a bit simplified, but you will definitely work it out.

.navigation-div {
  background: #333;
  color: #fff;
  font-size: 0;
  text-align: right;
}
#mailtext {
  font-size: 20px;
  margin-right: 5px;
}
.navigation a,
#mailtext {
  display: inline-block;
  vertical-align: middle;
}
#mailpicture {
  display: block;
}
<div class="navigation-div">
    <nav class="navigation">
        <h1 id="mailtext">Mail Us</h1>
        <a href="mailto:[email protected]"><img id="mailpicture" src="images/gmail.png"></a>
    </nav>
</div>

Upvotes: 0

Amir
Amir

Reputation: 398

To align the text a little higher you need to replace margin-top with position: relative and top:-10px, like in the code snippet and fiddle.

For a more efficient solution i recommend using the CSS property vertical-align. In this case if the image(size) is changed, it will still align with the text.

JSFiddle

.navigation-div {
  text-align: right;
  margin-top: 14px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.47);
  padding: 0;
  color: #E3E3E3;
  background-color: #333;
}
#mailtext {
  position: relative;
  top: -10px;
  display: inline-block;
  font-size: 20px;
  color: white;
  font-style: italic;
}
#mailpicture {
  display: inline-block;
  margin-top: 16px;
}
<div class="navigation-div">
  <nav class="navigation">
    <h1 id="mailtext">Mail Us</h1>
    <a href="mailto:[email protected]">
      <img id="mailpicture" src="images/gmail.png">
    </a>
  </nav>
</div>

Upvotes: 2

Aramil Rey
Aramil Rey

Reputation: 3475

Edit:

.navigation {
    margin-top:14px;
    box-shadow:0px 0px 10px rgba(0, 0, 0, 0.47);
    padding: 0;
    color:#E3E3E3;
    background-color: #333;
    width: 100%;
    height: 100px;
}
.container {
    display: flex;
    align-items: center;
    justify-content: center;
    float: right;
    line-height: 0.5;
    text-align: center;
    margin-right: 20px;
}
#mailtext {
    align-self: center;
    font-size: 20px;
    color: white;
    font-style: italic;
    margin-right: 15px;
}
#mailpicture {
    align-self: center;
}
<nav class="navigation">
    <div class="container">
         <h1 id="mailtext">Mail Us</h1>
         <a href="mailto:[email protected]">
            <img id="mailpicture" src="images/gmail.png">
        </a>
    </div>
</nav>

JS Fiddle

Upvotes: 0

Related Questions