...

View Full Version : Help with what i cant figure out please



spadez
12-26-2007, 12:29 AM
Hi,

Im having a few problems with my simple website located here (http://www.hiven.net/server/motdx.php).

1. First of all, this will be seen at a variety of different resolutions. Is there a way to make the text size dependant on the resolution? For exmaple a large resolution equals larger text.

2. My second problem is that the menu buttons on the top dont seem to align correctly. They are meant to place themselves with an even gap inbetween along the top bar no matter what the resolution. However, this doesnt happen. The gap between some of the menu blocks is larger than the others.

3. What is the best way to change the properties of the menu blocks at the top? It is to be dispalyed in a very restrictive browser (an ingame MOTD), which doesnt allow javascript. For some reason, the hover over doesnt work ingame, the properties only change when you actually click on the menu item. Is there another way i can do it?

Here is my code:

HTML:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hive MOTD</title>
<link href="./css.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="shell">
<div id="header">

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Server</a></li>
<li><a href="#">Apply</a></li>
<li><a href="#">Donate</a></li>
<li><a href="#">Matches</a></li>
</ul>
</div>
<div id="main">
<div id="side">
<div class="tborder">
<h1>Server</h1>
<p>Pro Hi-Def Server<br />Zblock Max<br />Sv_Pure 1<br />100 Tick<br />500 Fps</p>

</div>

<div class="tborder">
<h1>Recruitment</h1>
<p>Our recruitment status<br />
is currently: <span class="open">Open</span></p>
</div>


<div class="tborder">
<h1>Forum Topics</h1>
<ul>
<li class="item"><a href="http://www.hiven.net/forums/showthread.php?p=24932#post24932"><span>&lt;3!!!!!!!!!!</span></a></li><li class="item"><a href="http://www.hiven.net/forums/showthread.php?p=24931#post24931"><span>Somebody brought h</span></a></li><li class="item"><a href="http://www.hiven.net/forums/showthread.php?p=24927#post24927"><span>Pak!</span></a></li><li class="item"><a href="http://www.hiven.net/forums/showthread.php?p=24925#post24925"><span>I like you.</span></a></li><li class="item"><a href="http://www.hiven.net/forums/showthread.php?p=24919#post24919"><span>Merry Christmas!</span></a></li><li class="item"><a href="http://www.hiven.net/forums/showthread.php?p=24918#post24918"><span>Server?! :D</span></a></li><li class="item"><a href="http://www.hiven.net/forums/showthread.php?p=24916#post24916"><span>New addition to ou</span></a></li></ul>
</div>
</div>
<img src="http://www.hiven.net/server/hiven.gif">
<div id="bar">Hiven Gaming Community</div>
<div id="content">
<p>
The Hive Empire proudly welcomes you to our new server, hosted graciously at www.hd-gaming.com! Please ensure you follow all of our rules to enjoy this community at it's greatest.<br />
For more details please visit our gaming site at www.hiven.net!<br />
<br /><br />
Do not hack<br />
Do not be rude<br />
Do not use offense language if asked<br />
Do not spray offensive sprays<br />
Behave and respect our admin<br />
www.hiven.net<br />
</p>

</div>
<div id="clear"></div>
</div>
</div>
</body>
</html>

CSS:

@charset "utf-8";

/* Style Sheet */

body {
padding: 0;
margin: 15px 0 15px 0;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #151515;
color: #EDEDED;
}


#shell {
margin: 0 auto;
width: 100%;
background: #FFFF00;
}

#header {
width: 90%;
margin: 0 auto;
height: 26px;
background: #252525;
background-image:url('headerbg.jpg');
border: 1px solid #000000;
}

#main {
width: 90%;
margin: 0 auto;
padding-top: 5px;
border: 1px solid #000000;
border-top: 0;
background: #2D2D2D;
}

#side {
width: 150px;
padding-right: 5px;
float: right;
}

#content {
margin: 0 160px 5px 5px;
padding: 5px;
border: 1px solid #000000;
background: #1f1f1f;
}

.tborder {
border: 1px solid #000000;
background: #1f1f1f;
margin-bottom: 10px;
padding-bottom: .4em;
}

.thead {
background: #1f1f1f;
font-weight: bold;
color: #FFFFFF;
font-size: 13px;
}


#clear {
clear: both;
}

.tborder h1 {
background: #1f1f1f;
font-weight: bold;
color: #FFFFFF;
font-size: 13px;
margin:0 0 5px 0px;
padding:0 3px;
border-top:1px solid #2d2d2d;
}
.tborder p {
margin:0;
padding:0 3px;
}
.open {
font-weight:bold;
color:#80ff80;
}

.tborder ul {
margin:0;
padding:0 3px 0 18px;
list-style-type: circle;
}

ul a {
color: #cc6;
}

#header ul li {
float: left;
margin: .5em;
margin-top: 4px;
padding: 0;
width:16.6%;
}

#header ul a {
line-height: 1em;
padding: .2em;
border: 1px solid #000000;
float: left;
text-transform: uppercase;
text-decoration: none;
color: #aae2ff;
background: #1f1f1f;
font-size: 1em;
font-weight:bold;
}

#header ul a:hover {
line-height: 1em;
padding: .2em;
border: 1px solid #000000;
float: left;
text-transform: uppercase;
text-decoration: none;
color: #1f1f1f;
background: #aae2ff;
font-size: 1em;
font-weight:bold;
}


#header ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#bar {
background: #000;
height: 15px;
margin-left: 5px;
margin-right: 160px;
margin-bottom: 5px;
}

Is anyone able to help me with this?

James

twodayslate
12-26-2007, 05:44 AM
Check out the following links
http://www.themaninblue.com/writing/perspective/2004/09/21/
http://clagnut.com/blog/348/

technica
12-26-2007, 06:49 AM
for all such probelm related to resolution i generally use font size and page width properties in % rather than in px.

For e.d. <td width="100%">&nbsp</td>

instead of something

<td width="800px>&nbsp</td>

also u can do this for font sizes in CSS

Apostropartheid
12-26-2007, 04:03 PM
Let's just not go near tables.

For font sizes, there is...well, no way to make it dependant of resolution. Browsers mostly set it to 16 pixels, and that's probably how it's going to stay. Sorry. However, if it makes you feel better, the text will roughly be the same size on all monitors anyway; the pixels increase as the size increases, not just randomly. The main advantage of a larger monitor is more information rather than smaller text. However, we mostly set it in percentages anyway, because IE doesn't like resizing pixels (and I guess it has a point.) A percentage in fonts means a certain amount of the default size. e.g.

...
<p style="font: 50&#37;/1.8 Verdana, sans-serif;">Look at me, I should be 8px! Unless you have a weird browser. Anyway, you should probably never consider doing stuff this size, but anyone can halve.</p>
...

For widths, however, it's a different story. You can make any block-level element a percentage of its parent. (body defaults to 100%.)

Let's say you had this code:

<!DOCTYPE html>
<html xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xml;charset=utf-8" />
<title>My 100% page! Yay!</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
text-decoration: none;
}
#content {
width: 100%;
background: #bbe9ff;
}
</style>
</head>
<body>
<div id="content">
<p>Hello, world! And all that random stuff.</p>
</div>
</body>
</html>

Then you'd have the background of #content (#bbe9ff) filling up the full width of the page, whatever size the browser window or monitor is.

(of course, you do not explicitly need #content here, but you see what I mean, right?)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum