Need opinion from the pro's. - Page 3

overlord20 · 08-28-2009, 05:18 PM

Free Gaming Templates - ClanTemplates

I can not download templates from this link. Or any link on this site. There are a couple I like and want to mess with but it won't let me. "404 All your pages are belong to us".

overlord20 · 08-29-2009, 01:44 AM

I am having trouble getting the center to align right. Other then that? Looking better?

(None of the links go anywhere currently.)

Free Fallers

zmatt · 08-29-2009, 04:33 PM

Much better. It's a little too "busy" for my tastes but greatly improved.

overlord20 · 08-30-2009, 04:56 AM

I can't get rid of the gap between the top 3 tables and the bottom larger table. I also can't manage to get the "Updates:" or the following text to shrink. Help please..

Free Fallers

synergy · 08-31-2009, 12:34 PM

Much better. There are a few font issues, but looking much better.

The main problem now is tables. Tables are a less preferred way to layout content. That's the problem with ClanTemplates; most of the templates are strictly table layouts.

CSS layouts render much more efficiently as they don't have all the overhead of a table (i.e. reading and displaying each row and cell...<tr> and <td>) The main advantage though is centralized control of layout. If you need to change the way something is displayed you just change a few lines in your CSS file instead of having to manage the table in each file manually.

Try looking at the following for some CSS templates. You will need to either copy the graphics from your current template or create some new ones. Simple repeating gradients like 5 px wide and however tall you need will work great for div backgrounds.

CSS Layouts: A collection of 224 Grid and CSS Layouts
intensivstation :: CSS Templates :: Templates
Dynamic Drive CSS Layouts- Tableless, CSS based templates

For menus and/or links there is something like the following CSS for rollovers to give interactivity to your page (very basic):

Code:

.yourstyle li a {
text-decoration: none;
background-image: url(menuimage.gif);
}

.yourstyle li a:hover {
text-decoration: underline;
background-image: url(menuimage_hover.gif);
}

Put this HTML in the <head> section (to call the CSS file):

Code:

<link href="style.css" rel="stylesheet" type="text/css" />

Then use the following HTML on the page:

Code:

<ul class="yourstyle">
<li><a href="page1.html">Link to page 1</a></li>
<li><a href="page2.html">Link to page 2</a></li>
......and so on....
..and so on..
</ul>

You can also just do a Google search for CSS menu and CSS layout. There are millions out there.

overlord20 · 09-02-2009, 12:30 AM

How do I add 3 non table tables to a css code. I want to add the three tables on top "matches, news, ect."
to this code.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Left and Right Frames Layout</title>
<style type="text/css">

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}

#framecontentLeft, #framecontentRight{
position: absolute;
top: 0;
left: 0;
width: 200px; /*Width of left frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}

#framecontentRight{
left: auto;
right: 0;
width: 150px; /*Width of right frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}

#maincontent{
position: fixed;
top: 0;
left: 200px; /*Set left value to WidthOfLeftFrameDiv*/
right: 150px; /*Set right value to WidthOfRightFrameDiv*/
bottom: 0;
overflow: auto;
background: #fff;
}

.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
padding: 0 150px 0 200px; /*Set value to (0 WidthOfRightFrameDiv 0 WidthOfLeftFrameDiv)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}

</style>

<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>

</head>

<body>

<div id="framecontentLeft">
<div class="innertube">

<h1>CSS Left and Right Frames Layout</h1>
<h3>Sample text here</h3>

</div>
</div>

<div id="framecontentRight">
<div class="innertube">

<h3>Sample text here</h3>

</div>
</div>

<div id="maincontent">
<div class="innertube">

<h1>Dynamic Drive CSS Library</h1>
<p><script type="text/javascript">filltext(255)</script></p>
<p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></p>

</div>
</div>

</body>
</html>

EDIT:

In other words I want to control all of circled stuff with css and just the center box with HTML.

Also want to control update box at the bottom with css. (not showed)

CrazeD · 09-02-2009, 02:44 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<title>Untitled Document</title>
	<style type="text/css">
	  body {
	  	  background:#101010;
		  height:100%;
		  }
	  
	  #container {
	      width:800px;
		  margin:0px auto -43px;
		  height:auto !important;
		  height:100%;
		  min-height:100%;
		  overflow:auto;
		  }
	  
	  #banner {
	      background:#ff0000;
		  width:800px;
		  height:120px;
		  }
	  
	  #left-column,
	  #right-column,
	  #middle-column { 
	  	  background:#00ff00;
		  float:left;
		  width:150px;
		  min-height:400px;
		  }
	  
	  #middle-column {
	  	  width: 498px;
		  border-left:1px solid #000;
		  border-right:1px solid #000;
		  }
		  
	  #footer {
	  	  background:#ff0000;
	  	  width:800px;
		  height:40px;
	  }
	  
	  #footer #footer-text {
	  	  text-align:center;
		  padding-top:10px;
		  
	  }
	  
	  #left-column #nav {
	  	  list-style:none;
		  margin:0px;
		  padding:0px;
	  }
	  
	  #left-column #nav li a {
	      display:block;
		  height:20px;
		  line-height:20px;
		  text-decoration:none;
		  padding-left:10px;
	  }
	  
	  #left-column ul#nav li a:hover { text-decoration:underline; }
	  
	  #middle-column #middle-container {
	  	  width:498px;
	  }
	  
	  #middle-column #last-match,
	  #middle-column #next-match,
	  #middle-column #news {
	  	  background:#0000ff;
	  	  width:129px;
		  height:130px;
		  float:left;
		  border-right:1px solid #000;
	  }
	  
	  #middle-column #news { width:238px;border-right:none; }
	  
	  #middle-column #content {
	  	  width:100%;
		  height:100%;
	  }
	</style>
  </head>
<body>
<div id="container">
  <div id="banner">BANNER</div>
  <div id="left-column">
  	<ul id="nav">
  	  <li><a href="#">Home</a></li>
	  <li><a href="#">Forums</a></li>
	  <li><a href="#">Matches</a></li>
  	</ul>
  </div>
  <div id="middle-column">
  	<div id="last-match">LAST MATCHES</div>
	<div id="next-match">NEXT MATCHES</div>
	<div id="news">NEWS</div>
	<div style="clear:both;"></div>
	<div id="content">
	  <h1>Lorem Ipsum</h1>Cras turpis ipsum, convallis vel dictum ac, laoreet et ipsum? Sed velit magna, viverra vel hendrerit ultricies; sagittis et leo. Fusce enim urna, dapibus in euismod vitae, accumsan nec nibh. Aliquam posuere vestibulum quam vel egestas. Nam eu vestibulum mi. Donec et nibh a nisl fermentum rutrum. Proin interdum viverra.
	</div>
  </div>
  <div id="right-column"></div>
  <div style="clear:both;"></div>
  <div id="footer">
  	<div id="footer-text">Copyright &copy; blah inc.</div>
  </div>  
</div>
</body>
</html>

Here is a basic markup of that template in xhtml/CSS. It should give you a basic idea of what you need to do.

overlord20 · 09-02-2009, 03:37 AM

Your a life saver CrazeD!

synergy · 09-02-2009, 11:01 AM

I would put all that CSS code in a separate document then link to it in the head. Otherwise you will need that code on each HTML page. This negates the centralized functionality of CSS and will make your management of the pages much more time consuming.

overlord20 · 09-02-2009, 01:14 PM

That is what I am doing. I want to be able to edit everything but the middle page from the CSS page.

Member Login