6 replies [Last post]
latempest
latempest's picture
Offline
Regular
UK
Last seen: 7 years 19 weeks ago
UK
Timezone: GMT+1
Joined: 2012-08-06
Posts: 12
Points: 22

I need help!

<ul class="nav menu">
	<li class="item-111 parent"><a class=" parenttitle" href="/index.php/landscape-buildings"><span class="image-title">Landscape Buildings</span><img src="/images/landscape_buildings.jpg" alt="Landscape Buildings"></a></li>

I need to target the first word 'Landscape' and set its font size to be smaller than that of 'Buildings'.

I've tried using the sudo :first-word on the

  • tag but to no avail.
  • Anyone have any ideas?

    Thanks

    Lee

    gary.turner
    gary.turner's picture
    Offline
    Moderator
    Dallas
    Last seen: 38 weeks 5 days ago
    Dallas
    Timezone: GMT-6
    Joined: 2004-06-25
    Posts: 9776
    Points: 3858

    Show us

    Your exact coding can be critical. Post the exact css you have.

    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.

    latempest
    latempest's picture
    Offline
    Regular
    UK
    Last seen: 7 years 19 weeks ago
    UK
    Timezone: GMT+1
    Joined: 2012-08-06
    Posts: 12
    Points: 22

    This is the code I have for

    This is the code I have for the menu:

    <div class="portfoliomenu">
    <ul class="nav menu">
    <li class="item-111 parent"><a class=" parenttitle" href="/index.php/landscape-buildings"><span class="image-title">Landscape Buildings</span><img src="/images/landscape_buildings.jpg" alt="Landscape Buildings"></a></li>
    <li class="item-118 parent"><a href="/index.php/landscape-timber"><span class="image-title">Landscape Timber</span><img src="/images/landscape_timber.jpg" alt="Landscape Timber"></a></li>
    <li class="item-126 parent"><a href="/index.php/landscape-design"><span class="image-title">Landscape Design</span><img src="/images/landscape_design.jpg" alt="Landscape Design"></a></li>
    <li class="item-131 parent"><a href="/index.php/landscape-maintenance"><span class="image-title">Landscape Maintenance</span><img src="/images/landscape_maintenance.jpg" alt="Landscape Maintenance"></a></li>
    </ul></div>

    And this was the CSS:

    .portfoliomenu ul li a {
    color: #FFF;
    font-family: 'Questrial', sans-serif;
    text-transform: uppercase;
    font-size: 2.0em;
    }
    .portfoliomenu ul li::first-word a {font-size:1.5em;}

    I have also tried the ::first-word in numerous other places but nothing seems to work.

    Does that help?

    Tony
    Tony's picture
    Offline
    Moderator
    Brisbane
    Last seen: 5 weeks 3 days ago
    Brisbane
    Timezone: GMT+10
    Joined: 2003-03-12
    Posts: 5343
    Points: 2964

    hey latempest, :first-word

    hey latempest,
    :first-word isn't valid in CSS, it's one that sounds like it should be.

    surajnaikin
    surajnaikin's picture
    Offline
    Enthusiast
    india
    Last seen: 6 years 40 weeks ago
    india
    Timezone: GMT+5.5
    Joined: 2007-06-09
    Posts: 111
    Points: 72

    looks like its possible with CSS

    looks like it is possible with a css workout, but to start with you can wrap it with a inline tag & add CSS to it

    .portfoliomenu ul li a strong

    gary.turner
    gary.turner's picture
    Offline
    Moderator
    Dallas
    Last seen: 38 weeks 5 days ago
    Dallas
    Timezone: GMT-6
    Joined: 2004-06-25
    Posts: 9776
    Points: 3858

    :grin:

    Yeah, it definitely ought to be a pseudo element, darn it.

    Try this:

    <!DOCTYPE html>
     
    <html>
    <head>
      <meta content="text/html; charset=utf-8"
            http-equiv="Content-Type">
     
      <title>test document</title>
      <base href="#">
      <style type="text/css">
    /*<![CDATA[*/
     
      html, body {
        font: 100%/1.5 sans-serif;
        margin: 0;
        }
     
      #portfoliomenu a {
        background-color: gray;
        color: #FFF;
        font-family: 'Questrial', sans-serif;
        text-transform: uppercase;
        font-size: 2em;
        }
     
      #portfoliomenu a span {
        font-size: .67em;
        }
     
      #portfoliomenu img {
        font-size: 1rem;
        }
     
      /*]]>*/
      </style>
    </head>
     
    <body>
      <ul class="nav menu"
          id="portfoliomenu">
        <li class="item-118 parent"><a href="/index.php/landscape-timber">Landscape
        <span>Timbers &amp; stuff</span> <img alt=
        "[image of Landscape Timbers enclosing a planting bed]"
             src="/images/landscape_timber.jpg"></a></li>
      </ul>
    </body>
    </html>
    Note some changes.
    • There is no good reason for the div around the ul. The ul is a perfectly good container itself.
    • I gave the ul an ID since it is unlikely, in my view, that you will have multiple instances of "portfoliomenu".
    • Notice that I segregated the text after the first word. That's because you want the first word larger. If it were larger than the element's base size, it would be like trying to pound 10lbs of sand into a 5lb bucket. So set the base font-size for the first word and make the following text smaller.
    • Never ever make the alternate text read the same as the caption. It should describe the image well enough that the caption makes sense. I just made something up.
    • Any time you specify color, specify background color. In this case, making 'a' white means you have white text on a white background.

    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.

    smahato
    smahato's picture
    Offline
    newbie
    Last seen: 8 years 15 weeks ago
    Timezone: GMT+5.5
    Joined: 2013-08-15
    Posts: 1
    Points: 1

    Spammers not welcome

    [Joined up an hour ago, and already an ex-member. ~gt/mod]