Jump to content

Need Help with optomization of page

elite_prodigy

By elite_prodigy
in CSS Help

 Share

Recommended Posts

elite_prodigy Member

elite_prodigy

Posted
Posted

Okay the page is http://exposemyschool.co.cc/something <--write whatever you want for your own musings

 

The source is:

 

<html>
<head>
<title> <?php echo $site; ?> .::. Dirty Little Secrets .::. <?php echo $page ?> </title>
<link rel="stylesheet" type="text/css" href="http://exposemyschool.co.cc/site/main.css"> 
</head>
<body>

<table border="1" class="container">

<tr>
  <td colspan="5" class="top_bar">
  </td>
</tr>

<tr>
  <td class="nav">Home</td>
  <td class="nav">Secrets</td>
  <td class="nav">Dirt Digger</td>
  <td class="nav">Archives</td>
  <td class="nav">Staff</td>
</tr>

<tr>
  <td colspan="5">
   <table border="1" class="content">
    <tr>
     <td class="display">

      <?php echo $var_name; ?>

     </td>
    </tr>
   </table>
  </td>
</tr>
</table>

</body>
</html>

 

The CSS is:

 

body{

background-color : #333366;

}

.top_bar{

background: #333366 url("http://exposemyschool.co.cc/site/images/top_bar.jpg") top left repeat-x;
height: 143px;
width: 100%;

}

.nav{

background: #333366 url("http://exposemyschool.co.cc/site/images/nav_bar.jpg") top left repeat-x;
height: 40px;
align: center;

}

.container{

width: 75%;
align: center;
position: absolute
left: 12.5%

}

.content{

align: center;
width: 100%;

}

 

I can't get the table to move to the center. And when I take away the border there are lines through the backgrounds of the NavBar.

Can someone help me with this? My strength is not in design.

 

*ingnore the PHP, this page will be displaying dynamically from SQL. there is only one page that will, if I can manage, seem like several.

Link to comment
Share on other sites
elite_prodigy Member

elite_prodigy

Posted
  • Author
Posted

I will not help you. You are wasting time using deprecated methods of positioning *cough TABLES. Use ONLY CSS.

 

How? Get a good book and start.

 

The title of the post was "Optimization....". I want help optimizing my page. I'm a programmer first, a designer seccond. I work mainly with backend operations. I don't do design.

 

So, if you want to explain how to do this with boxes or divs, go ahead. I still can't get the float: center;.

Link to comment
Share on other sites
TheFilmGod Advanced Member

TheFilmGod

Posted
Posted

I will not help you. You are wasting time using deprecated methods of positioning *cough TABLES. Use ONLY CSS.

 

How? Get a good book and start.

 

The title of the post was "Optimization....". I want help optimizing my page. I'm a programmer first, a designer seccond. I work mainly with backend operations. I don't do design.

 

So, if you want to explain how to do this with boxes or divs, go ahead. I still can't get the float: center;.

 

Sometimes you can't "optimize" because it done in such an incorrect way, that you have to scrap it and start over.  - This one is a good example of that.

Link to comment
Share on other sites
Hartley Member

Hartley

Posted
Posted

Though not a direct answer, this will enlighten you on some CSS which will help optimize your menu:

 

http://www.alistapart.com/articles/taminglists/

 

As far as the centering, I've used some sneaky ways to get it in, try putting this into your top container element:

 

	margin:0 auto;

 

It works if you put it in your container. You should definitely fix up the CSS, when you get a chance :)

Link to comment
Share on other sites
Hartley Member

Hartley

Posted
Posted

Since it was short, I did a really quick do-over converting it to CSS. Bear in mind there's a lot to do, like adding the doctype and whatnot so it'll post fine, but the idea here it for you to see how this works for your purpose. It was FilmGod about a year ago who said the same exact thing to me, and since then tables are only used for data! Note I took out the PHP stuff in there, so you'll have to add it back in where you see fit.

 

HTML

<html>
<head>
<title>.::. Dirty Little Secrets .::.</title>
<link rel="stylesheet" type="text/css" href="css.css"> 
</head>
<body>

<div id="container">
<div class="topbar">
	<div id="menucontain">
		<ul id="menu">
			<li><a href="#">Home</a></li>
			<li><a href="#">Secrets</a></li>
			<li><a href="#">Dirt Digger</a></li>
			<li><a href="#">Archives</a></li>
			<li><a href="#">Staff</a></li>
		</ul>
	</div>

</div>
<div class="content">
	Content
</div>
</div>
</body>
</html>

 

CSS

body { background-color: #333366; }

#container {
width:75%;
overflow:hidden;
margin:0 auto;
}

#container .topbar {
background: #333366 url("http://exposemyschool.co.cc/site/images/top_bar.jpg") top left repeat-x;
height:143px;
width:100%;
}

/* content */
#menucontain {
width:100%;
margin:0 auto;
padding:103px 0 0 0;
overflow:hidden;
}

/* menu */
#menu {
width:100%;
margin:0;
padding:0;
list-style:none;
}

#menu li {
float:left;
position:relative;
width:20%;
}

#menu li:hover ul, #menu li.hover ul { display:block; }

#menu li a {
background: #333366 url("http://exposemyschool.co.cc/site/images/nav_bar.jpg") top left repeat-x;
float:left;
height:40px;
width:100%;
text-align:center;
}

.content {
float:left;
position:relative;
}

 

Link for reference:

http://www.alistapart.com/articles/taminglists/ - Learn about how to make UL work for you.

 

Also see what you can dig up on web standards: you'll find your markup becomes MUCH cleaner and browser-friendly.

Link to comment
Share on other sites
haku Regular Member

haku

Posted
Posted
The title of the post was "Optimization....". I want help optimizing my page. I'm a programmer first, a designer seccond. I work mainly with backend operations. I don't do design.

 

If you are a programmer, you are involved with the design whether you like it or not. Your scripts output the (x)html that then has CSS layered over top. Granted as a back end programmer you can ignore what the designer does with the CSS, but if you don't output (x)html that the designer can use, then you aren't doing a very good job of programming.

 

 

Link to comment
Share on other sites
elite_prodigy Member

elite_prodigy

Posted
  • Author
Posted

The title of the post was "Optimization....". I want help optimizing my page. I'm a programmer first, a designer seccond. I work mainly with backend operations. I don't do design.

 

If you are a programmer, you are involved with the design whether you like it or not. Your scripts output the (x)html that then has CSS layered over top. Granted as a back end programmer you can ignore what the designer does with the CSS, but if you don't output (x)html that the designer can use, then you aren't doing a very good job of programming.

 

 

 

I am given formats and I use said formats for use with output. I do my best to keep my output as clean of (x)HTML as possible.

 

Sorry, fixed this on friday. I just built a bunch of divs. You can look at it here : http://exposemyschool.co.cc/phpfreaks

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.