Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Oct 2006
    Posts
    197
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Help with what i cant figure out please

    Hi,

    Im having a few problems with my simple website located here.

    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:
    Code:
    <!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:
    Code:
    @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

  • #2
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #3
    Regular Coder
    Join Date
    Dec 2007
    Posts
    107
    Thanks
    0
    Thanked 3 Times in 3 Posts
    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
    Programming & Webmaster Forum - AdSense Revenue Sharing forum

  • #4
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    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.
    Code:
    ...
    <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:
    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?)
    Last edited by Apostropartheid; 12-26-2007 at 03:08 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •