SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Need help again with jewelry site - positioning of text and images

    On my current jewelry site I cheated with a bunch of <br> codes to align text and images alternating left and right. I just copied and pasted these from the current site to the new design and it really looks bad. So I removed them. Even worse. I am thinking that I will have to set up the jewelry pages with rows so that everything aligns correctly. Am I thinking in the right direction?

    current site - http://foxdencreations.com

    new design - http://foxdencreations.com/new_site/necklaces.html

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    One option for creating the effect you have on the old site is to place the image inside the associated paragraph and give that paragraph overflow: hidden;. E.g.

    Code:
    <p>
        <a href="images/fallnecklace6.png" data-lightbox="image-3"><img class="rtF" src="images/fallnecklace6thmb.png" alt="Fall Colors Polymer Clay Beaded Necklace"></a> 
        Here is another gorgeous example using polymer clay beads. I also used matching pearl beads, Bali style siver bead caps, silver spacer beads of different styles and sizes, Swarovski crystals, and seed beads.
    </p>
    Code:
    p {overflow: hidden;}
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    This worked well. Thanks Ralph. Are there any other ways to do this? I just want to make sure that I have other ideas for how this can be accomplished for future reference.

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    I would give Ralph's method two .

    Off Topic:

    Necklace page, top paragraph... I believe that the word "chocker" is supposed to be "choker".


    Cheers

  5. #5
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Fixed the misspelling....thanks. What if I don't want the text wrapping around the photos, though. How would I handle that? That is why I was thinking rows or maybe 2 columns within the right column.

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    OK, I'll prepare some examples of rows and columns. (They won't be as elegant as Ralph's, though )

  7. #7
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Maybe I will play around with the content container for the jewelry pages to see what I can come up with.

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by cgacfox View Post
    Maybe I will play around with the content container for the jewelry pages to see what I can come up with.
    I'll send you what I have worked up so far, in case they are useful.
    I just noticed that you have changed the thumbs. The ones in this code are a mix of before and after. Oh, well .
    CSS is at the top of each page with notes.
    With outlines, as usual.


    2a. Ralph's code added to your page.
    2b. An easy modification of Ralph's code to put the text and image into separate columns.

    The following are my "busier" methods of doing the same things plus two more.

    1a. 1a should render identically to Ralph's 2a.
    1b. 1b should render identically to 2b.
    1c. Rows. Text and image appear in separate rows. Image can be positioned left, center, right.
    1d. Columns. Text and image appear in separate columns. Image (or text) can be positioned top, middle, bottom. Middle is the default.

    https://www.dropbox.com/sh/ujz09ejgm5n8p2c/ukO_seUkjJ

  9. #9
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much again ronpat. I appreciate all the work that you put into helping me. These examples are just what I needed to understand the different ways that this can be accomplished. I do have a question on the format of a couple of the CSS tags. I am getting better with my coding but still am not 100% sure of what I am doing.

    .content > p and .content div p + p confuse me as to what they are accomplishing. The > and + are mathematical symbols to me. I do realize that math is necessary for web design but...

    Again thank you for all your help.

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    cgacfox,

    I'm not very confident that this is a clear explanation of the > and + selectors, but hopefully it will help.

    The > symbol is called the "child selector". It addresses elements on the right side of the "greater than" symbol that are the immediate children of the element on the left side of the "greater than" symbol.
    For example: .bracelets > p {...} applies styles to the paragraphs that are the immediate children of .bracelets but not to paragraphs that are in a sub div ("grandchildren" or descendant paragraphs). This is a very convenient way to target one level of nested selectors. This technique is very commonly used when styling drop down menus with sub menus.
    Code:
    <div class="bracelets">
        <p>This is the first "outside" paragraph</p>
        <div>
            <p>This is a nested descendant paragraph, which is also a sibling of the second nested p</p>
            <p>This is another nested descendant paragraph, which is also a sibling of the first nested p, and they are adjacent</p>
        </div>
        <p>This is the second "outside" paragraph</p>
    </div>
    The + symbol is the "adjacent sibling selector". It targets objects on the right side of the "plus" symbol that are siblings of and immediately follow the selector on the left side.

    For example: p + p targets the second and third p (both are preceeded by a p):
    Code:
    <div>
        <p></p>
        <p></p>
        <p></p>
    </div>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •