Lesson 23 "Displaying it properly" issues. Help would be appreciated


#1

In the picture below shows my issue. The lesson is asking me to set the display to inline, and the padding to 5px for the selector of "li" to which I believe I typed it in correctly. I have tried a few other things to see if it would fix my issue, such as putting it under "ul" instead of "li" switching the order in which my CSS code is arranged. None of my troubleshooting has seemed to fix my issue, and its starting to get frustrating because I am pretty sure I typed it in correctly and didnt miss any semi-colons or colons in my code. Any help on what might be causing my issue would be appreciated.


#2

Could you copy paste your full html and css code to the forum? Really difficult to tell from the image

use one of the two following options to make your code/indent is visible:

select your code and press ctrl + shift + c (or cmd + shift + c if you use a mac)

if this instructions are unclear, you can also insert 3 backticks before and after your code, like so:

```
<p>visible</p>
```

the backtick is located above the tab key on your keyboard


#3

here is the entire CSS code for that lesson. I put the part that the lesson wants me to do in bold

body {
	background-color: #b7d1c4
}
#navbar {
    position:fixed;
    margin:-10px 0px 0px 0px;

h2 {
	font-family: Verdana;
	font-weight: bold;
	text-align: center;
	padding-top: 25px;
	padding-bottom: 25px;
	color: #acd1b2;
}

img {
	height: 170px;
	width: 170px;
	box-shadow: rgba(0,0,0,0.2) 10px 10px;

}

#navbar {
	/*Add your CSS here!*/
	
	left:50%;
	margin-left:-254px;
}

#header {
	position: relative;
	top: -10px;
	background-color: #3c4543;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
}

ul{
	list-style-type: none;
	position: fixed;
	margin: -10px;
}

li {**
	/*Add your CSS here!*/**
	display:inline;**
	padding:5px;**
	border: 2px solid #000000;
	font-family: Futura, Tahoma, sans-serif;
	color: #ffffff;
	border-radius: 5px 5px;
	background-color: #cc0323
}

#left{
	/*Add your CSS here!*/
	
}

p {
	font-family: Tahoma;
	font-size: 1em;
}

#right{
	/*Add your CSS here!*/
	
}

table {
	border: #000000 1px solid;
	background-color: #acd1b2;
	float: right;
	margin-right: 10px;
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
}

td {
	height: 75px;
	width: 75px;
}

td img {
	height: 75px;
	width: 75px;
	box-shadow: none;
}

th {
	font-family: Verdana;
	font-size: 1em;
	font-weight: normal;
	color: #3c4543
}

#bottom_left{
	border-bottom-left-radius: 15px;
}

#bottom_right{
	border-bottom-right-radius: 15px;
}

#footer{
	/*Add your CSS here!*/
	
	position: relative;
	bottom: -20px;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	height: 75px;
	background-color: #3c4543;
}

#button{
	border: 2px solid #000000;
	float:left;
	position: relative;
	left: 229px;
	bottom: -20px;
	border-radius: 5px;
	background-color: #cc0323;
	height: 30px;
	width: 150px;
	
}

#button p{
	position: relative;
	bottom: 10px;
	font-size: 0.8em;
	color: #acd1b2;
	text-align: center;
}

.bold{
	font-family: tahoma;
	font-weight: bold;
	font-size: 1.2em;
	font-variant: small-caps;
	color: #ffffff;
}

below is my entire HTML code:

<!DOCTYPE html>
<html>
<head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>Result</title>
    </head>
    <body>
        <div id="header">
            <div id="navbar">
                <ul>
                    <li>Home</li>
                    <li>About Me</li>
                    <li>Plans for World Domination</li>
                    <li>Contact</li>
                </ul>
            </div>
            <h2>About Me</h2>
        </div>
        <div id="left">
        <im src="https://s3.amazonaws.com/codecademy-blog/assets/puppy-main_zps26d178c5.jpg"/>
        <p>I am the angriest puppy in the world. This has been scientifically proven in several clinical trials.</p>
        </div>
        <div id="right">
        <table>
            <th colspan="3">My Bros</th>
            <tr>
                <td><im src="https://s3.amazonaws.com/codecademy-blog/assets/puppy-1_zps5666b8e7.jpg"/></td>
                <td><im src="https://s3.amazonaws.com/codecademy-blog/assets/puppy-2_zps1539e6b2.jpg"/></td>
                <td><im src="https://s3.amazonaws.com/codecademy-blog/assets/puppy-3_zps4692eafa.png"/></td>
            </tr>
            <tr>
                <td><im src="https://s3.amazonaws.com/codecademy-blog/assets/puppy-4_zps63ff5aa8.jpg"/></td>
                <td><im src="https://s3.amazonaws.com/codecademy-blog/assets/puppy-5_zps0ee0d2c8.jpg"/></td>
                <td><im src="https://s3.amazonaws.com/codecademy-blog/assets/puppy-6_zpsc4450a60.jpg"/></td>
            </tr>
            <tr>
                <td><im id="bottom_left" src="https://s3.amazonaws.com/codecademy-blog/assets/puppy-7_zps26e8a8d9.jpg"/></td>
                <td><im src="https://s3.amazonaws.com/codecademy-blog/assets/puppy-8_zps9a1469be.jpg"></td>
                <td><im id="bottom_right" src="https://s3.amazonaws.com/codecademy-blog/assets/puppy-9_zps3bab7732.jpg"/></td>
            </tr>
        </table>
        </div>
        <div id="footer">
            <div id="button">
                <p>Send me an <span class="bold">e-mail</span>!</p>
            </div>
        </div>
    </body>
</html>

#4

idk why its not showing any of the picture links or anything below "My Bros"


#5

you only needed insert 3 backticks before and after the code, not on each line. I corrected some mistakes here, a missing } by #navbar (which was really important)

For the rest removed some weird asterixs.


Html/css 24
#6

Stetim94, Thank you very much for your help. The issue was that somehow I lost the } by the one #navbar. Once I went through and fixed that mistake the rest of the lesson worked for me.
Also sorry about putting in so many of the backticks, I wasnt sure if it was per line of code or the entire code itself.


#7

Good you made it work. Oh, i simple removed the backticks with a simple command in vim. Done within 10 seconds. the three backticks is for and after code, but if you use a single backtick you can get inline format, for example: <p>hello</p>

and 3 backticks looks like this:

<p>hello</p>

wait, i can show you:

If it is to small, right click -> view image