These are chat archives for MontCode/GeneralChat

3rd
Oct 2016
JBC944
@JBC944
Oct 03 2016 15:20
okay i am struggling with this stupid image again
David Castner
@davidjcastner
Oct 03 2016 19:31
@JBC944 what are you trying to do with the image, and if you have a code pen, feel free to share it
JBC944
@JBC944
Oct 03 2016 19:41
i am trying to make the image stretch to fit the div
and i been trying everything and i tried making image bigger but it took up the whole page
@JBC944 here's how you can accomplish it. If you share your code, I can help identify if you are running into problems due to other html elements getting in the way or messing up the layout
and i need to get more pictures on the menu and i tried adding another image and it screwed up everything
David Castner
@davidjcastner
Oct 03 2016 20:10

One thing that might be causing issues is that your html tags aren't closed properly.

<!-- look at your code here -->

    <div class= "traycontainer"</div>
    <img src="images/Food/tray.jpg" alt="tray of hoagies"width="200px;" height="200px;"/>
    </div>

try closing the tags and seeing if that helps you

<!-- revised section -->

    <div class="traycontainer">
        <img src="images/Food/tray.jpg" alt="tray of hoagies"width="200px;" height="200px;"/>
    </div>
JBC944
@JBC944
Oct 03 2016 20:12
did not work
David Castner
@davidjcastner
Oct 03 2016 20:12
Also does the source of that image work for you? I would of thought you needed a full url like http://www.example.com/images/cat5.png for code pen
JBC944
@JBC944
Oct 03 2016 20:13
yes it works for me
David Castner
@davidjcastner
Oct 03 2016 20:13
okay
JBC944
@JBC944
Oct 03 2016 20:13
idk why codepen doesnt pick it up
David Castner
@davidjcastner
Oct 03 2016 20:13
are you editting it in codepen or on your local machine?
JBC944
@JBC944
Oct 03 2016 20:14
on my computer
David Castner
@davidjcastner
Oct 03 2016 20:14
then that image is saved on your computer and not on the web, hence code pen can't find it
JBC944
@JBC944
Oct 03 2016 20:14
its only for a class project anyway
not going on the web for a company if it was i would love to get paid lol
David Castner
@davidjcastner
Oct 03 2016 20:20
are you trying to the get the image of the hogie to fit the container or the tray to fill the width?
David Castner
@davidjcastner
Oct 03 2016 20:29
@JBC944 I made some edits to your code with comments explaining them, hope it helps! Let me know if that wasn't your desired output http://codepen.io/davidjcastner/pen/KgygvY?editors=1000
JBC944
@JBC944
Oct 03 2016 21:11
no
Screenshot_4.png
that is what i am trying to do
there suppose to be a div box where the arrow is pointing and i want the food icon placed as like a banner
in the div
David Castner
@davidjcastner
Oct 03 2016 21:13
Okay. I've got to get to class but I'll show how to do that tonight after I get home
Eric Phy
@SimplyPhy
Oct 03 2016 21:17
@JBC944 think about where the div is in your code, and knowing that its position is in relation to its parent/container element, try to style it such that it moves to your desired location. use google to help, you’ll be going through things like this a lot, even when you’re experienced, and it’s important to be able to break down a challenge and practice different means of approaching a solution.
also, i just read some of the above, and you said you wanted it to “stretch to fill the div”. Last we spoke, that div was 70% of the window, which was obviously much larger than you wanted, which means you don’t actually want it to stretch to fill the div
JBC944
@JBC944
Oct 03 2016 21:20
what about to fillt he div
Eric Phy
@SimplyPhy
Oct 03 2016 21:20
This message was deleted
JBC944
@JBC944
Oct 03 2016 21:20
i mean fill the div
Eric Phy
@SimplyPhy
Oct 03 2016 21:21
?
JBC944
@JBC944
Oct 03 2016 21:21
i want the picture to fill the div
Eric Phy
@SimplyPhy
Oct 03 2016 21:21
also, i just read some of the above, and you said you wanted it to “stretch to fill the div”. Last we spoke, that div was 70% of the window, which was obviously much larger than you wanted, which means you don’t actually want it to stretch to fill the div
JBC944
@JBC944
Oct 03 2016 21:21
Screenshot_6.png
like that
Eric Phy
@SimplyPhy
Oct 03 2016 21:22
maybe you need to manually set the height of the div in addition to the width
JBC944
@JBC944
Oct 03 2016 21:22
i got the height in it too
Eric Phy
@SimplyPhy
Oct 03 2016 21:22
set the image width to 100%
JBC944
@JBC944
Oct 03 2016 21:22
it all comes down to the image
Eric Phy
@SimplyPhy
Oct 03 2016 21:23
if the div’s height is the same as or less than the image height, then the image will fill the div horizontally if img { width: 100%; }
it might actually work regardless, as i forget what the default overflow attributes are for imgs that are large than their div containers
JBC944
@JBC944
Oct 03 2016 21:24
so if the div is at 100% widtch
width
would that work
Eric Phy
@SimplyPhy
Oct 03 2016 21:25
maybe
soon you’ll learn to use dev tools and your div life will begin to be much easier, as you’ll be able to visibly see what space they contain on the screen
JBC944
@JBC944
Oct 03 2016 21:26
how do you align an image center?
Eric Phy
@SimplyPhy
Oct 03 2016 21:37
google
JBC944
@JBC944
Oct 03 2016 21:37
i figured it out
Eric Phy
@SimplyPhy
Oct 03 2016 21:37
:D
JBC944
@JBC944
Oct 03 2016 21:38
and i figured out that theyblew up the picture to make it bigger
damn why cant photo shop still be a one time price of like 200 dollars lol
Eric Phy
@SimplyPhy
Oct 03 2016 21:38
do you use pc or mac
JBC944
@JBC944
Oct 03 2016 21:38
pc
Eric Phy
@SimplyPhy
Oct 03 2016 21:38
actually doesn’t matter, i think
get affinity photo
JBC944
@JBC944
Oct 03 2016 21:38
mac is gross in my opinion
is it free?
Eric Phy
@SimplyPhy
Oct 03 2016 21:39
$50 one time
JBC944
@JBC944
Oct 03 2016 21:39
is it easy to use?
Eric Phy
@SimplyPhy
Oct 03 2016 21:39
for 99% of people it’s as good or better than photoshop
are you experienced with photoshop?
JBC944
@JBC944
Oct 03 2016 21:40
no but i probably can figure it out by playing around with it
Eric Phy
@SimplyPhy
Oct 03 2016 21:40
or any image editting suite, for that matter/
okay, then it’s probably easier than photoshop, but it’s still prof software, aka learning curve
JBC944
@JBC944
Oct 03 2016 21:40
thats how i figured out how to play video games when i was younger lol
Eric Phy
@SimplyPhy
Oct 03 2016 21:41
if you want photoshop without the price tag, get affinity photo
i have both and i use affinity more
JBC944
@JBC944
Oct 03 2016 21:41
okay i look into it just going to put this image tag in real quick
before i forget to before class tomrrow
note to self i made the photo too big lol way too big lol
its only for macs
oh designer is in beta for windows, photo coming very soon
just use designer, it’s free :D
designer does a lot of the stuff photo does, just a little more geared towards vector graphics
still does rastor though
JBC944
@JBC944
Oct 03 2016 21:48
can u post a link for it
Eric Phy
@SimplyPhy
Oct 03 2016 21:49
:point_up:
JBC944
@JBC944
Oct 03 2016 21:49
isnt that for the affinity
Eric Phy
@SimplyPhy
Oct 03 2016 21:49
...
when you click that link, it says this:
"Enter your details below to receive your download link for the FREE Affinity Designer for Windows beta and we’ll let you know when the FREE Affinity Photo for Windows beta starts."
JBC944
@JBC944
Oct 03 2016 21:52
i got it
JBC944
@JBC944
Oct 03 2016 22:20
how do you unlock an image
Eric Phy
@SimplyPhy
Oct 03 2016 22:36
maybe click the lock on the layer tab near the bottom right, maybe convert to curves/pixels/watevs, maybe change color profile in preferences
depends on the cause of the lock
JBC944
@JBC944
Oct 03 2016 22:38
is it possible to fit an image in a div without making the image blurry and disoriented
Eric Phy
@SimplyPhy
Oct 03 2016 22:38
yes
JBC944
@JBC944
Oct 03 2016 22:41
how?
Eric Phy
@SimplyPhy
Oct 03 2016 22:58
take the image’s dimensions and aspect ratio into consideration, and adjust accordingly
JBC944
@JBC944
Oct 03 2016 22:59
the image size is 273x200px
Eric Phy
@SimplyPhy
Oct 03 2016 23:00
so if the div is 274x200px, the image will display at native size and aspect ratio
if you need it double the size, make the div 546x400 to preserve the aspect ratio, etc
JBC944
@JBC944
Oct 03 2016 23:01
the div is 70%
Eric Phy
@SimplyPhy
Oct 03 2016 23:01
what is 70%? (yes that’s a question)
JBC944
@JBC944
Oct 03 2016 23:02
This message was deleted
Eric Phy
@SimplyPhy
Oct 03 2016 23:02
more specifically, what does 70% translate to?
This message was deleted
JBC944
@JBC944
Oct 03 2016 23:07
i honestly dont know
Eric Phy
@SimplyPhy
Oct 03 2016 23:07
i’ll begin answering your questions again (when i can) once you get me an answer
reasons: i answered that question for you at least twice before, and the answer can be discovered without knowledge (pure logic), and most importantly, it’s fundamentally important that you understand the answer before i can both answer “is it possible to fit an image in a div without making the image blurry and disoriented” and have you understand how to apply my answer in the future
JBC944
@JBC944
Oct 03 2016 23:14
does it mean on how big the picture is?
Eric Phy
@SimplyPhy
Oct 03 2016 23:15
70% = ? is my question
there are a few ways you could answer
you said “the div is 70%”. Explain what it meant when you told me that.
JBC944
@JBC944
Oct 03 2016 23:17
is the width
Eric Phy
@SimplyPhy
Oct 03 2016 23:17
70% = width = ?
JBC944
@JBC944
Oct 03 2016 23:18
height
Eric Phy
@SimplyPhy
Oct 03 2016 23:18
nope
JBC944
@JBC944
Oct 03 2016 23:18
length
Eric Phy
@SimplyPhy
Oct 03 2016 23:18
ha no
but funny
div { width: 70%; } <— what does the 70% value refer to? why 70%? what does it mean? why not 80%, or 800px, or 150em, or 235pt, etc etc?
JBC944
@JBC944
Oct 03 2016 23:33
cause width streches the div
Eric Phy
@SimplyPhy
Oct 03 2016 23:41
<html>
  <head></head>
  <body>
    <div>
      <img src=“yay.jpg” />
    </div>
  </body>
