I created a codepen with example given on the documentation site to take a look at.

http://cdpn.io/vrijb

Thank you so much if you can help me understand this!

For the following page: Your text to link here...

...I'm trying to give the links (they're already underlined) a specific color. I can't seem to figure out how to class them so the color shows up. I'd like a color for the link hover as well.

What gives? Is something being overridden?

Thanks!

I am new to responsive design/css and am working on piecing together a webpage afrikaans.

When I resize my browser window, the chapters gallery resizes right, but when I view the site on my android phone, it doesn't resize to fit.

Any suggestions?

The page is here, and the contact form is at the bottom: http://dev.projectevolution.com/gunsho/#contact

In Safari and Chrome, the text inside an input looks bolder and darker than the text outside. I'd love to get them to match.

My rules for the placeholder are thus:

&::-webkit-input-placeholder  { color: #444; font-style: normal; }      
&::-moz-placeholder { color: #444; font-style: normal; opacity: 1; } /* Firefox 19 lowers the opacity of the placeholder to 0.54 by default */
&:-ms-input-placeholder { color: #444; font-style: normal; }

I remember something about how browsers will render text inside input fields differently than other text, and maybe text-stroke helped, but I also know that it doesn't help anymore.

Any other ideas out there?

I cannot, for the life of me, get my paragraph content to hang next to two images. The images are vertically aligned.

It shows the paragraph to the left and then the two images below the paragraph but floating to the right. I know it's a simple fix, I just can't seem to figure it out :/

Here is the code

http://cdpn.io/uFeEK

Any ideas?

// set variables
var count = 0
var portImages = new Array()
		
// define images in array
var i = 1
while (i <= imgCount) {
portImages[i] = i+".jpg"
i++
}
		
// preload portfolio images
var preloadedimages=new Array()
for (i=1;i<=imgCount;i++){
preloadedimages[i]=new Image()
preloadedimages[i].src=portImages[i]
}
		
// function for viewing previous image
function showImage(whichImage) {
document.getElementById('large_image').src = portImages[whichImage]
}

<div id="image_gallery"><img src="1.jpg" alt="Large Image" id="large_image" style="max-width:44.25em" height"30.75em" class="large" /></div>
        
        <div id="thumbs" class="flexcroll">
        
            <table><tr>
                <td><a href="javascript:showImage(1)"><img src="t1.jpg" alt="thumbnail"/></a></td>
               	<td><a href="javascript:showImage(2)"><img src="t2.jpg" alt="thumbnail"/></a></td>
              	<td><a href="javascript:showImage(3)"><img src="t3.jpg" alt="thumbnail"/></a></td>
              	<td><a href="javascript:showImage(4)"><img src="t4.jpg" alt="thumbnail"/></a></td>
                <td><a href="javascript:showImage(5)"><img src="t5.jpg" alt="thumbnail"/></a></td>
                <td><a href="javascript:showImage(6)"><img src="t6.jpg" alt="thumbnail"/></a></td>
               	<td><a href="javascript:showImage(7)"><img src="t7.jpg" alt="thumbnail"/></a></td>
                <td><a href="javascript:showImage(8)"><img src="t8.jpg" alt="thumbnail"/></a></td>
               	<td><a href="javascript:showImage(9)"><img src="t9.jpg" alt="thumbnail"/></a></td>
                <td><a href="javascript:showImage(10)"><img src="t10.jpg" alt="thumbnail"/></a></td>
            </tr></table>
        
        </div>
        
        <a href="#" onClick="javascript:prev();"> «Prev </a>
        <a href="#" onClick="javascript:next();">Next »</a>

Again one question for you guys!

I would like to make it my own font, I mean I can make it in illustrator file for font, but i would like to know how i can convert into font exp, ttf, eot, etc.

Can any buddy guide me for that?

Thanks in advance.

RT

Website design/Fixed Social Sidebar in question: http://henrydurdan.com/newdesign/

What I could really do with some help with is the 'social sidebar'. It's positioning is fixed, thus it will scroll with the page. Now, on smaller resolutions (when the browser is scaled down in height), once you get to the footer (sticky) it will overlap.

What I am really looking for is it to stop with maybe a 50-100px margin off of the footer? Am I just being really stupid?

Also, any comments/feedback on the design & functionality of its responsiveness would be greatly appreciated.

Let me know what you think, thanks guys!

I've made a code pen of the social sidebar if you like it: http://codepen.io/henrydurdan/pen/tusaK

I've been curious to know how this style of menu is achieved. Where the menu appears to fix upon a certain scroll point. Meda queries?

Here's an example site: https://check.me/

http://www.ctrlshiftstudios.com/Landing-Page/

  $('#myImageFlow').on("touchstart",".sliderImage", function(event){
      alert('i am on method '+event.type);

   });


  this line is my slider then alert is printed and slider works , if i try replacing alert with 

       console.log('on method ......'+event.type);

then it is not working , what would be the problem please help .

thanks for any thoughts jasemilly

Ive been chasing an ADD moment for the past 90 min and can't for the life of me find that episode or plugin name, does anybody know?

I remember in the episode he kept saying "inline CSS" and then would correct himself and define what inline actually meant.

Thank you, Matt

I want to know from where do leading web designers, web developers learn to code themselves. And, Chris Coyier, doubtlessly, is a great web designer. I hope he wouldn't mind sharing his story with us.

Thank you.

https://weitzinvestments.com/press

Note the font in the menu at the top of the website as well as the font in the vertical menu that starts with "Company Overview". These fonts are CartoGothicStdBook, 1em.

Go 'head and click on "Company Overview". It becomes bold; CartoGothicStdBold, 1em. Note that all the other fonts remain CartoGothicStdBook, 1em.

Now go 'head and click on "Image & Video Library". Now look at the fonts in both menus. They have changed from the CartoGothicStdBold & Book to a plain sans-serif fallback. They remain 1em.

There's nothing wrong with the CSS, it's below.

Here's the tricky part: "Images & Video Library" are on http://weitzinvestments.com while the rest of the site is on https://weitzinvestments.com. We had to do this because Vimeo, for whatever reason, didn't like https and that's who we use in the "Images & Video Library" section.

This is a puzzle I can't seem to solve. I've tried everything I know, I'm at the end of my rope. Can anyone help?

If you look at the console you'll see that it's failing to load the fonts - I have no idea why.

.content-side-nav {
  font-family: "CartoGothicStdBook", sans-serif;
  font-size: 1em; }
  .content-side-nav li {
    border-bottom: 1px solid #e3e6e8; }
  .content-side-nav a, .content-side-nav a:visited {
    font-family: "CartoGothicStdBook", sans-serif;
    display: block;
    width: 140px;
    text-decoration: none;
    color: #67747c;
    margin: 3px 0; }
  .content-side-nav a:hover {
    color: #5fa75a; }
  .content-side-nav span {
    display: block;
    width: 120px;
    margin: 0 auto;
    padding: 5px 0; }
  .content-side-nav .selected a {
    font-family: "CartoGothicStdBold", sans-serif;
    font-weight: bold;
    background: #aeb7bd;
    color: white; }

I just joined in the hope I could get this seemingly simple problem solved.

My web site [http://www.eswr.com] is built with the Suffusion theme for WordPress. I have a tabbed menu with pages and categories. The theme allows titles to be shown for the categories on hover, but I cannot figure out how to do the same for the page tabs.

This is from my style.css file

/* main menu */
#nav {
  font-size: 108%;
  border-bottom: 1px solid;
}

.float-ptr {
  font-size: 130%;
  float: right;
  background: url(images/arrows.gif) no-repeat scroll -16px 0 transparent;
  height: 8px;
  width: 8px;
  top: 45%;
  right: 3px;
  position: absolute;
}
.down-ptr {
  font-size: 130%;
  float: right;
  background: url(images/arrows.gif) no-repeat scroll 0 0 transparent;
  height: 8px;
  width: 8px;
  top: 45%;
  right: 5px;
  position: absolute;
  margin-left: 5px;
}
img.home-icon { height: 21px; }
#nav ul li a.with-arrow, #nav-top ul li a.with-arrow { padding-right: 22px;}
/* remove all the bullets, borders and padding from the default list styling */
#nav ul {
  list-style: none;
  display: block;
  margin: 0 0 -1px 0;
  padding: 0;
  float: left;
  vertical-align: bottom;
}

#nav ul li {
  margin: 0 4px 0 0;
  padding: 0;
  float: left;
  border: 1px solid;
}
#nav.continuous ul, #nav-top.continuous ul {
  margin-left: 10px;
}
#nav.continuous ul ul, #nav-top.continuous ul ul {
  margin-left: 0;
}
#nav.continuous ul li {
  margin: 0;
  border: none;
}
#nav ul ul { position: absolute; }
#nav ul .mm-tab ul { position: relative; }
#nav ul li a {
  padding: 8px 8px 5px 8px;
  text-decoration: none;
  display: inline-block;
}

