Posts by gentlemedia

but that is truly horrible :D

@Diafol - What?!? Don't you like the pick of my colour scheme??? Man, that's the latest trend what's called brutalist web design! :-)

I have no idea why you want this, but do you mean something like this (done with a CSS3 gradient)?
https://codepen.io/gentlemedia/pen/JNwYzr

Here's a jQuery version
http://codepen.io/gentlemedia/pen/bqQxJP

Here's a CSS with the checkbox hack version:
http://codepen.io/gentlemedia/pen/NpEOgx

How do you want to show that 'foreground' which I assume you mean an overlay. On page load, on click or any other event?

It's because there's also an index.html in that 'bestshop' directory and that's the one that gets loaded when accessing www.advance-web-studio.com/bestshop/
http://www.advance-web-studio.com/bestshop/index.html
As far as I know loads Apache by default an index.html before an index.php unless you tell otherwise (a diffrent order) in a .htaccess file.

If you want to load the index.php you can also remove the index.html or rename it to something else if you want to keep it,

Thanks, it works out correctly now.

Good! And now mark as solved, please!

The article alignment does not change yet.

You mean the dates right? They are aligned at the top of the the td now on my screen.

Davy, why aren't you listening to Diafol?

HTML elements have default styling also named browser defaults (placed in user agent stylesheets) and they're according to the spec.
https://www.w3.org/TR/CSS2/sample.html

That said... the browser defaults of tbodyare shown below.

thead, tbody,
tfoot           { vertical-align: middle }
td, th, tr      { vertical-align: inherit }

And this is what you see. Your dates are vertically aligned in the middle of the td The td is placed inside a tbody(even if you didn't do that, the browser does that for you) and as you see above, the td inherits the vertical-align: middle from tbody.
Do you want them at the top of the td, then you override the default styling of tbody in your own sylesheet (not the tinyMC stylesheet... this has nothing to do with it) to vertical-align: top;

So like this:

tbody { vertical-align: top }

It's just a name picked by that Tim of the pen :) It could be any name. It's the animation-name which you would refer to in the @keyframes

You use the checkbox hack and what I know is that pseudo-class + general (+) / adjacent (~) sibling combinators doesn't work on Android below 4.1.2. but there is a solution for that.

body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }

I've used this hack in the past as well, but credits goes to Tim Pietrusky

Cek this out: http://gsa-constructionspecialist.com/experiences

Wow! Those colours! ¯_(ツ)_/¯

Sorry I don't have time to look at it now, but you could use the data attribute as well for your jQuery something like this:

var $default = $('.default').html();

$('li[data-lang]').on('mouseenter', function () {
  $('.default').html($(this).data(lang));
}).on('mouseleave', function () {
  $('.default').html($default)
});

Untested, but perhaps you can figure it out for yourself with this or someone else could chime in from here.

There is a pure css solution if you use custom data-attributes.

HTML:

<ul>
  <li lang="es" data-lang="Nuestros jugadores representan una variedad de fondos, países e idiomas.">Español</li>
  <li lang="zh" data-lang="我們的球員代表了各種背景，國家和語言。">中文</li>
</ul>

CSS:

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li[data-lang] {
  margin-bottom: .5rem;;
  cursor: pointer;
}

li[data-lang]:hover::after {
  content: " " attr(data-lang);
  cursor: default;
}

Little demo: http://codepen.io/gentlemedia/pen/rjWBKB

EDIT:
I just see your second post now and see also that you wanted something else :) In that case you'll need indeed javascript, but that can be indeed much cleaner and efficient then you have now. Will have a look when I have some more time then now.

I use the @media print styles from HTML5 Boilerplate in my default CSS file. Perhaps it can come in handy for you too.

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after,
    *:first-letter,
    *:first-line {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

Give container a top margin of 60 px (the height of the header) and I'd recommend to take out the min-height: 100% and height: auto, because they don't make much sense in the way you have your mark-up.

Try to give it a z-index, because it might behind the #container div which has a min-height of 100% and a white background color. This might be covering the header.

#header1 { 
    width: 100%; 
    font-size: 28px; 
    font-weight: bold; 
    font-style: oblique; 
    position: fixed;
    z-index: 100;
} 

Just to be sure I set a z-index of 100, but 1 or 2 should be enough as well.

Well... you could do that of course, but then I'd suggest you do the following, because seriously you don't want !important to fix issues like this.

in your HTML of that img-portfolio image grid you have the container.:

<!-- Page Content -->
    <div class="container">

Just add a class name to that div something like portfolio:

