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
Koderkid1936
@Koderkid1936

`<DOCTYPE HTML>

<html>
<head>
<title>Tryit Editor v3.3</title>
<link rel="stylesheet" href="file.css">

    <style>
html,body{
height: 100%;
margin: 0 auto;

}

body{
/width: 1280px;/

}

header{

height: 88px;
text-align: center;
/*background-color: black;*/

}

header h1{

color: white;
padding: 20px;

}

.sideContent{
width: 240px;
float: left;
padding: 1em;
/background-color: orange;/

}

ul{
list-style: none;
padding: 0.5em;

}

.mainContent{
width: 1008px;
float: left;
padding: 1em;
background-color: yellow;
}

footer{

clear: both;
text-align: center;
background-color: black;
height: 30px;
color: white;
padding: 10px;
font-weight: 900;

}

    </style>

</head>
<body>
    <div id="header">
        <h1>City Gallery</h1>
    </div>

    <div class="sideContent clearfix">
        <ul>
            <li>London</li>
            <li>Paris</li>
            <li>Tokyo</li>
        </ul>

    </div>

    <div class="mainContent">
        <h1>London</h1>
        <p>London is the capital city of England. It is the most populous city in the 
        United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
        <p>Standing on the River Thames, London has been a major settlement for two 
        millennia, its history going back to its founding by the Romans, 
        who named it Londinium.</p>
    </div>

    <div id="footer">
        Copyright &copy; W3Schools.com
    </div>
</body>

</html>`

@sorinr I dont have code pen
Sorin Ruse
@sorinr
@Koderkid1936 go http://codepen.io/ and register
@Koderkid1936 or put your code on jsfiddle or jsbin or whatever the same
Koderkid1936
@Koderkid1936
@sorinr do I need an account for that ? for JSfiddle?
Sorin Ruse
@sorinr
@Koderkid1936 i don't see whats the problem in having an account on one of these
Koderkid1936
@Koderkid1936
Didn't say there was, I'm looking at them now I think I'll get codepen it looks better @sorinr
@sorinr heres: the link https://codepen.io/KodaKid/pen/EZdOZE
Sorin Ruse
@sorinr
@Koderkid1936 the idea is that ether one its ok for sharing your code with us
Koderkid1936
@Koderkid1936
@sorinr and the reason for giving the containers a background was to help me visualise
Sorin Ruse
@sorinr
@Koderkid1936 that was a good idea. what is the problem?
Koderkid1936
@Koderkid1936
@sorinr to see the problem it's best to look at it from a desktop perspective, you'll see that the sidecontent (in orange) does not reach the footer, I know why, I have'nt giving it a specific height and a container's default height is based on the content inside it, I understand that, BUT.... how would I make the orange container reach the footer without giving it a specific height... I know theres a way around it
"ClearFix hack" something along those lines ... I think
Christopher
@christopherwangemann
Can someone please tell me why my text in the paragraph is going out of the div when the window is resized? Thanks! http://codepen.io/ChristpherWangemann/pen/vypraO/?editors=1100
Sorin Ruse
@sorinr
@Koderkid1936 to make it full height you can just add min-height: 100vh; to the sideContent class
Koderkid1936
@Koderkid1936
thanks but do you mind explaining the code aswell ' min-height: 100vh;' vh stands for viewport right ?
Sorin Ruse
@sorinr
@Koderkid1936 yes u tell that you want for that element having the class sideContent a height equal to minimum to the vciewport height. so no matter the content height in the sidebar is the sidebar will take at least the full viewport height. hope it make sense
Koderkid1936
@Koderkid1936
@sorinr :D THHHAAAAAAAAAAAAANK UYOU SO MUCH!!!!!!!!
@Koderkid1936 question woudld this
Sorin Ruse
@sorinr
@Koderkid1936 welcome
Koderkid1936
@Koderkid1936
@sorinr I was just given this solution what do you think ? https://codepen.io/KodaKid/pen/vgVQwO
@Koderkid1936 never heard of "box-sizing" mind sharing your opinion, you seem quiet knowledgeable, is that a better way to approach this problem ?
@sorinr
Jordan Meyer
@Jordanmeyer89
I'm having some difficulties with tic-tac-toe. Do I need to have like 50 if then statements for every possible outcome of the game?
Sorin Ruse
@sorinr
@Koderkid1936 in my opinion this min-height: calc(100vh - 88px - 30px); its not ok. what if i wanna change height: 88px; in the #header? the ideadea its not to make one element dependable of another based on fixed values
Baillie O'Grady
@baillieo
@christopherwangemann the div inside the about section should have a class of row not container
Christopher
@christopherwangemann
@baillieo aah ok thx!
CamperBot
@camperbot
christopherwangemann sends brownie points to @baillieo :sparkles: :thumbsup: :sparkles:
:cookie: 273 | @baillieo |http://www.freecodecamp.com/baillieo
Christopher
@christopherwangemann
@baillieo should the column definition go after that then?
Koderkid1936
@Koderkid1936
@sorinr Excellent, I totally Understand, thanks for claryfing again
CamperBot
@camperbot
koderkid1936 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1165 | @sorinr |http://www.freecodecamp.com/sorinr
Baillie O'Grady
@baillieo
@christopherwangemann yes within the row
Christopher
@christopherwangemann
@baillieo wait but I already have a row and column defined just above that. I need to nest another one within that?
Sorin Ruse
@sorinr
@Koderkid1936 :+1:
Gulsvi
@gulsvi
@christopherwangemann You are nesting too much right now and you have a container outside your <body> tag.
Christopher
@christopherwangemann
@SkyCoder01 the container is supposed to go within the body?
Gulsvi
@gulsvi
I don't see any text oveflowing, just your image, because you have given it float: left. You also gave it img-responsive class, but assigned it a width a 200px which will be a conflict
@christopherwangemann All of your HTML code that affects the content goes inside the <body>
Only meta tags, <title>, etc.. go outside of <body>
Christopher
@christopherwangemann
@SkyCoder01 Ah ok I thought for the whole page to be responsive it had to include the body tag also
@SkyCoder01 and yeah it doesn't make sense to make the image responsive and also a set size :p I changed that now
Gulsvi
@gulsvi
Every HTML page needs a <body> tag, it doesn't make your page responsive - the way you use bootstrap can make it responsive or not responsive at all :)
Christopher
@christopherwangemann
No I meant I thought the body tag had to be after the responsive tag
Gulsvi
@gulsvi
Do you mean container-fluid?
Christopher
@christopherwangemann
yup
Gulsvi
@gulsvi
That class makes your page take up the full width of the screen. If you use container instead, it will give some space on each side of the page on larger screens.
Christopher
@christopherwangemann
ok but that's a set width then right?
Gulsvi
@gulsvi
There is no single tag or class name that will make your page responsive