#nav ul ul li,
#nav ul ul li a {
  z-index: 100;
}

#nav .current_page_item a,
#nav .current_page_item a:hover,
#nav li a:active {
  text-decoration: none;
}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
#nav li {
  float:left;
  position:relative;
  z-index: 1;
}

#nav li a:hover,
#nav li:hover {
  z-index: 100;
}

#nav ul.sf-menu, #nav-top ul.sf-menu { display: inline-block; }
#nav .col-control.center, #nav-top .col-control.center { text-align: center; }
#nav .col-control.center ul.sf-menu, #nav-top .col-control.center ul.sf-menu { float: none; }
#nav .col-control.right ul.sf-menu { float: right; }

/* Styling for navigation menus */
#nav ul ul li a,
#nav ul ul li a:visited {
  padding: 8px 8px 5px 8px;
  text-decoration: none;
  display: block;
  line-height:22px;
}

Let me know what you need me to post here to help solve the problem

I tried to start a pen but I'm not sure if it took.

Steve Davies Endangered Species & Wetlands Report Takoma Park, MD

here is the code

  .circle-list span{
      position: relative;
      display: block;

      *padding: .4em;
      margin: .5em 0 .5em 2.5em;

      color: rgb(134, 130, 130);
      text-decoration: none;
      transition: all .3s ease-out; 
    }



    .circle-list span:before{
      content: "";
      position: absolute; 
      left: -3.5em;
      top: 50%;
      margin-top: -1em;
      background: rgb(65, 191, 223);
      height: 2em;
      width: 2em;
      line-height: 2em;
      text-align: center;
      font-weight: bold;
      border-radius:50%;
    }

    .circle-list span:after{
      position: absolute; 
      content: '';
      border: .5em solid transparent;
      left: -1em;
      top: 50%;
      margin-top: -.5em;
      transition: all .3s ease-out;       
    }

    .circle-list span:hover:after{
      left: -1.2em;
      border-left-color: #fa8072;       
    }

    .circle-list span:hover{
      color:black;
    }