<!-- Page Content -->
    <div class="container portfolio">

And then you can do in your CSS this:

.portfolio .img-portfolio {
    margin-bottom: 30px;
}

If this doesn't solve it then you have already specificity creep somwhere down the road.

Actually this solves the problem but i have a question why is not recomended to use !important ?

I've posted a link to an article that explains it well.

What you have is a specificity issue (a rule set before your rule-set that also sets a bottom margin on .img-portfolio or probably on .img-responsive, but that has a higher specificity then yours) or further down the cascade you have another rule-set that overwrites your css rule-set. This is what you have to figure out! Thus remove that !important and then inspect with developer tools the css rules that are applied to .img-portfolio. That's an easy & quick way to find out.

Here is the full css code

Those CSS blocks have nothing to do with the HTML of that image grid, so the error is not in there.

You have a rule-set somewhere that might overriding that margin-bottom, because it should just work.
See here; http://codepen.io/gentlemedia/pen/XNegPp
With the browser developer tools you can spot pretty quick if this is the case or not.

Or you could add an !important to the property value to find out if this is the case. And I say 'to find out', because if the !important 'solves' the problem, you'll have to still figure out which rule is overriding it and solve it properly (usually a CSS specificity issue) so you can remove the !important. https://css-tricks.com/when-using-important-is-the-right-choice/ Ok, school is closed now! :)

Try the following and see if your 30px bottom margin showes up:

.img-portfolio {
    margin-bottom: 30px !important;
}

I have 3 dots :)
http://codepen.io/gentlemedia/pen/MbEeOa

How about another way, is it possible to bring two items on the left, and then have span.middle "fill" the remaining space on right?

No, with old fashioned CSS 2.1 it is not possible. That's why we have now flexbox and in the future grid at our disposal. Do you really have/want to support IE9 and below? Or serve modern browsers that supports flexbox your fancy layout and those who don't floats by using feature detection such as Modernizr.

That is not possible without using flexbox, grid or javascript. If you use floats or inline-block, you'll need to set dimensions.
You can get half of what you want by using calc() :)

http://codepen.io/gentlemedia/pen/qqjRpy

And mixing floats and inline-block on the same element is redundant, because inline elements, such as a span, become automatically block-level elements (display: block) once you float them.

In this case just float them, because you set fixed dimensions of 80px on them anyways so there's no need for using inline-block.

You can't have anchor tags within an anchor tag and think about it for a second... does it make sense?
In order to show/hide the div while hovering the anchor, that div needs to be a sibiling of the anchor and not a child.

Something like this:
https://jsfiddle.net/gentlemedia/vc639va4/3/

You're getting way too specific with long selector chains like that which makes it imo harder to read and it will give you in the end specificity issues - https://css-tricks.com/specifics-on-css-specificity/
Also using ID's in your CSS is not recommended for specificity reasons too and the CSS applied to it is not reusable.

Look into BEM or SMACS methodologies for reusable components and proper naming conventions.
http://getbem.com/
https://smacss.com

For starter I'd recommend to take out the onclick attribute from the HTML. Keep structure and behavior seperate.

<input id="aaa" formaction="register.php" type="submit" value="Register" />

And then within <script> tags

document.getElementById('aaa').addEventListener('click', function (e) {
    e.preventDefault();
    // scrollTo here
});

or with jQuery

$('#aaa').on('click', function (e) {
    e.preventDefault()
    // scrollTo here
})

And on a side note and off topic. The datetime attribute is specifically for the time element.

<time class="metro_tmtime" datetime="2013-04-10 18:30">
    <span class="date">1/4/13</span>
    <span class="time">17:20</span> 
</time>

https://schema.org/docs/gs.html#advanced_dates

why does the click function on the arrow doesn't work on mine?

Which arrow? Where's yours? Sorry, but my christal ball is at the dry cleaner.

Obviously I was not clear enough, but let me try again :)

Unslider has by default no left and right arrows, but 'next and 'prev' text links. Just like you have it in your image.
If you want to replace those text links with arrows then you have two options, but I will show you the easiest which is overwriting the object like this:

$(function() {
    $('.my-slider').unslider({
        arrows: {
            prev: '<a class="unslider-arrow prev">&#10094;</a>',
            next: '<a class="unslider-arrow next">&#10095;</a>'
        }
    });
});

For the sake of being lazy, I've used HTML symbols for the arrows. ❮ is a left arrow (bracket) and ❯ is a right arrow (bracket), but like I said you can also use an icon font or an SVG sprites image. Styling and positioning of the arrows you do with CSS.

