page : titles and texts on left and image on right

grosloulougrosloulou Registered Users Posts: 87 Big grins
edited August 8, 2013 in SmugMug Customization
hallo,
on :
http://labrophotography.smugmug.com/About-Me

I have a problem because i'd like to have the full text on left (ie:600px) and image on right.
because of title blocks, i needed to split my text into several text blocks (it is a pity in text we can't specify a list ul, li for my equipment and a title h1,h2...) so image is float right only for first text block

any solution ?
i have the feeling we need extra big blocks, one float left for left content 600px wide (or auto) and one big container float right for picture 300px wide so each sub block remains in his side

or do you think it would be better to use html unique block which contains :

<p><img class="alignright" title="Cindy in Guillemins Station" src="http://www.labrophotography.com/my_images/about.jpg&quot; alt="" width="478" height="720" /></p>

<h3>About me</h3>

<p>Although I have always enjoyed photography, it wasn’t until I switched from film based photography to digital in 2007 that I really felt a passion for capturing fine nature and landscape images. With digital I can experiment freely without worrying about the cost of film and development, see the results instantly, and make adjustments to the shot in the field if necessary. I can control the whole process from capture to the final print, and I feel all of this has made me a much better photographer.</p>

<p> </p>
<h3>My Equipment</h3>

<p>My current equipment is:</p>

<p>Camera Bodies:</p>
<ul>
<li>Nikon D80</li>
<li>Nikon D300</li>
</ul>
<p>Lenses:</p>
<ul>
<li>Nikkor 18-70mm f/4.5</li>


best regards
marc

Comments

  • aschendelaschendel Registered Users Posts: 283 Major grins
    edited August 7, 2013
    Floating stuff can be confusing to get setup right, but I think you should be able to accomplish that. I'd try to have the image in the HTML after a div containing the text and then find a way to get the style="float:right;" onto the image, either in the HTML directly or via a CSS class/id.

    If you could live with the indentation, you could also adjust the container widths (triangle ruler icon) and drag them next to each other, that's what I did just for simplicity's sake.

    i-DMgQjqP-L.jpg

    Andy
  • grosloulougrosloulou Registered Users Posts: 87 Big grins
    edited August 7, 2013
    aschendel wrote: »
    Floating stuff can be confusing to get setup right, but I think you should be able to accomplish that. I'd try to have the image in the HTML after a div containing the text and then find a way to get the style="float:right;" onto the image, either in the HTML directly or via a CSS class/id.

    If you could live with the indentation, you could also adjust the container widths (triangle ruler icon) and drag them next to each other, that's what I did just for simplicity's sake.

    i-DMgQjqP-L.jpg

    Andy


    thanks
    it is what i did but the difference with you is that you have a single text 600px and a picture 360px.
    in my case, if i want to add titles i need several text block so image right is right for the first block only and next block follows the image

    marc
  • aschendelaschendel Registered Users Posts: 283 Major grins
    edited August 7, 2013
    grosloulou wrote: »
    thanks
    it is what i did but the difference with you is that you have a single text 600px and a picture 360px.
    in my case, if i want to add titles i need several text block so image right is right for the first block only and next block follows the image

    marc


    yeah, that is the "if you could live with the indent" part of my initial response. i'll see if i can do the HTML up for you so the text flows under the image once it gets down that far.
  • grosloulougrosloulou Registered Users Posts: 87 Big grins
    edited August 7, 2013
    aschendel wrote: »
    yeah, that is the "if you could live with the indent" part of my initial response. i'll see if i can do the HTML up for you so the text flows under the image once it gets down that far.

    just to be clear, all title and text blocks are 600px wide while image is 360px wide
  • aschendelaschendel Registered Users Posts: 283 Major grins
    edited August 7, 2013
    I'm not sure how to have it work right using the separate Content Blocks (photo / text / html), but I did add a unique HTML block containing everything. I think it works basically the way you want... I added a bunch more text and shrunk the image so you could see the wrapping happen.
    <img class="alignright" title="Cindy in Guillemins Station" src="http://www.labrophotography.com/my_images/about.jpg" alt="" style="width: 150px; float:right; margin-left:8px;" />
    
    <h3>About me</h3>
    
    <p>Although I have always enjoyed photography, it wasn’t until I switched from film based photography to digital in 2007 that I really felt a passion for capturing fine nature and landscape images. With digital I can experiment freely without worrying about the cost of film and development, see the results instantly, and make adjustments to the shot in the field if necessary. I can control the whole process from capture to the final print, and I feel all of this has made me a much better photographer.</p>
    <p>&nbsp;</p>
    <p>Although I have always enjoyed photography, it wasn’t until I switched from film based photography to digital in 2007 that I really felt a passion for capturing fine nature and landscape images. With digital I can experiment freely without worrying about the cost of film and development, see the results instantly, and make adjustments to the shot in the field if necessary. I can control the whole process from capture to the final print, and I feel all of this has made me a much better photographer.  Although I have always enjoyed photography, it wasn’t until I switched from film based photography to digital in 2007 that I really felt a passion for capturing fine nature and landscape images. With digital I can experiment freely without worrying about the cost of film and development, see the results instantly, and make adjustments to the shot in the field if necessary. I can control the whole process from capture to the final print, and I feel all of this has made me a much better photographer.</p>
    
    <p>&nbsp;</p>
    <h3>My Equipment</h3>
    
    <p>My current equipment is:</p>
    
    <p>Camera Bodies:</p>
    <ul>
    <li>Nikon D80</li>
    <li>Nikon D300</li>
    </ul>
    <p>Lenses:</p>
    <ul>
    <li>Nikkor 18-70mm f/4.5</li>
    </ul>
    
  • grosloulougrosloulou Registered Users Posts: 87 Big grins
    edited August 7, 2013
    aschendel wrote: »
    I'm not sure how to have it work right using the separate Content Blocks (photo / text / html), but I did add a unique HTML block containing everything. I think it works basically the way you want... I added a bunch more text and shrunk the image so you could see the wrapping happen.
    <img class="alignright" title="Cindy in Guillemins Station" src="http://www.labrophotography.com/my_images/about.jpg" alt="" style="width: 150px; float:right; margin-left:8px;" />
    
    <h3>About me</h3>
    
    <p>Although I have always enjoyed photography, it wasn’t until I switched from film based photography to digital in 2007 that I really felt a passion for capturing fine nature and landscape images. With digital I can experiment freely without worrying about the cost of film and development, see the results instantly, and make adjustments to the shot in the field if necessary. I can control the whole process from capture to the final print, and I feel all of this has made me a much better photographer.</p>
    <p>&nbsp;</p>
    <p>Although I have always enjoyed photography, it wasn’t until I switched from film based photography to digital in 2007 that I really felt a passion for capturing fine nature and landscape images. With digital I can experiment freely without worrying about the cost of film and development, see the results instantly, and make adjustments to the shot in the field if necessary. I can control the whole process from capture to the final print, and I feel all of this has made me a much better photographer.  Although I have always enjoyed photography, it wasn’t until I switched from film based photography to digital in 2007 that I really felt a passion for capturing fine nature and landscape images. With digital I can experiment freely without worrying about the cost of film and development, see the results instantly, and make adjustments to the shot in the field if necessary. I can control the whole process from capture to the final print, and I feel all of this has made me a much better photographer.</p>
    
    <p>&nbsp;</p>
    <h3>My Equipment</h3>
    
    <p>My current equipment is:</p>
    
    <p>Camera Bodies:</p>
    <ul>
    <li>Nikon D80</li>
    <li>Nikon D300</li>
    </ul>
    <p>Lenses:</p>
    <ul>
    <li>Nikkor 18-70mm f/4.5</li>
    </ul>
    

    thanks but it is strange it looks like my own html code which didn't work !?
    did you change something ?
    for instance we all know that ul, li won't work with smugmug
    on the other hand alignright for image didn't work in my case


    best regards
    marc
  • aschendelaschendel Registered Users Posts: 283 Major grins
    edited August 7, 2013
    grosloulou wrote: »
    thanks but it is strange it looks like my own html code which didn't work !?
    did you change something ?
    for instance we all know that ul, li won't work with smugmug
    on the other hand alignright for image didn't work in my case


    best regards
    marc

    Yeah, I did tweak a few things. Specifically in the IMG tag I removed the height= and width= and added the style= items (perhaps you have some of that in your alignright css class?). I also removed the P tags around the image -- that actually might be the thing that was keeping your version from working.

    I believe UL does work but you were missing the last ("closing") </ul> from the final list.
  • grosloulougrosloulou Registered Users Posts: 87 Big grins
    edited August 7, 2013
    ah ok, i am going to try
    i just copied an extract with img. I think ul was closed somewhere later :
    code comes from muy other wordpress photocrati site :
    http://www.labrophotography.com/about/

    not sure smugmug recognizes ul and li bullets,...

    concerning my class alignright i did no class for wordpress, just wrote code according to books
    I am not a html/css specialist which explains why I left smugmug to wordpress but came back for new smugmug

    best regards
    marc
  • grosloulougrosloulou Registered Users Posts: 87 Big grins
    edited August 8, 2013
    grosloulou wrote: »
    ah ok, i am going to try
    i just copied an extract with img. I think ul was closed somewhere later :
    code comes from muy other wordpress photocrati site :
    http://www.labrophotography.com/about/

    not sure smugmug recognizes ul and li bullets,...

    concerning my class alignright i did no class for wordpress, just wrote code according to books
    I am not a html/css specialist which explains why I left smugmug to wordpress but came back for new smugmug

    best regards
    marc

    hallo,
    it works very well
    i have added your css for ul and removed the class="alignright" i don't know where it comes from and increased width of image to 360px.

    remaining problems :
    - ul,li offset to the left instead of to the right (see another post)
    - text at bottom of page comes back below the picture. It doesn't remain constraint to ie:600px width. if the image was smaller this would occur very quickly. However this topology is interesting for other pages

    best regards
    marc
Sign In or Register to comment.