Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Brian Galassini
Brian Galassini
3,521 Points

Images have white space! Need help please.

Here are the links first: <!-- http://s13.postimg.org/51oifcsvb/whitespace1.jpg http://s12.postimg.org/4huzbw4d9/whitespace2.jpg

Here is the HTML:

<!DOCTYPE html> <html lang="en"> <head> <title>Brian Galassini's Journal</title> <meta charset="utf-8" /> <!-- You'll need to edit the styles.css file --> <link rel="stylesheet" href="styles.css" /> </head> <body> <table> <tr> <th colspan="2">Brian Galassini's Journal <br> CIS 121 Fall Term, 2015</th> </tr>
<tr> <td>Assignment <br> & Date </td> <td> What did I learn during this assignment?</td> </tr>

     <tr>
        <td>Assignment 1 <br>
        Date: Oct. 2, 2015</td>
     <td>
        <dl>
           <img src="../images/PCC-CAS-CIS-CS.jpg" class="keyboardimg" alt="Keyboard Image">
           <dt>Which CSS property defines the border color?</dt>
           <dd>You may use border-color or border followed by curly braces to define the color of the border</dd>
           <dt>The total size of the CSS box model for a given element includes the size of the content, plus the size of which three properties?</dt>
           <dd>The three additional factors that determine the size of a CSS box model are border, margin and padding.</dd>
           <dt>Setting a value of auto to the margin property (margin: auto;) does what to the content's position?</dt>
           <dd>Setting margin to "auto" sets the value to the browser's default margin which usually centers it.</dd>
           <dt>What is the primary difference between an ordered list (ol) and an unordered list (ul) as rendered in a browser?</dt>
           <dd>Ordered lists are ordered with numbers or letters setting them in a sequence, (e.g. 1-5, A-D). Unordered lists don't use numbers or letters, but use "bullets". This list's order does not matter.</dd>
           <dt>Which CSS property and value combination is used to eliminate the space between borders of adjacent cells within a table?</dt>
           <dd>I believe the CSS property and value are: border-collapse: collapse;</dd>
        </dl>
     </td>
     </tr>
     <tr>
        <td>Assignment 2 <br>
        Date: Oct. 10, 2015</td>
     <td>
        <dl>
           <dt>What I learned about Virtualization:</dt>
           <dd>You may use border-color or border followed by curly braces to define the color of the border</dd>
           <dt>What I learned about images in web pages:</dt>
           <dd>The three additional factors that determine the size of a CSS box model are border, margin and padding.</dd>
           <dt>What I learned about operating systems:</dt>
           <dd>Setting margin to "auto" sets the value to the browser's default margin which usually centers it.</dd>
           <img src="../images/BGVirtualGUI.png" class="virtualgui" alt="Virtual Ubuntu GUI Screenshot"> 
           <img src="../images/BGVirtualShell.png" class="virtualshell" alt="Virtual Ubuntu Shell Screenshot">
        </dl>

        </td>
     </tr>

</table>

</body> </html>

Here is the CSS:

/* CIS 121 CSS template file */

h1 { color: green; text-align: center; }

dt { font-weight: bold; }

dd { margin-left: 2em; }

tr { vertical-align: top; border-collapse: collapse; border-spacing: 0; border: 1px solid black; }

th { background-color: #bfbfdf; color: green; }

td { border-collapse: collapse; border-spacing: 0; border: 1px solid black; }

table { border-collapse: collapse; border-spacing: 0; border: 1px solid black; }

img { max-width: 100%; border: 0; margin: 0; padding: 0; }

.keyboardimg { float: right; }

.virtualgui { opacity: 0.6; float: left; }

.virtualshell { opacity: 0.6; }

Here's the problem, (as you may be able to tell in the pictures):

I cannot get the pictures to be one above the other. The first image is where I want it to be, but there is a ton of white space between that, the next image and after the next image. They are positioned where I want them, but there is all this space between them! I have tried making the border 0, display: block, margin: 0... I just don't know what to do. Thank you for your help! -->

Brian Galassini
Brian Galassini
3,521 Points

Wow. It didn't show the <head> portion of my html or the other link:

http://postimg.org/image/ivcv4elgj/4ba0d8dc/ <!-- <!DOCTYPE html> <html lang="en"> <head> <title>Brian Galassini's Journal</title> <meta charset="utf-8" /> <!-- You'll need to edit the styles.css file --> <link rel="stylesheet" href="styles.css" /> </head> -->

4 Answers

unsubscribed User
unsubscribed User
8,639 Points
unsubscribed User
unsubscribed User
8,639 Points

At first glance, I want to say it's something to do with this part of your code.

.keyboardimg { float: right; }

.virtualgui { opacity: 0.6; float: left; }

.virtualshell { opacity: 0.6; }

Try margins or padding depending on your use of the image rather than floats.

Also if the two bottom images are going to be adjusted the same, you can utilize your class by naming them the same term. IDs are generally the ones that are unique throughout the html. Classes can be repeated, but do not hold as much weight as IDs.

Brian Galassini
Brian Galassini
3,521 Points

I've tried many different things with margin and padding. Can you be more specific? Thanks for responding.

Brian Galassini
Brian Galassini
3,521 Points
Brian Galassini
Brian Galassini
3,521 Points

Alissa, I already looked it up and figured it out. I was really looking for someone to show me in my code what I did wrong. I was already reviewing teamtreehouse videos and googling the answer. I really appreciate you putting in the effort to help me out. That was kind of you. Keep it up!

unsubscribed User
unsubscribed User
8,639 Points
unsubscribed User
unsubscribed User
8,639 Points

Since you labeled your classes differently, your imgs hold a different amount of space. They are separated by their use of space in that container rather than grouped. You want to use the same class in order to group them together. This will allow float to appear correctly.

Huge resources I use all the time to determine space are Google Developer Tools with the magnifier glass (Inspect Element), and setting my background property to red. This allows me to see how much that item is actually taking up relatively fast.

Brian Galassini
Brian Galassini
3,521 Points
Brian Galassini
Brian Galassini
3,521 Points

I still don't think I understand you. What about the classes is having them space out more? I thought classes were to just identify what needs changes... Can you show me in code how you propose I should fix it?

I tried taking classes out altogether and it changed nothing.

unsubscribed User
unsubscribed User
8,639 Points

I would refer back to the lesson of How to Make A Webpage with Nick Pettit (https://teamtreehouse.com/library/how-to-make-a-website) under the section "CSS: Cascading Style Sheets"

or,

CSS Basics with Guil Hernandez > http://teamtreehouse.com/library/css-basics and go through all of "Basic Selectors."

This will refresh you on this specific topic, and also clarify what I've been stating.