Search code examples
htmlcsslayoutrule

What's the best way of laying this out? Horizontal Rule?

I am trying to align a horizontal rule with the white line in my menu. And I want that alignment to stay when viewed on different screens. What's my best option for doing that? Image of what it needs to look like:

Screenshot

* {
  margin: 0;
}
@font-face {
  font-family: jaapokkisubtract;
  src: url('jaapokkisubtract.ttf');
}
body {
  background-color: #ca3600;
}
#head {
  height: 65px;
  border-bottom: 3px solid white;
  float: right;
  width: 51%;
}
h1 {
  color: white;
  margin: 10px 0 0 10px;
  font-family: jaapokkisubtract;
  font-size: 50px;
  float: left;
}
#work_btn {
  display: block;
  width: 96px;
  height: 68px;
  background: url(http://i.imgur.com/7m1Eh9j.gif) no-repeat 0 0;
  overflow: hidden;
  text-indent: -9999px;
  float: right;
}
#work_btn:hover {
  background-position: 0 -68px;
}
#resume_btn {
  display: block;
  width: 125px;
  height: 68px;
  background: url(http://i.imgur.com/x2eaW4T.gif) no-repeat 0 0;
  overflow: hidden;
  text-indent: -9999px;
  float: right
}
#resume_btn:hover {
  background-position: 0 -68px;
}
 <h1>Alexander</h1>
<div id="menu">
  <a id="resume_btn" href="resume.html" title="Resume">Resume</a>
  <a id="work_btn" href="index.html" title="Work">Work</a>
  <div id="head"></div>
</div>

Solution

  • You can achieve this by modifying slightly the CSS and HTML code, and using translation to move the menu items to the center of the screen.

    To do this you need to:

    • Wrap everything in div with the border-bottom (e.g.: #head)
    • Float the page title (h1) to the left (although maybe it would be better to change its position to absolute or it may affect the menu links)
    • Wrap all the navigation elements in a div (e.g.: #menu) with absolute position positioned in the center of the #head (left:50%)

    • Transform the #menu div to translate it 50% of its width to the left. This could be achieved by adding this to its style:

      transform:translate(-50%, 0%)

    You can see a demo working here: http://jsfiddle.net/o4ff4thc/ or below:

    * {
    margin: 0;
}
@font-face {
    font-family: jaapokkisubtract;
    src: url('jaapokkisubtract.ttf');
}
body {
    background-color: #ca3600;
}
#head {
    height: 65px;
    border-bottom: 3px solid white;
}
h1 {
    color: white;
    margin: 10px 0 0 10px;
    font-family: jaapokkisubtract;
    font-size: 50px;
    float: left;
}
#work_btn {
    display: inline-block;
    width: 96px;
    height: 68px;
    background: url(http://i.imgur.com/7m1Eh9j.gif) no-repeat 0 0;
    overflow: hidden;
    text-indent: -9999px;
}
#work_btn:hover {
    background-position: 0 -68px;
}
#resume_btn {
    display:inline-block;
    width: 125px;
    height: 68px;
    background: url(http://i.imgur.com/x2eaW4T.gif) no-repeat 0 0;
    overflow: hidden;
    text-indent: -9999px;
}
#resume_btn:hover {
    background-position: 0 -68px;
}

#menu {
    position:absolute;
    left:50%;
    transform:translate(-50%,0%);
    height:20px;
    width:245px;
}
    <div id="head">
     <h1>Alexander</h1>

    <div id="menu"> 
        <a id="resume_btn" href="resume.html" title="Resume">Resume</a>
        <a id="work_btn" href="index.html" title="Work">Work</a>
    </div>
</div>