Posts by gentlemedia

Just ditch the tables that you use for layout and use proper tags. You can start with div tags. I will not say that that will solve your problem, but tables were not meant for layouts. Not in 1995 and not in 2017. The HTML structure you have now is overly complicated and is asking for trouble.

I see some nasty inline styles on that p tag and the negative margin-left of 210px is the culprit here.

<p style="margin-left:-210px;padding-top:10%;padding-right:130px;font-size:180%;margin-top:10px;text-align:justify;">
    The RENARD Elite timepieces come with a 35.5 mm and 25.5 mm stainless steel case. The watches have a slightly domed crystal and a vertically brushed champagne coloured dial that elegantly diffuses light reflection. 
</p>

the quills script should had a function (php or other server side) to do the uploading?

Quiljs is just an edior. How you want to upload and save the data that's up to you.

I mean does -as it should , change the font or bold or color of text after uploading a text

To store also all the formatting you should use the getContents()API method.

getContents: Retrieves contents of the editor, with formatting data, represented by a Delta object.

https://quilljs.com/docs/api/#getcontents
https://quilljs.com/docs/delta/

And there's even an example with form submit to save the data. Notice the hidden input[name=about] where the data goes in.
http://quilljs.com/playground/#form-submit

Do you even read the quilljs guides & docs?

How about text to speech. Any idea where to find it?

Did you even had a look at that voice-elements link? It does both speech to text and text to speech.

You can grab the data with JS (or JQuery) and then you can do whatever you want with it.
https://www.google.com/search?q=get+content+of+contenteditable+for+PHP&gws_rd=cr&ei=GotKWcOpNIKZaevMqtAL

I think this is the best Rich Text Editor script https://codepen.io/mykh/pen/zqdPqr

That's also with Quill and it's the best you can get for free.
You can also just use the core JS & CSS files from Quill which is lighter due to no themes, formatting and non essential modules.

<link href="//cdn.quilljs.com/1.2.6/quill.core.css" rel="stylesheet">
<script src="//cdn.quilljs.com/1.2.6/quill.core.js"></script>

Did you check out https://quilljs.com/ / https://github.com/quilljs/quill/ ?

+1 for the mention of Web Speech API.
Native browser support is still quite wonky,
http://caniuse.com/#feat=speech-recognition

...but there's a Web Component wrapper using Polymer.
http://zenorocha.github.io/voice-elements/

Check this old, but stil relevant, article about file paths. That explains it.
https://css-tricks.com/quick-reminder-about-file-paths/

I asume your CSS is in that stylesheet.css, so then your path to that image should be like this.

body {
    background-image: url("../images/p3.jpg");
}

Knowing all the CSS there is, won't make your My Account section nice looking. You need at least an eye for good UI design to make it look nice. Do you have that?
If you dont, you can also search for a nice Bootstrap UI kit and try to implement that.

https://www.google.com/search?q=bootstrap+UI+kit&ie=utf-8&oe=utf-8&gws_rd=cr&ei=id0oWfYfwqxRscuq8AM

I think TPL stands for template file. I had to work in the past on an OpenCart webshop and that whole thing was build with.tpl files, but it was just PHP & HTML inside of these files.

You say it's a Wordpress site, so I asume you can edit that title and link via the WP-admin instead of your code editor. WordPress is after all a content management system.

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

You can use this tiny library to detect WebRTC features such as getUserMedia so you can serve your fallback solution for those browsers which don't support it.
https://github.com/muaz-khan/DetectRTC

MediaDevices.getUserMedia() which falls under the Media Capture and Streams specification is not supported (yet) in Safari (desktop and mobile), but is in development.
https://webkit.org/status/?#specification-media-capture-and-streams
So you will have to create indeed a fallback solution for Safari.

Nobody has issues with posting code (as far as I know). So what are you using (browser/device, OS version, etcetera)? And how are you trying to post code?

