indyfromoz indyfromoz - 28 days ago 9
ASP.NET (C#) Question

ASP.NET advertisement website

I am currently working on a website that is an advertisement portal for businesses. Advertisers can create an account, select various options for listing (State, caregory, etc) and upload a graphic is measured in a multiples of an "unit". An "unit" is an image or a flash file that is

180px
wide and
120
high. An advertiser can choose multiple units that are horizontal or vertical, i.e, 2 single units aligned horizontally or 2 single units aligned vertically.

I have gone to the point where the the website is working fine. I am stuck at a point I am going to lay out the "units" and display them properly, without any empty space between them. As an example, if we had 4 advertisements, a horizontal 2 unit ad, a vertical 2 unit and 2 single unit ad, like so -

|
|
2 unit ad | 2
------------------| unit
| | ad
1 unit | 1 unit |
| |
| |


I am currently storing the advertisements units in a database with attributes that are used in the web form to build a table (i.e., colspan, rowspan, etc). I am not sure if this is the right approach, I fear it is not. I shall be very grateful if I got some advice.

Thanks,
Indy

Answer Source

That's a tough one. If you want to use divs and css you can try floating the ads. The only problem is that you can't render the divs in an arbitrary order since they won't always try to take up the available room. The same would be true if you were using tables though.

<html>
<head>
    <style>
        div.adcontainer {
            margin: 0px; width: 540px;
        }
        div.ad {
            float: right; margin: 0; padding: 0; width: 180px;
            height: 120px; background: #DDD;
        }
        div.adhorz {
            width: 360px; height: 120px;
        }
        div.advert {
            width: 180px; height: 240px;
        }
    </style>
</head>
<body>
    <div class="adcontainer">
        <div class="ad advert">ad v</div>
        <div class="ad adhorz">ad h</div>
        <div class="ad">ad 1</div>
        <div class="ad">ad 2</div>
    </div>
</body>
</html>