5 replies [Last post]
sandraschmitt
sandraschmitt's picture
Offline
newbie
Last seen: 2 years 39 weeks ago
Timezone: GMT-6
Joined: 2010-05-08
Posts: 6
Points: 8

Hello!!

Hello!

This is part 2 of a previous post I just submitted. I thought it best to separate so one question would not hold up the other. Hope I made the right choice in doing that.

I am working on a thumbnail navigation called "comic-nav" which is located in my header. I have it looking the way I want it to BUT I don't want the text "comic" there on link or rollover. I was going to set to hidden but then it hides everything and I want the backgrounds there. Is there a way to style the text somewhere out of site? Ultimately this will be on wordpress so I am trying to control everything through the line item styles so when I bring into wordpress it matches up with my sub-menu there.

I am attaching a link and my code. Any help would be greatly appreciated. I thought this would be simple but of course it is not Smile Also open to any ideas if I am going about this the wrong way. Smile

Thank you so very much!!!
sandra Smile Big smile Big smile

Link:

HTML CODE:

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>HTML Template</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
 
<body>
<div id="page-wrap">
  <div id="header">
    <div id="logo">Logo Here!</div>
    <nav id="main-nav-wrap">
      <ul id="main-nav">
        <li class="about"><a href="#">about</a></li>
        <li class="comics"><a href="#">comics</a></li>
        <li class="news"><a href="#">news</a></li>
        <li class="videos"><a href="#">videos</a></li>
        <li class="resources"><a href="#">resources</a></li>
        <li class="blog"><a href="#">blog</a></li>
        <li class="shop"><a href="#">shop</a></li>
      </ul>
    </nav>
    <!--ends main-nav-wrap-->
 
    <nav id="comic-nav-wrap">
      <ul id="comic-nav">
        <li class="comic1"><a href="#">comic1</a></li>
        <li class="comic2"><a href="#">comic2</a></li>
        <li class="comic3"><a href="#">comic3</a></li>
        <li class="comic4"><a href="#">comic4</a></li>
        <li class="comic5"><a href="#">comic5</a></li>
        <li class="comic6"><a href="#">comic6</a></li>
        <li class="comic7"><a href="#">comic7</a></li>
        <li class="comic8"><a href="#">comic8</a></li>
        <li class="comic9"><a href="#">comic9</a></li>
        <li class="comic10"><a href="#">comic10</a></li>
        <li class="comic11"><a href="#">comic11</a></li>
        <li class="comic11"><a href="#">comic12</a></li>
      </ul>
    </nav>
    <!--ends comic-nav-wrap--> 
 
  </div>
  <!--  ends header-->
 
</div>
<!--ends page-wrap-->
 
 
</div><!--ends footer wrap-->
</body>
</html>

***************************************************
STYLE.CSS

* { margin: 0; padding: 0; }
html { background: #000d53; }
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: 1.6;
}

#page-wrap {
width: 1075px;
margin-top: 30px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
}

/************ HEADER ************/

#header {
height: 160px;
width: 1075px;
background-image: url(images/1header_back.png);
background-repeat: no-repeat;
position: relative;
margin: 50 10 0 100;
}

#logo {
width: 350px;
float: left;
margin-top: 30px;
margin-left: 30px;
position: relative;
}

/* MAIN-NAV IN HEADER */

#main-nav-wrap {
float: left;
padding-top: 30px;
position: relative;
}

#main-nav li {
display: block;
list-style-type: none;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
height: 20px;
float: left;
text-align:center;
padding: 10px 22px 10px 12px;
}

#main-nav li a{
color: #000;
text-decoration:none;
}

#main-nav li a:hover{
display:inline;
color: #FFF;
background:#FC0;
height: 30px;
padding: 7px 0 2px 0;
}

/* COMIC-NAV IN HEADER */

#comic-nav-wrap {
position: relative;
float: right;
margin-right: 25px;
margin-top: -6px;
background-image: url(images/comicNavBack.png);
height: 88px;
width: 960px;
background-repeat: no-repeat;
background-position: center center;
margin-left: 100px;
display: inline;
text-align: center;
}

