0

I am trying to create the following design

enter image description here

Where the left side is an image followed by a tag with words.

on the right are the menu options which should look like they are clickable. The slashes that separate them should never move change color etc. However "About" "Contact" and "The Future" will eventually look different when hovered over and will take you to different pages on the site.

So when I attempted to create this I made the following HTML and CSS (make sure the window is wide when you run it)

.modernShadow {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.fittingObject {
    max-width: 100%;
    max-height: 100%;
}

#topdiv {
    position: fixed;
    z-index: 2;
    background-color: #4FBEA9;
    width: 100%;
    height: 44pt;
    padding-top: 3pt;
    padding-bottom: 3pt;
    padding-left: 3pt;
    padding-right: 3pt;
}

#topdiv * {
    display: inline;
    vertical-align: middle;
}

.title {}

.titleLogo {}

.titleHere {
    color: white;
}

.rightList {
  float:right;
  vertical-align: middle;
}
<header>
    <!-- Displays in tab bar -->
    <title>Logo Here</title>

    <div id="topdiv" class="modernShadow">
        <img src="https://cdn1.iconfinder.com/data/icons/computer-system-files-essential-glyph/48/Sed-40-512.png" class="fittingObject" />
        <h1 class="title">
            <h1 class="titleLogo">Logo</h1>
            <h1 class="titleHere">Here</h1>
        </h1>
        <nav class="rightList">
            <ul>About</ul>
            /
            <ul>Contact</ul>
            /
            <ul>The Future</ul>
        </nav>
    </div>
</header>

And the result is this

enter image description here

And I can't explain why because I don't understand what is happening to make it this way.

  1. Why are components under float:right not vertically aligned like everything else? I believe #topdiv * gives every subcomponent the style vertical-align: center so why isn't that coming into play?
  2. Where is the spacing between the words and the "/"s coming from?
  3. I am not sure it isn't just a fluke that "Logo Here" is appearing vertically centered... Maybe that is just the font size? But that is set by the .fittingObject css. (the title logo should be as big as it can be)

The end goal is essentially the picture above. The font size of the right items is variable and the text should just always be vertically centered inside of the containing div.

J.Doe
  • 1,502
  • 13
  • 47

2 Answers2

1

Answers:

  1. Float doesn't work with vertical align, read more about it here; CSS Vertical align does not work with float
  2. UL's have the property padding-inline-start which has a default of 40px and is pushing content to the right.
  3. Max width and Max height properties only specify the limit of a certain element, it doesn't indicate their actual width and height values.

I modified your html to include wrapper divs; classes with left and right. In the right div I placed your rightList which has line-height css property and is an alternative to vertical-align:middle.

.modernShadow {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.fittingObject {
  max-width: 100%;
  max-height: 100%;
}

#topdiv {
  position: fixed;
  z-index: 2;
  background-color: #4FBEA9;
  width: 100%;
  height: 44pt;
  padding-top: 3pt;
  padding-bottom: 3pt;
  padding-left: 3pt;
  padding-right: 3pt;
}

#topdiv * {
  display: inline;
  vertical-align: middle;
}

.title {}

.titleLogo {}

.titleHere {
  color: white;
}

.left,
.right {
  width: 49%;
  display: inline-block;
}

.rightList {
  width:230px;
  float: right;
  line-height: 60px;
}

.rightList ul {
  padding-inline-start: 0px;
}
<header>
  <!-- Displays in tab bar -->
  <title>Logo Here</title>

  <div id="topdiv" class="modernShadow">

    <div class="left">
      <img src="https://cdn1.iconfinder.com/data/icons/computer-system-files-essential-glyph/48/Sed-40-512.png" class="fittingObject" />
      <h1 class="title">
        <h1 class="titleLogo">Logo</h1>
        <h1 class="titleHere">Here</h1>
      </h1>
    </div>

    <div class="right">
      <nav class="rightList">
        <ul>About</ul>
        /
        <ul>Contact</ul>
        /
        <ul>The Future</ul>
      </nav>
    </div>
  </div>
</header>
Jerdine Sabio
  • 5,688
  • 2
  • 11
  • 23
1

do you have any particular reason to use <ul> for all the navs?

if you use

<ul> <li>About</li> / <li>Contact</li> / <li>The Future</li> </ul>

it will generate the display as you wanted.

the <ul> has default user agent stylesheet.

and for the vertically centered text, if you already set the height for the blocks, you can always use the same statement for line-height (in this case is 44pt) to make it vertically centered.

liburanjogja
  • 11
  • 2