CODEWITHSUNDEEP
htmlcss
Recuvan
Recuvan

Reputation: 161

CSS - Positioning a block in the center when margin is not working

So I've been creating a layout for some anime-list website. It doesn't really allow anyone to edit the HTML, so I need to stick to using CSS only. The problem that I have is positioning the menu in the center horizontally and vertically up to some point. I have an idea positioning it vertically with em values, but horizontally it's still a mystery to me.

Here's what I've got: JSFiddle

Here's the website that I'm working on: Website (Note that it works correctly only in 1980x1020 resolution)

//EDIT - for some reason the margin property is not working at all, so setting the width/height to some values and then using a half of the margin propoerty is useless. I've tried editting the last question but I accidently deleted it while mindlessly 'accepting' the notifiers...

//FIX - Using the !important values to override some elements.

/*
MENU HOVER
*/

#mal_control_strip:hover {
  opacity: 1;
  transform: scale(1, 1);
}
#mal_control_strip {
  position: absolute;
  display: block;
  width: 150px !important;
  height: 190px;
  top: 10em;
  left: 10em!important;
  background: none !important;
  opacity: 1;
  transition: 0.5s;
  transform: scale(1.1, 1.1)
}
/*
MENU
*/

#mal_control_strip * {
  font-family: Bebas Neue !important;
  font-size: 17px !important;
  letter-spacing: 1px;
  font-weight: 500;
  text-align: center;
  background: #000000;
}
#mal_control_strip a,
#mal_control_strip a strong {
  color: #ffffff !important;
}
#mal_control_strip td {
  display: block;
  height: auto !important;
  padding: 0 !important;
  width: 150px;
  border-style: none;
}
#mal_cs_otherlinks {
  border-bottom-width: 3px !important;
}
#mal_control_strip td div {
  margin: 0 !important;
}
#mal_cs_otherlinks div:last-of-type,
#mal_cs_otherlinks div:last-of-type span,
#mal_cs_links div {
  font-size: 0 !important;
  text-decoration: none;
}
#mal_control_strip div a,
#mal_cs_otherlinks div:last-of-type a,
#mal_cs_links div a {
  display: block;
  font-weight: 500;
  text-decoration: none;
}
#mal_cs_otherlinks div:first-of-type strong {
  font-size: 0 !important;
}
#mal_cs_powered,
#mal_cs_pic img {
  display: none !important;
}
<body onload=" " class="">
  <table id="mal_control_strip" border="0" cellpadding="0" cellspacing="0">
    <tbody>
      <tr>
        <td id="mal_cs_listinfo">
          <div><strong><a href="/profile/Recuvan"><strong>Recuvan</strong>
            </a>
            </strong>
          </div>
          <div>
            <form action="http://myanimelist.net/logout.php" method="post">
              <a href="javascript:void(0);" onclick="$(this).parent().submit();">
    Logout
  </a>
            </form>
          </div>
        </td>
        <td id="mal_cs_links">
          <div><a href="/addtolist.php?hidenav=1" class="List_LightBox">Add to List</a>&nbsp;&nbsp;<a href="/">Home</a>
          </div>
          <div><a href="/animelist/Recuvan">Anime List</a>&nbsp;&nbsp;<a href="/mangalist/Recuvan">Manga List</a>
          </div>
        </td>
        <td id="mal_cs_otherlinks">
          <div><strong>You are viewing your anime list</strong>
          </div>
          <div><a href="/history/Recuvan">History</a>&nbsp;&nbsp;<a href="/forum/">Forum</a>&nbsp;&nbsp;<a href="/panel.php?go=export">Export</a>
          </div>

        </td>

        <td id="mal_cs_powered" align="right" valign="top">
          <a href="/">
            <img src="http://cdn.myanimelist.net/images/list-top-powered.gif">
          </a>
          <div id="search">
            <input id="searchBox" value="Search" type="textbox">
            <img src="http://cdn.myanimelist.net/images/magnify.gif" id="searchListButton">
            <input id="listUserId" value="4998632" type="hidden">
            <input id="listUserName" value="Recuvan" type="hidden">
            <input id="listType" value="anime" type="hidden">
          </div>
        </td>
      </tr>
    </tbody>
  </table>

