Few questions about my website [Archive]

Click to See Complete Forum and Search --> : Few questions about my website

cani

03-26-2005, 04:08 PM

Hi there!
this is my first post on this site!
I'm a newbie with html but kind advanced with photoshop and 3ds max but this didn't have importance. :rolleyes:
so let's start with my website www.freewebs.com/penmanipulation I am on freewebs just the time we're building the site.
I do it with tables only and I have some questions;

1- I know how works colspan="number",so I use it to get the TD for my link button under my logo,but now I want the row under the one "spaned" to have only 3 TD and to take the full width! How do I do? I juste do an other table...is this the only way?

2-the TD which contain my navigation window, I want my navigation window to be in the center, under the main bar, I tried to use valign="top" but it does nothing!? did I do it wrong?

3-the TD which contain my iframe now, when the text into my iframe is too long it goes under the table data and I don't see the whole text! is there a possible way to make my iframe stretch the TD?

finaly
4-there always a white space under my low bar, how can i delete it? like my logo, it is next my browser toolbars..

ooff it makes a lot of questions I know but I really want to know! I'm waiting for answers!! :D
and sorry for my kind a poor english guy :p i'm from where the people talk french ;)

the tree

03-26-2005, 04:19 PM

For starters, read up on why tables for layout is stupid (http://hotdesign.com/seybold). Then forget about iframes, they are more trouble than they're worth.

Once you've done that you'll find this a whole lot easier.

cani

03-26-2005, 04:30 PM

yes but this means I should learn css and rebuild my site...
this would be very time consuming and my objective is just to do a quite simple personnal site...I don't want to do something of huge!

js_prof_cons

03-26-2005, 05:17 PM

You'll find once it is CSS it becomes much easier to edit, and you'll gain back the time you spend converting it to CSS in the first place, and quite quickly I should add.

ray326

03-26-2005, 06:22 PM

Here's your layout roughly realized sans-tables. It's offered as proof you absolutely do not need to use outdated layout to create your site.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="http://www.freewebs.com/penmanipulation/" />
<title>Conforming HTML 4.01 Transitional Template</title>
<style type="text/css">
body {
margin:0;
padding:0;
border: 0;
background:#fff;
color:#000;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:1em;
width: 740px;
}
div#banner {
background: url(images/Logo.gif);
width: 740px; height: 110px;
}
div#navbar {
}
#navbar ul {
list-style-type: none;
margin:0; padding: 0;
height: 26px;
width: 740px;
background: url(images/Place_Button.gif) right top repeat-x;
}
#navbar ul li {
float:left;
}
#navbar img {
border: none;
}

div#leftnav {
width:105px;
float:left;
clear:left;
background: url(images/main_nav.gif) repeat-y;
}
#leftnav ul {
list-style-type: none;
margin:.5em 0 .5em 1em;
padding: 0;
}
div#leftnavtop {
background: url(images/top_nav.gif);
height:24px;
}
div#leftnavbot {
background: url(images/Low_Nav.gif);
height:24px;
}

div#content {
margin-left: 115px;
}
div#footer {
clear: both;
width: 740px;
height: 32px;
background: url(images/low_bar.gif) repeat-x;
}
</style>
</head>
<body>
<div id="banner"></div>
<div id="navbar">
<ul>
<li><a href=""><img src="images/Home.gif" height="26" width="80"></a></li>
<li><a href=""><img src="images/Pens.gif" width="63" height="26"></a></li>
<li><a href=""><img src="images/About_us.gif" width="97" height="26"></a></li>
<li><a href=""><img src="images/links.gif" width="58" height="26"></a></li>
<li><a href=""><img src="images/Tricks.gif" width="66" height="26"></a></li>
<li><a href=""><img src="images/Tutorials.gif" width="90" height="26"></a></li>
</ul>
</div>
<div id="leftnav">
<div id="leftnavtop"></div>
<div id="leftnavnav">
<ul>
<li><a href="">Jump to</a></li>
<li><a href="">Jump to</a></li>
<li><a href="">Jump to</a></li>
<li><a href="">Jump to</a></li>
<li><a href="">Jump to</a></li>
<li><a href="">Jump to</a></li>
<li><a href="">Jump to</a></li>
<li><a href="">Jump to</a></li>
<li><a href="">Jump to</a></li>
<li><a href="">Jump to</a></li>
<li><a href="">Jump to</a></li>
</ul>
</div>
<div id="leftnavbot"></div>
</div>
<div id="content">
<h2>Some Content</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div id="footer"></div>
</body>
</html>

