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.
