developing a website in asp.net
i want it to work on all browsers, i was recommended using css
so i started the development using div in css instead of tables for the placement of controls on the page
though i have started it but i am finding it difficult to design & make the changes as even a slight change here & here makes the page distrubed
how do i go abt it & make my site work in all browsers
It’s easy to make it work well in all browsers, as logn as you use good HTML and CSS practices. If you need help with that, post examples of what you are trying to do and we can help. 
ok i have already started with & wherever i stuck up will get back to u
is using tables not advisable as i feel it easier to design with tables
Nah, tables completely suck for layout. You just have to spend a little time reading up on how HTML and CSS play together and then you’'ll fly. I wouldn’t do a site in tables if I got paid double.
The thing it sounds like you need to learn is the PURPOSE of HTML… which is to say what things ARE, NOT what they look like. CSS is for saying what things look like.
Most layouts need at most 2 div per section if you are using semantic markup before you start applying layout and/or images. If you’re finding yourself with dozens of DIV on a page, you’re probably wrapping DIV around things that don’t need it! Just like wrapping tables around things that don’t need it.
Though again, a sample of your output and intended appearance would go a long ways towards our saying if you’re doing it right… though with ASP.NET on the table, you’ve probably not learned proper markup since I’ve never seen good markup out of anything with those three painful letters “ASP” on it.
i have developed few pages using css & its working well in all the browsers that i checked, but i am facing prblm with screen resolution,
can it be handled by css
while viewing the page in 1024 resolution its perfect but viewing in resolution above 1024 some images & controls gets overlapped
It is better if you try to download the browser to the machine. And test it by yourself.
Experiment with different screen resolution.
Then you will see result with your own eyes.
^___^
Yes indeed. Perhaps show us what you are doing and we’ll point out what’s wrong.
Absolutely. I have an older WinXP machine (don’t start, guys) with IE6 (save it…) and the latest versions of Chrome, Safari, FF, and Opera. Because of Microsoft’s bullheadedness, I can’t upgrade to IE7, so I’m forced to test my sites in IE7+ on work machines. I also use Browsershots, but that just gives you a rough idea of what your site looks like in other browsers, it’s not a substitute for actual testing. I design in Opera, test in it and the other modern browsers, then cross my fingers and begin testing in IE.
hello attached a sample of both resolutions
the company name is a gif image which is put on the page (purple color image) using img control
if resolution> 1024 the company name overlaps the left side greencolored image
hope its clear
We really need to see a live version of this to advise.
check rpmnetcom.com/index.html
OK, add this to your style sheet:
#header {position: relative;}
An element that has position: absolute will be placed in relation to the nearest parent that has position: relative. Otherwise (in the absence of a positioned parent), it’s placed in relation to the viewport (browser window) which is why it is moving in relation to the screen rather than in relation to the header.
Ooph… now, all the annoying animated “how not to build a website” gif nonsense aside, your HTML is a total disaster. Tables on non-tabular data, missing headings and nonsensical heading roders, clearing div, endless unnecessary div, presentation inlined in the markup, id’s on elements for no good reason, empty title attributes on elements that shouldn’t need title in the first place, lists around things that aren’t lists, non-breaking spaces and paragraphs doing padding’s job, content placement likely to trip rendering errors, paragraphs around non-paragraph elements, tags like MARQUEE that have NO BUSINESS on a modern website (much less in a STRICT doctype!) and is placed incorrectly (since the only thing that can come after a <ul> is <li> or </ul>)… even the paragraphs around non-paragraph elements…
… and that’s before we talk the illegible color contrasts and fixed metric fonts sized below accessibility norms.
There is more of 1998 to this page than 2011.
While SP’s suggestion of position:relative is a decent silver bullet fix, CSS is only as good as the HTML it’s applied to, and this HTML… and the CSS is just worse, since you’re declaring values you don’t need (block on a float?) and the same values more than once, probably because you’ve stuffed everything on single lines into an illegible mess.
So first order of business should be to pitch all that and redo the HTML… If I was writing that page, the HTML would probably look something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<title>
RPM NETCOM
</title>
</head><body>
<div id="pageWrapper">
<h1>
RPM NetCom<br />
<small>Real Power of Money</small>
<span><span><span><span>
<!-- image replacement sandbags -->
</span></span></span></span>
</h1>
<div id="content">
<ul id="mainMenu">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Our plan</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Login</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div id="achievers">
<h2>Achievers</h2>
<ul>
<li>Nikhil...........…</li>
<li>Akhil..........…</li>
<li>Dinesh........…</li>
<li>Bunty..........…</li>
</ul>
<!-- #achievers --></div>
<div id="awards">
<h2>Awards</h2>
<img
src="images/3.gif"
alt="Awards"
width="230"
height="178"
class="plate"
/>
<!-- #awards --></div>
<div id="products">
<h2>Products</h2>
<img
src="images/prdt.gif"
alt="Products"
width="148"
height="172"
class="plate"
/>
<!-- #products --></div>
<!-- #content --></div>
<div id="sideBar">
<h2>Company News</h2>
<ul id="homeNews">
<li>
June 23, 2011<span> - </span>
<a href="#">
Launching of RPMNETCOM website …
</a>
</li><li>
June 25, 2011<span> - </span>
<a href="#">
Seminar for introduction of the company
…
</a>
</li><li>
June 25, 2011<span> - </span>
<a href="#">
Meeting with new consultants…
</a>
</li><li>
June 26, 2011<span> - </span>
<a href="#">
Board Meeting for discussion on future Prospects…
</a>
</li>
</ul>
<!-- #sideBar --></div>
<div id="footer">
Copyright 2011.
<a href="#">Privacy Policy</a> |
<a href="#">Terms of Use</a>
<!-- #footer --></div>
</body></html>
Though it would lose those marquee’s since that’s NOT something that should be done on a website, the tag was NOT accepted into the specification for a REASON. Those fixed height table areas would also probably need a major restyling getting rid of the border and other bits – which would be an improvement.
Really everything else goes in the CSS – if I have time later, I’ll toss together how I’d handle that… for now, notice that it’s saying for the most part what things are, and reduces it from 6.3k of HTML to 2.3k… so basically 70% of your HTML was just unnecessary bloat.
thanks
i wuld be able to rectify & learn
i will do the needful. reg color combination thast wht the client needs so cant help in it
any other suggestions so that improvements can be made is aslo welcome
but anythig abt teh resolution effect it makes ?
“needs” or “wants” – you may have to educate them that blue text on purple is illegible to >50% of the population? (since that’s less than 10% contrast?)
Here’s what I came up with, it’s not a 1:1, I took some liberties but this is more to show you that you don’t need all that HTML or anywhere near as much CSS as you were using.
as with all my examples the directory:
is open for easy access to it’s bits and pieces… I redid some of the images and formats to try and get the sizes under control – I’d REALLY suggest swinging an axe at those massive bloated gifs, by themselves they are as large as my ideal size for an entire PAGE on a site (HTML+CSS+IMAGES+SCRIPTS). If nothing else, the header is WAY too massive – like it’s trying to make up for a lack of content or something.
The big thing is how I built the header – which addresses your problem. It’s a H1 with text so images off users and screen readers get something meaningful there. I then absolute position the spans over the text building up all those images ‘painters algorythm’ style…
Basically, in a third the HTML and half the CSS, I’m within spitting distance of what you had layout-wise… and it works all the way back to IE 5.5
Oh, I also narrowed it to 976px, since 1000px is NOT 1024 friendly.
thanks
i am trying to do as u have said
i tried with the footer the text in the footer is not getting centre aligned though i have given it in css as text-align: centre
with respect to the above link & css
i have reduced the header image height
when i place this new image i get some white space left at the bottom
how do i rectify
change in image height dealigns the structure using css , how to postion it properly
i am not getting the footer as shown in the link