cani

03-26-2005, 06:37 PM

GOD! I don't understand a word of what you just writed!
are you sure its the only way to resolve my prob? i'm sure when you learn css its pretty usefull but I am enough confuse with html if i try to learn css now I'll be lost!
I just want to end my layout and start editing the content of the site... but if there is no other way i'll give it a try...

ray326

03-26-2005, 11:38 PM

If you're already confused by HTML then you're at ground zero anyway so you might as well learn to do it right. The HTML in my version is a LOT simpler than the HTML in your nested tables and once the CSS is put in an external style sheet the resulting pages will be WAY smaller than anything you can do with nested tables.

cani

03-27-2005, 10:09 AM

Ok i'll give it a try.. do you know a god ste that can help me to learn css?
and by the way, with which program can I do css?does frontpage works?

cani

03-27-2005, 10:10 AM

Ok i'll give it a try.. do you know a god ste that can help me to learn css?
and by the way, with which program can I do css?does frontpage works?
will I need to restart from zero my site?
thx for your help guys

the tree

03-27-2005, 10:43 AM

Whatever you do, don't use Front Page. HTML-Kit (http://www.chami.com/html-kit/) is a cute little editor that'll work fine, as well as having some pretty syntax highlighting that you'll find very usefull.
w3 schools (http://www.w3schools.com/css/default.asp) is a good reference. A List Apart (http://alistapart.com/topics/css/) has lots of tips and tricks. CSS Zen Garden (http://csszengarden.com/) has tons of inspiration.

ray326

03-27-2005, 09:48 PM

Ok i'll give it a try.. do you know a god ste that can help me to learn css?
and by the way, with which program can I do css?does frontpage works?
I've gotten a lot from westciv (http://www.westciv.com/style_master/academy/css_tutorial/index.html) as well as the links in my sig. I did that example in HTML-kit (http://htmlkit.com).

cani

03-28-2005, 09:12 AM

thanx!

cani

03-28-2005, 05:53 PM

Heum, I don't understand what this DIV tag is for? where can I find his explanation?

ray326

03-28-2005, 08:14 PM

Heum, I don't understand what this DIV tag is for? where can I find his explanation?
A <div> is a generic block. It has no semantic meaning. It's purpose is to be a stylistic container or "hook". It's inline analog is the <span>.

Also you should always go to the source:

http://www.w3.org/TR/html401/struct/global.html#edef-DIV

Jliddell

03-28-2005, 08:15 PM

The div tag divides.
Full explanation at http://www.w3schools.com

cani

03-29-2005, 04:50 PM

ok there is something I don't understand again,
this is my css files;
#body {
padding-left: 6px;
position: relative;
background-color: blue;
width: 750px;
}
#left {
position: absolute;
width: 6px;
height: 100%;
top: 0;
left: 0;
background: url(images/left_bar.gif) repeat-y;
}
#banner {
width: 738px;
height: 111px;
background: url(images/logo.gif);
}
#main_bar {
position: absolute;
height: 26px;
width: 738px;
top: 111px;
}
#banner_shadow {
position: absolute;
height: 5px;
width: 738px;
top: 137px;
background: url(images/header_bar_shadow.gif);
}

this is my html if it can helps;

<body>

<DIV id="body">
<DIV id="left">
</DIV>
<DIV id="banner">
</DIV>
<DIV id="main_bar"><img alt="Home (1K)" src="images/Home.gif" height="26" width="80" /><img alt="About_us (1K)" src="images/About_us.gif" height="26" width="97" /><img alt="links (1K)" src="images/links.gif" height="26" width="58" /><img alt="Pens (1K)" src="images/Pens.gif" height="26" width="63" /><img alt="Tricks (1K)" src="images/Tricks.gif" height="26" width="66" /><img alt="Tutorials (1K)" src="images/Tutorials.gif" height="26" width="90" /><img alt="Place_Button (1K)" src="images/Place_Button.gif" height="26" width="284" />
</DIV>
<DIV id="banner_shadow">
</DIV>
</DIV>

</body>

why does;
1-my left bar don't take the whole height??
2-the height of the shadow of the main bar is not the height I specify it!?
3-is this technique okay for my site layout?

thanks for helping me guys I really need your help!

ray326

03-29-2005, 11:27 PM

I wouldn't use "body" as an id and here's how I'd do that left bar (for starters anyway).

body {
background: url(images/left_bar.gif) repeat-y;
}