3/8 Style those divs!


#1

I cannot figure out what I'm doing wrong in 3/8. I have tried refreshing, and tried 3 different browsers. This is the error message I keep getting:

Oops, try again. Make sure your divs are 100 pixels high! 
(If your height looks correct, make sure your border-radius is 100%, not 100px!)

My CSS looks like this:

div {
    display: inline-block;
    margin-left: 5px;
    height: 100px;
    width: 100px;
    border-radius: 100%;
    border: 2px solid black;
}

And HTML like this:

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>My Social Network</title>
    </head>
    <body>
        <!--Add your HTML below!-->
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

If anyone knows what I'm doing wrong here, please let me know.


#2

Hello Davilex,

I've copied your code and gave it a try, it worked fine for me!
But by changing the zoom of my browser I got the same error as you did. Have you tried to reset your browser's zoom level to 100%? Use CTRL + 0 on windows and CMD + 0 on a mac.

I hope this works for you!


#3

Thanks for your reply dutchc0de. I´ve tried that, but it didn´t help at that moment. But when I submit the code again, it suddenly works (without resetting the zoom). I'm not sure what was going on, but the problem is solved. Thanks.


#4

thanks - my zoom was 100% changed to 150% and passed


#5

hi @davilex so you fixed this problem !

because it's idem for me
how did you solved it finally you know it or it's still mysterious?

yes @dutchc0de I also used CTRL + 0 on windows and CMD + 0 on a mac, i'll try with xubuntu and i'll come back to tell you

it looks like ... by the way... on html, I verify the < head > if the link between the doctype html and css stylesheet is wrong ...but no it's ok on this side.

and the result is not correct Because I would obtain each div in solid black circle but there isn't any style
have look please:

HTML: (spaces are to show you)
< !DOCTYPE html >
< html >
< head >
< link type="text/css" rel="stylesheet" href="stylesheet.css"/ >
< title >Mes amis< /title >
< /head >
< body >
< !--Ajoutez votre code HTML ci-dessous !-- >
< div >1er div< /div >
< div >2nd div< /div >
< div >3ème div< /div >
< /body >
< /html >

CSS:
/ Ajoutez votre CSS ci-dessous ! /
div {
display:inline-block;
margin-left:5px
height:100px;
width:100px;
border-radius:100%
border:2px solid black;
}
thanks :smile:


#6

Hello Detchen,

There are two semicolons ( ; ) missing in your CSS code:

/ Ajoutez votre CSS ci-dessous ! /
div {
display:inline-block;
margin-left:5px                       <-- here 
height:100px;
width:100px;
border-radius:100%                    <-- here
border:2px solid black;
}

Also the comment above the CSS isn't right, / Ajoutez votre CSS ci-dessous ! /, should be /* Ajoutez votre CSS ci-dessous ! */. But I think that isn't the problem here


#7

ho yes thanks @dutchc0de

so I corrected:
but as I could align with text-align:center I didn't find the code to text-align vertically inside the circles:
...
div {
display: inline-block;
margin-left: 5px;
height: 100px;
width: 100px;
border-radius: 100%;
border: 2px solid black;
text-align:center;
}
...
I try to add empty < p > < /p > into the html but it doesn't works more than one return.

thanks for the aswer I couldn't see...


#8

if you add paragraphs around your text in the circles:

<div class="friend"><p>friend</p></div>

you can simple push down the paragraph:

p {
  margin-top: 40px;
}

text-align: center will only horizontal align the text, you should read this guide, it does an excellent job at explaining how to align both horizontal (easy) and vertical (bit more difficult)


#9

Thanks @stetim94
I put margin-up but lol it is margin-top ok
I told you my English is terrible : terribly frenchy lol

but, ... margin-top:40px; ...makes all the circle down at 40px from the top but it doesn't align vertically the text in the middle of the circle, it is that I try to do... perhaps we will se it in the next lessons

because I tried:
... text-align:bottom; ... : no result !
... text-align:middle; ... : no result !


#10

text-align bottom and middle are not valid values, possible values for text-align;

/* Keyword values */
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: start;
text-align: end;
text-align: match-parent;

/* Global values */
text-align: inherit;
text-align: initial;
text-align: unset;

Can i see all your html and css code? it would be really nice if you could put it in a bin (go here), and paste your html code in the html tab, the css code in the css tab, and then post the url of your bin to the forum