Whitespace where I don't want it

[fonzi]

I am relatively new to ASP.NET so apologies if there is a simple answer to this.

I have a <div> tag which contains the following code:

<div id =&quot;logo&quot; style=&quot;width: 985px; height: 184px; left: -10px; position:relative; top: -15px; right:10px;&quot;>

</div>

There is a css file that contains the following code which refers to the div tag

#logo {

background: url(images/CRS.jpg);
height: 100px;
width: 520px;
border-styleutset;
border-color:Gray;
float:none;

}

I have the image pushed right to the left edge as you can see from this screen capture:



but I want to push it to the right edge at the other edge but there is a whitespace there (where the arrow is pointing to).

Can anyone tell me how I might do this?

 

[Forbairt]

can you throw it up online somewhere ... I'm not exactly following you ...

 

[louie]

something is not right. We need something to look at live if you can.

 

[Forbairt]

and I'd hazard a guess its nothing to do with asp.net .. this is a design issue so completely separate

 

[fonzi]

I'll try to put it up online so you can get a better look at it: what's the quickest way of doing that for free?
Basically I want the top banner to appear without any margins on the left or right (in the screen capture the left is OK but there is a space at the right).
I have tried changing everything in the CSS page and in the div properties but all it does is move the space to the left instead.

 

[Forbairt]

er ... one problem is going to be the size of your header image ... hence you're getting white space ... no ?

 

[fonzi]

er ... one problem is going to be the size of your header image ... hence you're getting white space ... no ?

If you mean it's too small then no I don't think that's the problem.

 

[louie]

That's the first thing I thought as well, the reason I want a live page to look at.

 

[fonzi]

I got it sorted everyone;
The problem was in the page itself, not the alignment of the picture.
I just added a "html, body"section to the css file:
html, body
{

margin:0;
padding:0;
position:absolute;
top:12;
left:12;
right:0;

}

#logo
{
background-image:url(images/CRS.jpg);
background-repeat: no-repeat;
border-styleutset;
border-color:Gray;



}

I got rid of all the extra stuff in the "#logo" section but added
the " background-repeat: no-repeat;" bit as at the very end the picture was re-appearing where there was a space.
In the "<div>" tag in the ASP page I got rid of all the other settings and now it looks like this:

<div id ="logo" style="width: 998px; height: 184px;">

</div>

The page itself is now the way I want it:

 

[Forbairt]

congrats on solving your problem ...

you do realise however that ... you've alienated every other browser resolution so to speak ... you're building it to look good at 1024 pixels wide ...

I'm on 1650 and 1280 ...is it going to scale well ?

 

[fonzi]

congrats on solving your problem ...

you do realise however that ... you've alienated every other browser resolution so to speak ... you're building it to look good at 1024 pixels wide ...

I'm on 1650 and 1280 ...is it going to scale well ?

Yeah I know but I was going to get to that later. If you have any advice by all means share it as I don't know too much about re-sizing images for display on different resolution settings.
I've never put a site live before.

 

[Forbairt]

its a tricky one ....
your options are ... to create a large image that goes beyond what you'll possible need ...

some people view at 1900pixels wide .. but would be in the minority for the moment I hope ...

1650 is pretty common these days ...
having your image go to this could work ... you'll have one big problem with this though and thats load time ...

a simple enough solution but you may / may not like it ...

put all your content into a div ... define this div to be 1024pixels wide ...

give this give margins to the left and the right of auto .. and this should center your content on the page ...

not ideal .. but it might be what your'e after ... here's the kinda thing I'm talking about ... Forbairt Media it'll shrink fairly nicely .. and expand nicely as well ..

 

[fonzi]

its a tricky one ....
your options are ... to create a large image that goes beyond what you'll possible need ...

some people view at 1900pixels wide .. but would be in the minority for the moment I hope ...

1650 is pretty common these days ...
having your image go to this could work ... you'll have one big problem with this though and thats load time ...

a simple enough solution but you may / may not like it ...

