Forum Moderators: not2easy
It is my resolution to learn CSS this year and below is my code. I need some help with making it better, particularly on the
following
- hovering over "about us" display a block which is indeed what i would like also for the other menu links. But seems not to work.
- having the content and images DIVisions have their base right above the footer
- centering the enter site
- how to make edges to the the white section curved
- making the content DIVision expansive according to content. Is there a way of making this corespond with height of other DIVsions of the site,eg.leftside
When more data is placed in the content DIVision, it expands and becomes longet that the DIVisions LeftSide and Images. How can this expansiveness also include the other sections?
I will also appreciate advice and assistance of how to improve on other areas i may have missed. I have a marketing background and will really appreciate your input.
Thank you, looking forward to your response.
Regards
/* CSS Document */
#leftSide{background-color:#0066FF; width:150px; height:500px; float:left; }
#topTop{background-color:#339966; float:left; height:500px; width:500px;}
#topCenter{background-color:#660099; height:50px; width:500px; float:left;}
#topMenu{background-color:#999999; height:50px; width:500px;}
#content{background-color:white; height:inherit; width:400px; float:left; text-align:justify;}
#images{background-color:#000033; height:350px; width:100px; float:left;}
#footer{background-color:#FF9900; height:30px; clear:left; width:650px; text-align:right;}
.menu{background-color:blue; text-decoration:none;}
.menu a{display:block; overflow:auto;}
.menu a:visited{text-decoration:none;}
.menu a:hover{text-decoration:none; background-color:#6633CC; display:block;}
.menu a:active{}
.menu1{background-color:#0066FF; text-decoration:none;}
.menu1 a{display:block; overflow:auto;}
.menu1 a:visited{text-decoration:none;}
.menu1 a:hover{text-decoration:none; background-color:#00CC33; display:block;}
.menu1 a:active{}
############
HTML
############
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Marketing in Zambia</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="leftSide"><img src="Blue%20hills.jpg" width="150" height="100">
<table width="100%" border="1" cellspacing="2" cellpadding="2">
<tr>
<td class="menu"><a href="">About Us</a></td>
</tr>
<tr>
<td class="menu1"><a href="">Objectives</a></td>
</tr>
<tr>
<td class="menu"><a href="">Partners</a></td>
</tr>
<tr>
<td class="menu1"><a href="">Articles</a></td>
</tr>
<tr>
<td class="menu"><a href="">Marketing Blog</a></td>
</tr>
<tr>
<td class="menu1"><a href="">Downloadable Books</a></td>
</tr>
<tr>
<td class="menu"><a href="">Marketing Study</a></td>
</tr>
<tr>
<td class="menu1"><a href="">Marketing Membership</a></td>
</tr>
<tr>
<td class="menu"><a href="">Continous Professional Development</a></td>
</tr>
<tr>
<td class="menu1"><a href="">Contact Us</a></td>
</tr>
</table>
</div>
<div id="topTop">
<div id="topCenter"><h2><p align="center">Marketing in Zambia</p></h2></div>
<div id="topMenu">Top Menu</div>
<div id="content">
<p><b></b>Welcome!</b></p>
<p>The beauty of learning is that it never comes to an end...(until death)</p>
<p>This website is as a result of learning and its existence is a platform for continous learning...</p>
<p>It is all about learning, but also putting in practice knowledge</p>
<p>Here practice is partly to do with the development of an information and communication center. Further on, this has created room for the development of an integrated email and SMS program from a "programmer" and marketing perspective.</p>
<p>There is a lot we can learn from you and we invite you to partner with us. And we too will, and we are, delighted to share with you what we know.</p>
<p>Please browse through our site and do communicate with us your thoughts. We can then engage on one-on-one discussion on a number of professional, social, and even entreprenuer topics.</p>
<p>Once more, Welcome, browse, and please do come back. And please do <a href="">join our mailing list.</a></p>
</div>
<div id="images"><img src="Blue%20hills.jpg" width="100" height="350"></div>
</div>
<div id="footer">Designed and maintained by Saboi Chocho</div>
</body>
</html>
Thanks, i will try that and give you feedback so that some else may also learn from my mistakes.