.unslider-arrow {
    position:absolute;
    top: 45%;
    z-index:2;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 24px;
    color: #f9f9f9;
    text-align: center;
    border-radius: 50%;
    background-color: #333;
    cursor:pointer;
}

.unslider-arrow.prev { left:20px }
.unslider-arrow.next { right:20px }

I was not really that lazy, because I even created a demo for you :)
http://projects.gentle.media/unslider/

By default the arrows option is set to true, which means its shows the 'next' and 'prev' text links and not left & right arrows. Do you want left & right arrows instead of the text links, then you will have to put them in yourself either through CSS or as an object override via the arrows option. For the arrows you can use an icon font, an image or even just HTML symbols https://www.piliapp.com/symbol/).

Apple blocks autoplay of media (video or audio) in Safari on iOS by default and if you're going to use the video tag, then I'd recommend to convert your .mov file to .mp4 instead, so that the video also plays in other browsers/devices.

@rynatroop is right when setting a height of 100% on the container, then you should set a 100% height on the html and body tag too. Otherwise it takes 100% of 0 which is 0.
To overcome this you can set the container height to 100vh which means it takes 100% of the viewport height.
http://caniuse.com/#feat=viewport-units

But if you don't need to support really old browsers and want a sticky footer at the bottom then you can get even more fancy with your CSS by using calc().
http://caniuse.com/#feat=calc

HTML:

<div class="container">
  container
</div>
<div class="footer">
  footer
</div>

CSS:

.container {
  height: calc(100vh - 90px); /* minus the height of the footer */
  background-color: #ccc;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;  /* for smooth momentum scrolling on iOS */
}

.footer {
  height: 90px;
  background-color: #666;
}

Little demo: http://codepen.io/gentlemedia/full/EgxaOB/

okay, i've found the issue. In head.php you have a CSS reset and the css rule that sets the new HTML5 elements to display: block misses the main tag, so add the main tag there and it will center in IE. Below I've added the main tag so you can see what I'm talking about :)

article,aside,details,figcaption,figure,footer,header,hgroup,menu,main,nav,section{display:block}

Instead you can also add display: block in your own stylesheet of the main CSS rule.

ok, I had to see it for myself so I've made a pen and tested it in IE11 on Windows7 and it just centers.
http://codepen.io/gentlemedia/pen/bpJzgO

According to your pastebin snippet you don't use a doctype. Is this also the case in your page?

Add it to the $post request. Something like this

$.post('ajax/count-pictures-views.php', {picture_id: id}, function(data)).done(function() {
    Waypoint.refreshAll();
})

Add this to your stylesheet.

html, body { width: 100% }

Try reinitialise waypoint with the .done() callback.
https://api.jquery.com/jquery.post/

If you use floats on the boxes you take them out of the normal document flow so they won't dictate the height of the parent anymore.
The overflow trick is indeed a method to solve this, but use overflow: hidden instead to clear the floats and to avoid the scrollbar issue your facing. But with this you cant have box-shadows on the parent or the boxes if you want to.

The best way to clear the floats is to use the clearfix hack
http://nicolasgallagher.com/micro-clearfix-hack/

I have this box, I need this box to be 230px, and I have second box, that needs to take entire space remaining

Re this, this is ony posiible with flexbox. In your fiddle you just gave the second box also a fixed width to fill the remaining space.

How else could I align two DIVs next to one another without flexbox and float?

There's inline-block, but this has also its own issues

If you write a.submenu ul li you say that ul is a descendant of a.submenu, but that's not the case in that markup.
That ul is an adjacent sibling of a.submenu, so if you want to select that ul, you'll use the adjacent sibling combinator (+), so like this a.submenu + ul li. If you look at the pen I shared with you in your other post, then you see that I also used this combinator to select that ul that holds your submenu items.

Also using long selector chains like nav ul li a.submenu ul li a will lead eventually in CSS specificity problems, 3 is really the max you should use and add classes to the HTML if you need to.

Here's some reading for you:
https://css-tricks.com/almanac/selectors/d/descendant/
https://css-tricks.com/almanac/selectors/a/adjacent-sibling/
https://css-tricks.com/strategies-keeping-css-specificity-low/

My bad... I've pasted the wrong link at EDIT2
https://jsfiddle.net/gentlemedia/c16vnhLb/4/

And indeed visibility doesn't take space.

Any suggestion on what I could start building to get links into such thing

Usually this is how we would mark up a menu with a 1 level submenu