put all your content into a div ... define this div to be 1024pixels wide ...

You mean everything between the opening <body> tag to the closing </body> tag?

give this give margins to the left and the right of auto .. and this should center your content on the page ...

not ideal .. but it might be what your'e after ... here's the kinda thing I'm talking about ... Forbairt Media it'll shrink fairly nicely .. and expand nicely as well ..

I did what you said. This is the ASP code:

</head>
<body>
<div style ="width: 1024px; height:768px; margin-left:auto; margin-right:auto;">
    <form id="form1" runat="server">
    
    
    
        <div id ="logo"  style="width: 998px; height: 184px;">
        
        </div>      
        <asp:contentplaceholder id="mainContentPlaceHolder" runat="server">
           </asp:contentplaceholder>
   
    
    
    </form>
    </div>
</body>
</html>

I left the CSS file as it is. The gap on the right (which my post was originally about) has now returned when I increase the resolution on my screen (mine is always at 1024 * 768) the image is centred but obviously does not fill up the screen (big gaps on left and right).
There must be some way of making it fill up the screen regardless of which resolution the user is on?

 

[louie]

first you shouldn't have a fix width for your div - instead use width="100%"

second slice the last bit of you top header (2-3px) and use it as the div background image to expand to the right if the user has a bigger screen.

 

[fonzi]

first you shouldn't have a fix width for your div - instead use width="100%"

second slice the last bit of you top header (2-3px) and use it as the div background image to expand to the right if the user has a bigger screen.

Sorry, I don't quite follow: you want me to create a new image made up of the last few pixels of the image and use it as a background if the user has a bigger screen?

That's not going to look very good!

 

[Forbairt]

that is the problem with using images for banners ...

One solution I already mentioned is to have a huge image ... but this is going to require the user to download that image ... it should scale nicely though ...

For example if you were to have a transparent PNG over your banner image and to align it to the right of the page it'll always appear close enough to the place you want it ...

you can lets say create 5 different versions of the banner image .. but this is just plain nasty ... and would require javascript to detect the users browser size ... and if they have it off then you'd just revert to the default image ... but as I said I find that a nasty solution ...

On my site I gave as an example I've taken maybe 3 or 5 pixels of the photo I'm using in the center ... and extended that as the background for the divs ... it works well in my opinion but if I was using images like yours it wouldn't work ...

 

[fonzi]

that is the problem with using images for banners ...

One solution I already mentioned is to have a huge image ... but this is going to require the user to download that image ... it should scale nicely though ...

For example if you were to have a transparent PNG over your banner image and to align it to the right of the page it'll always appear close enough to the place you want it ...

you can lets say create 5 different versions of the banner image .. but this is just plain nasty ... and would require javascript to detect the users browser size ... and if they have it off then you'd just revert to the default image ... but as I said I find that a nasty solution ...

Ain't doing that anyway. If I create a huge image like you said I don't think it will work either as the there will be scroll bars appearing at the bottom when it is displayed on screens with smaller resolutions.
What I really need is a few links or examples to see how this problem is normally solved.

 

[louie]

in your case here, going for a fix width, I won't make any bigger then 800px (still recommended).
This way you can control the look of your website no-matter the screen size.

if you are going for 100% width then you need to make your image smaller and blend it into some other colours to make it expand nicely, as what Forbairt did to his layout.

 

[Forbairt]

Ain't doing that anyway. If I create a huge image like you said I don't think it will work either as the there will be scroll bars appearing at the bottom when it is displayed on screens with smaller resolutions.
What I really need is a few links or examples to see how this problem is normally solved.

I've used a large image on one site I've done and it works well ... no scroll bars and it'll resize nicely .. the image I used was 1660 pixels wide ...

I can't give you a link as its private and a work in progress but if I get a chance later on I'll mock up what I mean ... a major problem with this is that its using an image thats around 360kB in size ... which is crazy for those users still on dialup

 

[louie]

there is an example of what you can do:

Fonzi web design layout