2 replies [Last post]
SilverDrow
SilverDrow's picture
Offline
newbie
Last seen: 7 years 33 weeks ago
Timezone: GMT-4
Joined: 2013-04-09
Posts: 1
Points: 2

Ok, I'm trying to tinker with my navigation menu. I want something like this website:

http://aleksfaure.com/

He has a single image (logo-that is linked) centered with 2 menu links on either side. I've tried a couple of different things, including just using my logo as an image centered at the top, in between the menu. No dice. I have no idea how to get this to work. I guess the easiest method is to include the logo I want to use, within the actual ul and style that somehow in CSS. Trouble is, I've no idea how to accomplish that.

I can't get much past this where I have the menu links spaced out for room in the middle.

Here's the relevant HTML

<nav role="navigation">
 
<ul id="nav">
 
<li><a href="#" class="mainnav">Home</a></li>
 
<li><a href="#" class="mainnav">About Me</a></li>
 
<ul id="nav-right" style="float:right;">
 
<li><a href="#" class="mainnav">Portfolio</a></li>
 
<li><a href="#" class="mainnav">Contact</a></li> </ul>
 
</ul></nav>

And here is the relevant CSS

#header nav {
    position: relative;
    width: 700px;
    height: 163px;
    display: block;
    margin: 0 auto;
    text-align: center;
}
 
#header nav ul li {
        float: left; list-style: none;
}
 
ul#nav li a {
 
    display: block; 
    width: 100px; 
    height: 100px;
    padding: 50px 0 0 0; 
    margin: 0 10px 0 10px;
    font-family: 'MuseoSlab-500', Helvetica, sans-serif; 
    font-size: 16px;
    text-transform: uppercase;
    color: #000; 
    text-shadow: 0 2px 1px #bbbaba; 
    text-decoration: none;
 
 
}
    ul#nav li a.mainnav:hover {
 
        color: #13cad1; 
        text-shadow: 0 2px 1px #fff;
}

Basically, I only want to use a single image for just one linked-menu piece (centered) while the rest of the menu is merely text stylized with CSS.

Any thoughts? I've looked everywhere and haven't found an answer that is working for me.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 17 hours 16 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

Invalid markup

Your markup is invalid. There are two ways to make it correct, so I'll simply play with it until I see which is the more appropriate. Or, I'll do something else. Smile

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 17 hours 16 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

???

Why aren't you simply using the same markup as your model? It's simple, straight-forward and effective.

<ul>
  <li><a href="">link</a></li>
  <li><a href="">link</a></li>
  <li><a href=""><img src="some.gif"
                      alt="home again" /></a></li>
  <li><a href="">link</a></li>
  <li><a href="">link</a></li>
</ul>
============
ul {
  text-align: center;
  }
 
li {
  display: inline-block;
  }
 
ul a {
  display: block;
  line-height: xx /*match height of image*/
  width: yy /*appropriate value or none at all*/
  }

Or, based on your initial go:

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=utf-8"
          http-equiv="Content-Type" />
 
    <title>test doc</title>
 
    <!-- hack for bug in Web Developer addon for Firefox.  Used for
	 development and debugging only-->
    <link rel="stylesheet"
	  type="text/css" href="x" />
 
    <style type="text/css">
      /*<![CDATA[*/
 
ul {
  list-style: none;
  padding: 0;
  }
 
ul li:first-child {
  float: left;
  }
 
ul li:last-child {
  float: right;
  }
 
ul li li {
  display: inline-block;
  line-height: 150px;
  text-align: center;
  width: 150px;
  }
 
p {
  line-height: 9em;
  text-align: center;
  }
 
p img {
  border: 1px solid black;
  display: block;
  margin: 0 auto;
  }
 
/*]]>*/      
    </style>
  </head>
 
  <body>
    <ul>
      <li>
	<ul>
	  <li><a href="#">link</a></li>
	  <li><a href="#">link</a></li>
	</ul>
      </li>
 
      <li>
	<ul>
	  <li><a href="#">link</a></li>
	  <li><a href="#">link</a></li>
	</ul>
      </li>
    </ul>
 
    <p><img src="example.gif"
            alt="[describe logo]"
            height="150"
            width="150" />
    </p>
 
  </body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.