<nav role="navigation">
    <ul>
        <li><a href="page1.html">page one</a></li>
        <li><a href="#" class="submenu">submenu</a>
            <ul>
                <li><a href="page2.html">page two</a></li>
                <li><a href="page3.html">page three</a></li>
            <ul>
        </li>
        <li><a href="page4.html">page four</a></li>
    </ul>
</nav>

And then you would hide the ul tag that holds the submenu items and show it when you hover the a tag with the class submenu.
So something like this, but of course you will need to do a lot more within the CSS to get the main menu items aligned and the submenu where you want it.

.submenu + ul {
    visibility: hidden;
    opacity: 0;
    /* actually you don't need to transition
      * the visibility property.
      * Only the opacity is enough */ 
    transition: opacity .5s;
 }

.submenu:hover + ul {
    visibility: visible;
    opacity: 1;
}

Yes, I know, that's why I animate opacity.

No, you transition 'all' which includes also the display: none that you change on hover to display: inline-block

Doesn't work: https://jsfiddle.net/fzbx09qL/4/

Again, because of the display property

I need it to appear from nothing, not slide from bottom of the website to it's original position.

I know, just don't transition the top property, but only the opacity.

Thus, don't hide that div with display: none, but just with opacity: 0 and visibilty: hidden.

So you get something like this:

nav div {
  position: absolute;
  top: 100%;
  width: 200px;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s, visibility .5s;
}

nav a:hover div {
  visibility: visible;
  opacity: 1;
}

https://jsfiddle.net/gentlemedia/c16vnhLb/1/

EDIT:

Second, there is some code that I commented out in HTML box. When I add it, the entire "dropdown" breaks. This might be because of links, but in future I'd really need it. Is there a work-around?

If you want links inside that div then, you shoud use another element instead of the anchor tag for the hover.

EDIT2:

Third, it seems this box is a little bit off to the side, is there a way to place it in center relatively to it's parent? Obviously it's there by default, as it leans on left side of it's parent.

https://jsfiddle.net/gentlemedia/c16vnhLb/2/

You can't transition the display property, so instead you could use opacity: 0 in combination with visibilty: hidden or hide that div off-screen with top: -100% (for example) and on hover you set it to top: 0 (or a bit more so that it will appear underneath).

What the heck?!?

I see what you mean now and that's because you set the hover on .flipContainer and this div fills the whole width of the page and therefore the effect only works if you leave that div with your cursor up or down.

Instead you should hover the image, so like this:

.flipImage {
  border: 2px blue dotted;
  -webkit-transition: all 0.7s ease;
  transition: all 0.7s ease;
}

.flipImage:hover {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

With this transform: rotateY you rotate over the y-axis thus vertical. To flip horizontal you'll need to rotate over the x-axis; transform: rotateX

Why do you still use device-width media queries? Just forget them. You don't need them, unless you're developing something for specific devices and their screen resolutions.
Styles in device-width media queries don't get triggered by resizing the browser window/viewport either, so that's why you don't see anything happening. These styles only get triggered if the width of the screen resolution of a device is exactly 800px.

So only use (viewport) width media queries and if you want to create mobile first RWD sites then you use min-width an if you want/need to create desktop first RWD websites, you use max-width media queries. The latter was used in the begiining of RWD more often , because of old IE that didn't support media queries. Nowadays the mobile first route is considered the way to go.

Here's some good info that explains the difference between width and device-width media queries:
http://www.sitepoint.com/media-queries-width-vs-device-width/

And here's one when to chooe between min-width and max-width:
http://petegale.com/blog/css-media-queries-min-width-vs-max-width/

You will need to add the 'label' element to your inputs aswell.

<form>

    <div>

        <label for="name">Name</label>
        <input type="text" name="name" placeholder="Your Name" required>

    </div>

    <div>

        <label for="email">Email</label>
        <input type="email" name="email" placeholder="enter valid email address" required>

    </div>

</form>

And set your label and input to display: block in your CSS, so that they will stack ontop of each other.

It really depends imo. Also about the escort agency. I've build some in the past back in Holland, but they were legitimate high class escort agencies (with an official license) and no dodgy businesses. If you want to do it to fill your portfolio with work, then I also think you should not do it. If you need to get food on the table or want to use the project to grow your skills and to get better at what you do, then why not?

Instead to hard code an empty div tag at the bottom for the fade effect, you could also use a pseudo element (:before or :after) for your CSS gradient.

.scroll-div {
    position: relative;
    height: 500px;
    overflow: auto;
}

.scroll-div::after {
    content: " ";
    position: absolute;
    z-index: 1000;
    width: 100%;
    height: 80px;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%)
}