Want to use different CSS file for different resolution
Posted: 06 February 2006 10:31 AM   [ Ignore ]
Newbie
Rank
Total Posts:  3
Joined  2006-02-06

Hi to all!


I have five gif in a row positing made by CSS, but he problem is when i brows this using 1024X768 resolution, the its places correctly. but I see it on 800X600 resolution, its goes to different area, and display on other page text.

Can any one suggest me any fix solution of this.

On the contrary i am thinking of using different CSS file of that particular portion depend on different browser. but i don’t know how can i implement it. can any one help me with this particular problem?

Thanks in advance.

Profile
 
 
Posted: 07 February 2006 03:12 AM   [ Ignore ]   [ # 1 ]
Newbie
Rank
Total Posts:  4
Joined  2006-02-07

If you need to have different CSS for different resolutions, it means you need to do a better job styling your document.

Using percentages, EMs and floats/clears are steps towards a liquid design in all resolutions.

Profile
 
 
Posted: 07 February 2006 04:56 AM   [ Ignore ]   [ # 2 ]
Newbie
Rank
Total Posts:  3
Joined  2006-02-06

Thanks Nike!

Sorry, I can’t get you clearly.

I am very new in CSS, can you give me some example which help me grabs the think quickly?

this is the portion where i would like to make changes to make it resolution free, you can find i have to break one gif and have putted in below of the first row, I would like to put all of them in one line one by one in higher resolution and in lower resolution they will wrap/break automatically in next line. now you can find only images are there. in later we can add some text links also.

.topinfo1
{
position
absolute;
z-index10;
font-familyArialMS Sans Serif;
font-size11px;
font-weightbold;
text-decoration:none;
}
.topinfo1 a{
text
-decoration:none;
color#009800;
}

.topinfo1 a:hover{
color
#aa00da;
text-decoration:none
}
(this css code is in separate CSS file link to this main .shtml file
for 
your requirement i have just pasted it on here)

<
div class="topinfo1" style="left: 160px; top: 210px;">
<
script LANGUAGE="JavaScript" src="../inr/bookmark.js"></script></div>

<
div class="topinfo1" style="left: 160px; top: 260px;"><a href="../fxthoughts/emailpage.html" onclick="window.open('../fxthoughts/emailpage.html', 'email', 'scrollbars=0,menubar=0,resizable=yes,width=500,height=340, top=180,left=100');
return false;"
><img src="/images/tafri.gif" width="92" height="18" border="0" align="middle"></a></div>

<
div class="topinfo1" style="left: 225px; top: 210px;"><a href="../sitemap.shtml">
<
img src="/images/explore.gif" border="0" align="middle" border="0"></a></div>

<
div class="topinfo1" style="left: 360px; top: 210px;"><a href="/oilreg/oilreg.shtml">
<
img src="/images/reg.gif" width="124" height="30" border="0" align="middle" border="0"></a></div>

<
div class="topinfo1" style="left: 480px; top: 200px;"><a href=#register>
<img src="/images/fullrep.gif" width="121" height="107" border="0" border="0" align="middle"></a></div
Profile
 
 
Posted: 08 February 2006 02:02 AM   [ Ignore ]   [ # 3 ]
Newbie
Rank
Total Posts:  4
Joined  2006-02-07

If you post the whole page, it’s easier to see what you’re trying to accomplish. You shouldn’t be using absolute positioning (You’re abusing it) and I’m not sure why you have images for layout (as you should be using background images).

Post the whole site.

Profile
 
 
Posted: 08 February 2006 04:58 AM   [ Ignore ]   [ # 4 ]
Newbie
Rank
Total Posts:  3
Joined  2006-02-06

you can see from here we have five image and more text will be added many be at middle or at the end in future

http://www.kshitij.com/oil/oil1.shtml

you can find on the loser resolution ‘tell a freind’ image come upon the grey part text.

that is why i have made another css file for that perticular bunch of images/area of that page. where i have possioning the image in the below of the image book mark us. which you can find on this page.

http://www.kshitij.com/oil/oil.shtml

i can use table td tag to set the picture, but we want to give proper positioning to every gif you can see from the size of them, now they all are images afterwords we will add more gifs and text link. I want to something like that, in the lower resolution it will automatically wrap to next line and rest of the text also goes down. is this possible?

for this perticular case can we use two different CSS file for different resolution? how it can be check out what resolution it is?

if you want to suggest any other way, you are welcome with your sugession.

Profile
 
 
Posted: 08 February 2006 11:23 AM   [ Ignore ]   [ # 5 ]
Newbie
Rank
Total Posts:  1
Joined  2006-02-08

Hello Sujata,

As i am working in css, I wanted to know why are we using # symbol while initilizling the name of the style and also i have noticed they also use the div tag whay are they using,

I wanted to create ASP forms can u guide me the css and also the asp

thanks

Profile