#comic-nav li {
list-style-type: none;
font-family: Helvetica, Arial, sans-serif;
font-size: 10px;
text-transform: uppercase;
color: #000;
text-decoration: none;
background-image: url(images/1comicNav_bionicle.png);
background-repeat: no-repeat;
height: 42px;
width: 68px;
text-align: center;
vertical-align: bottom;
padding-top: 15px;
padding-right: 6px;
margin-top: 22px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
display: inline-block;
position: relative;
font-weight: bold;
}

#comic-nav li:nth-child(2) {
background-image: url(images/1comicNav_classics.png);
background-repeat: no-repeat;
}
#comic-nav li:nth-child(3) {
background-image: url(images/1comicNav_disneyfairies.png);
background-repeat: no-repeat;
}
#comic-nav li:nth-child(4) {
background-image: url(images/1comicNav_garfield.png);
background-repeat: no-repeat;
}
#comic-nav li:nth-child(5) {
background-image: url(images/1comicNav_stilton.png);
background-repeat: no-repeat;
}
#comic-nav li:nth-child(6) {
background-image: url(images/1comicNav_hb.png);
background-repeat: no-repeat;
}
#comic-nav li:nth-child(7) {
background-image: url(images/1comicNav_ninjago.png);
background-repeat: no-repeat;
}
#comic-nav li:nth-child(Cool {
background-image: url(images/1comicNav_nd.png);
background-repeat: no-repeat;
}
#comic-nav li:nth-child(9) {
background-image: url(images/1comicNav_slices.png);
background-repeat: no-repeat;
}
#comic-nav li:nth-child(10) {
background-image: url(images/1comicNav_smurfs.png);
background-repeat: no-repeat;
}
#comic-nav li:nth-child(11) {
background-image: url(images/1comicNav_monster.png);
background-repeat: no-repeat;
}
#comic-nav li:nth-child(12) {
background-image: url(images/1comicNav_ernest.png);
background-repeat: no-repeat;
}

#comic-nav li a{
list-style-type: none;
color: #000;
text-decoration: none;
background-image: url(images/1comicNav_garfied.png);
background-repeat: no-repeat;
}

#comic-nav li a:hover{
display: inline;
color:#FC0;
}

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 1 week 2 days ago
London
Joined: 2004-06-06
Posts: 15667
Points: 2805

Simple answer would be to add

Simple answer would be to add a span around the string 'comic' then either display:none or text-indent that span.

If this is WP then you should be using the wp_nav_menu() function to generate your site navigation and managing those nav items from the dashboard in which case it's a little more of a problem to achieve.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

sandraschmitt
sandraschmitt's picture
Offline
newbie
Last seen: 2 years 39 weeks ago
Timezone: GMT-6
Joined: 2010-05-08
Posts: 6
Points: 8

Thank you so much for your

Thank you so much for your reply! I was thinking of using a span tag but will the span tag hold when I move to Wordpress? I know the code will get switched up a bit. I figured I would at least getting it looking the way I want in regular HTML and CSS then tackle the Wordpress conversion Smile

IS it a true statement that the wordpress nav menu function will just use styles for the line item?

Thanks you again so much for your time.

Sandra Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 1 week 2 days ago
London
Joined: 2004-06-06
Posts: 15667
Points: 2805

You won't be able to add

You won't be able to add markup such as span tags to the nav menus the WP function will run a filter on the anchor string and strip markup, so you will likely have to hard code those links.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

sandraschmitt
sandraschmitt's picture
Offline
newbie
Last seen: 2 years 39 weeks ago
Timezone: GMT-6
Joined: 2010-05-08
Posts: 6
Points: 8

Thank you again for getting

Thank you again for getting back to me. I didn't think I would be able to hard code those items because I wanted a custom menu. But it turns out it doesn't have to a custom menu and I figured out how to add wordpress href links which I wasn't aware that was possible.
I feel like I am back on track!

Thanks again!
Sandra Smile

sandraschmitt
sandraschmitt's picture
Offline
newbie
Last seen: 2 years 39 weeks ago
Timezone: GMT-6
Joined: 2010-05-08
Posts: 6
Points: 8

Thank you again for getting

Thank you again for getting back to me. I didn't think I would be able to hard code those items because I wanted a custom menu. But it turns out it doesn't have to a custom menu and I figured out how to add wordpress href links which I wasn't aware that was possible.
I feel like I am back on track!

Thanks again!
Sandra Smile