469,291 Members | 1,749 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,291 developers. It's quick & easy.

My stuggles with learning web languages.

30
I have been trying to learn Xhtml, Html, and Css for a while now. I have just picked it up again and started studying on W3 schools online. The problem for me is, I am a visual learner and when you tell me a div does something I really won't get it until I see someone do that something with a div.

If anyone could help me with these problems that would be great.

[HTML]<html>
<head>
<title>YourSite.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type ="text/css">
body { backround-color:##5a5b5b; }

.header { font-size:30px;
font-family: Rockwell Condensed, Impact, Arial, sands-serif, Times New Roman;
color: #fdfefe; }
.content { font-size:12px;
font-family: Rockwell Condensed, Impact, Arial, sands-serif, Times New Roman;
color:#ffffff;
padding:0px 5px 0px; }
</style>
</head>

<body bgcolor="#5a5b5b" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><CENTER>

<!-- ImageReady Slices (bluee9.psd) -->
<table id="Table_01" width="771" height="761" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="9">
<a href="#"><img src="images/bluee9_01.gif" width="770" height="73" border="0" alt=""></a>

</td>
<td>
<img src="images/spacer.gif" width="1" height="73" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="images/bluee9_02.gif" width="185" height="687" alt=""></td>
<td rowspan="2">
<a href="#"><img src="images/bluee9_03.gif" width="66" height="39" border="0" alt=""></a></td>
<td rowspan="5">
<img src="images/bluee9_04.gif" width="1" height="687" alt=""></td>
<td colspan="2" rowspan="2">
<a href="#"><img src="images/bluee9_05.gif" width="76" height="39" border="0" alt=""></a></td>
<td rowspan="2">
<a href="#"><img src="images/bluee9_06.gif" width="161" height="39" border="0" alt=""></a></td>
<td>
<a href="#"><img src="images/bluee9_07.gif" width="91" height="38" border ="0" alt=""></a></td>
<td colspan="2" rowspan="3">
<img src="images/bluee9_08.gif" width="190" height="127" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="38" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/bluee9_09.gif" width="91" height="89" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/bluee9_10.gif" width="66" height="648" alt=""></td>
<td colspan="3">
<img src="images/bluee9_11.gif" width="237" height="88" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="88" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/bluee9_12.gif" width="27" height="560" alt=""></td>
<td colspan="4">
<img src="images/bluee9_13.gif" width="443" height="498" alt="" valign="top">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut lacinia adipiscing nunc. Maecenas posuere diam et neque. Etiam porttitor. Vivamus facilisis. Sed arcu. Nunc fringilla. Ut bibendum pede at nulla. Curabitur velit nulla, cursus vitae, suscipit quis, tempus quis, nisi. Aenean laoreet justo sit amet augue. Pellentesque pretium ultricies mi. Ut ultricies aliquam orci. Donec sodales odio at diam. Morbi libero erat, rhoncus ac, rhoncus eget, volutpat nec, felis. Vivamus tincidunt fermentum libero. Fusce eu ligula. Nunc blandit blandit nisl. Suspendisse laoreet. Integer eu quam ac arcu bibendum luctus.</p>

<p>Pellentesque lobortis dapibus erat. Donec aliquet rhoncus pede. Vestibulum facilisis ultrices nunc. Phasellus feugiat. Donec vitae nisl. Donec at quam sed velit adipiscing convallis. Nullam semper. Donec eget libero nec turpis molestie tempus. Fusce convallis. Integer pharetra semper nulla. Ut eget dui. Etiam elementum tempor quam. Cras euismod consequat tellus. Duis ligula. Duis accumsan metus sit amet est eleifend pulvinar. Nulla in ipsum tincidunt urna porta auctor. Proin pellentesque. Donec eros. In lorem enim, rhoncus sed, tempus volutpat, condimentum a, mi.</p>

<p>Donec id sem. Aliquam vitae risus. Duis quis lectus vel mauris interdum suscipit. Aliquam at massa non purus imperdiet faucibus. Aliquam erat volutpat. Curabitur tempor ipsum vitae turpis laoreet egestas. Aenean pellentesque orci dignissim lorem molestie dignissim. Ut pellentesque nisi id mauris. Pellentesque velit augue, vehicula ut, volutpat non, malesuada id, arcu. Pellentesque sodales. Curabitur pede augue, dignissim non, pulvinar nec, elementum ut, libero. Cras nec odio nec augue placerat lacinia.</p>
</div>

</td>

<td rowspan="2">
<img src="images/bluee9_14.gif" width="48" height="560" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="498" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="images/bluee9_15.gif" width="443" height="62" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="62" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="185" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="66" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="27" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="49" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="161" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="91" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="142" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="48" height="1" alt=""></td>
<td></td>
</tr>


</table>
</table>
</CENTER>
</body>
</html>[/HTML]

My first question is, what do divs do exactly?

Secondly why is it whenever I try to make a website and put up example content the images I have sliced move around the content like this... http://i93.photobucket.com/albums/l7...y_Bouzy/su.jpg
3. The rest of the questions I have are explained in hear starting with how to get the header text where I want it... http://i93.photobucket.com/albums/l7...ouzy/Funum.jpg

I know thats a lot of questions and I thank in advance anyone who answers any, but If 5 people respond with solutions my problem should be solved.

P.S. I am not just asking these questions without having tried to figure them out on my own. I have gone through the tutorials on W3 schools. I passed the quizzes on there for html, xhtml, and almost passed css.

If anyone knows of any video tutorials or really good normal tutorials that would be greatly appreciated. Like I said I am a visual learner so Video tutorials are great.
Jun 25 '07 #1
2 1440
AricC
1,892 Expert 1GB
I have been trying to learn Xhtml, Html, and Css for a while now. I have just picked it up again and started studying on W3 schools online. The problem for me is, I am a visual learner and when you tell me a div does something I really won't get it until I see someone do that something with a div.

If anyone could help me with these problems that would be great.

[HTML]<html>
<head>
<title>YourSite.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type ="text/css">
body { backround-color:##5a5b5b; }

.header { font-size:30px;
font-family: Rockwell Condensed, Impact, Arial, sands-serif, Times New Roman;
color: #fdfefe; }
.content { font-size:12px;
font-family: Rockwell Condensed, Impact, Arial, sands-serif, Times New Roman;
color:#ffffff;
padding:0px 5px 0px; }
</style>
</head>

<body bgcolor="#5a5b5b" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><CENTER>

<!-- ImageReady Slices (bluee9.psd) -->
<table id="Table_01" width="771" height="761" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="9">
<a href="#"><img src="images/bluee9_01.gif" width="770" height="73" border="0" alt=""></a>

</td>
<td>
<img src="images/spacer.gif" width="1" height="73" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="images/bluee9_02.gif" width="185" height="687" alt=""></td>
<td rowspan="2">
<a href="#"><img src="images/bluee9_03.gif" width="66" height="39" border="0" alt=""></a></td>
<td rowspan="5">
<img src="images/bluee9_04.gif" width="1" height="687" alt=""></td>
<td colspan="2" rowspan="2">
<a href="#"><img src="images/bluee9_05.gif" width="76" height="39" border="0" alt=""></a></td>
<td rowspan="2">
<a href="#"><img src="images/bluee9_06.gif" width="161" height="39" border="0" alt=""></a></td>
<td>
<a href="#"><img src="images/bluee9_07.gif" width="91" height="38" border ="0" alt=""></a></td>
<td colspan="2" rowspan="3">
<img src="images/bluee9_08.gif" width="190" height="127" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="38" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/bluee9_09.gif" width="91" height="89" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/bluee9_10.gif" width="66" height="648" alt=""></td>
<td colspan="3">
<img src="images/bluee9_11.gif" width="237" height="88" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="88" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/bluee9_12.gif" width="27" height="560" alt=""></td>
<td colspan="4">
<img src="images/bluee9_13.gif" width="443" height="498" alt="" valign="top">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut lacinia adipiscing nunc. Maecenas posuere diam et neque. Etiam porttitor. Vivamus facilisis. Sed arcu. Nunc fringilla. Ut bibendum pede at nulla. Curabitur velit nulla, cursus vitae, suscipit quis, tempus quis, nisi. Aenean laoreet justo sit amet augue. Pellentesque pretium ultricies mi. Ut ultricies aliquam orci. Donec sodales odio at diam. Morbi libero erat, rhoncus ac, rhoncus eget, volutpat nec, felis. Vivamus tincidunt fermentum libero. Fusce eu ligula. Nunc blandit blandit nisl. Suspendisse laoreet. Integer eu quam ac arcu bibendum luctus.</p>

<p>Pellentesque lobortis dapibus erat. Donec aliquet rhoncus pede. Vestibulum facilisis ultrices nunc. Phasellus feugiat. Donec vitae nisl. Donec at quam sed velit adipiscing convallis. Nullam semper. Donec eget libero nec turpis molestie tempus. Fusce convallis. Integer pharetra semper nulla. Ut eget dui. Etiam elementum tempor quam. Cras euismod consequat tellus. Duis ligula. Duis accumsan metus sit amet est eleifend pulvinar. Nulla in ipsum tincidunt urna porta auctor. Proin pellentesque. Donec eros. In lorem enim, rhoncus sed, tempus volutpat, condimentum a, mi.</p>

<p>Donec id sem. Aliquam vitae risus. Duis quis lectus vel mauris interdum suscipit. Aliquam at massa non purus imperdiet faucibus. Aliquam erat volutpat. Curabitur tempor ipsum vitae turpis laoreet egestas. Aenean pellentesque orci dignissim lorem molestie dignissim. Ut pellentesque nisi id mauris. Pellentesque velit augue, vehicula ut, volutpat non, malesuada id, arcu. Pellentesque sodales. Curabitur pede augue, dignissim non, pulvinar nec, elementum ut, libero. Cras nec odio nec augue placerat lacinia.</p>
</div>

</td>

<td rowspan="2">
<img src="images/bluee9_14.gif" width="48" height="560" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="498" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="images/bluee9_15.gif" width="443" height="62" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="62" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="185" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="66" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="27" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="49" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="161" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="91" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="142" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="48" height="1" alt=""></td>
<td></td>
</tr>


</table>
</table>
</CENTER>
</body>
</html>[/HTML]

My first question is, what do divs do exactly?

Secondly why is it whenever I try to make a website and put up example content the images I have sliced move around the content like this... http://i93.photobucket.com/albums/l7...y_Bouzy/su.jpg
3. The rest of the questions I have are explained in hear starting with how to get the header text where I want it... http://i93.photobucket.com/albums/l7...ouzy/Funum.jpg

I know thats a lot of questions and I thank in advance anyone who answers any, but If 5 people respond with solutions my problem should be solved.

P.S. I am not just asking these questions without having tried to figure them out on my own. I have gone through the tutorials on W3 schools. I passed the quizzes on there for html, xhtml, and almost passed css.

If anyone knows of any video tutorials or really good normal tutorials that would be greatly appreciated. Like I said I am a visual learner so Video tutorials are great.
Why would you block the address of your site it's not going to be easy to tell you what your image problem is because we can't see the source code. Think of div's as containers for content. You use them in conjunction with CSS to layout your page and seperate content.
Jun 25 '07 #2
prn
254 Expert 100+
Hi Bouzy,

I'm not going to work my way through that entire thing, line by line. Instead, I'll make just a couple of observations.

First (simplest) "sands-serif" is not a font-family. It should be "sans-serif" (without the "d").

Second, if you've been trying to learn CSS, then somewhere you took a wrong turn. Please lose the tables. I'll point you to a quick google search for some tutorials: search on "html css layout without table". This will give you a number of good tutorials on how to use CSS for layout instead of tables. (I'm sure that lots of other search terms would work too, but this was just the first thing that came to mind and it definitely will give you good advice.)

Secondly why is it whenever I try to make a website and put up example content the images I have sliced move around the content like this... http://i93.photobucket.com/albums/l7...y_Bouzy/su.jpg
3. The rest of the questions I have are explained in hear starting with how to get the header text where I want it... http://i93.photobucket.com/albums/l7...ouzy/Funum.jpg
I know that my suggested google search did not answer your question about why various images do not do what you wanted them to do when you put them into a table, but my real advice is "stop using tables". If you check out the sort of tutorial that I have pointed you to, you will probably find that it's a much better way to layout your pages and you will solve your real problems of placement in the process.

Best Regards,
Paul
Jun 26 '07 #3

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

4 posts views Thread by gustave | last post: by
14 posts views Thread by Rich | last post: by
14 posts views Thread by master_programmer | last post: by
5 posts views Thread by romiro | last post: by
22 posts views Thread by -Lost | last post: by
16 posts views Thread by John Salerno | last post: by
10 posts views Thread by Michael Reach | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
reply views Thread by harlem98 | last post: by
1 post views Thread by Geralt96 | last post: by
reply views Thread by harlem98 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.