xcode

samedi 27 juin 2015

background images not loading in Firefox

This works fine in all browsers (as far as I can tell), except Firefox. The question is: why does it not work in Firefox?

The background images are set up like this:

#top .homepage-cover-photo{
    position: relative;
}
#top .homepage-cover-photo .x-container {
    position: absolute;
    clip: none;
    clip-path: none;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
#top .homepage-cover-photo .x-column.x-1-1 .bgimg {
    position: absolute;
    background-attachment: fixed;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -3;
}

This should render fine in most modern browsers.

(The actual background images are set in the individual .bgimg elements.)

However, due to Chrome/Webkit/Blink (not 100% sure, I thought it was Blink, but it also happens in webkit browsers) not rendering these right, I put in a fix described here:

.Chrome #top .homepage-cover-photo .x-container, 
.Opera #top .homepage-cover-photo .x-container, 
.iPhone #top .homepage-cover-photo .x-container, 
.iPad #top .homepage-cover-photo .x-container,
.Safari #top .homepage-cover-photo .x-container {
    clip: rect(auto,auto,auto,auto);
    clip-path: rect(auto,auto,auto,auto);
    -webkit-mask-image: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 100%);
}
.Chrome #top .homepage-cover-photo .x-column.x-1-1 .bgimg, 
.Opera #top .homepage-cover-photo .x-column.x-1-1 .bgimg, 
.iPhone #top .homepage-cover-photo .x-column.x-1-1 .bgimg, 
.iPad #top .homepage-cover-photo .x-column.x-1-1 .bgimg,
.Safari #top .homepage-cover-photo .x-column.x-1-1 .bgimg {
    position: fixed;
    background-attachment: scroll;
    -webkit-transform-style: preserve-3d;
}

This is done via browser sniffing (sorry, but it’s the only solution I could figure out that works).

What is the best way to version our assets?

Currently, I'm using elixir for laravel framework which is default.

and My current system is like that, But it is making build & dist folders, and in the build folder there is also another dist folder, and it disturbs me.

Build folder is for rendered assets,Dist folder for versioning.

elixir(function(mix) {
  mix.less([
      'app.less'
  ]).coffee([
      'app.coffee'
  ]).styles([
      'bootstrap.min.css',
      'app.css'
  ],"public/dist/css","public/css").scripts([
      'bootstrap.min.js',
      'app.js'
  ],"public/dist/js","public/js").version([
      "dist/css/all.css",
      "dist/js/all.js"
  ]);
});

What is your way?

How to get my nav/menu bar's width to span the entire page

The HTML

    <title>
    menubar
    </title>
    <head>
    <link rel="stylesheet" href="style.css" type="text/css">
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us/a></li>
                <ul>
                    <li><a href="#">What we do</a></li>
                    <li><a href="#">Members and Alumni</a></li>
                    <li><a href="http://ift.tt/1GSLsaz" target="_blank">Cinco Ranch High School</a></li>
                </ul>
            </li>
            <li><a href="#">Events</a></li>
            <li><a href="#">Photo Gallery</a></li>
        <li><a href="#">Contact Us</a></li>
        </ul>
    </nav>
    </head>
    <body>
    </body>

The CSS

@font-face {
    font-family: NASA;
    src: url("nasalization rg.ttf");
}

nav ul ul {
    display: none;
}

    nav ul li:hover > ul {
        display: block;

    }

nav {
  width:1080px;
  margin:0 auto;
  list-style:none;

}

nav ul {
    background: #8D8D8D; 
    background: linear-gradient(top, #8D8D8D 0%, #383838 100%);  
    background: -moz-linear-gradient(top, #8D8D8D 0%, #383838 100%); 
    background: -webkit-linear-gradient(top, #8D8D8D 0%,#383838 100%); 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 0px auto 0px auto;
    border-radius: 5.5px;  
    list-style: none;
    position: relative;
    display: inline-table;
  font-family: NASA;
  font-weight: bold;
  font-size: 20px;
  width 100%;
  margin-top: 0px
}

    nav ul:after {
        content: ""; clear: both; display: block;
    }

  nav ul li {
    float: left;
  padding-right: 20px
}
    nav ul li:hover {
        background:#777777;
        background: linear-gradient(top, #777777 0%, #6B6B6B 40%);
        background: -moz-linear-gradient(top, #777777 0%, #6B6B6B 40%);
        background: -webkit-linear-gradient(top, #777777 0%,#6B6B6B 40%);
    }
        nav ul li:hover a {
            color: #2E2E2E;
        }

    nav ul li a {
        display: block; 
    padding: 25px 40px;
        color: #151515; 
    text-decoration: none;
    }

  nav ul ul {
    background: #6B6B6B; border-radius: 10px; padding: 0;
    position: absolute; top-center: 100%;
}
    nav ul ul li {
        float: none; 
        border-top: 1px solid #000000;
        position: relative;
    }
        nav ul ul li a {
            padding: 15px 40px;
            color:#2E2E2E;
        }   
            nav ul ul li a:hover {
                background: #4b545f;
            }

Above ive included the HTML and CSS for my nav bar ive been trying to figure out how to get it to span the entire length of the page with the content centered in the middle like this: http://ift.tt/1Ikiti9. If someone could help me that would be great Thank You in advance BY THE WAY I KNOW MY HTML DOES NOT HAVE THE TAGS ON IT I WILL FIX THAT LATER

back button and menu navigation

Okay, I'm trying to design a mobile version of my site and am stuck on my menu.

Basically at the moment I've got a simple onClick running on the page so if the user decides they don't want to view click whats on the menu then they can click the page and the menu disappears.

But what I really want is a way of using the back button on the browser to return from the menu. I'm guessing it takes some kind of event or setting something, but am at a loss.

I'm a newbie, so be gentle, I'm hoping the community can help me a little as to where to start.

My main question is how to use the back button on a browser within my HTML or JavaScript, any ideas as to how to proceed would be greatly appreciated.

How do I change the link preview text for a website using HTML, CSS, etc?

How do I change the link preview text for a website using HTML, CSS, etc? In particular, I'm referring to the text in the link box on Facebook.

Responsive Design Div Spacing

I've got a problem with div spacing in responsive design if you go to this url: http://ift.tt/1GSKdIw you'll se how when you decrease to the maximum de window width the div spacing gets bigger instead of smaller... why does it happen? how do i fix it? Thanks!

<table>
<div>
<tr>
<td>
......texto.........
</td>
</tr>
</div>
<div>
<tr>
<td>
......texto.........
</td>
</tr>
</div>
</table>

This is the example of the code I am using everything works but spacing

Team Treehouse nav bar animation

I am trying to reproduce the effects of the nav-bar animation when scrolling on their homepage. I understand how they can add classes when scrolling past a certain threshold with Jquery. Any ideas? If i try to animate links in the menu with opacity my content either overlaps, and if I use visibility it gets displaced.

Thank you.