In order to use oveflow: autoyou have to set an explicit heighton #content. It doesn't do anything if you use max-heightand/or min-height (I'm even not sure what you're trying to achieve with those).
Thus if you set height: calc(100% - 250px) on #content you will get the scrollbar.

I don't know if you're using a child theme, but if you do (and you should) then you should make a copy of header.php and place this copy in your child theme directory. In this header.php file you make your edits or additions such as your img src.
Also place your 'images' folder in your child theme directory too and then you can use the following line to retrieve the image.

<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/AJTFixPreisBanner.jpg" />

I agree with Rproffitt and also think you already answerd you're own questions.

Having to do a lot of guess work which part of the code does what and that is not a proper way to learn.

The stuff you ask is quite complex, too detailed and cater a lot of different technologies. You will have to Google like crazy to find a tutorial that explaina exactly what you want and only to find out there's none. Just break down your queries in smaller bits and ask help in those instead of expacting that someone has an answer to the whole shabang.

I get this and it's a marketing technique and is used instead of giving an e-book or any other download totally for free, users/visitors have to share/tweet the free product before they can download it
There are several services which offer this already such as https://www.paywithapost.de/ which covers not only Twitter, but also the other well known social networks. It has an API and you can verify users https://www.paywithapost.de/learn_more.

Try it with another URL, because as far as I know you can't load google.com in an iframe due to a response header X-Frame-Options: SAMEORIGIN that Google sends to avoid clickjacking.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

Isn't this some kind of school assignment?
Anyway. Ofcourse it's hard to compare by looking at your HTML & CSS and the image attached, so I've pasted the HTML & CSS in a pen (which you also could have done) to see what it looked like. But... that's quite a mess :) Is this how it looks like on your end as well?
https://codepen.io/gentlemedia/pen/WjopvB

Other then that I don't see any proper form tag, fieldset and label elements. It's an overuse of divs and the only form element... the input tag.
As you see these high value paddings and margins is not gonna give you the layout you want.
To get that layout you have to create a grid by using floats (if you need to support older browsers such as < IE9 as well), or you can look into using flexbox for modern browsers.

https://css-tricks.com/all-about-floats/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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

@diafol - he will get then 2 scrollbars.

OP - I asume you want a header at the top and a footer at the bottom and the space inbetween is for the content which gets a scrollbar when it overflows.
The reason why your footer is invisble (off-screen) is because you set a heaight on the container of 100vh which pushes the footer down off-screen (or below the fold) and because you have overflow hidden on the html and body it's invisble.

An easy fix for this would be to set a height with calc on that container:
height: calc(100vh - 200px );
That 200px is the height of the header and the footer together.
Little demo 1: http://codepen.io/gentlemedia/pen/EWYvVz

There's also a way to do this without calc so that you have better browser support (old IE), but it uses fixed positioned header and footer which might give you issues on older touch screen devices. Fixed positioned elements gave disastrous scrolling behaviors on them :)
Little demo 2: http://codepen.io/gentlemedia/pen/evORoL

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,

@rproffitt
Be careful with the Web of Trust extension. I used it as well for a long time untill they've been caught selling their users' data to third parties.
https://www.onlinethreatalerts.com/article/2016/11/10/web-of-trust-wot-caught-selling-their-users-data-they-collected-via-their-web-browser-extension-to-third-parties/

http://www.ghacks.net/2016/11/05/mozilla-and-google-remove-wot-extension/

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.

You're right! I was messing up between the two. I've used a plugin for creating custom fields in my custom post types, but choosed the wrong one to retrieve them at the front. They're indeed variables so I should've used get_field()
https://www.advancedcustomfields.com/resources/code-examples/

Thanks a bunch, diafol!

oh... shit. My upvote smiley didn't go well, diafol :)

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 }

Ah... my mistake...that it displayed only one testimonials and not the two was just because I forgot to select the amount to display. It was still on '1'. It was a long day yesterday :)

