Hi Tony

Could you post a screendump of what it looks like and the style declarations for the image?

/Jan

Hi Jan

Heres a screenshot of the page. I want the image to the left and on the right the summary (Chapter Pages) and then the information (Coast at sunset). The image comes from the Content section as do the summary and information.

I'm only able to get it like in the screenshot.

Thanks.

Tony

Hi Tony

Thanks.

So you want the image to be a part of the box and be aligned top left? If so you just need to place the <img> tag in the

Hi Jan

That's exactly it. I tried to move the img tag and the var dynamicMediaItem statement up into the <div class="section">, I tried it under one and then the other, but the website couldn't find the dynamicMediaItem.

Thanks.

Tony 

Hi Jan

Weird I just tried to move the img tag and it is now in the box. Just don't know how to get it left and the text on the right, tried float:left and it did nothing!

Thanks.

Tony

Hi Tony,

I had have some time to see on your problem now and I think that I have found a solution for you or at least a good starting point that you can work further with

You said that you have moved the image inside the box, but I think that you need to move it into the section div where the summary is.

<div class="column w220 gut30">
    @foreach(var page in CurrentPage.Children.Where("Visible && DocumentTypeAlias == @0 ||DocumentTypeAlias == @1, "Cafe", "Chapter" )){

            HtmlString summary = new HtmlString("");
            dynamic image = null;
            
            foreach(var apage in page.Children.Reverse().Take(1)){ 
                summary = apage.summary;
                if (apage.HasValue("image")){   
                    var dynamicMediaItem = Umbraco.Media(apage.image);

                    <div class="box">
                        <div class="section">
                            <span style="line-height: 1.4em; font-size: 16px; font-weight: bold;">@page.Name</span>
                        </div>
                        <div class="section">
                            <img src="@dynamicMediaItem.umbracoFile" alt="@dynamicMediaItem.Name" width="220"/>
                            <p>@summary</p>
                            <p><a class="buttonGrey block w160" target="_blank" [email protected] rel="nofollow">Read more...<span class="arrow"></span></a></p>

                        </div>

                </div>

            }

    }
</div>

I have made some dummy styling so you can see what is necessary to float the image left and the text right.

<style>
        .w220, 
        .section{ 
            float: left;
            width:220px;
        }
        img{
            float:left;
            width: 100px;
            margin-right:20px;
        }
        p{ 
            float:left;
            width: 100px;
            
        }
        .buttonGrey{
            float: left;
            width: 100%;
        }        
</style>

Hope this helps,

/Dennis

Hi Dennis

I've changed the code, just have to play with the css now! I just copied your css and every 220 section floated left! It all went a bit haywire! So I might try to change it to 219 instead of 220 and see how it works out.

Thanks.

Tony

Hi Tony,

Yep you differntly need to chages the CSS, I just, created an dummy example on my local machine, yesterday. So you need to change a bit, so it fit into the rest of your CSS and design.

Hope you success to do that. But hope my example helps your a step further to complete what you want.

/Dennis

is working on a reply...