Class 3 – In-Class Assignment #1
Click Here to view the website online.
CSS turns out being harder than I initially expected. The coloring etc is pretty obvious but it took me a while to get the idea of aligning and floating. My {float:both;} solution is a mere guess than a reflected code. Anyone?
Here is my HTML Code:
<?xml version=”1.0″ encoding=”utf-8″?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML1.0 Strict//EN”"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head><link rel=”stylesheet” type=”text/css” href=”assignmentone.css” /></head>
<body>
<div id=”container”>
<h1>Class 3 – In-Class Assignment #1</h1>
<div id=”row1″>
<img id=”pic1″ src=”http://www.clevelanddotnet.info/images/MouseNotWorking.jpg”/></div>
<div id=”row2″>
<img id=”pic2″ src=”http://mouseworksonline.com/images/mouse.gif”/></div>
<p>In computing, a mouse is a pointing <span style=”color:blue;”>device</span> that functions by detecting two-dimensional motion relative to its supporting surface. <span style=”color:red;”>Physically,</span> a mouse consists of an object held under one of the user’s hands, with one or more buttons. It sometimes features other elements, such as “wheels”, which allow the user to perform various system-dependent operations, or extra buttons or features that can add more control or dimensional input. <span style=”color:orange;”>The mouse’s motion typically</span> translates into the motion of a cursor on a display, which allows for fine control of a graphical user interface.</p>
</div>
</body>
</html>
Here is my CSS Code:
#pic1 {width:200px; height:200px; border:1px solid red;}
#pic2 {width:600px; height:400px;}
div#container {width: 970px; margin-left:auto; margin-right:auto;}
div#row1 {float:both;}
div#row2 {float:both;}
I just looked at the proposed solution, which is a simple in the HTML code between the two images. Sweet. Still wondering what the CSS solution would be.