</html>
div {
  width: 70%;
}
img {
  width: 100%;
}
given the above, how big is my image?
rather, how wide is my image*
JBC944
@JBC944
Oct 03 2016 23:45
100%
Eric Phy
@SimplyPhy
Oct 03 2016 23:45
of what
JBC944
@JBC944
Oct 03 2016 23:45
705
70%
Eric Phy
@SimplyPhy
Oct 03 2016 23:45
of what
and yes, that’s a new question
JBC944
@JBC944
Oct 03 2016 23:45
pixels?
Eric Phy
@SimplyPhy
Oct 03 2016 23:45
…of what?
ha, new question, though your answer is almost definitely wrong, which means answering my second “of what” would be better
so either explain what you mean by pixels, or naswer my second “of what” again
JBC944
@JBC944
Oct 03 2016 23:47
100x70
Eric Phy
@SimplyPhy
Oct 03 2016 23:47
?
no
<html>
  <head></head>
  <body>
    <div>
      <img src=“yay.jpg” />
    </div>
  </body>
</html>
div {
  width: 70%;
}
img {
  width: 100%;
}
given the above, how wide is my image?
(take 2) —we’re getting sidetracked
another hint: obviously you were right that the image width is 100%…and you were right that it’s 100% of 70%…so now what is 70% of?
that’s where we left off.
JBC944
@JBC944
Oct 03 2016 23:52
30%
Eric Phy
@SimplyPhy
Oct 03 2016 23:52
why?
JBC944
@JBC944
Oct 03 2016 23:53
100-70=30?
Eric Phy
@SimplyPhy
Oct 03 2016 23:55
so you’re saying that because the the image is 100%, which is 70%, that 70% is 30%?
JBC944
@JBC944
Oct 03 2016 23:55
i honestly dont know
Eric Phy
@SimplyPhy
Oct 03 2016 23:55
i know you don't
i’m trying to get you to think it through
….
JBC944
@JBC944
Oct 03 2016 23:56
i guess that is what i am saying
Eric Phy
@SimplyPhy
Oct 03 2016 23:56
okay i’ll walk you through this, then you seriously have to take a intro to css course, like htis one https://www.codecademy.com/learn/learn-html-css
<html>
  <head></head>
  <body>
    <div>
      <img src=“yay.jpg” />
    </div>
  </body>
</html>
div {
  width: 70%;
}
img {
  width: 100%;
}
what is the image inside of?
JBC944
@JBC944
Oct 03 2016 23:57
a div
Eric Phy
@SimplyPhy
Oct 03 2016 23:57
what is the div inside of?
JBC944
@JBC944
Oct 03 2016 23:58
the body
Eric Phy
@SimplyPhy
Oct 03 2016 23:58
so since the image width is 100%, it fills 100% of the width of it’s parent/container…which is the div
because the div width is 70%, that means it will have 100% of that width
and the div’s width is 70% of the body’s width
now, what’s the width of the body?