|
Thread Rules
1. This is not a "do my homework for me" thread. If you have specific questions, ask, but don't post an assignment or homework problem and expect an exact solution.
2. No recruiting for your cockamamie projects (you won't replace facebook with 3 dudes you found on the internet and $20)
3. If you can't articulate why a language is bad, don't start slinging shit about it. Just remember that nothing is worse than making CSS IE6 compatible.
4. Use [code] tags to format code blocks. |
On November 01 2013 17:17 sob3k wrote:Show nested quote +On November 01 2013 16:27 Manit0u wrote:Guys, a quick question for you. Do you know how to make the <footer> stick to the bottom of the page in HTML/CSS without reverting to putting everything into a big content-wrapper <div> and setting position: absolute; bottom: 0; to the <footer>? I'm trying to make a fairly simple page and it's important that it follows a clear logic structure: <header> (top of page, with <nav> section etc.) <article> (actual page content) <footer> (bottom of the page, copyright, site map etc.) For some reason, if I won't wrap everything into one big <div> with height: 100% etc. the <footer> will overlap with <article> section and display itself in the middle of the page. It's driving me nuts. + Show Spoiler [HTML] +
<!DOCTYPE html>
<html>
<head>
<title>Some Simple Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="styles/site.css"/>
</head>
<body>
<div class="content-wrapper">
<header>
<img src="images/logo.png" class="logo">
<nav id="menu">
<ul>
<li><a class="active" href="#">Menu</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Staff</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<h1 class="title">Some Simple Website</h1>
</header>
<article>
<ul>
<li><h2>About Us</h2></li>
<li><p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est
laborum.</p></li>
<li><a href="#">More</a></li>
</ul>
</article>
<article>
<ul>
<li><h2>Gallery</h2></li>
<li><p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est
laborum.</p></li>
<li><a href="#">More</a></li>
</ul>
</article>
<article>
<ul>
<li><h2>Staff</h2></li>
<li><p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est
laborum.</p></li>
<li><a href="#">More</a></li>
</ul>
</article>
<article>
<ul>
<li><h2>Contact</h2></li>
<li><p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est
laborum.</p></li>
<li><a href="#">More</a></li>
</ul>
</article>
<footer>
<ul>
<li><h3>© 2013</h3></li>
<li><h3>Author: John Doe</h3></li>
</ul>
<nav>
<ul>
<li><a href="#">Back to Top</a></li>
<li><a href="#">Site Map</a></li>
</ul>
</nav>
</footer>
</div><!-- .contnet-wrapper -->
</body>
</html>
html, body {
width: 100%;
height: auto;
margin: 0;
padding: 0;
background-color: #FFFFFF;
}
header {
width: 1000px;
height: 200px;
margin: 20px auto 50px auto;
border-bottom: 1px solid #E7E7E7;
display: block;
}
footer {
width: 1000px;
height: 70px;
position: absolute;
bottom: 0;
border-top: 1px solid #E7E7E7;
}
footer nav {
height: 40px;
}
footer nav ul, footer ul, #menu ul, article ul {
list-style: none outside none;
padding: 0;
margin: 0;
}
footer nav li, footer li {
display: inline-block;
width: 300px;
position: relative;
float: left;
margin-left: 200px;
}
footer h3 {
font: 12px Arial, sans-serif;
color: #8A8A8A;
letter-spacing: 1px;
}
footer nav a {
font: 12px Arial, sans-serif;
color: #E7E7E7;
}
footer nav a:hover {
color: #20ADA1;
}
.content-wrapper {
width: 1000px;
min-height: 100%;
height: auto;
margin: 0 auto;
display: block;
}
article {
width: 500px;
height: 300px;
margin: 0;
display: inline-block;
float: left;
}
article h2 {
font: 25px bold Arial, serif;
color: #20ADA1;
letter-spacing: 1px;
}
article p {
font: 14px Arial, sans-serif;
color: #8A8A8A;
letter-spacing: 1px;
text-indent: 20px;
width: 400px;
}
article a {
font: 12px Arial, sans-serif;
color: #E7E7E7;
text-decoration: none;
display: block;
float: right;
position: relative;
margin-right: 50px;
}
article a:hover {
color: #20ADA1;
}
img.logo {
width: 200px;
height: 200px;
margin-left: 30px;
display: inline-block;
float: left;
position: relative;
}
#menu {
width: 510px;
height: 40px;
margin-top: 60px;
margin-left: 200px;
border-bottom: 1px solid #E7E7E7;
display: inline-block;
float: left;
position: relative;
}
#menu li {
display: inline;
}
#menu a {
font: 20px bold Arial, sans-serif;
color: #E7E7E7;
text-decoration: none;
letter-spacing: 1px;
margin-left: 10px;
margin-right: 10px;
}
#menu a.active {
color: #20ADA1;
}
#menu a:hover {
color: #20ADA1;
padding-bottom: 15px;
border-bottom: 5px solid #20ADA1;
}
h1.title {
font: 36px bold large Arial, serif;
color: #20ADA1;
letter-spacing: 1px;
height: 45px;
width: 450px;
margin-left: 220px;
margin-top: 25px;
display: inline-block;
float: left;
position: relative;
}
Note: The above code is still very early in the works, so it's not very clean  Why is your footer using absolute positioning? Absolute positioning removes the element from the document flow. If you use relative positioning and put it below the articles it will naturally be pushed to the bottom of the page by them. If you want it to always show at the bottom of the screen then you would used position: fixed.
I don't want to make it fixed. Had to use absolute because with relative it wasn't pushed below articles and I have no idea why (tried it in various configurations and with different settings). I don't want to use the content-wrapper div or absolute positioning either, but for now it's the only way I can make it work. I checked the web and it seems that everyone is using this solution...
Edit: it works with relative position and inline-block display, but I still have to keep the content-wrapper, which I don't want to do.
+ Show Spoiler [CSS] +
html, body {
width: 100%;
height: auto;
margin: 0;
padding: 0;
background-color: #FFFFFF;
}
header {
width: 1000px;
height: 200px;
margin: 20px auto 50px auto;
border-bottom: 1px solid #E7E7E7;
display: block;
}
footer {
width: 1000px;
height: 70px;
position: relative;
display: inline-block;
border-top: 1px solid #E7E7E7;
margin-top: 50px;
}
footer nav {
height: 40px;
}
footer nav ul, footer ul, #menu ul, article ul {
list-style: none outside none;
padding: 0;
margin: 0;
}
footer nav li, footer li {
display: inline-block;
width: 300px;
position: relative;
float: left;
margin-left: 200px;
}
footer h3 {
font: 12px Arial, sans-serif;
color: #8A8A8A;
letter-spacing: 1px;
}
footer nav a {
font: 12px Arial, sans-serif;
color: #E7E7E7;
}
footer nav a:hover {
color: #20ADA1;
}
.content-wrapper {
width: 1000px;
min-height: 100%;
height: auto;
margin: 0 auto;
display: block;
}
article {
width: 460px;
height: 300px;
margin-left: 40px;
display: inline-block;
float: left;
}
article h2 {
font: 25px bold Arial, serif;
color: #20ADA1;
letter-spacing: 1px;
}
article p {
font: 14px Arial, sans-serif;
color: #8A8A8A;
letter-spacing: 1px;
text-indent: 20px;
width: 400px;
}
article a {
font: 12px Arial, sans-serif;
color: #E7E7E7;
text-decoration: none;
display: block;
float: right;
position: relative;
margin-right: 60px;
}
article a:hover {
color: #20ADA1;
}
img.logo {
width: 200px;
height: 200px;
margin-left: 30px;
display: inline-block;
float: left;
position: relative;
}
#menu {
width: 510px;
height: 40px;
margin-top: 60px;
margin-left: 200px;
border-bottom: 1px solid #E7E7E7;
display: inline-block;
float: left;
position: relative;
}
#menu li {
display: inline;
}
#menu a {
font: 20px bold Arial, sans-serif;
color: #E7E7E7;
text-decoration: none;
letter-spacing: 1px;
margin-left: 10px;
margin-right: 10px;
}
#menu a.active {
color: #20ADA1;
}
#menu a:hover {
color: #20ADA1;
padding-bottom: 15px;
border-bottom: 5px solid #20ADA1;
}
h1.title {
font: 36px bold large Arial, serif;
color: #20ADA1;
letter-spacing: 1px;
height: 45px;
width: 450px;
margin-left: 240px;
margin-top: 25px;
display: inline-block;
float: left;
position: relative;
}
|
I always need to laugh reading those x vs y discussions, always shows how clueless people are.
And I always find the link phar posted absolute hilarious:
Subclasses cannot override private methods. Subclass overrides of public methods can’t even see, let alone call, the superclass’s private methods. Problematic for, say, test mocks.
What kind of shitty argument is that? This is how private is supposed to work.
Or this:
new, private, public, protected, static, etc. Trying to win over Java developers? I’m aware this is more personal taste, but I don’t know why this stuff is necessary in a dynamic language—in C++ most of it’s about compilation and compile-time name resolution.
He clearly doesn't even fully understand OOP.
|
i have my first job interview in a week. It also includes an exam and I just know it's about problem solving in stuff. It's so general that i don't know what to study. Any tips? =/ i've been brushing up on my data structures.
|
On November 01 2013 20:27 icystorage wrote:
i have my first job interview in a week. It also includes an exam and I just know it's about problem solving in stuff. It's so general that i don't know what to study. Any tips? =/ i've been brushing up on my data structures.
Off the top of my head.
"Write a program that prints the numbers from 1 to 100. But for multiples of three print “Fizz” instead of the number and for the multiples of five print “Buzz”. For numbers which are multiples of both three and five print “FizzBuzz”."
What is the difference between overloading and overriding?
Design using UML how you would implement a rectangle, triangle, and circle class.
What is the difference between a Set, Array, Collection, Hash?
http://codility.com/c/intro/demoV33ZXX-KF8
http://projecteuler.net/
Here's a quiz I prepared earlier
+ Show Spoiler +
General
1. What is functional decomposition?
2. Name 2 major forms of abstraction
3. What is an expression?
4. Name 3 different programming paradigms
5. What is the main difference between structured and procedural programming?
6. What is Control Flow?
7. What is a Side-Effect?
Object Oriented Specific
1. Briefly describe the thought process required in OOP.
2. Name 4 principles of OOP.
3. How can Generalisation be an abstraction?
4. What OOP concept can used to Generalise objects?
5. Name 2 forms of polymorphism.
6. Name 3 things an object can do.
7. Name 3 different design patterns.
8. What is a classification and how does it relate to programming?
Answers
+ Show Spoiler +
General
1. What is functional decomposition?
One of the fundamentals of programming where problems are broken down into their simplest form and one tries to find ways or methods of dealing with each small problem one step at a time. When these problems are solved, one can re-use these methods to handle an even bigger problem.
2. Name the 2 major forms of abstraction
Functional abstraction
Data abstraction
3. What is an expression?
An expression is any unit of code that when combined will reveal itself in the form of a value.
4. Name 3 different programming paradigms
[Most obvious ones]
Procedural
Object-Oriented
Functional
(There are at least 100 more)
5. What is the main difference between structured and procedural programming?
Structured programming abolishes the use of the 'goto' statement that altered the step-by-step process of going through code, as well as only having a single point of entry and exit in a subroutine. A programmer now would only have to think in terms of 'sequence', 'selection', 'repetition' without having to even consider an unsuspecting jump, exit, or entry point in the code, allowing programmers to make better assumptions about someone else's code or even their own code.
6. What is Control Flow?
Used to refer to the order in which statements are called.
7. What is a Side-Effect?
When an interaction with a piece of data affects the behaviour of other operations which rely upon it.
Object Oriented Programming
1. Briefly describe the thought process required in OOP
We must see our program in terms of objects and the role they play in a particular problem domain.
2. Name the 4 core principles of OOP.
Abstraction (or Classification)
Encapsulation
Inheritance
Polymorphism
3. How can Generalisation be an abstraction?
An object can be referred to and grouped as a part of a family of related concepts or roles.
4. What OOP concept can used to Generalise objects?
Inheritance
5. Name 2 forms of polymorphism.
Universal
Parametric
Inclusion
Subtyping
Ad-Hoc
Coercion
Overloading
6. Name 3 things an object can do.
Do things (methods)
Know things (fields)
Collaborate
Perform services
Perform operations
Many others
7. Name 3 different design patterns.
Double Dispatch
Composite
Factory
(Atleast 100 to choose from)
8. What is a classification and how does it relate to OOP?
Classification refers to the category or taxonomy of an object. The idea of object classification is to organise elements or concepts into particular groups, roles, responsibilities, etc. In programming this is called a class, we can use classes to represent these elements as code.
You have a week so I wouldn't bother going through anything difficult, you will just suffer from information overload.
Nothing beats pure experience and just immersing yourself in programming. Just keep doing what you are doing I'd say.
|
On November 01 2013 17:28 Manit0u wrote:Show nested quote +On November 01 2013 17:17 sob3k wrote:On November 01 2013 16:27 Manit0u wrote:Guys, a quick question for you. Do you know how to make the <footer> stick to the bottom of the page in HTML/CSS without reverting to putting everything into a big content-wrapper <div> and setting position: absolute; bottom: 0; to the <footer>? I'm trying to make a fairly simple page and it's important that it follows a clear logic structure: <header> (top of page, with <nav> section etc.) <article> (actual page content) <footer> (bottom of the page, copyright, site map etc.) For some reason, if I won't wrap everything into one big <div> with height: 100% etc. the <footer> will overlap with <article> section and display itself in the middle of the page. It's driving me nuts. + Show Spoiler [HTML] +
<!DOCTYPE html>
<html>
<head>
<title>Some Simple Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="styles/site.css"/>
</head>
<body>
<div class="content-wrapper">
<header>
<img src="images/logo.png" class="logo">
<nav id="menu">
<ul>
<li><a class="active" href="#">Menu</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Staff</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<h1 class="title">Some Simple Website</h1>
</header>
<article>
<ul>
<li><h2>About Us</h2></li>
<li><p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est
laborum.</p></li>
<li><a href="#">More</a></li>
</ul>
</article>
<article>
<ul>
<li><h2>Gallery</h2></li>
<li><p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est
laborum.</p></li>
<li><a href="#">More</a></li>
</ul>
</article>
<article>
<ul>
<li><h2>Staff</h2></li>
<li><p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est
laborum.</p></li>
<li><a href="#">More</a></li>
</ul>
</article>
<article>
<ul>
<li><h2>Contact</h2></li>
<li><p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est
laborum.</p></li>
<li><a href="#">More</a></li>
</ul>
</article>
<footer>
<ul>
<li><h3>© 2013</h3></li>
<li><h3>Author: John Doe</h3></li>
</ul>
<nav>
<ul>
<li><a href="#">Back to Top</a></li>
<li><a href="#">Site Map</a></li>
</ul>
</nav>
</footer>
</div><!-- .contnet-wrapper -->
</body>
</html>
html, body {
width: 100%;
height: auto;
margin: 0;
padding: 0;
background-color: #FFFFFF;
}
header {
width: 1000px;
height: 200px;
margin: 20px auto 50px auto;
border-bottom: 1px solid #E7E7E7;
display: block;
}
footer {
width: 1000px;
height: 70px;
position: absolute;
bottom: 0;
border-top: 1px solid #E7E7E7;
}
footer nav {
height: 40px;
}
footer nav ul, footer ul, #menu ul, article ul {
list-style: none outside none;
padding: 0;
margin: 0;
}
footer nav li, footer li {
display: inline-block;
width: 300px;
position: relative;
float: left;
margin-left: 200px;
}
footer h3 {
font: 12px Arial, sans-serif;
color: #8A8A8A;
letter-spacing: 1px;
}
footer nav a {
font: 12px Arial, sans-serif;
color: #E7E7E7;
}
footer nav a:hover {
color: #20ADA1;
}
.content-wrapper {
width: 1000px;
min-height: 100%;
height: auto;
margin: 0 auto;
display: block;
}
article {
width: 500px;
height: 300px;
margin: 0;
display: inline-block;
float: left;
}
article h2 {
font: 25px bold Arial, serif;
color: #20ADA1;
letter-spacing: 1px;
}
article p {
font: 14px Arial, sans-serif;
color: #8A8A8A;
letter-spacing: 1px;
text-indent: 20px;
width: 400px;
}
article a {
font: 12px Arial, sans-serif;
color: #E7E7E7;
text-decoration: none;
display: block;
float: right;
position: relative;
margin-right: 50px;
}
article a:hover {
color: #20ADA1;
}
img.logo {
width: 200px;
height: 200px;
margin-left: 30px;
display: inline-block;
float: left;
position: relative;
}
#menu {
width: 510px;
height: 40px;
margin-top: 60px;
margin-left: 200px;
border-bottom: 1px solid #E7E7E7;
display: inline-block;
float: left;
position: relative;
}
#menu li {
display: inline;
}
#menu a {
font: 20px bold Arial, sans-serif;
color: #E7E7E7;
text-decoration: none;
letter-spacing: 1px;
margin-left: 10px;
margin-right: 10px;
}
#menu a.active {
color: #20ADA1;
}
#menu a:hover {
color: #20ADA1;
padding-bottom: 15px;
border-bottom: 5px solid #20ADA1;
}
h1.title {
font: 36px bold large Arial, serif;
color: #20ADA1;
letter-spacing: 1px;
height: 45px;
width: 450px;
margin-left: 220px;
margin-top: 25px;
display: inline-block;
float: left;
position: relative;
}
Note: The above code is still very early in the works, so it's not very clean Why is your footer using absolute positioning? Absolute positioning removes the element from the document flow. If you use relative positioning and put it below the articles it will naturally be pushed to the bottom of the page by them. If you want it to always show at the bottom of the screen then you would used position: fixed. I don't want to make it fixed. Had to use absolute because with relative it wasn't pushed below articles and I have no idea why (tried it in various configurations and with different settings). I don't want to use the content-wrapper div or absolute positioning either, but for now it's the only way I can make it work. I checked the web and it seems that everyone is using this solution... Edit: it works with relative position and inline-block display, but I still have to keep the content-wrapper, which I don't want to do. + Show Spoiler [CSS] +
html, body {
width: 100%;
height: auto;
margin: 0;
padding: 0;
background-color: #FFFFFF;
}
header {
width: 1000px;
height: 200px;
margin: 20px auto 50px auto;
border-bottom: 1px solid #E7E7E7;
display: block;
}
footer {
width: 1000px;
height: 70px;
position: relative;
display: inline-block;
border-top: 1px solid #E7E7E7;
margin-top: 50px;
}
footer nav {
height: 40px;
}
footer nav ul, footer ul, #menu ul, article ul {
list-style: none outside none;
padding: 0;
margin: 0;
}
footer nav li, footer li {
display: inline-block;
width: 300px;
position: relative;
float: left;
margin-left: 200px;
}
footer h3 {
font: 12px Arial, sans-serif;
color: #8A8A8A;
letter-spacing: 1px;
}
footer nav a {
font: 12px Arial, sans-serif;
color: #E7E7E7;
}
footer nav a:hover {
color: #20ADA1;
}
.content-wrapper {
width: 1000px;
min-height: 100%;
height: auto;
margin: 0 auto;
display: block;
}
article {
width: 460px;
height: 300px;
margin-left: 40px;
display: inline-block;
float: left;
}
article h2 {
font: 25px bold Arial, serif;
color: #20ADA1;
letter-spacing: 1px;
}
article p {
font: 14px Arial, sans-serif;
color: #8A8A8A;
letter-spacing: 1px;
text-indent: 20px;
width: 400px;
}
article a {
font: 12px Arial, sans-serif;
color: #E7E7E7;
text-decoration: none;
display: block;
float: right;
position: relative;
margin-right: 60px;
}
article a:hover {
color: #20ADA1;
}
img.logo {
width: 200px;
height: 200px;
margin-left: 30px;
display: inline-block;
float: left;
position: relative;
}
#menu {
width: 510px;
height: 40px;
margin-top: 60px;
margin-left: 200px;
border-bottom: 1px solid #E7E7E7;
display: inline-block;
float: left;
position: relative;
}
#menu li {
display: inline;
}
#menu a {
font: 20px bold Arial, sans-serif;
color: #E7E7E7;
text-decoration: none;
letter-spacing: 1px;
margin-left: 10px;
margin-right: 10px;
}
#menu a.active {
color: #20ADA1;
}
#menu a:hover {
color: #20ADA1;
padding-bottom: 15px;
border-bottom: 5px solid #20ADA1;
}
h1.title {
font: 36px bold large Arial, serif;
color: #20ADA1;
letter-spacing: 1px;
height: 45px;
width: 450px;
margin-left: 240px;
margin-top: 25px;
display: inline-block;
float: left;
position: relative;
}
To be honest, I'm not sure I completely got what you wanted there, but let's try it the way I understood it:
From what I got there you want to have a page with the head on top, then a couple of articles and the footer at the bottom.
And the footer should not be fixed, so it stays while crolling, instead simply below the content. From your html and css I understood that you wanted the articles to be displayed two in a row, centered on the page.
So far, thats actually pretty simple, if you wouldn't add that unusual request to no use a limiting container div.
Anyway, I used your html as reference and build a skeleton out of it. (different css though)
http://jsfiddle.net/ZrGQs/
Difference here is that the container ".content-wrapper" is ow called ".limiter" and only wrapped around the articles.
As for the clearfix, you could either use a clearfix, or simply a clear both on the footer. Depends on the additional usage of the limiter. (see http://jsfiddle.net/ZrGQs/1/ )
Now that one got only one update (http://jsfiddle.net/ZrGQs/2/ ), which is basically
article:nth-of-type(2n+1){
clear: left;
float: left;
}
As a fix for when the articles arn't the same height, which easily coud happen when filled with different content.
This is, in my optionion, a pretty solid cross browser solution, but your reueqst was to remove the container...
Removing the limiter and at the same time centering the content called for display: inline-block and text-align: center
Which results in basically http://jsfiddle.net/5FeAm/1/
However I couldn't find a way to limit the articles to two per row. Instead they use up the available horizontal space.
You could add a <br> after every second article (http://jsfiddle.net/5FeAm/2/) but that's not an elegant solution either.
If someone finds a solution for that, I'd be happy to hear it.
Approaching it from a different angle, I went back to "float" and let the articles float again, using the above selector to break into a newline after two articles. But since there is no limiting and centering div, the only option I saw to get them centered was to use a margin-left, which had to be calculated:
article:nth-of-type(2n+1){
clear: left;
float: left;
margin-left: calc(50% - 480px);
}
Resulting in the full code: http://jsfiddle.net/dZFA2/
The downside is of course the usage of calc which isn't exactly cross browser compatible (yes, you could polyfill but stilll..)
Any real elegant cross browser solution? For now I couldn't come up with any, maybe someone else has an idea? Except to stick to the limiter div, it saves you trouble.
And if my idea of what you wanted in the first place is completely differenct from what I tried to solve.. well..at least the laundry is done by now.. 
|
Hey Manit0u,
When I remove the container div and change the footer code to
footer {
width: 1000px;
height: 70px;
border-top: 1px solid #E7E7E7;
}
The footer stays at the bottom. From what I can see the only difference is the articles are no longer centered?
|
On November 01 2013 20:27 icystorage wrote:
i have my first job interview in a week. It also includes an exam and I just know it's about problem solving in stuff. It's so general that i don't know what to study. Any tips? =/ i've been brushing up on my data structures.
I'll share the problem who's correct solution got me my job:
Write a function that takes in any integer and displays the time as a string. Think standard wall clock that only has a minute hand.
+ Show Spoiler +
+ Show Spoiler +
+ Show Spoiler +
|
On November 01 2013 20:27 icystorage wrote:
i have my first job interview in a week. It also includes an exam and I just know it's about problem solving in stuff. It's so general that i don't know what to study. Any tips? =/ i've been brushing up on my data structures.
Exception handling as well!
|
On November 01 2013 20:27 icystorage wrote:
i have my first job interview in a week. It also includes an exam and I just know it's about problem solving in stuff. It's so general that i don't know what to study. Any tips? =/ i've been brushing up on my data structures.
No tips, but I've seen guides that have common programming interview questions. I'm not sure if any of them are useful, maybe someone else can enlighten.
|
On November 02 2013 04:55 autechr3 wrote:Show nested quote +On November 01 2013 20:27 icystorage wrote:
i have my first job interview in a week. It also includes an exam and I just know it's about problem solving in stuff. It's so general that i don't know what to study. Any tips? =/ i've been brushing up on my data structures. I'll share the problem who's correct solution got me my job: Write a function that takes in any integer and displays the time as a string. Think standard wall clock that only has a minute hand. + Show Spoiler ++ Show Spoiler ++ Show Spoiler +
Excuse me for being dumb, but I do not understand what you are trying to model. Why is your input 90 (unclear units..., maybe minutes[?]) equal to 15 minutes each?
Regardless I feel like if I actually understood what the input and output were that would be stupidly easy. I'm taking an intro CS class and could do that. I had no idea that programming jobs would mostly just expect you to be able to write things like that. Better start sending out my resume
|
Maybe it takes degrees? Only thing i can think of tbh.
|
Standard job interview questions suck.
Ideally you would avoid jobs which ask those standard questions.
On November 01 2013 20:40 sluggaslamoo wrote:+ Show Spoiler +On November 01 2013 20:27 icystorage wrote:
i have my first job interview in a week. It also includes an exam and I just know it's about problem solving in stuff. It's so general that i don't know what to study. Any tips? =/ i've been brushing up on my data structures. Off the top of my head. "Write a program that prints the numbers from 1 to 100. But for multiples of three print “Fizz” instead of the number and for the multiples of five print “Buzz”. For numbers which are multiples of both three and five print “FizzBuzz”." What is the difference between overloading and overriding? Design using UML how you would implement a rectangle, triangle, and circle class. What is the difference between a Set, Array, Collection, Hash? http://codility.com/c/intro/demoV33ZXX-KF8http://projecteuler.net/Here's a quiz I prepared earlier + Show Spoiler +
General
1. What is functional decomposition?
2. Name 2 major forms of abstraction
3. What is an expression?
4. Name 3 different programming paradigms
5. What is the main difference between structured and procedural programming?
6. What is Control Flow?
7. What is a Side-Effect?
Object Oriented Specific
1. Briefly describe the thought process required in OOP.
2. Name 4 principles of OOP.
3. How can Generalisation be an abstraction?
4. What OOP concept can used to Generalise objects?
5. Name 2 forms of polymorphism.
6. Name 3 things an object can do.
7. Name 3 different design patterns.
8. What is a classification and how does it relate to programming?
Answers + Show Spoiler +
General
1. What is functional decomposition?
One of the fundamentals of programming where problems are broken down into their simplest form and one tries to find ways or methods of dealing with each small problem one step at a time. When these problems are solved, one can re-use these methods to handle an even bigger problem.
2. Name the 2 major forms of abstraction
Functional abstraction
Data abstraction
3. What is an expression?
An expression is any unit of code that when combined will reveal itself in the form of a value.
4. Name 3 different programming paradigms
[Most obvious ones]
Procedural
Object-Oriented
Functional
(There are at least 100 more)
5. What is the main difference between structured and procedural programming?
Structured programming abolishes the use of the 'goto' statement that altered the step-by-step process of going through code, as well as only having a single point of entry and exit in a subroutine. A programmer now would only have to think in terms of 'sequence', 'selection', 'repetition' without having to even consider an unsuspecting jump, exit, or entry point in the code, allowing programmers to make better assumptions about someone else's code or even their own code.
6. What is Control Flow?
Used to refer to the order in which statements are called.
7. What is a Side-Effect?
When an interaction with a piece of data affects the behaviour of other operations which rely upon it.
Object Oriented Programming
1. Briefly describe the thought process required in OOP
We must see our program in terms of objects and the role they play in a particular problem domain.
2. Name the 4 core principles of OOP.
Abstraction (or Classification)
Encapsulation
Inheritance
Polymorphism
3. How can Generalisation be an abstraction?
An object can be referred to and grouped as a part of a family of related concepts or roles.
4. What OOP concept can used to Generalise objects?
Inheritance
5. Name 2 forms of polymorphism.
Universal
Parametric
Inclusion
Subtyping
Ad-Hoc
Coercion
Overloading
6. Name 3 things an object can do.
Do things (methods)
Know things (fields)
Collaborate
Perform services
Perform operations
Many others
7. Name 3 different design patterns.
Double Dispatch
Composite
Factory
(Atleast 100 to choose from)
8. What is a classification and how does it relate to OOP?
Classification refers to the category or taxonomy of an object. The idea of object classification is to organise elements or concepts into particular groups, roles, responsibilities, etc. In programming this is called a class, we can use classes to represent these elements as code.
You have a week so I wouldn't bother going through anything difficult, you will just suffer from information overload. Nothing beats pure experience and just immersing yourself in programming. Just keep doing what you are doing I'd say.
Singling you out (sorry!)
Those questions have nothing to do with "experience" but all to do with "memorize random terms no one gives a fuck about".
But sadly that's the kind of job interview you will experience in the field. Memorizing or small tricks (there was a discussion about solving problems with bit shifting some pages back).
Ideally skip those jobs (but since the job field is a battleground you have to prepare for that kind of stuff, especially if you need a 1st job!).
My advice would be: Look at what the company is doing. If you applied to a medical visualization company it might be useful to review how x-rays are working
Security company? Review some of their basic stuff (euclidean algorithm? (my NetSec is bad))
I felt like I could always steer the interview into a direction which would help my strengths. If the interviewer doesnt react - he's an idiot for not realizing that he has someone in front of him who knows the basics of the field (!) and not just generic stuff every idiot can learn. Also keep in mind that OTHER random idiots who just memorize shit could get past such a screening process (read: your coworkers will suck!).
|
On November 02 2013 07:18 DeltaX wrote:
Maybe it takes degrees? Only thing i can think of tbh.
Divide the number by 6, thats the minute offset.+ Show Spoiler +If you're really cheeky, you're function can just detect "90", "450", and "-90" and return the expected output. It fits the specs. Only answer this way if applying to a defense contractor =D
|
On November 02 2013 07:37 RoyGBiv_13 wrote:Show nested quote +On November 02 2013 07:18 DeltaX wrote:
Maybe it takes degrees? Only thing i can think of tbh. Divide the number by 6, thats the minute offset.
Yeah I was thinking that myself, but honestly that makes little sense. Why would you make the input in terms of 10 seconds each? Weird.
Anyway, as someone who has never actually interviewed for a programming job before I must say that having to do such a problem for a job seems almost too good to be true.
|
Most interview "problems" aren't about creating a solution, but writing code and having a thought process that the interviewer can evaluate.
Just because you can answer the problem doesn't mean you'll get the job. It just means that everything on your resume isn't fluff.
|
On November 02 2013 04:55 autechr3 wrote:Show nested quote +On November 01 2013 20:27 icystorage wrote:
i have my first job interview in a week. It also includes an exam and I just know it's about problem solving in stuff. It's so general that i don't know what to study. Any tips? =/ i've been brushing up on my data structures. I'll share the problem who's correct solution got me my job: Write a function that takes in any integer and displays the time as a string. Think standard wall clock that only has a minute hand. + Show Spoiler ++ Show Spoiler ++ Show Spoiler +
every 360 is one hour, 0 = 12:00.
outPutTime(int num) {
int hours = num / 360;
int min = (num - hours*360) / 6;
hours %= 12;
if (hours == 0 ) {
hours = 12;
}
print(hours + ":" + min);
}
Something like that?
|
On November 02 2013 07:59 WolfintheSheep wrote:
Most interview "problems" aren't about creating a solution, but writing code and having a thought process that the interviewer can evaluate.
Just because you can answer the problem doesn't mean you'll get the job. It just means that everything on your resume isn't fluff.
Yeah definitely (my post might've been a bit harsh).
If there's nothing else the interviewer can evaluate - be prepare those nonsense questions.
If you can provide other stuff (specific core knowledge in a field) and hint at it a good interviewer will ask you stuff about that topic. If he doesnt - he sucks (and yes, you should provide that as feedback to his company (but dont do this as a guy fresh from university)).
On November 02 2013 07:59 WoolySheep wrote:Show nested quote +On November 02 2013 04:55 autechr3 wrote:On November 01 2013 20:27 icystorage wrote:
i have my first job interview in a week. It also includes an exam and I just know it's about problem solving in stuff. It's so general that i don't know what to study. Any tips? =/ i've been brushing up on my data structures. I'll share the problem who's correct solution got me my job: Write a function that takes in any integer and displays the time as a string. Think standard wall clock that only has a minute hand. + Show Spoiler ++ Show Spoiler ++ Show Spoiler + every 360 is one hour, 0 = 12:00. outPutTime(int num) {
int hours = num / 360;
int min = (num - hours*360) / 6;
hours %= 12;
if (hours == 0 ) {
hours = 12;
}
print(hours + ":" + min);
}Something like that?
Define your language.
You do hours = num/360 and then mod 12 it.
The given example shows num can be negative (so hours can be neg).
Modulus for neg. numbers isnt clearly defined (math pov afaik).
It's down to the programming language how it's implemented.
http://www.yourdailygeekery.com/2011/06/28/modulo-of-negative-numbers.html
Actually: I didnt check if your example gives correct output. It's definitely possible Just wanted to mention: be careful in what language you do mod.
|
Junior In high school here. Taking AP Computer Science and just discovered this thread. Expect a lot of posting from me, lol.
|
On November 02 2013 08:07 Zocat wrote:Show nested quote +On November 02 2013 07:59 WolfintheSheep wrote:
Most interview "problems" aren't about creating a solution, but writing code and having a thought process that the interviewer can evaluate.
Just because you can answer the problem doesn't mean you'll get the job. It just means that everything on your resume isn't fluff. Yeah definitely (my post might've been a bit harsh). If there's nothing else the interviewer can evaluate - be prepare those nonsense questions. If you can provide other stuff (specific core knowledge in a field) and hint at it a good interviewer will ask you stuff about that topic. If he doesnt - he sucks (and yes, you should provide that as feedback to his company (but dont do this as a guy fresh from university)). Show nested quote +On November 02 2013 07:59 WoolySheep wrote:On November 02 2013 04:55 autechr3 wrote:On November 01 2013 20:27 icystorage wrote:
i have my first job interview in a week. It also includes an exam and I just know it's about problem solving in stuff. It's so general that i don't know what to study. Any tips? =/ i've been brushing up on my data structures. I'll share the problem who's correct solution got me my job: Write a function that takes in any integer and displays the time as a string. Think standard wall clock that only has a minute hand. + Show Spoiler ++ Show Spoiler ++ Show Spoiler + every 360 is one hour, 0 = 12:00. outPutTime(int num) {
int hours = num / 360;
int min = (num - hours*360) / 6;
hours %= 12;
if (hours == 0 ) {
hours = 12;
}
print(hours + ":" + min);
}Something like that? Define your language. You do hours = num/360 and then mod 12 it. The given example shows num can be negative (so hours can be neg). Modulus for neg. numbers isnt clearly defined (math pov afaik). It's down to the programming language how it's implemented. http://www.yourdailygeekery.com/2011/06/28/modulo-of-negative-numbers.htmlActually: I didnt check if your example gives correct output. It's definitely possible Just wanted to mention: be careful in what language you do mod.
Dear god, why would any language output 12 for -1 % 13?
The code looks good enough to me. In an Interview, I might point out that you have hours represent two different "hours", the total number of hours elapsed, and the time to display in hours, then see how you fix it.
If you went back and added in hoursElapsed and hoursDisplayed, I might punish you, minorly. If you went back and added a comment without changing any code, that would be passing. If you went back and removed the hours%=12 line, adding it to the original calculation, then removed the reference to hours in the minute calculation, you would receive the highest grade.
You're going to make mistakes, especially in seemingly easy interview questions. How you handle a mistake is just as important as if you got the code right the first time.
|
On November 02 2013 07:36 Zocat wrote:Standard job interview questions suck. Ideally you would avoid jobs which ask those standard questions. Show nested quote +On November 01 2013 20:40 sluggaslamoo wrote:+ Show Spoiler +On November 01 2013 20:27 icystorage wrote:
i have my first job interview in a week. It also includes an exam and I just know it's about problem solving in stuff. It's so general that i don't know what to study. Any tips? =/ i've been brushing up on my data structures. Off the top of my head. "Write a program that prints the numbers from 1 to 100. But for multiples of three print “Fizz” instead of the number and for the multiples of five print “Buzz”. For numbers which are multiples of both three and five print “FizzBuzz”." What is the difference between overloading and overriding? Design using UML how you would implement a rectangle, triangle, and circle class. What is the difference between a Set, Array, Collection, Hash? http://codility.com/c/intro/demoV33ZXX-KF8http://projecteuler.net/Here's a quiz I prepared earlier + Show Spoiler +
General
1. What is functional decomposition?
2. Name 2 major forms of abstraction
3. What is an expression?
4. Name 3 different programming paradigms
5. What is the main difference between structured and procedural programming?
6. What is Control Flow?
7. What is a Side-Effect?
Object Oriented Specific
1. Briefly describe the thought process required in OOP.
2. Name 4 principles of OOP.
3. How can Generalisation be an abstraction?
4. What OOP concept can used to Generalise objects?
5. Name 2 forms of polymorphism.
6. Name 3 things an object can do.
7. Name 3 different design patterns.
8. What is a classification and how does it relate to programming?
Answers + Show Spoiler +
General
1. What is functional decomposition?
One of the fundamentals of programming where problems are broken down into their simplest form and one tries to find ways or methods of dealing with each small problem one step at a time. When these problems are solved, one can re-use these methods to handle an even bigger problem.
2. Name the 2 major forms of abstraction
Functional abstraction
Data abstraction
3. What is an expression?
An expression is any unit of code that when combined will reveal itself in the form of a value.
4. Name 3 different programming paradigms
[Most obvious ones]
Procedural
Object-Oriented
Functional
(There are at least 100 more)
5. What is the main difference between structured and procedural programming?
Structured programming abolishes the use of the 'goto' statement that altered the step-by-step process of going through code, as well as only having a single point of entry and exit in a subroutine. A programmer now would only have to think in terms of 'sequence', 'selection', 'repetition' without having to even consider an unsuspecting jump, exit, or entry point in the code, allowing programmers to make better assumptions about someone else's code or even their own code.
6. What is Control Flow?
Used to refer to the order in which statements are called.
7. What is a Side-Effect?
When an interaction with a piece of data affects the behaviour of other operations which rely upon it.
Object Oriented Programming
1. Briefly describe the thought process required in OOP
We must see our program in terms of objects and the role they play in a particular problem domain.
2. Name the 4 core principles of OOP.
Abstraction (or Classification)
Encapsulation
Inheritance
Polymorphism
3. How can Generalisation be an abstraction?
An object can be referred to and grouped as a part of a family of related concepts or roles.
4. What OOP concept can used to Generalise objects?
Inheritance
5. Name 2 forms of polymorphism.
Universal
Parametric
Inclusion
Subtyping
Ad-Hoc
Coercion
Overloading
6. Name 3 things an object can do.
Do things (methods)
Know things (fields)
Collaborate
Perform services
Perform operations
Many others
7. Name 3 different design patterns.
Double Dispatch
Composite
Factory
(Atleast 100 to choose from)
8. What is a classification and how does it relate to OOP?
Classification refers to the category or taxonomy of an object. The idea of object classification is to organise elements or concepts into particular groups, roles, responsibilities, etc. In programming this is called a class, we can use classes to represent these elements as code.
You have a week so I wouldn't bother going through anything difficult, you will just suffer from information overload. Nothing beats pure experience and just immersing yourself in programming. Just keep doing what you are doing I'd say. Singling you out (sorry!) Those questions have nothing to do with "experience" but all to do with "memorize random terms no one gives a fuck about". But sadly that's the kind of job interview you will experience in the field. Memorizing or small tricks (there was a discussion about solving problems with bit shifting some pages back). Ideally skip those jobs (but since the job field is a battleground you have to prepare for that kind of stuff, especially if you need a 1st job!). My advice would be: Look at what the company is doing. If you applied to a medical visualization company it might be useful to review how x-rays are working Security company? Review some of their basic stuff (euclidean algorithm? (my NetSec is bad)) I felt like I could always steer the interview into a direction which would help my strengths. If the interviewer doesnt react - he's an idiot for not realizing that he has someone in front of him who knows the basics of the field (!) and not just generic stuff every idiot can learn. Also keep in mind that OTHER random idiots who just memorize shit could get past such a screening process (read: your coworkers will suck!).
I agree with you, but that's just the nature of the beast unfortunately. Even top tier companies will ask questions like this, and I do see some purpose in asking them, although I wouldn't treat it as the be all and end all. Ideally if you knew enough about programming overall you should be able to answer these questions regardless.
3 of those questions I have been asked in an interview at Lonely Planet. The shape one, overloading/overriding, and the data-structure one.
The overloading versus overriding one I almost messed up just due to nerves, I was eventually able to answer it succinctly but after I paused for a long time initially they put even more pressure on me saying its a core fundamental and I should know it  (considering I answered all the others so easily), if there wasn't so much on the line I would have been able to answer it immediately too.
Apparently I was the only one that was able to answer all questions out of the field though.
|
|
|
|
|
|
EPT
