Options
page : titles and texts on left and image on right
grosloulou
Registered Users Posts: 87 Big grins
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" 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
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" alt="" width="478" height="720" /></p>
![http://www.labrophotography.com/my_images/about.jpg"](http://www.labrophotography.com/my_images/about.jpg"){kind=link}
<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
0
Comments
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.
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
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
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.
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