gamespot.com css styling??

N

nfsfan

Adept
hi all
i am making a project in asp.net which i want to be resolution independent...
i have tried all sorts of things but cant make it so..

the project is modeled on the gamespot.com site..

its background image is : 4000*4 pixels..

if u take look at the pic in photoshop and magnify it..u can clearly see that its a gradient on two sides and a constant grey in between(where the data is on the site)..and this image along with the site contents get scaled...

tried googling it for hours..but gave up..so posting here now :(
 
just managed to copy the background from gamespot(used gamespot's css file :))

rio, here is the thing i was to do and and thing i have done now(2nd attachment)..

but now i cant get my logo to be centered..cant use left property anymore as the image should be resolution free....

attached screens of my 2 pages..and the css file of gamespot

edit : not recognising css file so uploading it zipped
 
Post the html so I can help i better way. Anyway...to align the header add this into the #header

Code: 
margin: auto;
 
here is the master page i am trying to implement :

Code: 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>gameworld</title>
    <link rel="Stylesheet" href="StyleSheet1024.css" type="text/css" />
</head>
<body class="body">
    <form id="form1" runat="server">
    <div class="top" align="center" style="text-align:center">
           <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server" >
           [img]logoss.jpg[/img]
        </asp:ContentPlaceHolder>
    </div>
    
           </form>
    
</body>
</html>
and here is the css file..
Code: 
 .left
 {width:112px;
  height:1200px;
  position :absolute;
  left:0px;
  top:0px;
  background-image:url(lt.jpg);
 }
  

 .right
 {width:112px;
  height:1200px;
  position :absolute;
  left:890px;
  top:0px;
  background-image:url(rt.jpg);
 }

 .top
 {width:778px;
  height:110px;
  position :absolute;
  top:0px;
  }
  
 .body
 {background:#3c3c3c url(bg.gif) repeat-y center;}  
 .menu
 {width:778px;
  height:30px;
  position :absolute;
  left:112px;
  top:110px;
  
 }
 .center
 {width:778px;
  height:960px;
  position :absolute;
  left:112px;
  top:140px;
  background-color :Gray;
 }
 .bottom
 {width:778px;
  height:100px;
  position :absolute;
  left:112px;
  top:1100px;
  background-color :Black;
 }

currently i am using only the body class..rest all were being used in the previous page whose resolution was 1024x768.
 
This is how your master page should look like.
Code: 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>gameworld</title>
    <link rel="Stylesheet" href="StyleSheet1024.css" type="text/css" />
</head>
<body class="body">
    <form id="form1" runat="server">
    <div class="top" style="text-align:center;margin:auto;">
         [img]logoss.jpg[/img]
    </div>

      <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server" >
            </asp:ContentPlaceHolder>
    
           </form>
    
</body>
</html>

i havn't coded the full page. but basically your layout should be like:

Top Header Div
-------------------
Left | Body | Right
-------------------
Bottom

In .top class

Code: 
 .top
 {width:778px;
  height:110px;
  margin:auto;
  }

HTH
 
nope....that is not working...thisis how it is showing.. :((

edit : changed the code to :

<div style="text-align:center;">

</div>
</form>


and its working....see the screens
thanks...tryin to build more...
 
naa...somehow i feel that the things i am trying to do are not possible in asp.net...
now i have to insert the login control alongside my logo on the right side..but am not able to do so unless i try out absolute positioning...and then it goes awry..

so no luck here...

:huh: :S :(
 
I'll edit the files and update in a while. btw, this issue is not related to .Net at all. I'd suggest you start with basic html/css first.

Here is the file: WebSite8.zip

The reason it was not adjusting properly because your logo image is actually a banner. you need to split this image. and use the second half as a background for login control. You may have to edit width of header and body section to align the content on page.
 
also is there any way to add youtube videos on my site??

tried the embed method(nt working) like :
Code: 
<object width="425" height="350">
	<param name="movie" value="http://www.youtube.com/v/crfrKqFp0Zg"></param>
	<param name="wmode" value="transparent"></param>
	<embed src="http://www.youtube.com/v/crfrKqFp0Zg" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed>
</object>
 
Back
Top