User Name Password Register
DaniWeb IT Discussion Community
All
What is DaniWeb IT Discussion Community?
You're currently browsing the Site Layout and Usability section within the Web Development category of DaniWeb, a massive community of 392,328 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,761 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our Site Layout and Usability advertiser:
Views: 7499 | Replies: 4
Join Date: Jan 2006
Location: Land of Hope & Glory
Posts: 88
Reputation: j4mes_bond25 is an unknown quantity at this point 
Rep Power: 3
Solved Threads: 0
j4mes_bond25's Avatar
j4mes_bond25 j4mes_bond25 is offline Offline
Junior Poster in Training

Question Website view on different Screen Resolution ???

  #1  
May 11th, 2006
My present website: http://homepage.ntlworld.com/darsh25/

can be seen perfectly well on the screen resolution of 1024 x 768 but after reducing my screen's resolution to 800 x 600, I couldn't see it equally well. There are many other websites over the Internet that I checked using both screen's resolution & that works perfectly well in higher & lower resolution.

I wonder if there's a way I can make bit of changes to my CSS code so it can be seen equally well in low resolution screen.

My present CSS code:

/* CSS Document */

body 
{
	background-image:url(background.jpg);
	background-attachment:fixed;
}

/* ........................................ Banner ........................................ */

#banner
{
	width:100%;
	height:100px;
	text-align:center;
}


/* ......................................... Top Menu .................................... */

#topMenu
{
	background-color:transparent;
	cursor:default;
	text-align:center;
	width:980px;
	float:right;
}

#topMenu ul
{
	list-style: none;
	float:right;
	position:relative;
	margin-left: 130px;
	width:850px;
}

#topMenu ul li 
{
	background-color:purple;
	display: inline;
	border-width:medium;
	border-style:outset;
	width:203px;
	float:left;
	position: relative;
	font-size:large;
}

#topMenu li:hover
{
	border-width:medium;
	border-style:inset;
}


#topMenu a
{
	display:block;
	text-decoration:none; 
	font-size:larger;
	color:yellow; 
}

#topMenu a:hover
{
	background-color:black;
	color:white;
	text-transform:uppercase;
}

/* ....................................... Left Menu .......................................... */

#leftMenu
{
	background-color:transparent;
	cursor:default;
	text-align:center;
	width:100px;
	float:left;
}

#leftMenu ul
{
	text-align:center;
	list-style:none;
	margin:0px;
	position:relative;
	padding:0px;
	width:120px;
	border:thin solid red;
	border-bottom:0px;
}

#leftMenu ul li
{
	display: block;
	background-color:yellow;
	width:120px;
	border-bottom:thin solid red;
	color:blue;
	position: relative;
	font-size:large;
	line-height:50px; 
}

#leftMenu ul li:hover
{
	color:black;
	background-color:yellow;
	text-transform:uppercase;
}

#leftMenu ul li ul 
{
	position:absolute;
	display: none;
	text-transform:none;
	left:120px;
	width:123px;
	top:0px;
}

#leftMenu ul li ul a
{
	display:block;
	position:relative;
	text-decoration:none; 
	background-color:white;
	line-height:20px; 
	font-size:large;
	width:123px;
	color:green;
	text-transform:none;
}

#leftMenu ul li ul a:hover
{
	color:#00FFFF;
	background-color:black;
}

#leftMenu ul li ul {display:none;}
#leftMenu ul li:hover ul {display:block;}


/* This Code is for Microsoft Internet Explorer Browser 
to it shows the effect of "li:hover" */

body { behavior: url(csshover.htc); }

/* ................................... Content ................................................ */

#content
{
	background-color:white;
	width:850px; 
	border:1px solid green;
	float:right;
	border-bottom:none;
}

#content h2
{
	font-family:"Times New Roman", Times, serif;
	text-align:justify;
	margin:30px;
	color:#990033;
	text-decoration:underline;
	clear:both;
}

#content h3
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:justify;
	font-size:large;
	margin:30px;
	color:blue;
	text-decoration:none;
	clear:both;
}

#content h4
{
	font-family:"Courier New", Courier, monospace;
	text-align:justify;
	font-size:large;
	color:red;
	margin:30px;
	text-decoration:none;
	clear:both;
}

#content h5
{
	font-family:"Courier New", Courier, monospace;
	text-align:justify;
	font-size:large;
	color:fuchsia;
	margin:30px;
	text-decoration:none;
	clear:both;
}

#content h6
{
	font-family:"Courier New", Courier, monospace;
	text-align:justify;
	font-size:medium;
	color:black;
	margin:30px;
	text-decoration:underline;
}

#content p
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:justify;
	margin:20px 30px;
	color:black;
}

#content p.first-letter:first-letter
{
	color:red;
	margin-left:20px;
	font-size:xx-large;
}

#content ul
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:justify;
	color:black;
	margin:20px 30px;
	list-style-image:url(file:///C|/Darsh/list_icon.gif);
}

#content ul li
{
	margin:20px;
	clear:both;
}

#content ol
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:justify;
	color:black;
	margin:20px 30px;
	list-style-type:decimal;
}

#content ol li
{
	margin:20px;
}

#content img.left
{
	float:left;
	padding:10px;
}

#content img.right
{
	float:right;
	padding:10px;
}

#content ul li a
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:justify;
	color:black;
	text-decoration:none;
}

#content ul li a:hover
{
	color:red;
	background-color:yellow;
	font-weight:bold;
}

#content ul a:active
{
	color:blue;
	font-weight:bold;
}

#content ul a:visited
{
	color:grey;
}

/* ................................... Other Class ......................................... */

.boldText
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:justify;
	color:black;
	font-weight:bold;
}

.italicText
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:justify;
	color:black;
	font-style:italic;
}

.underlineText
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:justify;
	color:black;
	text-decoration:underline;
}


/* ................................... Table ......................................... */

.table
{
	background-color:black;
	border-style:outset;
	border-width:thick;
	border-spacing:20px;
	margin:30px 30px;
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:center;
}

.table:hover
{
	border-style:inset;
	border-width:thick;
}

.tr
{
	border:1px solid red;
}

.th
{
	border:1px solid yellow;
	color:fuchsia;
}

.td
{
	border:1px solid red;
	font-size:medium;
	color:yellow;
}

/* ................................... Bottom Menu ......................................... */

#centerTop
{
	text-align:center;
	float:none;
}

#centerTop img
{
	border:0px;
}

#bottomMenu
{
	border:1px solid red;
	float:left;
	background-color:black;
	color:#FFFFFF;
	text-align:center;
	font-family:"Times New Roman", Times, serif;
	font-style:italic;
	font-size:large;
	width:100%; 
	height:5%; 
	margin:0px;
}

#validator
{
	text-align:center;
	float:none;
}

#validator img
{
	border:0px;
}
Nope, I'm NOT God, but I'm British (which is the next best thing ;)
AddThis Social Bookmark Button
Reply With Quote  

Only community members can participate in forum threads. You must register or log in to contribute.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

DaniWeb Site Layout and Usability Marketplace
Thread Tools Display Modes

Similar Threads
Other Threads in the Site Layout and Usability Forum

All times are GMT -4. The time now is 11:12 pm.
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC