WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > Need some expert help...

Reply
  Thread Tools Display Modes
Old 22nd December 10, 04:20 AM   #1
zeev
WLC Member
 
Join Date: Dec 2010
Posts: 2
Default Need some expert help...

Hi! I'm trying to style a menu generated by my CMS ... right now it looks like this:


What I'd like is for the bracket.png to NOT go beyond the text, as it does above 'direct'.

And to be able to have the bracket.png width scale based on the height, rather than a fixed 40px as it is now.

Maybe there's a better way to do the bracket?

Thanks!

Here's the CSS:
Code:
*{
  text-decoration: none; 
  font-family: 'Arvo', serif; 
  margin: 0;
  padding: 0; 
}

ul,li { 
  list-style-type: none; 
  line-height: 24px;
  vertical-align: middle; 
}

a {
  color: #aaa;
  font-size: 18px;
  text-transform: lowercase;
}

a:hover {
  color: black; 
}

.active > a,
.active {
  color: black; 
  font-size: 28px;
}

ul {
  display: inline-block;
  background: url(bracket.png) no-repeat;
  background-size: 40px 100% ;
  padding-left: 40px;
  margin-bottom: 10px;
}
And the HTML:
Code:
<div id="mainmenu" class="menu">
  <span class="active">Ze'ev can</span> 
  <ul>
    <li>
      <a href="director/" title="Direct">Direct</a>
      <ul>
        <li class="first"><a href="director/feature" title="Feature">Features</a></li>
        <li><a href="director/documentary" title="Documentary">Documentaries</a></li>
        <li><a href="director/commercial" title="Commercial">Commercials</a></li>
        <li class="last"><a href="director/109" title="Music Video">Music Videos</a></li>
      </ul>
    </li>
    <li class="active">
      <a href="editor/" title="Editor">Edit</a>
      <ul>
        <li class="first active"><a href="editor/trailers" title="Trailers">Trailers</a></li>
        <li><a href="editor/documentaries" title="Documentaries">Documentaries</a></li>
        <li class="last"><a href="editor/musicvideos" title="Music Videos">Music Videos</a></li>
       </ul>
    </li>
    <li class="last"><a href="motionographer/" title="Motionographer">design motion</a></li>
  </ul>
</div>

Last edited by zeev; 22nd December 10 at 04:23 AM. Reason: cleanup
zeev is offline   Reply With Quote
Old 22nd December 10, 03:07 PM   #2
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Need some expert help...

You would have to use FOUR images.

top curl, bottom curl & centre, the have the joining line as a background to the parent container.
chrishirst is offline   Reply With Quote
Old 22nd December 10, 06:55 PM   #3
zeev
WLC Member
 
Join Date: Dec 2010
Posts: 2
Default Re: Need some expert help...

OK, I will try that. But is there any way to get the height of that parent container to not extend beyond the top and bottom text? I.e., the top of the bracket should reach "direct" but not go above ...
zeev is offline   Reply With Quote
Old 23rd December 10, 09:55 AM   #4
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Need some expert help...

If there is no fixed height, elements will expand with their contents.

the top curl would be first item or simply an empty element at the top, same with the bottom curl as the last.
The only complication (that I can see) would be the centre, and how that is done will depend on how the menu is constructed (manually or by server code).
chrishirst is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 04:06 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.