Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 11
  1. #1
    Junior Member dsnyder's Avatar
    Join Date
    Apr 2007
    Location
    Cleveland, OH
    Posts
    27
    Member #
    15091
    Iím trying to figure out how to do this with css. Is it possible?

    I am using a .container to display a bottom image, .container p to display right/left borders, & .container h2 to display top image. I have a image floated w/in the <p> and Iíd like to have a list of links to the left of the image and <p> element. (Iíve moved the <p> over using padding-left of 155px.
    See the grey box http://cellocelli.com/test2.htm
    Is it possible to include a list of link within that area left of the picture & text using css?
    Code:
     .containerBottom {
                width: 520px;
                float: left;
                background-color: #758279;
                background-image:url(../Images/BkGrd/bg_bottom.gif);
                background-repeat: no-repeat; background-position: bottom;
                margin-bottom: 20px;
            }
    
     .containerBottom p {
           font: normal 1.2em Verdana;
           line-height:150%;
           color: #fff;
           margin:0px;
           padding: 5px 10px 5px 155px;
           border-left: 1px solid #333; border-right: 1px solid #333;
           }
            
                .containerBottom h2 {
                    color:#fff;
                    font-size: 1.3em;
                    padding: 15px 14px 15px 12px;
                    margin: 0px;
                    text-align: left;
                    background-image:url(../Images/BkGrd/bg_top.gif);
                    background-repeat: no-repeat; background-position: right top;
                    }
    
                    .containerImage {
                        margin-right: 13px;
                        margin-bottom: 4px;
                        float:left;
                        background-color:#CCCCCC;
                        outline:1px solid #000;
                    }

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Try floating another element left before the image or the text. Then the image will be floated left in the remaining space. You may have to apply a margin-left to the text to avoid it spilling over.

  4. #3
    Junior Member dsnyder's Avatar
    Join Date
    Apr 2007
    Location
    Cleveland, OH
    Posts
    27
    Member #
    15091
    thanks fiend!
    so simple. works great. i wasn't floating the element in the right place. now all is glorious! thanks,
    derek

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Awesome! :-) Glad to know that helped.

  6. #5
    Junior Member dsnyder's Avatar
    Join Date
    Apr 2007
    Location
    Cleveland, OH
    Posts
    27
    Member #
    15091
    Ok, so Iíve fixed the last issue due to your brilliant suggestion, now can you advise on how to accomplish this further desire?

    Regarding the text on the right side of my colored box: http://cellocelli.com/test2.htm Iíd like to style the text in the bottom differently from the top. Iíd like to create a 1px top border with a color of my choosing rather than my current method or manually typing in a line than receives the color on text. My problem is that the side borders of the box come from the <p> element. Disturbing that element to restyle the bottom text creates a gap in the boxes side border. Can I somehow float another element w/in the <p> to style the bottom text and give it a border-top?

    2. Separate IE issue: IE seems to create a gap between my h2 (which has my top image) & the side borderlines in my <p> element. IE also is overriding my link values for the div class with other values.

    New floated element which hold the image & links

    Code:
    .containerList {
    color: #fff; width: 140px; height:100%; margin:0px 10px 10px 5px; padding: 5px; float:left; border-right: 1px solid #ABB4A9; } .containerList h6 { color:#fff; padding-top:5px; font-weight:bolder; font-size: 1.2em; margin:0px; } .containerList a { color:#ABB4A9; font-size: 1.2em; padding:.2em .6em; text-decoration:underline; }

  7. #6
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    You should probably change the p to a div, then wrap those two blocks of text in p tags (one each), then play with the margins and borders. It'll also be more semantic that way :-)

  8. #7
    Junior Member dsnyder's Avatar
    Join Date
    Apr 2007
    Location
    Cleveland, OH
    Posts
    27
    Member #
    15091
    Cool. ButÖif my bottom rounded box edge comes from a div bkgd image , the top rounded edge from its h2 bkgd image, and sides come from its p, can I still change the p to a div and have it work?
    This is really working my little brain. If I didnít want the border lines this would be much easier!

  9. #8
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Oh that's annoying... Well, much as I hate to introduce additional unsemantic crap into markup, in this case, the best approach would probably be to convert that p to a div, then wrap the other two blocks of text in a p. Give the div the borders, and then use the ps to apply styles deeper in.

  10. #9
    Junior Member dsnyder's Avatar
    Join Date
    Apr 2007
    Location
    Cleveland, OH
    Posts
    27
    Member #
    15091
    all your advice has worked. :classic: Thanks you! The new div which holds the right/left borders works well but is there a way to have it extend as the left column does. Currently if I add the recordings image this creates a gap in the side lines.
    HTML Code:
     <div class="detailsBottom">
                
                    <h2>Notes from the composer</h2>
                    <div class="detailsMiddle">
                        <div class="detailsList">
                        <img src="Images/Press%20Photos/Katz.png" width="139" height="127" />
                            <h6>Stephen Katz<br><br>
                            Cello Ensembles</h6>
                              <a href="#">And So Below</a><br>
                              <a href="#">Cellocomotion</a><br>
                              <a href="#">CelloPhants</a><br>
                              <a href="#">The Return</a><br><br>
                              <h6>Cello Solo</h6>
                              <a href="#">Bitterroot - prelude</a><br>
                              <a href="#">Cellocomotion</a><br>
                              <a href="#">Decebede</a><br><br>
                              <h6>Recordings</h6>
                              <img src="Images/Product/earthdanceThumb.jpg" />
                        </div>
                             <p><strong>Bitterroot - prelude</strong><br/>
                              Tour de force strum pizzicato solo in E Minor. Ten years in the making, this one contains the essence of the pizz techniques 
                              I have been fascinated with. <br/><br/><em>The music of cellist Stephen Katz fuses the kinetic energy of contemporary dance grooves with an unerring instinct for 
                            stener's yearning to be transported beyond the concert hall. One of a new breed of solo performers who use live looping 
                            electronics to generate full ensemble textures from a single instrument, Katz has distinguished himself as a composer of 
                            seamlessly integrated pieces that unfold layer-by-layer in live concert.</em> <br/>
                            <a href="#">  more about Stephen Katz...</a></p>
                                <div class="detailsFooter">
                                    <p>For information on booking Stephen for concert performance or educational workshops please visit his section in bookings.</p>  
                                </div>
                    </div>
            </div>
    the css holding the borders
    Code:
    .detailsMiddle {
                        margin:0px 0px 15px 0px;
                        border-left: 1px solid #333; border-right: 1px solid #333;
                    }

  11. #10
    Junior Member dsnyder's Avatar
    Join Date
    Apr 2007
    Location
    Cleveland, OH
    Posts
    27
    Member #
    15091
    PS this is what I mean... http://cellocelli.com/test3.htm


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:35 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com