New Posts  All Forums:Forum Nav:

Extreme HTLM Noob - Page 3

post #21 of 37
Quote:
Originally Posted by xyeLz View Post

As for the table code in CSS, how do I implement it in HTML? For example, table.main I tried doing to no avail. frown.gif

The code I typed up means that its a class specifically linked to tables

HTML
Code:
<table class="main">
</table>

CSS
Code:
table.main{
background: #c0c0c0;
text-align: center;
width: 100%;
height: 8px;
}
Does that help?
post #22 of 37
Thread Starter 
I feel stupid for not have guessing that one. Meh.

As for the Walnut website - I think it's useful to work off of. I can view the page source and work from there. The CSS seems simply laid out so it makes it easy to follow.

My only complaint is that I might be done using it as a reference quite soon as there isn't much content there to "experiment" with if you know what I mean.

Now that I've got the basic gist of things, I need some guidance on where to head next and I think that guidance comes from me because I need to decide what I want to do with my page. Haha.

For example, at this point I am thinking of putting a logo in the middle and keep the footer on the bottom. Only question that brings up is how do I get it in the middle on all web browsers? (ie: 1920x1200 has 1200 vertical pixels. If I put it 600 pixels down then its perfect. However, 800x600 resolutions will put the image so far down they will need to scroll another 600 pixels. Know what I mean?)
post #23 of 37
Quote:
Originally Posted by xyeLz View Post

Only question that brings up is how do I get it in the middle on all web browsers? (ie: 1920x1200 has 1200 vertical pixels. If I put it 600 pixels down then its perfect. However, 800x600 resolutions will put the image so far down they will need to scroll another 600 pixels. Know what I mean?)

If you want it to be in the middle on any resolution its best to keep away from using px and use %.
Have a play and see how you get on thumb.gif
post #24 of 37
Thread Starter 
So if I get this correctly, tables aren't supposed to be used for "design" purposes? They are supposed to be used moreso for organizing lists and keeping things neat and tidy?

So for example, the tables on http://www.mmtubing.com that kind of make the layout stand out are incorrect and shouldn't be used like that?

Just wondering here. How else would I get those designs there other than a physical graphic? Wouldn't that make the page even slower than the HTML tables?
post #25 of 37
What you can do is use a main div container for the entire center of the page, Then put more div container that will have a different color background so it will create a line across the content.

You can float div containers so they will move around on the page when you re-size the browser window.

Give me a litte while and i will show you an example.
post #26 of 37
Here is a really basic setup of the div containers to give you an idea of how it positions them using CSS.

Here is the HTML
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">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Testing page</title>
<link type="text/css" rel="stylesheet" href="style.css" />

</head>

<body>





<div id="content">
<div id="banner"><!--Banner will be here-->

<h1>Here is the banner</h1>

</div>
<div class="spacer"></div><!--This adds a space between banner and the content containers-->
<div id="main"><!--Main content will go here-->


<p>Here is all the content for the page</p>
<p>Here is all the content for the page</p>
<p>Here is all the content for the page</p>
<p>Here is all the content for the page</p>
<p>Here is all the content for the page</p>

</div>
<div class="spacer"></div>
<div id="footer">

<p>Footer is optional</p>

</div>
<div id="copyright">

<p>copyright information for the bottom of the page</p>
<p>copyright information for the bottom of the page</p>
<p>copyright information for the bottom of the page</p>
<p>copyright information for the bottom of the page</p>

</div>
</div>
</body>

</html>

Here is the CSS file to go with it.
Code:

body            {background-color:#CCCCCC;}

.spacer         {width:100%; height:15px; background-color:black;}

#content        {width:900px; height:auto; text-align:center; margin:auto;}

If you are wondering how the container is centered. It is the margin set to auto that sets it to center automatically.
post #27 of 37
Thread Starter 
Thanks smile.gif

How do people do those mini tabs? Like instead of
Code:
</head>
<body>
<div id="container" class="containertext">

They do
Code:
</head>
<body>
   <div id="container" class="containertext">

Is that a normal thing to do? Does it serve a purpose?
post #28 of 37
Functionally it serves no purpose. The reason for doing it is to make the HTML easier to read. If I removed all my tabs, it would be harder to see certain things.

The idea is to have a tag, anything inside the tag is indented. Like so.

Having this
Code:
<div>
        <a href=""></a>
        <p></p>
        <div>
        
                <p>
                
                </p>
                <a href=""></a>
        
        </div>

</div>



Rather then this.
Code:
<div>
<a href=""></a>
<p></p>
<div>
<p>
</p>
<a href=""></a>
</div>
</div>
post #29 of 37
Thread Starter 
I understand that, but I have seen some tabs that aren't full tabs. They are partial tabs. To me, it seems to be easier to read that way and doesn't spread across the entire screen. Do you know what I mean?
post #30 of 37
Quote:
Originally Posted by xyeLz View Post

I understand that, but I have seen some tabs that aren't full tabs. They are partial tabs. To me, it seems to be easier to read that way and doesn't spread across the entire screen. Do you know what I mean?

I think that depends on the editor. Some people also use spaces instead of the tab key. I use the tab key. It doesn't really make a difference though.
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Coding and Programming