Now it's only figuring out how to construct the HTML of the testimonial with PHP.

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

why not let a robot do this?
http://codebeautify.org/css-beautify-minify for example and move on to the next thing.

But you still have to copy/paste back & forth :)
Setting this uo with a task runner like Grunt or Gulp is better, so that this is done automatically for you (on the background) if you deploy your CSS to the live server.

You have this <?phpinclude 'includes/header.php'/?> which should be this <?php include 'includes/header.php'; ?>

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

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

This code is great and works when i visit the link on my phone too, but i copy and paste it on my server and doesn't work?

Did you include the jQuery library on your page?

Also be cautious when using Navigator.getUserMedia(). It could be deprecated in the furure and it's recommended to use MediaDevices.getUserMedia() instead.
https://developer.mozilla.org/en/docs/Web/API/Navigator/getUserMedia

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.

Just use .box::before for the base styles for the background image and then give all the boxes a unique class such as .box-1, .box-2, .box-3, etc. which you then can use for the seperate background images on .box-1::before, .box-2::before, .box-3::before, etc.

<div class="box box-1>box 1</div>
<div class="box box-2>box 2</div>
<div class="box box-3>box 3</div>
<div class="box box-4>box 4</div>
<div class="box box-5>box 5</div>
<!-- etcetera -->

Also you actually don't need in this situation the background-origin: padding-box for the 30px padding, you can create that with the top, right, bottom and left properties as well.

/* these .box styles/positioning are from my demo,
  * but you shoud just use your own styles and
  * positioning of course
  */

.box {
  position: relative;
  width: calc((100% - 20px * 5) / 5);
  height: 200px;
  margin: 10px 10px 20px;
  border: 1px solid #999;
  font-size: 150%;
  text-align: center;
  text-transform: uppercase;
  line-height: 200px;
}

.box::before {
  content: ' ';
  position: absolute;
  z-index: -1;
  top: 30px;
  right: 30px;
  bottom: 30px;
  left: 30px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: .5;
}

.box-1::before {
  background-image: url(box-1.jpg);
}

.box-2::before {
  background-image: url(box-2.jpg);
}

.box-3::before {
  background-image: url(box-3.jpg);
}

.box-4::before {
  background-image: url(box-4.jpg);
}

.box-5::before {
  background-image: url(box-5.jpg);
}

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

If you set an opacity to an element then that element and its child elements will get that opacity.
So either set an opacity on that image in Photoshop or whatever photo editor you use or you can use a pseudo element (::before or ::after) for that background-image and set an opacity on that pseudo element.
You will get then something like this:

.box {
    margin:auto;
    top:0;
    left:0;
    bottom:0;
    right:0;
    width:20%;
    height:200px;
    border:1px solid silver;
    padding:30px;
    position:absolute;
    box-shadow: 0px 0px 10px 10px #72B3D3;
}

.box::before {
    content: ' ';
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: url(accountsBG.jpg) no-repeat center / contain;
    opacity: .5;
}

And as far I can see of that image of yours the 30px padding is just there. The h1 is 30px of the edges. If you want the background image 30px of the edges, then you will have to set a background-origin: padding-box on that .box::before first in order to set a padding: 30px.

.box::before {
    content: ' ';
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: url(accountsBG.jpg) no-repeat center / contain;
    opacity: .5;
    background-origin: padding-box;
    pading: 30px;
}

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.

I agree with diafol! Hiding content is hiding the problem, not a solution to it.

Not sure if I'd want a site that looked like that!

Indeed! That sites loads, performs and displays horrendous. Such a big architect agency with such a lousy site :) The one responsible for slapping that piece on the Internet had clearly no clue what he was doing.

On topic:
Looking at the path to the CSS file that site is based on the free Twenty Twelve wp theme.
http://www.shoparc.com/wp-content/themes/twentytwelve/style.css?ver=4.6.1

https://twentytwelvedemo.wordpress.com/

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.

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