Week 9 3/28-4/3 Float and Paddings
CONTENT
Float and paddings
READINGS
CSS DIV PADDING AND FLOATING
We mentioned in Week 6 about using CSS to float and element and to define a div’s padding, margins, and borders. This week, we are going to revisit these topics. I have added 4 video tutorials. Please watch them.
Add padding to a div
How to float a div in Dreamweaver
How to clear float in CSS in Dreamweaver
Minimum height in a Div tag
ASSIGNMENT 9
6 points
due on 4/4/2022
Based on the above videos, please revise week7.html to include the following elements:
- add padding (4 sides) 10-20px to the content section (2 points) and to the left/right-side menu bar (1 point). Please do not center the content;
- add margins or paddings 10px to the image in the content section, but not to the banner (3 points);
If you have included these elements in week7.html, you do not have to do anything this time. You may make the update directly on week7.html, which is linked on our class page. Or you may make a week9.html page and link it to the week7.html.
LEAVE A MESSAGE
<div class="wpcf7 no-js" id="wpcf7-f229-o1" lang="en-CAC" dir="ltr" data-wpcf7-id="229"> <div class="screen-reader-response"><p role="status" aria-live="polite" aria-atomic="true"></p> <ul></ul></div> <form action="/week9#wpcf7-f229-o1" method="post" class="wpcf7-form init" aria-label="Contact form" novalidate="novalidate" data-status="init"> <div style="display: none;"> <input type="hidden" name="_wpcf7" value="229" /> <input type="hidden" name="_wpcf7_version" value="6.0.5" /> <input type="hidden" name="_wpcf7_locale" value="en_CAC" /> <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f229-o1" /> <input type="hidden" name="_wpcf7_container_post" value="0" /> <input type="hidden" name="_wpcf7_posted_data_hash" value="" /> <input type="hidden" name="_wpcf7_recaptcha_response" value="" /> </div> <p><label> Your Name (required)<br /> <span class="wpcf7-form-control-wrap" data-name="your-name"><input size="40" maxlength="25" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" value="" type="text" name="your-name" /></span> </label> </p> <p><label> Your Email (required)<br /> <span class="wpcf7-form-control-wrap" data-name="your-email"><input size="40" maxlength="25" class="wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email" aria-required="true" aria-invalid="false" value="" type="email" name="your-email" /></span> </label> </p> <p><label> Subject<br /> <span class="wpcf7-form-control-wrap" data-name="your-subject"><input size="40" maxlength="25" class="wpcf7-form-control wpcf7-text" aria-invalid="false" value="" type="text" name="your-subject" /></span> </label> </p> <p><label> Your Message<br /> <span class="wpcf7-form-control-wrap" data-name="your-message"><textarea cols="40" rows="10" maxlength="400" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" name="your-message"></textarea></span> </label> </p> <p>Please enter the letters you see in the text field before you submit.<br /> <input type="hidden" name="_wpcf7_captcha_challenge_captcha" value="768000045" /><img class="wpcf7-form-control wpcf7-captchac wpcf7-captcha-captcha" width="72" height="24" alt="captcha" src="https://s3.amazonaws.com/files.commons.gc.cuny.edu/wp-content/blogs.dir/21497/files/wpcf7_captcha/768000045.png" /><span class="wpcf7-form-control-wrap" data-name="captcha"><input size="40" class="wpcf7-form-control wpcf7-captchar" autocomplete="off" aria-invalid="false" value="" type="text" name="captcha" /></span> </p> <p><input class="wpcf7-form-control wpcf7-submit has-spinner" type="submit" value="Send" /> </p><p style="display: none !important;" class="akismet-fields-container" data-prefix="_wpcf7_ak_"><label>Δ<textarea name="_wpcf7_ak_hp_textarea" cols="45" rows="8" maxlength="100"></textarea></label><input type="hidden" id="ak_js_2" name="_wpcf7_ak_js" value="74"/><script>document.getElementById( "ak_js_2" ).setAttribute( "value", ( new Date() ).getTime() );</script></p><div class="wpcf7-response-output" aria-hidden="true"></div> </form> </div>
Comments