Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Aug 17 09:32
    User @bjorno43 unbanned @linkin-park
  • Jun 20 21:19
    @bjorno43 banned @shenerd140
  • Apr 25 17:13
    @mstellaluna banned @cmal
  • Jan 08 22:05
    @mstellaluna banned @dertiuss323
  • Nov 07 2018 04:42
    User @texas2010 unbanned @ows-ali
  • Nov 02 2018 16:25
    @texas2010 banned @ows-ali
  • Oct 12 2018 05:50
    @bjorno43 banned @NACH74
  • Oct 05 2018 23:02
    @mstellaluna banned @JomoPipi
  • Sep 16 2018 12:21
    @bjorno43 banned @yash-kedia
  • Sep 16 2018 12:16
    @bjorno43 banned @vnikifirov
  • Sep 05 2018 08:12
    User @bjorno43 unbanned @androuino
  • Sep 05 2018 07:38
    @bjorno43 banned @androuino
  • Aug 23 2018 16:57
    User @bjorno43 unbanned @rahuldkjain
  • Aug 23 2018 16:23
    @bjorno43 banned @rahuldkjain
  • Jul 29 2018 14:13
    User @bjorno43 unbanned @jkyereh
  • Jul 29 2018 01:00
    @bjorno43 banned @jkyereh
  • Jul 10 2018 22:09
    @bjorno43 banned @manafn
  • Jul 06 2018 15:20
    @texas2010 banned @imlegend19
  • Jul 03 2018 12:28
    @bjorno43 banned @vbvmatta
  • Jun 29 2018 13:54
    @bjorno43 banned @OGTechnoBoy
Jonathan
@JonKaric
So Vik remember never to use spaces in id's. And only used spaces in classes when you want to seperate one (or more) class names.
Vik
@vvang044
i think i skipped that part when i was learning classes and id.....but this will actually teach me to be careful while choosing id and classes
Jonathan
@JonKaric
@andreas2249 are you here?
andreas2249
@andreas2249
Yes. :)
Hi, Jon.
Jonathan
@JonKaric
This probably isnt the best solution, but you need to add a new div outside of .image-container. Then give it a name such as class="inline-center";
.inline-center {
buckshot307
@buckshot307
@TjasaK it's really hard to read to be honest. I would consider formatting the html so things as easier to look at.
Jonathan
@JonKaric

text-align:center;

This will make the inline-block go central to the page. Oh, and remove the left and right margin from .image.container.

Ill send you a codepen so its easier to understand
Tjasa Kravcar
@TDandelion
@buckshot307 OK, i understand...i will try to do
andreas2249
@andreas2249
Thank you, @JonKaric
CamperBot
@camperbot
andreas2249 sends brownie points to @jonkaric :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for jonkaric
drumm2k
@drumm2k
how can i paste code?
andreas2249
@andreas2249
Yeah, that margin was just to "force" the image towards the center. I ran out of ideas... :(
drumm2k
@drumm2k
<code>test</code>
buckshot307
@buckshot307
@drumm2k type ``` and then shift + enter
drumm2k
@drumm2k
@andreas2249
.image-container{
      text-align: center;
    }

    .image-container figure {
      padding: 6px;
      box-shadow: 0 10px 12px #777;
      display: inline-block;   
      border: 1px solid black;
      margin: 0 auto;
      background-color: white;
      border-radius: 5px;
    }
Jonathan
@JonKaric
^ +1 for that solution, alot cleaner
drumm2k
@drumm2k
@andreas2249 it's because you need to align that inline-block from parent, not from itself.
andreas2249
@andreas2249
@drumm2k, OMG. Amazing. That's all it took? Thank you! Can you please explain a bit why .image-container didn't work in the parent <div>? Doesn't <figure> "inherit" that?
CamperBot
@camperbot
andreas2249 sends brownie points to @drumm2k :sparkles: :thumbsup: :sparkles:
:cookie: 101 | @drumm2k |http://www.freecodecamp.com/drumm2k
drumm2k
@drumm2k
@andreas2249 no problem, divs work like text when displayed as inline-block. if you want to align it to center you should wrap them with another and center in wrap
or like i did, center .image-container and stylize in something inside like figure or another div
andreas2249
@andreas2249
Ok, cool. Thank you for your time and consideration. :)
ALINATSUI
@ALINATSUI
Hey people. I'm working on weather app and wondering how to load the parsed json content back onto the page? It worked fine when I did a console.log() but how to get the info to automatically come up on the page? Load? append? HTML() ?
tog3ra
@tog3ra
``` <!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8"/>

<title></title>

<style>
.red{
border:3px red solid;
margin:3px;
}
.blue{
border:3px blue solid;
margin:3px;
}
li{
display:inline;
}
.right{
float:right;
}
.left{
float:left;
}
</style>
</head>

<body>

<div class="red">this is div 1</div>
<div class="blue left">this is div 2</div>
<div class="red" style="width:50%;margin:0 auto;" >this is div 3
</div>
<div class="blue right">this is div 4</div>
<div class="red">this is div 5</div>

</body>
</html> ```

i want div 4 to be to the right
Chase
@Belax8
@ALINATSUI .append() works really well. Share the link if you want some help.
ALINATSUI
@ALINATSUI
Cool...here's what I've got so far: http://codepen.io/alinawtsui/pen/grJvro?editors=1111
Would append work with AJAX?
Jonathan
@JonKaric
It should do
ALINATSUI
@ALINATSUI
ok I'll give it a try @jonkaric.
Chase
@Belax8
@ALINATSUI try this $("p").append("Current temperature in " + " " + location + ", " + "is " + "" + fahrenheit + "" + ". " + "It is" + " " + temp_f + "."+ " The current uv index is" + " " + uv + ". " );
add that just before your console.log
ALINATSUI
@ALINATSUI
aha! @belax8....
Chase
@Belax8
Ya. That's the basic idea. Now you can just customize it to the way you want.
ALINATSUI
@ALINATSUI
Cool @belax8...I guess I'll take out the console.log since I won't need it?
Chase
@Belax8
@ALINATSUI also, I think it's easier to write Javascript in the javascript section of codepen instead of in the HTML section. It's easier to see if you have any errors. And the colors help me read the code faster. Just a tip.
ALINATSUI
@ALINATSUI
@Belax8 Good idea!
Benji
@benjinsi
Hello folk
i'm starting using codePEn. I don't know how to get an url link to validate my "Build a Tribute Page". Someone can help?
Samuel Jones
@samjcs
Hello I need some help with understanding why this centering dose not work the way I think it does
if I do with 100% and margin: 0 auto; it does not center but if I decrease the width it does>
Jonathan
@JonKaric
Headings are display:block by default, so they already are width:100%
just put text-align:center; on the h1
Samuel Jones
@samjcs
Gotcha