and

image code

  .imageFeatures {
    float: right;
    width: 150px;
    height: 150px;
    margin-left: 1.5em;
    border: 5px solid #fff;

    overflow: hidden;
    background-color: rgb(255,255,255);
    -webkit-box-shadow: 0 0 5px 2px #aaa;
    -moz-box-shadow: 0 0 5px 2px #aaa;
    box-shadow: 0 0 5px 2px #aaa;
    -webkit-transition: border-color 0.5s;
    -moz-transition: border-color 0.5s;
    -o-transition: border-color 0.5s;
    transition: border-color 0.5s;
}

.imageFeatures:hover {
    border-color: rgb(64,186,216);
}

.imgFeature {
    display: block;
    height: 100%;
    max-width: 100%;

}

1. Reset The BODY Padding.

  body {
    padding: 0px;
  }

2. Specify Centering Styles.

  .center {
  margin-left: auto;
  margin-right: auto;
  }
  .center.navbar .nav,
  .center.navbar .nav > li {
      float:none;
      display:inline-block;
      *display:inline; /* ie7 fix */
      *zoom:1; /* hasLayout ie7 trigger */
      vertical-align: top;
  }
  .center.navbar-inner {
      text-align:center;
  }
  .center .dropdown-menu {
      text-align: left;
  }
  .navbar-inner {
  margin: 0 auto;
  }

3. Call Centering Styles. Use 'navbar-static-top' OR 'navbar-fixed-top' depending on your needs. Center both this DIV and the DIV inside it having the class 'navbar-inner' as shown below. Scale your browser window to test the layout.

  <div class="row-fluid">

  <div class="navbar navbar-static-top center">
    <div class="navbar-inner center">  
      <ul class="nav nav-pills">
      <li class="active"><a href="#">Link1</a></li>
      <li><a href="#">Link2</a></li>
      <li><a href="#">Link3</a></li>
      </ul>
    </div>  
  </div>

  </div>

4. Add Your Own Padding. In my case I padded the container classes because my navbar resides outside of a container DIV and all of my content resides inside containers. You can use media queries to specify different amounts of padding for different screen widths.

  @media (max-width: 767px) {
    .container,.container-fluid {
      padding-left: 10px;
      padding-right: 10px;
  }}

※ Since these styles are designed to override styles in bootstrap.css and bootstrap-responsive.css be sure to link your stylesheet after those.

(Bootstrap v2.3.2, JQuery v1.7.2)

I need a window or in https://www.zopim.com/ site which is at the bottom of the page and can minimize, and window minimizes automatically after a few seconds.

I'll put a picture with information in this window.

I searched on google and here on css-tricks, but found nothing, I may not know the name I should look for.

Can anyone help me?

Thanks

Curious if anyone can suggest a jQuery guide similar to 30 CSS Selectors you must memorize

Thanks

Thanks in advance!

  <span  style="font-size: 18px"; or "font-size: 18";>

Can someone fork t for me?

This is my code: http://jsfiddle.net/G9KQy/

I want those div tags to be center alinged in li.

I have a problem with a bootstrap based template and a key burn effect slider.

In a bootstrap based template img is set to : max-width: 100%. That courses a key burn slider not to work.

Ok then I was thinking to set the image inside the slider div to max-width: none!important which should fix the problem. But it is not working. Unless I remove the the overall img: max-width: 100% the key burn effect is not working. But I can do this otherwise the whole responsive layout for image get lost.

Any ideas,

Thanks