Upvotes: 1

Views: 93

Answers (2)

Will
Will

Reputation: 5

To fix the margin issue:under #mal_control_stip

Remove

  • position: absolute;

Then Add

  • margin:auto;
  • margin-top:50%;
  • top: -95px;

Upvotes: 0

Pete
Pete

Reputation: 58422

On #mal_control_strip, if you change your left and top to 50%, you can add transform: translate(-50%, -50%);

/*
MENU HOVER
*/

#mal_control_strip:hover {
  opacity: 1;
  transform: scale(1, 1);
}
#mal_control_strip {
  position: absolute;
  display: block;
  width: 150px !important;
  height: 190px;
  top: 50%;
  left: 50%;
  background: none !important;
  opacity: 1;
  transition: 0.5s;
  transform: scale(1.1, 1.1);
  transform: translate(-50%, -50%);
}
/*
MENU
*/

#mal_control_strip * {
  font-family: Bebas Neue !important;
  font-size: 17px !important;
  letter-spacing: 1px;
  font-weight: 500;
  text-align: center;
  background: #000000;
}
#mal_control_strip a,
#mal_control_strip a strong {
  color: #ffffff !important;
}
#mal_control_strip td {
  display: block;
  height: auto !important;
  padding: 0 !important;
  width: 150px;
  border-style: none;
}
#mal_cs_otherlinks {
  border-bottom-width: 3px !important;
}
#mal_control_strip td div {
  margin: 0 !important;
}
#mal_cs_otherlinks div:last-of-type,
#mal_cs_otherlinks div:last-of-type span,
#mal_cs_links div {
  font-size: 0 !important;
  text-decoration: none;
}
#mal_control_strip div a,
#mal_cs_otherlinks div:last-of-type a,
#mal_cs_links div a {
  display: block;
  font-weight: 500;
  text-decoration: none;
}
#mal_cs_otherlinks div:first-of-type strong {
  font-size: 0 !important;
}
#mal_cs_powered,
#mal_cs_pic img {
  display: none !important;
}
<table id="mal_control_strip" border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td id="mal_cs_listinfo">
        <div><strong><a href="/profile/Recuvan"><strong>Recuvan</strong>
          </a>
          </strong>
        </div>
        <div>
          <form action="http://myanimelist.net/logout.php" method="post">
            <a href="javascript:void(0);" onclick="$(this).parent().submit();">
    Logout
  </a>
          </form>
        </div>
      </td>
      <td id="mal_cs_links">
        <div><a href="/addtolist.php?hidenav=1" class="List_LightBox">Add to List</a>&nbsp;&nbsp;<a href="/">Home</a>
        </div>
        <div><a href="/animelist/Recuvan">Anime List</a>&nbsp;&nbsp;<a href="/mangalist/Recuvan">Manga List</a>
        </div>
      </td>
      <td id="mal_cs_otherlinks">
        <div><strong>You are viewing your anime list</strong>
        </div>
        <div><a href="/history/Recuvan">History</a>&nbsp;&nbsp;<a href="/forum/">Forum</a>&nbsp;&nbsp;<a href="/panel.php?go=export">Export</a>
        </div>

      </td>

      <td id="mal_cs_powered" align="right" valign="top">
        <a href="/">
          <img src="http://cdn.myanimelist.net/images/list-top-powered.gif">
        </a>
        <div id="search">
          <input id="searchBox" value="Search" type="textbox">
          <img src="http://cdn.myanimelist.net/images/magnify.gif" id="searchListButton">
          <input id="listUserId" value="4998632" type="hidden">
          <input id="listUserName" value="Recuvan" type="hidden">
          <input id="listType" value="anime" type="hidden">
        </div>
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Related Questions