CODEWITHSUNDEEP
javascripthtmlcss
Tristan Schlarman
Tristan Schlarman

Reputation: 117

How do I set a Fixed Height and Width to a div

I have looked at a lot of questions that have already been asked and can't find and answer that works for me. I am trying to make a logo that has an ampersand in the middle. The Ampersand is supposed to change font familys every few seconds which works. Only issue is that now when it changes font it messes up the who page.

https://codepen.io/anon/pen/BVddWV

Main issues are coming from line 21 in the CSS

.ampersand{
  display:inline;
  width:35px;
  max-width:35px;
  height:79px;
  max-height: 79px;
  font-family:"Exo", sans-serif;
}

Any ideas?

Upvotes: 3

Views: 2920

Answers (2)

Nandita Sharma
Nandita Sharma

Reputation: 13417

Added display: flex on the <b> tag and removed ampersand styles and made it a span instead of a div and added line-height: 1 to it.

.ampersand {
  line-height: 1;
  display: inline-block;
  width: 60px;
  transition: all 1s;
}

<b display: flex;>Flo<span class="ampersand">&</span>Behold</b>


$(document).ready(function() {
  var fonts = ['Dosis', 'Exo', 'Gloria Hallelujah', 'PT Sans', 'PT Serif', 'Yaanone Kaffeesatz'];
  var counter = 0;
  var inst = setInterval(change, 2000);

  function change() {
    if (counter > fonts.length) {
      counter = 0;
    }
    font_selection = fonts[counter];
    $('.ampersand').css("font-family", font_selection);
    counter++;
  }
});
@import url('https://fonts.googleapis.com/css?family=Quicksand');
@import url('https://fonts.googleapis.com/css?family=Molengo');
@import url('https://fonts.googleapis.com/css?family=Dosis|Exo|Gloria+Hallelujah|PT+Sans|PT+Serif|Yanone+Kaffeesatz');
* {
  font-family: "Gill Sans", sans-serif;
  margin: 0px;
  padding: 0px;
}

body {
  background-color: #f5f6fa;
}

#header {
  width: 100%;
  padding: 4% 0px 20px 0px;
}

.logo_text {
  font-family: "Molengo", sans-serif;
  font-size: 70px;
  color: #333;
}

.ampersand {
  line-height: 1;
  display: inline-block;
  width: 60px;
  transition: all 1s;
}

.nav {
  width: 100%;
  padding: 25px 0px 25px 0px;
}

.nav>ul {
  padding-top: 15px;
}

.nav>ul>a {
  text-decoration: none;
  color: #333;
}

.nav>ul>a>li {
  color: #333;
  font-size: 25px;
  padding: 20px 30px 20px 30px;
  display: inline;
  transition: border 0.1s linear;
  border: 3px solid #f5f6fa;
}

.nav>ul>a>li:hover {
  border: 3px solid #333;
}

#body {
  padding-top: 35px;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="wrapper" align="center">

  <div id="header">
    <div class="logo">
      <span class="logo_text"><b display: flex;>Flo<span class="ampersand">&</span>Behold</b>
      </span>
    </div>
    <div class="nav">
      <ul>
        <a href="#">
          <li>Home</li>
        </a>
        <a href="#">
          <li>About</li>
        </a>
        <a href="#">
          <li>Music</li>
        </a>
        <a href="#">
          <li>Media</li>
        </a>
        <a href="#">
          <li>Contact</li>
        </a>
      </ul>
    </div>
  </div>
  <div id="body"></div>
</div>

Upvotes: 5

Andrew Ymaz
Andrew Ymaz

Reputation: 2213

You are not able to set fixed hight for inline elements.

And you need to switch to display:inline-block or display:block to transform your elements into block elements.

Also please note, that some elements like <span> or <i> are inline by default, and some like <div> and <p> are block, but you are still able override that behavior (default) via CSS display rule.

In your case (I assume you would like to prevent jumping of your logo text, when ampersand changes font), I would suggest two things:

  1. set fixed height to the .logo_text, you could add display:block and max-height: 84px;
  2. set ampersand as span not as div to make your HTML markup more semantically relevant;

Upvotes: 1

Related Questions